/* ==========================================================================
   ROYAL-ONE — HOMEPAGE COMPREHENSIVE STYLES (TSG Brands LLC)
   Desktop, Tablet, Mobile & Cross-Browser Optimized
   ========================================================================== */

.us-home-wrapper {
  background-color: var(--bg);
  color: var(--text);
  width: 100%;
  overflow-x: hidden;
}

/* Full-Width Section Wrapper with Centered Inner Container */
.us-full-section {
  width: 100%;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.us-full-section.bg-warm {
  background: var(--bg);
}

.us-section-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--gutter);
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .us-section-container {
    padding: 60px 16px;
  }
}
@media (max-width: 600px) {
  .us-section-container {
    padding: 48px 16px;
  }
}

/* --- 1. Hero Section --- */
.us-hero-section {
  padding: clamp(20px, 3vh, 40px) var(--gutter);
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #FFFDF9 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  --us-chrome-h: 106px;
}
@media (max-width: 900px) {
  .us-hero-section {
    padding: clamp(18px, 3vh, 36px) 16px;
  }
}
@media (max-width: 768px) {
  .us-hero-section {
    padding: 12px 16px 20px;
  }
}
.us-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* --- Hero split layout -------------------------------------------------
   Without media the hero keeps its original single centred column, so the
   .has-media class is what switches the layout on. Nothing changes for a
   site that has not chosen an image or video. */

/* .us-hero-inner caps at 900px, which would have quietly held the split hero
   to 900px however wide the grid asked to be. Released only when split. */
.us-hero-inner.is-split {
  max-width: none;
}

.us-hero-grid.has-media {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Fluid up to the same container width every other section uses, then
     centred, so the hero never runs edge to edge on an ultrawide monitor
     nor sits wider than the content below it. */
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin: 0 auto;

  /* No side padding here: .us-hero-section already applies --gutter, and
     doubling it would inset the copy twice on laptops. border-box is
     inherited from .us-home-wrapper but declared so a future wrapper change
     cannot let padding widen the box. */
  box-sizing: border-box;

  /* Breathing room that grows with the viewport but stops at 40px. */
  gap: min(4vw, 40px);

  text-align: left;
}

/* flex-basis 0 rather than 50%: with border-box padding and a gap, a 50%
   basis plus the gap overflows the row in older flex implementations.
   min-width: 0 defeats flex's default min-width:auto, which is what makes
   long words and wide media blow out a flex column in every browser. */
.us-hero-grid.has-media > .us-hero-text-col,
.us-hero-grid.has-media > .us-hero-media-col {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

.us-hero-media-col img,
.us-hero-media-col video {
  display: block;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  max-height: var(--us-hero-media-max, calc(100vh - var(--us-chrome-h) - clamp(160px, 22vh, 220px)));
}

/* Tablets: keep the two columns but tighten the gutter before stacking. */
@media (max-width: 1024px) {
  .us-hero-grid.has-media {
    gap: min(3vw, 28px);
  }
}

@media (max-width: 768px) {
  .us-hero-grid.has-media {
    flex-direction: column;
    gap: 28px;
    /* The section already supplies the edge padding once stacked. */
    padding: 0;
    text-align: center;
    max-width: 640px;
  }
  /* Source order on phones: text column first, media below it. */
  .us-hero-grid.has-media > .us-hero-media-col {
    width: 100%;
  }
}
.us-social-proof-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: clamp(8px, 1.8vh, 20px);
  box-shadow: none;
  justify-content: center;
}
.us-hero-h1 {
  font-size: clamp(30px, min(4.4vw, 6.2vh), 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: clamp(8px, 1.6vh, 16px);
  color: var(--text);
  text-align: center;
}
.us-hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto clamp(12px, 2.4vh, 32px);
  line-height: 1.5;
  text-align: center;
}
.us-btn-hero {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 18px 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35);
  transition: all 0.25s ease;
}
.us-btn-hero:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.us-hero-guarantee-line {
  margin-top: clamp(6px, 1.4vh, 14px);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* CTA stack: button sized to its label and centred, guarantee centred
   directly beneath. */
.us-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.us-hero-cta .us-btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  /* 16px top/bottom; only very short windows (under ~840px tall) trim it
     toward 12px to keep the CTA above the fold. */
  padding: clamp(12px, 1.9vh, 16px) 48px;
}
.us-hero-cta .us-hero-guarantee-line {
  width: 100%;
  text-align: center;
}

/* "100% Original" line: centred under the CTA stack in both hero layouts,
   badge and text on one row that wraps cleanly on narrow screens. */
.us-hero-original-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.us-hero-original-badge {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .us-hero-original-line {
    margin-top: 12px;
    font-size: 12px;
    gap: 6px;
  }
  .us-hero-original-badge {
    height: 24px;
  }
}

/* Without media the hero is one centred column up to 900px wide. Holding the
   CTA to a 640px measure keeps a full-width button from stretching across
   the whole centred block. */
