/*
Theme Name: Street Line
Theme URI: https://example.com
Author: Poshteboom Studio
Description: قالب فروشگاهی استریت‌ور برای برندهای اسنیکر و ایمپورت، الهام‌گرفته از هویت بصری برندهای بزرگ ورزشی و فرهنگ درآپ محدود. سازگار با ووکامرس (فروشگاه، سبد خرید، درگاه پرداخت، عضویت با ایمیل).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: streetline
Tags: e-commerce, woocommerce, dark, custom-menu, footer-widgets
*/

/* =========================================================
   DESIGN TOKENS
   Palette: industrial / shipping-label — charcoal ground,
   warm off-white ink, hazard-orange + warning-yellow accents.
   Reference: import-label tags, warning tape, drop stickers.
   ========================================================= */
:root{
  --color-bg: #121210;
  --color-bg-alt: #1a1917;
  --color-surface: #1f1e1b;
  --color-surface-2: #26241f;
  --color-line: #38362f;
  --color-text: #F2EFE6;
  --color-text-dim: #a29d8f;
  --color-accent: #FF5A1F;
  --color-accent-ink: #1a0d05;
  --color-warn: #F4C11B;
  --color-ok: #7CB342;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --stripe-size: 18px;
  --radius: 2px;
  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--color-bg); scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:.01em; margin:0 0 .4em; text-transform:uppercase; }
h1{ font-size:clamp(2.6rem,6vw,5.6rem); line-height:1.12; }
h2{ font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.15; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; color:var(--color-text-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent);
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--color-accent); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   SIGNATURE ELEMENT — hazard tape stripe
   Diagonal warning-tape motif used across dividers, tags,
   and CTAs. Nods to import/shipping crates + limited-drop
   packaging — the actual mechanics of the business.
   ========================================================= */
.hazard-stripe{
  height:10px;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--color-accent) 0,
    var(--color-accent) var(--stripe-size),
    var(--color-bg) var(--stripe-size),
    var(--color-bg) calc(var(--stripe-size) * 2)
  );
}
.hazard-stripe.thin{ height:6px; }

.tag-label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; background:var(--color-bg);
  border:1px dashed var(--color-line); color:var(--color-warn);
  padding:4px 8px; border-radius:var(--radius);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 26px; font-family:var(--font-mono);
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  border:2px solid var(--color-text); background:transparent;
  color:var(--color-text); cursor:pointer; border-radius:var(--radius);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); font-weight:600; }
.btn-primary:hover{ background:#ff6b36; }
.btn-block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(18,18,16,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--color-line); }
.site-header .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--container); margin:0 auto; }
.site-logo{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.03em; text-transform:uppercase; display:flex; align-items:center; }
.site-logo span{ color:var(--color-accent); }
.site-logo img, .site-logo .custom-logo{ max-height:44px; width:auto; display:block; }
.main-nav ul{ display:flex; gap:28px; }
.main-nav a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-dim); }
.main-nav a:hover{ color:var(--color-text); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
.cart-count{ background:var(--color-accent); color:var(--color-accent-ink); border-radius:50%; font-size:.65rem; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; margin-inline-start:4px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--color-line); color:var(--color-text); padding:8px 10px; }

/* Brand dropdown — auto-built from the product_brand taxonomy */
.brand-menu{ position:relative; }
.brand-menu summary{
  list-style:none; cursor:pointer; font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-dim);
  padding:6px 0; display:flex; align-items:center; gap:6px;
}
.brand-menu summary::-webkit-details-marker{ display:none; }
.brand-menu summary::after{ content:"▾"; font-size:.7em; }
.brand-menu[open] summary::after{ content:"▴"; }
.brand-menu summary:hover{ color:var(--color-text); }
.brand-menu-list{
  position:absolute; top:100%; inset-inline-start:0; margin-top:10px; min-width:200px;
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius);
  padding:8px 0; z-index:60; list-style:none; box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.brand-menu-list li{ margin:0; }
