/**
 * SquareFit Performance CSS
 * Prevents Cumulative Layout Shift (CLS) by reserving space for
 * dynamically loaded images via aspect-ratio.
 *
 * Linked in: index.html, shop-default.html, product-detail.html
 */

/* ── Hero slider images ──────────────────────────────────────────────────────
   Fix: <a class="slide-image-link"> is inline by default; on production
   servers (Hostinger) this collapses the image to 0 width.
   Fix: styles.css sets height:100% on .wrap-slider img which creates a
   circular dependency when the parent has no explicit height — collapsed to 0.
   Solution: force the link + wrap to block/100%, and use height:auto on the
   desktop image so the intrinsic ratio (width="1920" height="700") drives
   the container height naturally.                                            */

/* Ensure the link wrapper and image wrap are block-level and full-width */
.sq-hero-swiper .slide-image-link,
.sq-hero-swiper .slide-image-wrap {
  display: block;
  width: 100%;
  line-height: 0; /* remove inline-block gap */
}

/* Desktop hero image: let natural aspect ratio set the height */
.sq-hero-swiper .slide-img.desktop-img {
  display: block;
  width: 100%;
  height: auto !important; /* override styles.css height:100% circular dep */
  object-fit: cover;
  max-height: 700px;
}

/* Generic fallback for .slide-img used elsewhere */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Collection images — globally enforced 1 : 1 square ─────────────────────
   Problem: styles.css sets explicit height (465px on v2/v3, 100% on v4 inside
   swiper) which suppresses aspect-ratio entirely — when height is explicit,
   aspect-ratio has no effect on height.
   Fix: height:auto !important breaks the explicit height on all collection
   variants so the 1:1 aspect-ratio can drive container height from width.
   This is applied once here and propagates globally across every page.        */

/* v2 + v4 use .img-style; this covers both */
.collection-image.img-style,
.shop-cat-image {
  aspect-ratio: 1 / 1;
  height: auto !important;   /* override styles.css height:465px */
  overflow: hidden;
  background: #f6f8fb;
}

.collection-image.img-style img,
.shop-cat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* v3 does not carry .img-style — target directly */
.collection-item-v3 .collection-image {
  aspect-ratio: 1 / 1;
  height: auto !important;   /* override styles.css height:465px */
  overflow: hidden;
}

.collection-item-v3 .collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Product grid cards ──────────────────────────────────────────────────────*/
.card-product-wrapper .product-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f8fb;
}

.card-product-wrapper .img-product,
.card-product-wrapper .img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Featured collection (square) ───────────────────────────────────────────
   styles.css:8808 sets .swiper-slide .collection-item-v4 .collection-image
   { height: 100% } with specificity (0,3,0) — higher than our (0,2,0) rule.
   height:auto !important overrides it so aspect-ratio controls the height.   */
.collection-item-v4 .collection-image {
  aspect-ratio: 1 / 1;
  height: auto !important;   /* override swiper-slide height:100% */
  overflow: hidden;
  background: #f0f2f5;
}

.collection-item-v4 .collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Testimonial thumbnails ──────────────────────────────────────────────────*/
.box-img .img-style {
  overflow: hidden;
  background: #f0f2f5;
}

/* ── Personalized section banner ─────────────────────────────────────────────*/
/* store-img: aspect-ratio holds space until JS sets the image src (CLS guard) */
.widget-card-store .store-img {
  overflow: hidden;
  background: #f0f2f5;
}

.widget-card-store .store-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* store-item-info: img-bg is absolutely positioned — clip it to parent bounds */
.widget-card-store.type-bg-img .store-item-info {
  overflow: hidden;
}

/* ── Highlight section product images ────────────────────────────────────────*/
.highlight-swiper .card-product .card-product-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f8fb;
}

/* ── Banner countdown image ──────────────────────────────────────────────────
   Space reserved while data-timer.js fetches from DB and sets src.            */
.tf-hero-image-liquid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-countdown-v2 {
  aspect-ratio: 16 / 5;
  background: #f0f2f5;
  min-height: 160px;
}
@media (max-width: 767px) {
  .banner-countdown-v2 {
    aspect-ratio: 4 / 3;
  }
}

