.rfd-section, .rfd-section * {
  box-sizing: border-box;
}

.rfd-section {
  /* --rfd-bg-1 / --rfd-bg-2 are set inline per-instance from the color you
     pick in Settings (we auto-shade a darker second stop from it) — the
     fallback values here only apply if that inline style is missing for
     some reason. */
  background: linear-gradient(135deg, var(--rfd-bg-1, #FF6A3D) 0%, var(--rfd-bg-2, #E92E2E) 100%) !important;
  border-radius: 20px;
  padding: 22px 24px 26px;
  margin: 44px 0 !important;
  overflow: hidden;
}

/* "Uncheck background color" mode — a plain, clean white section with no
   color banner, just the product cards. Text switches to dark since it
   was designed to sit on a colored background. */
.rfd-section.rfd-plain {
  background: #ffffff !important;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.rfd-section.rfd-plain .rfd-flame { background: #FFF1E8 !important; }
.rfd-section.rfd-plain .rfd-title { color: #1A1A1A !important; }
.rfd-section.rfd-plain .rfd-subtitle { color: #6B7280 !important; }

/* Full-bleed edge-to-edge trick for use inside a normal, width-limited
   page/post/Elementor column. If your Elementor section already has its
   own "Stretch Section" option turned on, you can drop this by adding
   full_width="no" to the shortcode — [rangura_flash_deals full_width="no"] —
   since Elementor's own stretch does the same job more cleanly. Rounded
   corners are kept even at full width on purpose — they still show right
   at the edge of the browser window, which reads as a deliberate design
   choice rather than a mistake.

   This uses calc(50% - 50vw) margins instead of width:100vw +
   position:relative;left:50% — the more common version of this trick.
   width:100vw measures the FULL viewport including the vertical
   scrollbar's own width, which on many phones/browsers is a few pixels
   wider than the space content actually has, so the section quietly
   overflowed the right edge — that's what let the whole homepage be
   dragged/scrolled sideways on Chrome. calc(50% - 50vw) doesn't have
   that problem since it never sets an explicit width. */
.rfd-fullwidth {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw;
}

.rfd-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.rfd-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.rfd-flame {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.rfd-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff !important;
  line-height: 1.2;
}

.rfd-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: 2px;
}

.rfd-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px;
}

.rfd-card {
  background: #fff !important;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rfd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.rfd-card-img {
  width: 100%;
  height: 190px;
  padding: 10px;
  background: #F6F7F5 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* object-fit: contain (not cover) so the whole product photo always
   shows — nothing gets cropped off a tall or oddly-shaped product image,
   it just fits within the box with a little breathing room on the sides
   if its proportions don't match. */
.rfd-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

.rfd-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rfd-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rfd-card-rating { font-size: 11px; }
.rfd-card-rating .star-rating { font-size: 12px; color: #FFB400 !important; }
.rfd-card-rating .star-rating span { color: #FFB400 !important; }

.rfd-card-price {
  font-size: 15px;
  font-weight: 800;
  color: #1E8E3E !important;
}

.rfd-card-price del {
  font-weight: 400;
  font-size: 12px;
  color: #9AA0A6 !important;
  margin-right: 6px;
}

.rfd-card-price ins {
  text-decoration: none;
  color: #1E8E3E !important;
}

/* Phones: 3 per row instead of 6, everything a little tighter. */
@media (max-width: 768px) {
  .rfd-section { padding: 16px 14px 18px; border-radius: 14px; margin: 32px 0 !important; }
  .rfd-flame { width: 36px; height: 36px; font-size: 17px; }
  .rfd-title { font-size: 17px; }
  .rfd-subtitle { font-size: 11.5px; }
  .rfd-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .rfd-card-img { height: 130px; padding: 6px; }
  .rfd-card-body { padding: 7px 8px 9px; gap: 2px; }
  .rfd-card-name { font-size: 11px; }
  .rfd-card-price { font-size: 12.5px; }
  .rfd-card-price del { font-size: 10px; }
}