.brand-menu-list a{
  display:flex; justify-content:space-between; gap:10px; padding:10px 16px;
  font-family:var(--font-mono); font-size:.78rem; color:var(--color-text-dim);
}
.brand-menu-list a:hover{ background:var(--color-bg-alt); color:var(--color-accent); }
.brand-menu-list .brand-count{ color:var(--color-text-dim); opacity:.6; }
.brand-menu-extra{ border-top:1px solid var(--color-line); margin-top:6px; padding-top:6px; }
.brand-menu-extra a{ color:var(--color-accent) !important; }/* دکمه آخرین اخبار کتونی - دقیقاً مثل برندها */
.blog-header-link {
  font-family: var(--font-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--color-text-dim) !important;
  padding: 6px 0 !important;
  margin-inline-end: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}
.blog-header-link:hover {
  color: var(--color-text) !important;
}
@media (max-width:860px){
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--color-bg-alt); border-bottom:1px solid var(--color-line); }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; padding:18px 24px; gap:18px; }
  .nav-toggle{ display:inline-flex; }
  .brand-menu{ order:3; }
}

/* =========================================================
   MARQUEE TICKER — scrolling strip of brands carried
   ========================================================= */
.brand-ticker{ background:var(--color-surface); border-block:1px solid var(--color-line); overflow:hidden; }
.brand-ticker .track{ display:flex; gap:60px; padding:12px 0; width:max-content; animation:ticker 28s linear infinite; }
.brand-ticker span{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-dim); white-space:nowrap; }
.brand-ticker span::after{ content:"◆"; color:var(--color-accent); margin-inline-start:60px; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; background:linear-gradient(180deg, rgba(18,18,16,.2), rgba(18,18,16,.96) 82%), var(--color-bg-alt); background-size:cover; background-position:center; }
.hero-inner{ max-width:var(--container); margin:0 auto; padding:0 24px 64px; width:100%; }
.hero .eyebrow{ display:inline-block; margin-bottom:14px; }
.hero h1{ max-width:14ch; }
.hero-sub{ max-width:46ch; font-size:1.05rem; }
.hero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* =========================================================
   SECTIONS / PRODUCT GRID
   ========================================================= */
.section{ padding:88px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--color-line); padding-bottom:20px; }
.section-head p{ margin:0; max-width:44ch; }

.product-grid, .products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; padding:0; margin:0 !important; }
@media (max-width:1000px){ .product-grid,.products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .product-grid,.products{ grid-template-columns:1fr;} }

.product-card, ul.products li.product{
  /* WooCommerce's legacy (pre-grid) stylesheet still ships width:%/float on
     li.product for its old float-based column layout. Once our .products
     becomes a CSS Grid, that leftover width:% resolves against the (already
     narrow) grid cell instead of the full row, collapsing the card down to
     a sliver and wrapping the title character-by-character — the bug
     you're seeing. Force-reset it so our grid is the only thing sizing it. */
  width:100% !important; max-width:none !important; float:none !important; clear:none !important; margin:0 !important;
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius); overflow:hidden; position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.product-card:hover, ul.products li.product:hover{ border-color:var(--color-accent); transform:translateY(-4px); }
.product-media{ aspect-ratio:1/1; background:var(--color-bg-alt); position:relative; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
/* Fallback for WooCommerce's own templates (related products, upsells, cross-sells)
   which output <img> WITHOUT our .product-media wrapper. */
ul.products li.product a img{ width:100% !important; aspect-ratio:1/1; height:auto !important; object-fit:cover; display:block; background:var(--color-bg-alt); }
.product-card .tag-label, ul.products li.product .tag-label{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; }
.product-body, ul.products li.product .product-body-inner{ padding:16px; }
.product-title, ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); text-transform:uppercase; font-size:1rem; margin:0 0 6px;
}
.product-price, ul.products li.product .price{ font-family:var(--font-mono); color:var(--color-warn); font-size:.95rem; }
.product-price del{ color:var(--color-text-dim); margin-inline-end:8px; }

/* =========================================================
   BRAND STORY SPLIT
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.split .media{ background:var(--color-surface); min-height:420px; background-size:cover; background-position:center; }
.split .copy{ padding:64px; display:flex; flex-direction:column; justify-content:center; background:var(--color-bg-alt); }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split .copy{ padding:40px 24px; } .split .media{ min-height:280px; } }

/* =========================================================
   NEWSLETTER / MEMBERSHIP CTA
   ========================================================= */
