/* ============================================================
   RoidOcean — Homepage sections + footer
   ============================================================ */

.ro-main { display: block; }
.ro-section { margin-bottom: var(--ro-section-y); }
.ro-hero.ro-section { margin-top: 24px; }

/* ============================================================
   Hero — measured from source (grid-cols-3, left col-span-2, right col-span-1
   with a nested 2-up card grid). ALL THREE cards are image sliders.
   ============================================================ */
.ro-hero-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ro-hero-right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (min-width: 1024px){
  .ro-hero-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .ro-hero-left { grid-column: span 2 / span 2; }
  .ro-hero-right { grid-column: span 1 / span 1; grid-template-columns: 1fr; gap: 24px; }
}

/* the reusable image slider */
.ro-slider { position: relative; border-radius: 8px; overflow: hidden; background: var(--ro-section-bg); }
.ro-slides { position: relative; width: 100%; height: 100%; }
.ro-slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.ro-slide.is-active { opacity: 1; visibility: visible; }
.ro-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* left banner responsive heights: 250 / 300 / 400 / 500 / 600 */
.ro-hero-slider { height: 250px; }
@media (min-width: 640px){ .ro-hero-slider { height: 300px; } }
@media (min-width: 768px){ .ro-hero-slider { height: 400px; } }
@media (min-width: 1024px){ .ro-hero-slider { height: 500px; } }
@media (min-width: 1280px){ .ro-hero-slider { height: 600px; } }

/* right cards responsive heights: 120 / 150 / 240 / 290 */
.ro-hero-card { height: 120px; }
@media (min-width: 640px){ .ro-hero-card { height: 150px; } }
@media (min-width: 1024px){ .ro-hero-card { height: 240px; } }
@media (min-width: 1280px){ .ro-hero-card { height: 290px; } }

/* dots */
.ro-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 7px; z-index: 4;
}
.ro-dot {
  width: 8px; height: 8px; border-radius: 9999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.25); padding: 0;
  transition: width .2s, background .2s;
}
.ro-dot.is-active { width: 20px; background: var(--ro-orange); }
.ro-hero-card .ro-dot { width: 7px; height: 7px; }
.ro-hero-card .ro-dot.is-active { width: 16px; }

/* ============================================================
   Shop by Brand
   ============================================================ */
.ro-brand-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.ro-brand-tile {
  background: #fff; border: 1px solid var(--ro-line-soft);
  border-radius: var(--ro-radius); min-height: 92px;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  box-shadow: var(--ro-shadow-sm); transition: box-shadow .2s, transform .2s;
}
.ro-brand-tile:hover { box-shadow: var(--ro-shadow); transform: translateY(-2px); }
.ro-brand-tile img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.ro-brand-name { font-weight: var(--ro-fw-bold); color: var(--ro-navy); text-align: center; font-size: var(--ro-fs-sm); }
@media (max-width: 900px){ .ro-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .ro-brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* Brand / warehouse INDEX pages */
.ro-brandsindex-intro { margin-bottom: 24px; }
.ro-brand-grid--index { row-gap: 16px; }
/* Warehouse tiles: country flag above the name */
.ro-wh-tile { flex-direction: column; gap: 10px; }
.ro-wh-flagwrap { display: inline-flex; align-items: center; justify-content: center; }
.ro-wh-flagwrap .ro-flag { width: 34px; height: 26px; border-radius: 4px; box-shadow: var(--ro-shadow-sm); }
.ro-wh-globe { font-size: 26px; color: var(--ro-navy); }

/* ============================================================
   Carousels (Best Sellers / New Arrivals)
   ============================================================ */
.ro-sec-actions { display: flex; align-items: center; gap: 8px; }
.ro-car-arrow {
  width: 34px; height: 34px; border-radius: var(--ro-radius-full);
  border: 1px solid var(--ro-line); background: #fff; cursor: pointer;
  color: var(--ro-navy); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; transition: background .18s, color .18s, border-color .18s;
}
.ro-car-arrow:hover { background: var(--ro-orange); border-color: var(--ro-orange); color: #fff; }

.ro-car-viewport { overflow: hidden; }
.ro-car-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
  padding-bottom: 4px;
}
.ro-car-track::-webkit-scrollbar { display: none; }
.ro-car-cell { scroll-snap-align: start; min-width: 0; }
.ro-car-empty { color: var(--ro-muted); padding: 30px 0; }

@media (max-width: 1100px){ .ro-car-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 860px){ .ro-car-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } }
@media (max-width: 620px){ .ro-car-track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; } }