/* ── Ensure all dynamic images don't overflow their containers ───────────────*/
img {
  max-width: 100%;
  height: auto;
}

/* ── Native lazy loading fade-in ─────────────────────────────────────────────*/
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="eager"] {
  opacity: 1;
}

/* ── Quantity input stepper — enhanced ───────────────────────────────────────
   Overrides styles.css hardcoded #ccc / #f4f4f4 / #e0e0e0 with theme tokens.
   Functionality (JS reads .quantity-product value, clicks .btn-decrease /
   .btn-increase) is completely unchanged — CSS only.                          */

/* Wrapper */
.quantity-input-wrapper {
  border:        1.5px solid var(--site-border, #d0d0d0);
  border-radius: 8px;
  height:        44px;
  background:    #fff;
  transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus glow — brand colour */
.quantity-input-wrapper:focus-within {
  border-color: var(--Main, #ff7433);
  box-shadow:   0 0 0 3px rgba(255, 116, 51, 0.12);
}

/* Number input */
.quantity-input-wrapper input.quantity-product {
  font-size:   15px;
  font-weight: 600;
  color:       var(--site-text);
  background:  transparent;
}

/* Floating "Qty" label */
.quantity-input-wrapper .floating-label {
  top:            -9px;
  left:           10px;
  background:     #fff;
  padding:        0 4px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color:          var(--Main, #ff7433);
}

/* ± buttons — transparent base, separator line, brand hover */
.quantity-input-wrapper .btn-quantity {
  width:      36px;
  background: transparent;
  color:      var(--site-text);
  font-size:  20px;
  font-weight: 300;
  transition: background 0.18s ease, color 0.18s ease;
}

.quantity-input-wrapper .btn-decrease {
  border-right:  1px solid var(--site-border, #d0d0d0);
  border-radius: 6px 0 0 6px;
}

.quantity-input-wrapper .btn-increase {
  border-left:   1px solid var(--site-border, #d0d0d0);
  border-radius: 0 6px 6px 0;
}

.quantity-input-wrapper .btn-quantity:hover {
  background: var(--Main, #ff7433);
  color:      #fff;
}

/* ── Browse All Categories — remove border ───────────────────────────────── */
.tf-list-categories .categories-title.browse-category {
  border: none;
}

/* ── Popular Products — "Shop all" CTA link ──────────────────────────────── */
.popular-shopall-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       14px;
  font-weight:     600;
  color:           var(--site-text);
  text-decoration: none;
  white-space:     nowrap;
  padding:         6px 14px;
  border:          1.5px solid var(--site-text);
  border-radius:   30px;
  transition:      background 0.22s ease, color 0.22s ease;
}
.popular-shopall-link:hover {
  background: var(--site-text);
  color:      var(--white, #fff);
}
.popular-shopall-link svg {
  flex-shrink: 0;
  transition:  transform 0.22s ease;
}
.popular-shopall-link:hover svg {
  transform: translate(2px, -2px);
}

/* ── list-product-btn icon centering fix ─────────────────────────────────────
 * ROOT CAUSE: icomoon glyphs sit on the font BASELINE, not at the visual
 * center of their line box. Ascent ≈ 11px, descent ≈ 3px inside a 14px line
 * box — so even flex align-items:center on the parent only centers the 14px
 * BOX, leaving the glyph body visually high inside it.
 *
 * FIX: position:absolute + translate(-50%,-50%) pins the glyph to the exact
 * geometric centre of .box-icon (which is already position:relative) without
 * any dependency on font-metric asymmetry.
 * ─────────────────────────────────────────────────────────────────────────── */
.list-product-btn .box-icon .icon {
  position:  absolute !important;
  top:       50%      !important;
  left:      50%      !important;
  transform: translate(-50%, -50%) !important;
  line-height: 1      !important;
  height:    auto     !important;
  display:   block    !important;
}

/* ── compare button: single icon, no icon-swap ───────────────────────────────
 * icon-check removed from HTML. Now [icon-compare][tooltip] are the only
 * children. styles.css :last-child rule hides tooltip by default (fine), but
 * .active hides :first-child (icon-compare) and shows :last-child (tooltip)
 * — both wrong. Override: keep icon-compare visible always; show "added" state
 * via orange fill + white glyph instead of swapping icons.
 * ─────────────────────────────────────────────────────────────────────────── */
.compare.btn-icon-action .icon-compare {
  display: block !important;
}
.compare.btn-icon-action.active > *:first-child {
  display: block !important;
}
.compare.btn-icon-action.active > *:last-child {
  display: none  !important;
}
.compare.btn-icon-action.active {
  background-color: var(--Main, #FF7433) !important;
  border-color:     var(--Main, #FF7433) !important;
}
.compare.btn-icon-action.active .icon-compare {
  color: #fff !important;
}

/* ── Reels section stacking context isolation ────────────────────────────────
 * ROOT CAUSE of toolbar being hidden behind Reels:
 *
 * Swiper sets transform:translate3d() on .swiper-wrapper, which creates a GPU
 * composite layer. <video> and <iframe> elements inside it are ALSO composited.
 * When the toolbar was given will-change:transform, all three competed for GPU
 * layer ordering — on iOS Safari, media layers win over UI layers regardless
 * of z-index, so the toolbar disappeared behind the reels.
 *
 * FIX — `isolation: isolate` creates a new stacking context for the entire
 * Reels section. All composited layers inside (Swiper, video, iframe) are now
 * bounded within that context and cannot paint above the root-level toolbar
 * (position:fixed z-index:9999), which sits outside this stacking context.
 * ──────────────────────────────────────────────────────────────────────────── */
.tf-instagram-swiper {
  isolation: isolate;
  position:  relative;
  z-index:   0;
}

/* Ensure video/iframe stay within the isolated Swiper stacking context */
.tf-instagram-swiper .reel-video video,
.tf-instagram-swiper .reel-video iframe {
  position: absolute;
  z-index:  0 !important;  /* override the z-index:1 in styles.css */
}

/* ── tf-toolbar-bottom — mobile-only display + visual redesign ──────────────
 * styles.css already shows the bar at ≤1150px via .type-1150.
 * We do NOT override display here — let styles.css media-query control it.
 * Footer clearance is scoped to the same ≤1150px breakpoint.
 * ─────────────────────────────────────────────────────────────────────────── */

/* 1. Footer clearance — only needed when toolbar is visible (≤1150px) */
@media (max-width: 1150px) {
  #footer {
    padding-bottom: 67px !important;
  }
}

/* 3. Container: white bar, hairline top border, soft lift shadow */
.tf-toolbar-bottom {
  background: #ffffff;
  border-top: 1px solid #e4e7eb;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* 4. Icons — dark slate, 20 px, smooth transition */
.tf-toolbar-bottom .toolbar-item a .toolbar-icon i {
  color:      #1e293b !important;
  font-size:  20px    !important;
  transition: color 0.15s ease;
}

/* 5. Labels — same dark slate, slightly smaller */
.tf-toolbar-bottom .toolbar-item a .toolbar-label {
  color:       #1e293b !important;
  font-size:   11px    !important;
  font-weight: 500     !important;
  line-height: 1.2;
  transition:  color 0.15s ease;
}

/* 6. Hover */
.tf-toolbar-bottom .toolbar-item a:hover .toolbar-icon i,
.tf-toolbar-bottom .toolbar-item a:hover .toolbar-label {
  color: var(--Main, #FF7433) !important;
}

/* 7. Active item */
.tf-toolbar-bottom .toolbar-item.active a .toolbar-icon i,
.tf-toolbar-bottom .toolbar-item.active a .toolbar-label {
  color: var(--Main, #FF7433) !important;
}
.tf-toolbar-bottom .toolbar-item.active::before {
  background-color: var(--Main, #FF7433) !important;
}

/* 8. Badge (cart / wishlist count bubble) */
.tf-toolbar-bottom .toolbar-icon .toolbar-count {
  background-color: var(--Main, #FF7433) !important;
  color:       #fff !important;
  font-size:   9px  !important;
  font-weight: 700;
  width:       16px !important;
  height:      16px !important;
  line-height: 16px !important;
  border-radius: 50% !important;
  top:   -5px  !important;
  right: -8px  !important;
}

/* ── Compare page — row-based grid table ─────────────────────────────────────
   Each .sq-row is its own CSS Grid: label column + up to 4 product columns.
   This guarantees every attribute row (Price, Discount, Mesh, Colors, Sizes,
   Show-more) is perfectly aligned across all product columns regardless of
   how many chips or badges each product has.                                  */

.sq-compare-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
}

.sq-row {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  border-bottom: 1px solid #f0f0f0;
  min-width: 580px;
}

.sq-row:last-child { border-bottom: none; }
.sq-row--alt       { background: #fafafa; }
.sq-row--header    { background: #fff; border-bottom: 2px solid #e8e8e8; }

/* Label cell */
.sq-label {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  border-right: 1px solid #ececec;
  background: #fff;
  flex-shrink: 0;
}

/* Data cell */
.sq-col {
  padding: 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  border-right: 1px solid #f0f0f0;
  min-width: 0;
  word-break: break-word;
}
.sq-col:last-child { border-right: none; }

/* Product header cell */
.sq-col--product {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 14px;
  position: relative;
}

/* Empty slot */
.sq-col--empty {
  justify-content: center;
  align-items: center;
  opacity: 0.4;
}
.sq-empty-slot {
  font-size: 13px;
  color: #aaa;
}

/* Toggle row cells — hug the show-more button upward */
.sq-row--toggle-row          { border-bottom: none; }
.sq-col--toggle              { padding-top: 6px; padding-bottom: 14px; }

/* ── Remove button ───────────────────────────────────────────────────────────*/
.sq-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  /* Force exact circle — override any styles.css button padding/min-width */
  box-sizing:  border-box;
  width:       28px !important;
  height:      28px !important;
  min-width:   0   !important;
  min-height:  0   !important;
  padding:     0   !important;
  margin:      0;
  border:      none;
  border-radius: 50%;
  background:  #ebebeb;
  cursor:      pointer;
  font-size:   12px;
  line-height: 1;
  color:       #555;
  display:     flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:  background 0.18s, color 0.18s;
  z-index:     1;
}
.sq-remove-btn:hover { background: #ff4444; color: #fff; }

/* ── Product image ───────────────────────────────────────────────────────────*/
.sq-product-img-link img {
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #f0f0f0;
}

/* ── Product title ───────────────────────────────────────────────────────────*/
.sq-product-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text, #333);
  line-height: 1.4;
  text-decoration: none;
  display: block;
}
.sq-product-title:hover { color: var(--Main, #ff7433); }

/* ── Price ───────────────────────────────────────────────────────────────────*/
.sq-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--Main, #ff7433);
}

/* ── Plain value ─────────────────────────────────────────────────────────────*/
.sq-value { font-size: 14px; color: #888; }

/* ── Badges ──────────────────────────────────────────────────────────────────*/
.sq-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #f0f0f0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #444;
  line-height: 1.6;
  white-space: nowrap;
}
.sq-badge--discount { background: #fff0e6; color: #c04000; }
.sq-badge--color    { background: #e8f4e8; color: #2a6e2a; }

/* ── Size chips ──────────────────────────────────────────────────────────────*/
.sq-size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}
.sq-size-chips.limited {
  max-height: 110px; /* ≈ 3 rows */
  overflow: hidden;
}
.sq-chip {
  display: inline-block;
  padding: 4px 9px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
}

/* ── Show more / less button ─────────────────────────────────────────────────*/
.sq-show-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--Main, #ff7433);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}
.sq-show-more:hover { opacity: 0.75; }

/* ── Mobile: shrink label, allow horizontal scroll ───────────────────────────*/
@media (max-width: 767px) {
  .sq-row {
    grid-template-columns: 90px repeat(4, minmax(110px, 1fr));
  }
  .sq-label {
    padding: 10px 8px;
    font-size: 10px;
  }
  .sq-col {
    padding: 10px 8px;
  }
  .sq-col--product {
    padding: 14px 8px;
  }
  .sq-product-img-link img {
    max-width: 80px;
  }
  .sq-product-title {
    font-size: 11px;
  }
  .sq-price {
    font-size: 13px;
  }
  .sq-badge {
    font-size: 11px;
    padding: 2px 7px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BENEFITS ICONBOX — e-commerce trust-bar enhancement
   Colors/theme unchanged: icon bg #b91c1c, section bg var(--site-color7)
   Changes: desktop card hover-lift, inter-item dividers, icon shadow+scale,
   typography hierarchy, mobile card treatment.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 ── Section: tighter vertical padding for a compact strip ────────────── */
.benefits-iconbox-unique .flat-iconbox {
  padding: 20px 16px !important;
}

/* 2 ── Each slide: base transitions + desktop card treatment ────────────── */
.benefits-iconbox-unique .icon-swiper-slide {
  transition: transform 0.25s ease, background-color 0.22s ease, box-shadow 0.25s ease;
}

@media (min-width: 1024px) {
  .benefits-iconbox-unique .icon-swiper-slide {
    position: relative;
    padding: 14px 22px;
    border-radius: 10px;
  }

  /* Hover: lift the card with a warm-white glow */
  .benefits-iconbox-unique .icon-swiper-slide:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.62);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  }

  /* Vertical divider in the gap between items — sits in the 20px grid gap */
  .benefits-iconbox-unique .icon-swiper-slide:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -10px;       /* midpoint of 20px gap  */
    top: 18%;
    height: 64%;
    width: 1px;
    background: rgba(0, 0, 0, 0.11);
    pointer-events: none;
    border-radius: 1px;
  }
}

/* 3 ── Icon circle: depth shadow + scale on hover (color unchanged) ──────── */
.benefits-iconbox-unique .tf-icon-box.style-row .icon.bg_red-1 {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.22);
}

.benefits-iconbox-unique .icon-swiper-slide:hover .tf-icon-box.style-row .icon.bg_red-1 {
  transform: scale(1.1);
  box-shadow: 0 7px 20px rgba(185, 28, 28, 0.32);
}

/* 4 ── Typography: clear title/description hierarchy ────────────────────── */
.benefits-iconbox-unique .tf-icon-box .title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}

.benefits-iconbox-unique .tf-icon-box .content > p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.52);
  margin: 0;
  text-align: left !important;
  text-justify: auto !important;
  word-spacing: normal !important;
}

/* 5 ── Mobile: give each swiper slide a subtle white-tinted card ─────────── */
@media (max-width: 1023px) {
  .benefits-iconbox-unique .icon-swiper-slide {
    background: rgba(255, 255, 255, 0.48);
    border-radius: 10px;
    padding: 12px 14px;
  }
}

/* ── Door Opening Direction Selector ────────────────────────────────────────
   Shown only on door-category products. Matches the variant-group / pill style
   used for Mesh Type and Standard Size selectors on product-detail.html.
──────────────────────────────────────────────────────────────────────────── */
.door-opening-group {
  margin-top: 4px;
}

.door-opening-req {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--Main, #FF7433);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.door-opening-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Each Left / Right card */
.door-opening-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  min-width: 110px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  line-height: 1.2;
  -webkit-user-select: none;
  user-select: none;
}

.door-opening-btn svg {
  transition: color .18s;
}

.door-opening-btn:hover {
  border-color: var(--Main, #FF7433);
  color: var(--Main, #FF7433);
  box-shadow: 0 2px 10px rgba(255, 116, 51, .12);
}

.door-opening-btn.selected,
.door-opening-btn[aria-pressed="true"] {
  border-color: var(--Main, #FF7433);
  background: rgba(255, 116, 51, .06);
  color: var(--Main, #FF7433);
  box-shadow: 0 2px 10px rgba(255, 116, 51, .15);
}

/* Helper text row below the buttons */
.door-opening-hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}

.door-opening-hint svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #999;
}

/* Mobile: stack buttons full width */
@media (max-width: 480px) {
  .door-opening-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 12px 10px;
  }
}

/* ── Installation note badge (cart / checkout / order details) ─────────────
   Shows "Left opening" / "Right opening" or any custom install instruction.
   Intentionally subtle — it's supplementary info, not primary content.     */
.install-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(255, 116, 51, .08);
  border: 1px solid rgba(255, 116, 51, .25);
  border-radius: 20px;
  color: #b85c24;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.install-note svg {
  flex-shrink: 0;
  opacity: .7;
}