.us-hero-grid:not(.has-media) .us-hero-cta {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* --- Above the fold on phones: headline, CTA and media on screen together --- */
@media (max-width: 768px) {
  .us-hero-section {
    /* 58px mobile header plus a top bar that usually wraps to two lines. */
    --us-chrome-h: 120px;
  }
  .us-social-proof-pill {
    margin-bottom: 6px;
    font-size: 12px;
  }
  .us-hero-h1 {
    font-size: clamp(22px, min(7vw, 4.2vh), 30px);
    line-height: 1.08;
    margin-bottom: 8px;
  }
  .us-hero-sub {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .us-hero-cta .us-btn-hero {
    font-size: 16px;
    padding: 12px 36px;
  }
  .us-hero-guarantee-line {
    margin-top: 6px;
    font-size: 12px;
  }
  .us-hero-grid.has-media {
    gap: 12px;
  }
  /* Phones: no fold cap on the media. Capping its height to what was left
     under the CTA shrank it to a thumbnail once the subtitle grew, so it now
     takes a fixed, readable width and its natural height. */
  .us-hero-media-col img,
  .us-hero-media-col video {
    width: 100%;
    max-width: 350px;
    height: auto;
    max-height: none;
    margin: 0 auto;
  }
}

/* Small-viewport units where supported: 100svh excludes the mobile browser's
   toolbars, so the cap matches what is actually on screen at load. Kept in
   its own @supports block because an unknown unit inside a var() fallback
   would invalidate the whole declaration instead of falling back. */
@supports (height: 100svh) {
  .us-hero-media-col img,
  .us-hero-media-col video {
    max-height: var(--us-hero-media-max, calc(100svh - var(--us-chrome-h) - clamp(160px, 22vh, 220px)));
  }
  /* The desktop cap above sits in @supports, so it is re-cleared for phones. */
  @media (max-width: 768px) {
    .us-hero-media-col img,
    .us-hero-media-col video {
      max-height: none;
    }
  }
}
/* --- 2. Bestsellers 4-Card Grid --- */
/* --- Section Header: Single-Line Title + Right-Aligned Link --- */
.us-bestsellers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
.us-bestsellers-header > div {
  min-width: 0;
}
.us-bestsellers-title {
  font-size: clamp(22px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.us-all-link {
  flex-shrink: 0;
  align-self: flex-end;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.us-all-link .us-icon {
  width: 15px;
  height: 15px;
}

/* Shop / taxonomy pagination arrows (home.css is enqueued on archives too). */
.page-numbers .us-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .us-bestsellers-header {
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .us-bestsellers-title {
    font-size: clamp(18px, 5vw, 24px);
  }
  /* Hide the long descriptive subtext so the row stays on one line */
  .us-bestsellers-header > div > p {
    display: none;
  }
  .us-all-link {
    font-size: 12px;
  }
}
.us-bestseller-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* 2 Products per row on Mobile & Tablet */
@media (max-width: 1024px) {
  .us-bestseller-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* Mobile Adjustments (2 columns) */
@media (max-width: 600px) {
  .us-bestseller-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .us-bcard {
    padding: 10px !important;
  }
  .us-bcard-img {
    height: 115px !important;
    margin: 14px 0 6px !important;
  }
  .us-bcard-title {
    font-size: 13px !important;
    min-height: 34px !important;
  }
  .us-bcard-price {
    font-size: 14px !important;
  }
  .us-bcard-compare {
    font-size: 12px;
  }
  .us-bcard-label {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    font-size: 8.5px;
    padding: 3px 7px;
    letter-spacing: 0.02em;
  }
  .us-btn-bcard {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

/* --- Product Card Base & Image Containment --- */
.us-bcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.us-bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-loud);
}

.us-bcard-img {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0 10px;
  overflow: hidden;
  position: relative;
}

.us-bcard-img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.us-bcard-img img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

.us-bcard-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--text);
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.us-bcard-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.us-bcard-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
/* Crossed-out regular price, shown before the current price when on sale. */
.us-bcard-compare {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-light);
  text-decoration: line-through;
}
/* Optional per-product corner label, e.g. BESTSELLER, over the photo. */
.us-bcard-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(24, 21, 18, 0.15);
  box-sizing: border-box;
}
.us-bcard-label.is-red    { background: #DC2626; }
.us-bcard-label.is-purple { background: #7C3AED; }
.us-bcard-label.is-amber  { background: var(--accent-dark); }
.us-bcard-label.is-teal   { background: #0D9488; }
.us-bcard-label.is-pink   { background: #DB2777; }

.us-btn-bcard {
  width: 100%;
  box-sizing: border-box;
  padding: 11px;
  border: 1.5px solid var(--text);
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
}
.us-btn-bcard:hover {
  background: var(--text);
  color: #FFFFFF;
}