/* ============================================================
   Best Brands (circular carousel)
   ============================================================ */
.ro-bestbrands-track { grid-auto-columns: calc((100% - 6 * 16px) / 7); }
.ro-bestbrand { text-align: center; scroll-snap-align: start; }
.ro-bestbrand-circle {
  width: 96px; height: 96px; margin: 0 auto 10px;
  border-radius: var(--ro-radius-full);
  background: #fff; border: 1px solid var(--ro-line-soft); box-shadow: var(--ro-shadow-sm);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: box-shadow .2s, transform .2s;
}
.ro-bestbrand:hover .ro-bestbrand-circle { box-shadow: var(--ro-shadow); transform: translateY(-2px); }
.ro-bestbrand-circle img { max-height: 52px; max-width: 100%; object-fit: contain; }
.ro-bestbrand-name { display: block; font-size: var(--ro-fs-sm); font-weight: var(--ro-fw-medium); color: var(--ro-navy); }
@media (max-width: 1100px){ .ro-bestbrands-track { grid-auto-columns: calc((100% - 4 * 16px) / 5); } }
@media (max-width: 700px){ .ro-bestbrands-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); } }

/* ============================================================
   Customer Touchdowns
   ============================================================ */
.ro-touchdowns {
  background: var(--ro-section-bg);
  padding: 34px 0;
}
.ro-td-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ro-td-lead .ro-sec-title h2 { margin: 0; }
.ro-td-sub { margin: 6px 0 0 16px; color: var(--ro-muted); font-size: var(--ro-fs-sm); }
.ro-td-badges { display: flex; gap: 16px; flex-wrap: wrap; }
.ro-td-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--ro-radius);
  background: #fff; border: 1px solid var(--ro-line);
}
.ro-td-trustpilot { background: rgba(0,182,122,.05); border-color: rgba(0,182,122,.20); }
.ro-td-reviewsio { background: rgba(16,49,120,.05); border-color: rgba(16,49,120,.20); }
.ro-td-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--ro-fw-bold); font-size: var(--ro-fs-sm); color: var(--ro-navy); }
.ro-td-trustpilot .ro-td-logo { color: var(--ro-trustpilot); }
.ro-td-logo .ro-td-star { color: var(--ro-trustpilot); }
.ro-td-reviewsio .ro-td-logo .fa-circle-check { color: var(--ro-reviewsio); }
.ro-td-logo sub { font-size: .6em; }
.ro-td-stars { display: inline-flex; }
.ro-td-trustpilot .ro-td-stars .ro-td-star { color: var(--ro-trustpilot); }
.ro-td-reviewsio .ro-td-stars .ro-td-star { color: var(--ro-orange); }
.ro-td-score { display: flex; flex-direction: column; line-height: 1.1; }
.ro-td-score b { font-size: var(--ro-fs-md); color: var(--ro-navy); }
.ro-td-score small { font-size: var(--ro-fs-xs); color: var(--ro-muted); }
@media (max-width: 700px){ .ro-td-inner { flex-direction: column; align-items: flex-start; } .ro-td-badges { width: 100%; } .ro-td-badge { flex: 1; } }

/* ============================================================
   Promo banner
   ============================================================ */
/* The banner is a single fully-baked, opaque light image (its copy is inside the art).
   NO navy container / overlay / duplicate text — the light image shows clean at full
   contrast (matches source). Neutral light fallback only while the image loads. */
