/** Shopify CDN: Minification failed

Line 336:0 Unexpected "}"

**/
/* =============================================================
   mobile-fixes.css
   Storefront-wide mobile responsiveness overrides.
   Loaded LAST in theme.liquid — every rule is scoped inside a
   media query so desktop layouts are untouched.

   Breakpoints used:
     - max 480px  : small phones (iPhone SE)
     - max 640px  : phones (iPhone 12/13/14 + Pixel)
     - max 768px  : large phones / portrait tablet
     - max 1024px : landscape tablet (rare overrides only)
   ============================================================= */

/* ---------- 0) Global guardrails (any viewport) ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* No element should ever be wider than the viewport. */
img, video, svg, iframe { max-width: 100%; height: auto; }

/* Make every clickable target at least 44px tall on touch screens. */
@media (hover: none) and (pointer: coarse) {
  button,
  .btn,
  a.button,
  .rrw-cart__remove,
  .rrw-cart__qty button,
  .rr-footer__nav a,
  .rrw-vs-tab {
    min-height: 44px;
  }
}

/* ============================================================
   1) HEADER + ANNOUNCEMENT BAR
   ============================================================ */
@media (max-width: 640px) {
  .announcement__text {
    padding: 0.6rem 0.75rem;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .header__icon { margin-right: -0.25rem; }
}

/* ============================================================
   2) FLOATING GARAGE WIDGET
   Layout is owned by the inline @media block in rrw-garage.liquid
   itself (vertical rail, right edge, like desktop). Only handle
   tap-blocking and modal sizing here.
   ============================================================ */
@media (max-width: 640px) {
  .rrw-garage:not(.is-open) .rrw-garage__panel,
  .rrw-garage:not(.is-open) .rrw-garage__pill {
    pointer-events: none;
  }

  /* Auth modal opened from garage */
  .rrw-auth-modal__dialog {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    padding: 20px 18px !important;
  }
  .rrw-auth-modal__row { grid-template-columns: 1fr !important; }
  .rrw-garage__field input,
  .rrw-garage__field select,
  .rrw-auth-modal__dialog input { width: 100%; box-sizing: border-box; }
}

/* ============================================================
   3) FOOTER
   ============================================================ */
@media (max-width: 768px) {
  .rr-footer__columns { grid-template-columns: 1fr !important; gap: 28px; }
  .rr-footer__col--text { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rr-footer { padding: 28px 16px; }
  .rr-footer__nav a {
    padding: 10px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .rr-footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
  .rr-footer__social { justify-content: center; }
}

/* ============================================================
   4) HOMEPAGE / HERO sections
   ============================================================ */
@media (max-width: 640px) {
  .hero-image__heading,
  .hero-video__heading,
  .banner__heading,
  .banner h1, .banner h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1;
    word-break: break-word;
  }
  .hero-video__text-content,
  .hero-image__text-content {
    max-width: 100% !important;
    padding: 1rem !important;
    box-sizing: border-box;
  }
  .hero-video__btn,
  .hero-image__btn,
  .banner__buttons {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  .hero-video__btn .btn,
  .hero-image__btn .btn,
  .banner__buttons .btn {
    flex: 1 1 100%;
    font-size: 15px !important;
  }
  /* Multicolor cards on small phones — force 1 column */
  .multicolors-cards__list { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  /* Multicolumn (icon + text rows) — collapse 3+/4+/5+/6+ to 2-col on tablet */
  .multicolumn__list--3,
  .multicolumn__list--4,
  .multicolumn__list--5,
  .multicolumn__list--6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .multicolumn__list,
  .multicolumn__list--2,
  .multicolumn__list--3,
  .multicolumn__list--4,
  .multicolumn__list--5,
  .multicolumn__list--6 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   5) VEHICLE SEARCH (homepage + dedicated page)
   ============================================================ */
@media (max-width: 640px) {
  .rrw-vs-container { padding: 24px 14px; }
  .rrw-vs-card { padding: 18px 14px; }
  .rrw-vs-heading { font-size: 22px !important; }
  .rrw-vs-subheading { font-size: 12px; }
  /* Tabs: keep each tab AT LEAST as wide as its text so labels
     don't overlap. Container handles horizontal scroll. */
  .rrw-vs-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .rrw-vs-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 480px) {
  .rrw-vs-results-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   6) BRAND GRID + BRAND HERO + BRAND PAGE
   ============================================================ */
@media (max-width: 640px) {
  [id^="rrw-brand-grid-"] .rrw-brand-grid-list,
  .rrw-brand-grid-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [id^="rrw-brand-hero-"] {
    min-height: 280px !important;
  }
  [id^="rrw-brand-hero-"] .rrw-brand-hero__btn {
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
  .rrw-brand-page__hero-inner {
    padding: 40px 16px !important;
  }
  .rrw-brand-page__logo { max-width: 160px !important; }
}
@media (max-width: 380px) {
  [id^="rrw-brand-grid-"] .rrw-brand-grid-list,
  .rrw-brand-grid-list {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   7) COLLECTION PAGES + PRODUCT GRID + FACETS
   ============================================================ */
@media (max-width: 768px) {
  .mobile-facets { max-height: 85vh; overflow-y: auto; }
  .mobile-facets__label { padding: 12px 10px; min-height: 44px; }
}
@media (max-width: 640px) {
  .product-grid,
  .grid--2-col-tablet-down,
  .collection .grid {
    gap: 12px !important;
  }
  .collection-hero,
  .main-collection-banner {
    padding: 28px 16px !important;
  }
  .main-collection-banner__heading { font-size: clamp(24px, 7vw, 34px) !important; }
}

/* ============================================================
   8) WHEEL-RESULTS (fitment results page)
   ============================================================ */
@media (max-width: 768px) {
  .rrw-page { padding: 18px 12px 60px !important; }
  .rrw-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .rrw-mobile-filter-btn { display: block !important; }
  .rrw-header { padding: 18px 16px !important; }
  .rrw-header__actions { width: 100%; }
  .rrw-header__change { width: 100%; justify-content: center; }
  .rrw-filter-toggle { padding: 16px 18px !important; }
  .rrw-filter-title { font-size: 13px !important; letter-spacing: 1px !important; }
  .rrw-filter-body { padding: 0 18px 14px !important; }
  .rrw-seo__dl { column-gap: 12px !important; font-size: 13px !important; }
}
@media (max-width: 640px) {
  .rrw-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .rrw-breadcrumb a {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
  .rrw-title { font-size: 20px !important; }
  .rrw-item-body { padding: 10px 12px !important; }
  .rrw-item-price { font-size: 13px !important; }
  .rrw-seo__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
  .rrw-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   9) WHEEL-DETAIL (product page)
   ============================================================ */
@media (max-width: 900px) {
  .wd-grid { grid-template-columns: 1fr !important; }
}
/* Show/hide read-more toggle by viewport */
.wd-about__toggle { display: none; }
.wd-about__toggle-less { display: none; }
.wd-about.is-expanded .wd-about__toggle-more { display: none; }
.wd-about.is-expanded .wd-about__toggle-less { display: inline; }

@media (max-width: 768px) {
  /* Outer wrap padding shrinks so the .wd-grid card fits inside viewport.
     Top padding pushed up so the sticky header doesn't cover the
     "Back to Results" link. */
  .wheel-detail { padding: 64px 0 48px !important; }
  .wheel-detail__wrap { padding: 0 12px !important; }
  .wheel-detail__back {
    scroll-margin-top: 80px;     /* avoid being hidden behind sticky header on anchor scroll */
    position: relative;
    z-index: 2;
  }
  .wd-grid { padding: 14px !important; gap: 16px !important; }

  /* Wheel description: clamp to ~5 lines with a fade, expandable via toggle */
  .wd-about { position: relative; padding: 16px 16px 12px !important; }
  .wd-about__title { font-size: 18px !important; margin: 4px 0 8px; }
  .wd-about__body {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
  }
  .wd-about.is-expanded .wd-about__body {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .wd-about__toggle {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--wd-accent, #d75425);
    color: var(--wd-accent, #d75425);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .wd-about__toggle:hover { background: var(--wd-accent, #d75425); color: #fff; }
}

  /* HERO IMAGE FIX: min-height: 560px + aspect-ratio:1/1 was forcing
     the gallery box wider than the viewport, which then pushed the
     description text off the right edge. Cap it on phones. */
  .wd-gallery__main {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-width: 100%;
  }
  .wd-gallery__img { padding: 4px; }
  .wd-gallery__thumb { width: 56px !important; height: 56px !important; }

  /* About / fitment row: prevent horizontal overflow of long copy */
  .wd-about,
  .wd-about__body,
  .wd-about__body p { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .wd-fit { flex-wrap: wrap; }
  .wd-fit__text { font-size: 13px; line-height: 1.4; }
}
@media (max-width: 768px) {
  .wd-related__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .wd-title,
  .wd-tires__title { font-size: 24px !important; line-height: 1.15; }
  .wd-trust { grid-template-columns: 1fr !important; gap: 10px !important; }
  .wd-pay-mini { grid-template-columns: 1fr !important; }
  .wd-cta { grid-template-columns: 1fr !important; gap: 10px !important; }
  .wd-cta .btn { width: 100%; }

  /* Tire panel filters: kill min-widths so they wrap cleanly */
  .wd-tires__filter,
  .wd-tires__filter--size,
  .wd-tires__filter--custom-size {
    min-width: 0 !important;
    width: 100% !important;
  }
  .wd-tires__filters {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .wd-related__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .wd-related__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   9a) CART DRAWER — Delivery method picker
   Compact 2-row picker. Hides the native radio and renders a
   custom dot via CSS so the layout never blows up regardless of
   how the host theme styles form controls.
   ============================================================ */
.rrw-drawer-delivery {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #fafafa;
  box-sizing: border-box;
}
.rrw-drawer-delivery__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #333;
  margin: 0 0 8px;
}
.rrw-drawer-delivery__opt {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #fff;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.rrw-drawer-delivery__opt + .rrw-drawer-delivery__opt { margin-top: 6px; }
.rrw-drawer-delivery__opt:hover { border-color: #e3e3e3 !important; }
.rrw-drawer-delivery__opt.is-checked { border-color: #d75425 !important; }

/* Hide native radio entirely; we draw our own dot */
.rrw-drawer-delivery__opt input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.rrw-drawer-delivery__opt::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid #c4ccd6;
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rrw-drawer-delivery__opt.is-checked::before {
  border-color: #d75425;
  box-shadow: inset 0 0 0 4px #d75425;
}

.rrw-drawer-delivery__opt-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: auto !important;
}
.rrw-drawer-delivery__opt-body strong {
  display: block;
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: #111 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.rrw-drawer-delivery__opt-body span {
  display: block;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #666 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ============================================================
   9b) CART DRAWER (slide-out from header — cart-drawer.liquid)
   The drawer's internal layout (heading scale, padding, qty
   controls) was sized for a ~480px-wide drawer. On phones we
   keep it slightly narrower than full-viewport (so the dim
   overlay shows on the left as a "tap to close" affordance)
   AND tighten every dimension so it stops looking stretched.
   ============================================================ */
@media (max-width: 768px) {
  .drawer__inner {
    width: 92vw !important;
    max-width: 92vw !important;
    border-radius: 0 !important;
  }

  /* Header — was using H2 scale + huge CLOSE pill */
  .drawer__header {
    padding: 14px 14px 10px !important;
    align-items: center !important;
  }
  .drawer__heading,
  .drawer__heading.h2 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .drawer__close,
  .btn-close-modal-text {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 0 !important;
    border-radius: 6px !important;
  }

  /* Free-shipping bar */
  .cart-drawer .cart__free-shipping { padding: 8px 14px !important; font-size: 13px !important; }
  .cart-drawer .cart__free-shipping-bar { height: 6px !important; margin-top: 6px !important; }

  /* Item rows — tighten huge padding */
  .cart-drawer .cart-items td { padding-top: 14px !important; }
  .cart-drawer .cart-item { gap: 10px !important; padding: 12px 0 !important; }
  .cart-drawer .cart-item:last-child { margin-bottom: 8px !important; }
  .cart-drawer .cart-item__media { width: 72px !important; }
  .cart-drawer .cart-item__image { max-width: 72px !important; }
  .cart-drawer .cart-item__details { padding-left: 10px !important; min-width: 0; }
  .cart-drawer .cart__product-title,
  .cart-drawer .cart-item__name {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }
  .cart-drawer .cart-item__details .product-option,
  .cart-drawer .cart-item__details dl,
  .cart-drawer .cart-item__details .cart-item__property {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 1px 0 !important;
  }
  .cart-drawer .cart-item__price-wrapper,
  .cart-drawer .cart-item__final-price,
  .cart-drawer .price { font-size: 14px !important; }

  /* Quantity controls — were huge wide boxes */
  .cart-drawer .quantity,
  .cart-drawer .cart-item__quantity-wrapper .quantity {
    min-width: 0 !important;
    width: 92px !important;
    height: 36px !important;
  }
  .cart-drawer .quantity__input { font-size: 14px !important; width: 30px !important; }
  .cart-drawer .quantity__button {
    width: 30px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  .cart-drawer .cart-item__quantity { padding: 0 !important; margin-top: 6px !important; }

  /* Footer area: notes row + subtotal + checkout */
  .drawer__footer { padding: 12px 14px !important; }
  .cart__ctas { margin-top: 8px !important; }
  .totals,
  .cart__footer .totals { font-size: 14px !important; }
  .totals .totals__subtotal-value,
  .cart__subtotal,
  .cart__price { font-size: 22px !important; font-weight: 700 !important; }
  .tax-note { font-size: 11px !important; line-height: 1.3 !important; }
  .drawer__footer .btn,
  .cart__checkout-button,
  #CartDrawer-Checkout {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
  /* GIFT NOTE / ORDER NOTE / CALCULATE SHIPPING small icons row */
  .cart__note-buttons,
  .cart-drawer__notes,
  .drawer__footer-modal-trigger { font-size: 11px !important; padding: 8px 6px !important; }
}

/* ============================================================
   10) CART PAGE  (rrw-cart-main + rrw-cart-addons)
   Checkout button must always be reachable.
   ============================================================ */
@media (max-width: 880px) {
  .rrw-cart__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .rrw-cart, .rrw-cart-pre { padding: 0 12px; }
  .rrw-cart__summary {
    position: static !important;
    margin-top: 16px;
  }
}
@media (max-width: 640px) {
  .rrw-cart__line {
    flex-wrap: wrap;
    gap: 10px;
  }
  .rrw-cart__img { width: 80px !important; height: 80px !important; }
  .rrw-cart__info { flex: 1 1 calc(100% - 92px); min-width: 0; }
  .rrw-cart__title { font-size: 15px; line-height: 1.25; }
  .rrw-cart__row { flex-wrap: wrap; }
  .rrw-cart__remove {
    padding: 8px 12px !important;
    min-height: 44px;
    min-width: 44px;
  }
  .rrw-cart__lug-picker { flex-direction: column !important; gap: 8px !important; }
  .rrw-cart__lug-field { width: 100% !important; }
  .rrw-cart__lug-field select { width: 100%; }

  /* Sticky checkout summary so the customer can always tap the button */
  .rrw-cart__summary {
    position: sticky !important;
    bottom: 0;
    z-index: 15;
    background: #fff;
    padding: 14px;
    margin: 16px -12px 0;
    box-shadow: 0 -3px 12px rgba(0,0,0,.10);
    border-top: 1px solid #eee;
  }
  .rrw-cart__checkout,
  .rrw-cart__summary .btn,
  .rrw-cart__summary button[name="checkout"],
  .rrw-cart__summary [type="submit"] {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px !important;
  }

  /* Add-on row layout */
  .rrw-cart-pre__delivery { grid-template-columns: 1fr !important; }
  .rrw-cart-pre__addon { flex-wrap: wrap; gap: 10px; }
  .rrw-cart-pre__addon-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .rrw-cart-pre__addon-price { font-size: 14px; }
}

/* ============================================================
   11) PRODUCT CARD (used in collection grids + recommendations)
   ============================================================ */
@media (max-width: 640px) {
  .product-card,
  .card-wrapper { width: 100%; }
  .card__information { padding: 10px 8px; }
  .card__heading,
  .card-information__text { font-size: 14px !important; line-height: 1.25; }
  .price__regular .price-item,
  .price__sale .price-item { font-size: 14px !important; }
}

/* ============================================================
   12) GENERIC TABLE / OVERFLOW SAFETY (size charts, specs)
   ============================================================ */
@media (max-width: 640px) {
  .size-chart table,
  .product__description table,
  .rte table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Prevent any rogue child from causing horizontal scroll */
  .page-container,
  .main-content { max-width: 100vw; overflow-x: clip; }
}

/* ============================================================
   13) FORM CONTROLS — prevent iOS zoom on focus
   (font-size below 16px causes iOS Safari to zoom the page)
   ============================================================ */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   13b) GOOGLE REVIEWS ROCKET — mobile cleanup
   The app embed defaults to a desktop dual-row layout that's too
   wide and over-padded on phones. Re-flow to a single column,
   tighten typography and spacing, prevent horizontal overflow.
   ============================================================ */
@media (max-width: 768px) {
  /* Section wrapper itself */
  #shopify-section-1772312334e2c04876 {
    padding: 16px 12px !important;
    overflow: hidden;
  }
  #shopify-section-1772312334e2c04876 * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* App's outer wrapper — kill negative margins / fixed widths */
  #shopify-section-1772312334e2c04876 .grr-widget,
  #shopify-section-1772312334e2c04876 [class*="reviews-rocket"],
  #shopify-section-1772312334e2c04876 [class*="grr-"],
  #shopify-section-1772312334e2c04876 [class*="google-review"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force the review card carousel/grid to stack 1-up */
  #shopify-section-1772312334e2c04876 [class*="grr-row"],
  #shopify-section-1772312334e2c04876 [class*="grr-grid"],
  #shopify-section-1772312334e2c04876 [class*="grr-list"],
  #shopify-section-1772312334e2c04876 [class*="grr-cards"],
  #shopify-section-1772312334e2c04876 [class*="reviews-list"],
  #shopify-section-1772312334e2c04876 [class*="reviews-row"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    transform: none !important;
    flex-wrap: wrap !important;
  }

  /* Individual review cards */
  #shopify-section-1772312334e2c04876 [class*="grr-card"],
  #shopify-section-1772312334e2c04876 [class*="grr-review"],
  #shopify-section-1772312334e2c04876 [class*="review-card"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
  }

  /* Star ratings + names + text — tighten */
  #shopify-section-1772312334e2c04876 [class*="grr-stars"],
  #shopify-section-1772312334e2c04876 [class*="grr-name"],
  #shopify-section-1772312334e2c04876 [class*="grr-author"] {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #shopify-section-1772312334e2c04876 [class*="grr-text"],
  #shopify-section-1772312334e2c04876 [class*="grr-body"],
  #shopify-section-1772312334e2c04876 [class*="grr-content"] {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  #shopify-section-1772312334e2c04876 [class*="grr-date"] {
    font-size: 11px !important;
  }

  /* App headers / titles */
  #shopify-section-1772312334e2c04876 h1,
  #shopify-section-1772312334e2c04876 h2,
  #shopify-section-1772312334e2c04876 h3,
  #shopify-section-1772312334e2c04876 [class*="grr-title"],
  #shopify-section-1772312334e2c04876 [class*="grr-header"] {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
    word-break: break-word;
  }

  /* Carousel arrows / pagination dots — make tappable */
  #shopify-section-1772312334e2c04876 [class*="grr-arrow"],
  #shopify-section-1772312334e2c04876 [class*="grr-nav"],
  #shopify-section-1772312334e2c04876 [class*="slick-arrow"] {
    width: 36px !important;
    height: 36px !important;
  }

  /* Avatars */
  #shopify-section-1772312334e2c04876 [class*="grr-avatar"],
  #shopify-section-1772312334e2c04876 [class*="grr-photo"] img {
    width: 36px !important;
    height: 36px !important;
  }

  /* "View on Google" / "Write review" CTA */
  #shopify-section-1772312334e2c04876 [class*="grr-cta"],
  #shopify-section-1772312334e2c04876 [class*="grr-button"],
  #shopify-section-1772312334e2c04876 a[class*="button"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
  }
}

/* ============================================================
   14) IPAD PORTRAIT (768px) — keep things readable
   ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  .rrw-vs-form { gap: 12px; }
  .rrw-vs-field { flex: 1 1 calc(50% - 12px); }
  /* Brand grid: 3 cols on tablet looks tight, force to 2-3 */
  [id^="rrw-brand-grid-"] .rrw-brand-grid-list,
  .rrw-brand-grid-list {
    grid-template-columns: repeat(3, 1fr);
  }
}