.cta-band{ background:var(--color-accent); color:var(--color-accent-ink); padding:64px 0; }
.cta-band h2{ color:var(--color-accent-ink); }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-form{ display:flex; gap:0; border:2px solid var(--color-accent-ink); border-radius:var(--radius); overflow:hidden; }
.cta-form input{ border:none; background:transparent; padding:14px 16px; font-family:var(--font-mono); color:var(--color-accent-ink); min-width:220px; }
.cta-form input::placeholder{ color:rgba(26,13,5,.6); }
.cta-form button{ border:none; background:var(--color-accent-ink); color:var(--color-warn); padding:14px 22px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--color-bg-alt); padding-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 40px; }
.footer-grid h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color:var(--color-text-dim); margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a{ color:var(--color-text-dim); }
.footer-grid a:hover{ color:var(--color-text); }
.footer-bottom{ border-top:1px solid var(--color-line); padding:20px 0; font-family:var(--font-mono); font-size:.72rem; color:var(--color-text-dim); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:560px){ .footer-bottom{ justify-content:center; text-align:center; } }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   WOOCOMMERCE — global overrides
   ========================================================= */
.woocommerce, .woocommerce-page{ color:var(--color-text); }
.woocommerce ul.products li.product .button{
  margin-top:12px; display:inline-block; font-family:var(--font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; padding:10px 14px; border:1px solid var(--color-text);
  background:transparent; color:var(--color-text); border-radius:var(--radius);
}
.woocommerce ul.products li.product .button:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }

.woocommerce div.product .woocommerce-tabs, .woocommerce div.product div.summary{ color:var(--color-text); }
.woocommerce span.price, .woocommerce p.price{ color:var(--color-warn); font-family:var(--font-mono); }
.woocommerce div.product form.cart .button{ background:var(--color-accent); color:var(--color-accent-ink); border:none; padding:16px 28px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; border-radius:var(--radius); cursor:pointer; }
.woocommerce div.product form.cart .quantity input{ background:var(--color-surface); border:1px solid var(--color-line); color:var(--color-text); padding:14px; width:64px; }

.woocommerce table.shop_table, .woocommerce-cart table.cart, .woocommerce-checkout table.shop_table{
  background:var(--color-surface); border:1px solid var(--color-line); color:var(--color-text);
}
.woocommerce table.shop_table th{ font-family:var(--font-mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; color:var(--color-text-dim); border-bottom:1px solid var(--color-line); }
.woocommerce table.shop_table td{ border-bottom:1px solid var(--color-line); }
.woocommerce #payment{ background:var(--color-surface); border:1px solid var(--color-line); }
.woocommerce #payment div.payment_box{ background:var(--color-bg-alt); color:var(--color-text-dim); }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="password"], .woocommerce input[type="tel"], .woocommerce textarea, .woocommerce select{
  background:var(--color-surface); border:1px solid var(--color-line); color:var(--color-text); padding:12px; border-radius:var(--radius);
}
.woocommerce form .form-row label{ color:var(--color-text-dim); font-size:.85rem; }
.woocommerce-message, .woocommerce-info{ background:var(--color-surface); border-top-color:var(--color-accent); color:var(--color-text); }
.woocommerce-error{ background:var(--color-surface); border-top-color:#e5484d; color:var(--color-text); }

/* My Account (membership) */
.woocommerce-account .woocommerce-MyAccount-navigation{ background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius); padding:10px 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li{ border-bottom:1px solid var(--color-line); }
.woocommerce-account .woocommerce-MyAccount-navigation a{ display:block; padding:12px 18px; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--color-accent); }
.woocommerce-form-login, .woocommerce-form-register{ background:var(--color-surface); border:1px solid var(--color-line); padding:32px; border-radius:var(--radius); max-width:460px; }
.woocommerce-form-row button, .woocommerce-form-login button, .woocommerce-form-register button{ background:var(--color-accent); color:var(--color-accent-ink); border:none; padding:14px 24px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; border-radius:var(--radius); cursor:pointer; }