.ro-promo-banner {
  position: relative; overflow: hidden;
  display: block;
  border-radius: var(--ro-radius-lg);
  background: var(--ro-section-bg);
  line-height: 0; /* kill inline-image gap */
}
.ro-promo-img { width: 100%; height: auto; display: block; }

/* ============================================================
   SEO content zone (STANDARD #6)
   ============================================================ */
.ro-seo-zone { margin-bottom: var(--ro-section-y); }
.ro-prose { color: var(--ro-ink-soft); font-size: var(--ro-fs-base); line-height: 1.75; max-width: 980px; }
.ro-prose h2 { font-size: var(--ro-fs-2xl); color: var(--ro-navy); margin: 0 0 .6em; }
.ro-prose h3 { font-size: var(--ro-fs-lg); color: var(--ro-navy); margin: 1.4em 0 .5em; }
.ro-prose p { margin: 0 0 1em; }
.ro-prose a { color: var(--ro-orange); text-decoration: underline; }
.ro-prose ul, .ro-prose ol { margin: 0 0 1em 1.2em; }

/* ============================================================
   Footer
   ============================================================ */
.ro-footer { background: #fff; border-top: 1px solid var(--ro-line); margin-top: 20px; }
.ro-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 28px;
  padding: 48px 24px 36px;
}
.ro-footer-brand .ro-logo img { height: 34px; margin-bottom: 14px; }
.ro-footer-tag { font-size: var(--ro-fs-sm); color: var(--ro-muted); line-height: 1.6; margin: 0 0 16px; }
.ro-footer-contact { font-size: var(--ro-fs-sm); color: var(--ro-ink-soft); line-height: 1.9; }
.ro-footer-contact a { color: var(--ro-ink-soft); }
.ro-footer-contact a:hover { color: var(--ro-orange); }
.ro-footer-contact i { color: var(--ro-orange); width: 16px; }
.ro-footer-col h4, .ro-footer-newsletter h4 {
  font-size: var(--ro-fs-xs); font-weight: var(--ro-fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ro-navy); margin: 0 0 14px;
}
.ro-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ro-footer-col li { margin-bottom: 9px; }
.ro-footer-col a { font-size: var(--ro-fs-sm); color: var(--ro-ink-soft); }
.ro-footer-col a:hover { color: var(--ro-orange); }

.ro-footer-newsletter { grid-column: span 1; }
.ro-footer-newsletter p { font-size: var(--ro-fs-sm); color: var(--ro-muted); margin: 0 0 12px; }
.ro-newsletter-form { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ro-newsletter-form input {
  flex: 1; min-width: 140px; height: 42px; padding: 0 12px; font: inherit;
  border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm);
}
.ro-newsletter-form input:focus { outline: none; border-color: var(--ro-orange); }
.ro-newsletter-form .ro-btn { height: 42px; }

.ro-footer-social .ro-social-label { display: block; font-size: var(--ro-fs-xs); font-weight: var(--ro-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--ro-navy); margin-bottom: 10px; }
.ro-social-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.ro-soc {
  width: 34px; height: 34px; border-radius: var(--ro-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
.ro-soc-fb { background: #1877f2; } .ro-soc-ig { background: #e4405f; }
.ro-soc-x { background: #000; } .ro-soc-tg { background: #229ed9; }
.ro-soc-wa { background: #25d366; } .ro-soc-rd { background: #ff4500; }
.ro-soc:hover { color: #fff; opacity: .85; }

.ro-footer-bottom { border-top: 1px solid var(--ro-line); }
.ro-footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; flex-wrap: wrap;
}
.ro-copy { font-size: var(--ro-fs-sm); color: var(--ro-muted); margin: 0; }
.ro-copy strong { color: var(--ro-navy); }
.ro-payicons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-payicons img { height: 22px; width: auto; }

@media (max-width: 1024px){ .ro-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .ro-footer-brand { grid-column: 1 / -1; } .ro-footer-newsletter { grid-column: 1 / -1; } }
@media (max-width: 600px){ .ro-footer-grid { grid-template-columns: 1fr 1fr; } }