/* Page banner (used for shop/archive/checkout) */
.page-banner{ padding:56px 0 32px; border-bottom:1px solid var(--color-line); background:var(--color-bg-alt); }
.page-banner h1{ margin:0; }

/* =========================================================
   SIZE PICKER (front page — above "درآپ این هفته")
   ========================================================= */
.size-picker-section{ padding-bottom:0; }
.size-picker-section .section-head{ border-bottom:none; padding-bottom:0; margin-bottom:24px; }
.size-picker{ display:flex; flex-wrap:wrap; gap:10px; padding-bottom:56px; border-bottom:1px solid var(--color-line); }
.size-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:54px; height:54px; padding:0 14px;
  font-family:var(--font-mono); font-size:.9rem; letter-spacing:.02em;
  border:1px solid var(--color-line); border-radius:var(--radius);
  color:var(--color-text-dim); background:var(--color-surface);
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.size-pill:hover{ border-color:var(--color-accent); color:var(--color-text); transform:translateY(-2px); }
.size-pill.is-active{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); font-weight:600; }
.size-picker-clear{ font-family:var(--font-mono); font-size:.78rem; color:var(--color-accent); text-decoration:underline; }

/* Real per-product size list on related-product cards */
.related-sizes{ display:block; margin-top:6px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em; color:var(--color-text-dim); }

/* =========================================================
   ENAMAD — placed at the left edge of the footer "حساب کاربری" column
   ========================================================= */
.myaccount-enamad{ margin-top:16px; text-align:left; }
.myaccount-enamad img{ height:64px; width:auto; display:inline-block; }

/* =========================================================
   FLOATING "ارتباط با ما" (CONTACT) BUTTON — every page
   ========================================================= */
.contact-fab{ position:fixed; left:20px; bottom:20px; z-index:90; font-family:var(--font-mono); }
.contact-fab-toggle{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  background:var(--color-accent); color:var(--color-accent-ink); border:none;
  border-radius:999px; font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition:transform .15s ease, background .15s ease;
}
.contact-fab-toggle:hover{ transform:translateY(-2px); background:#ff6b36; }
.contact-fab-icon{ font-size:1.05rem; line-height:1; }
.contact-fab-panel{
  position:absolute; bottom:calc(100% + 12px); left:0; min-width:230px;
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius); padding:18px; box-shadow:0 16px 34px rgba(0,0,0,.5);
}
.contact-fab-panel[hidden]{ display:none; }
.contact-fab-panel h4{ margin:0 0 12px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--color-text-dim); text-transform:uppercase; }
.contact-fab-panel ul{ margin:0; padding:0; }
.contact-fab-panel ul li{ margin-bottom:10px; }
.contact-fab-panel ul li:last-child{ margin-bottom:0; }
.contact-fab-panel a{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:.85rem; color:var(--color-text); }
.contact-fab-panel a:hover{ color:var(--color-accent); }
@media (max-width:560px){
  .contact-fab{ left:12px; bottom:12px; }
  .contact-fab-label{ display:none; }
  .contact-fab-toggle{ padding:14px; border-radius:50%; }
  .contact-fab-panel{ min-width:200px; }
}
/* اصلاح محصولات مرتبط روی دسکتاپ */
.related.products ul.products,
section.related ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.related.products ul.products li.product,
section.related ul.products li.product {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  display: block !important;
}

.related.products ul.products li.product a,
section.related ul.products li.product a {
  display: block !important;
  width: 100% !important;
}

.related.products .product-media,
section.related .product-media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

.related.products .product-media img,
section.related .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ریسپانسیو */
@media (max-width: 1000px) {
  .related.products ul.products,
  section.related ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .related.products ul.products,
  section.related ul.products {
    grid-template-columns: 1fr !important;
  }
}
/* ===== اصلاح قطعی محصولات مرتبط ===== */
.streetline-related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.streetline-related-grid li.product {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

.streetline-related-grid li.product a {
  display: block !important;
  width: 100% !important;
}

.streetline-related-grid .product-media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.streetline-related-grid .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ریسپانسیو */
@media (max-width: 1000px) {
  .streetline-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .streetline-related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}