/* ---- The Dumb Store Widget.html line 11 ---- */
/* max-width: 2000px + 4vw padding matches the homepage / clubhouse /
   ADUT / signup widgets so the grid sits at the same visual position
   on wide displays. Was max-width: 1400px with no horizontal padding,
   which made the catalog look narrower than the other widgets and
   left the grid edges floating without a defined gutter. */
#ds-outer { max-width: 2000px; margin: 0 auto; width: 100%; padding: 0 4vw; box-sizing: border-box; }
#ds-header { margin-bottom: 0; }
/* Header padding: vertical kept, horizontal dropped (the parent's
   4vw already provides it). */
#ds-header-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; gap: 24px; }
#ds-header-top picture { display: block; flex: 0 0 50%; min-width: 0; }
#ds-logo { width: 100%; max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; }
#ds-controls { flex: 0 0 50%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
#ds-search-sort-row { display: flex; align-items: center; gap: 10px; width: 100%; }
#ds-search-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
#ds-search {
  width: 100%; padding: 10px 16px 10px 38px; font-size: 13px; font-family: 'Poppins', sans-serif;
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: 20px; box-sizing: border-box;
  background: rgba(255,255,255,0.06); color: white; transition: border-color 0.18s, background 0.18s;
}
#ds-search::placeholder { color: rgba(255,255,255,0.35); }
#ds-search:focus { outline: none; border-color: rgba(247,94,28,0.6); background: rgba(247,94,28,0.06); }
#ds-sort {
  padding: 10px 16px; font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 500;
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: 20px; background: rgba(255,255,255,0.06);
  color: white; cursor: pointer; transition: border-color 0.18s, background 0.18s; white-space: nowrap;
  appearance: none; -webkit-appearance: none;
}
#ds-sort:hover { border-color: rgba(247,94,28,0.5); background: rgba(247,94,28,0.08); }
#ds-sort:focus { outline: none; border-color: rgba(247,94,28,0.6); }
#ds-sort option { background: #1a1a1a; color: white; }

/* No horizontal padding here -- the parent #ds-outer's 4vw padding
   provides it. Was 0 28px which doubled-up with the (now 4vw)
   outer padding and pushed the filter pills inward more than the
   logo and search bar above. */
#ds-header-bottom { padding: 0; }
#ds-filter-track-wrap {
  display: flex; justify-content: center; overflow: visible;
}
#ds-filter-track-wrap::-webkit-scrollbar { display: none; }
#ds-filter-track { display: flex; align-items: center; white-space: nowrap; max-width: 100%; padding: 8px 0; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ds-filter-link {
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,0.4); cursor: pointer; transition: color 0.15s;
  padding: 5px 10px; border-radius: 20px; white-space: nowrap;
  text-decoration: none !important;
}
.ds-filter-link:hover { color: rgba(255,255,255,0.85); }
.ds-filter-link.ds-active { color: #F75E1C; font-weight: 600; background: rgba(247,94,28,0.1); }
.ds-filter-sep { color: rgba(255,255,255,0.12); font-size: 12px; padding: 0 1px; pointer-events: none; user-select: none; }

/* Brands dropdown */
.ds-brands-wrap { position: relative; display: inline-flex; align-items: center; }
#ds-brands-btn { display: flex; align-items: center; gap: 4px; }
#ds-brands-arrow { font-size: 9px; transition: transform 0.2s; pointer-events: none; }
.ds-brands-open #ds-brands-arrow { transform: rotate(180deg); }
#ds-brands-menu {
  display: none; position: fixed;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
  padding: 8px; min-width: 260px; z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.8);
  flex-direction: column; gap: 2px;
  color: rgba(255,255,255,0.7) !important;
}
.ds-brands-open #ds-brands-menu { display: flex; }
.ds-brand-link {
  font-family: 'Poppins', sans-serif !important; font-size: 13px !important; font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important; cursor: pointer; padding: 8px 12px;
  border-radius: 8px; transition: color 0.15s, background 0.15s; white-space: nowrap;
}
.ds-brand-link:hover { color: white !important; background: rgba(255,255,255,0.06); }
.ds-brand-link.ds-brand-active { color: #F75E1C !important; background: rgba(247,94,28,0.1); }

#ds-mobile-filter-wrap { display: none; flex-direction: column; gap: 8px; width: 100%; }
#ds-mobile-category-select, #ds-mobile-brand-select {
  width: 100%; padding: 10px 36px 10px 16px; font-size: 14px; font-family: 'Poppins', sans-serif;
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: 20px; background: rgba(255,255,255,0.06);
  color: white; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; box-sizing: border-box;
}
#ds-mobile-category-select:focus, #ds-mobile-brand-select:focus { outline: none; border-color: rgba(247,94,28,0.6); }
#ds-mobile-category-select option, #ds-mobile-brand-select option { background: #1a1a1a; }

/* Loading: skeleton tiles populate the grid in place of the products
   while we fetch. They sit in #ds-grid (using its existing grid
   layout) so the page geometry matches what users will see when the
   real products arrive -- no layout shift on swap, no spinner flash.
   The shimmer animation is the standard "moving highlight band over
   a darker base" pattern. */
.ds-skel {
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(247,94,28,0.12);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-skel-thumb {
  width: 100%; padding-bottom: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: dsShimmer 1.6s linear infinite;
}
.ds-skel-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ds-skel-line {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: dsShimmer 1.6s linear infinite;
}
.ds-skel-line.cat   { width: 30%; height: 8px; }
.ds-skel-line.title { width: 85%; height: 14px; margin-top: 2px; }
.ds-skel-line.title2 { width: 65%; height: 14px; }
.ds-skel-line.price { width: 35%; height: 12px; margin-top: 4px; }
@keyframes dsShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Legacy #ds-loading container kept as a hidden host for the
   loading-progress text (used by the multi-category fetch flow to
   show "Loading products... (3/8)"). The spinner itself is gone. */
#ds-loading { display: none; }
#ds-loading-text {
  display: none; text-align: center; padding: 12px 0;
  color: rgba(255,255,255,0.4);
  font-family: 'Poppins', sans-serif; font-size: 13px;
}
#ds-loading.visible #ds-loading-text { display: block; }

#ds-empty { display: none; text-align: center; padding: 60px 0; color: rgba(255,255,255,0.4); font-family: 'Poppins', sans-serif; font-size: 14px; }
#ds-end-message { display: none; text-align: center; padding: 40px 0; color: rgba(255,255,255,0.3); font-family: 'Poppins', sans-serif; font-size: 14px; }

/* (Removed: .ds-section-heading -- the Featured/Latest section
   split was eliminated in favor of a single sorted product list.) */

/* Grid -- responsive column ladder:
     ≥ 1500px: 6 columns (cards ~270-340px on a 1500-2000px viewport)
     ≥ 1200px: 5 columns (cards ~225-290px)
     ≥  900px: 4 columns (cards ~205-280px)
     ≥  600px: 3 columns (cards ~180-290px)
     <  600px: 2 columns (cards ~170-290px on phones)
   Default in the rule below is 6, then min-width queries downscale.
   Using mobile-first (min-width) avoids the cascading-overrides
   problem where multiple max-width queries can match at once. */
#ds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* Top padding gives the filter row breathing room above the
     first row of tiles. Bottom stays small since #ds-end-message
     handles the visual end-of-list cushion. */
  padding: 28px 0 8px;
}
@media (min-width:  600px) { #ds-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width:  900px) { #ds-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1200px) { #ds-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1500px) { #ds-grid { grid-template-columns: repeat(6, 1fr); } }

/* Cards */
.ds-card {
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(247,94,28,0.2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none !important;
  color: white;
  position: relative;
}
.ds-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  border-color: rgba(247,94,28,0.55);
  text-decoration: none !important;
  color: white;
}

.ds-thumb {
  position: relative; width: 100%; padding-bottom: 100%;
  overflow: hidden; background: rgba(0,0,0,0.3); flex-shrink: 0;
}
.ds-thumb img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important; display: block !important;
}
/* Note: the image-scale-on-hover effect was removed deliberately. It
   was creating a "pulsate" feedback loop: the .ds-card:hover lift
   (translateY -3px) plus the image scale could cause the cursor to
   slip outside and re-enter the card's hit area on near-edge hover,
   firing mouseover/mouseout repeatedly. The card lift alone is a
   strong enough hover affordance. */

.ds-soldout {
  position: absolute; top: 12px; right: 12px;
  background: #dc3545; color: white;
  padding: 5px 10px; border-radius: 10px;
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; z-index: 3; border: 1px solid rgba(255,255,255,0.3);
}

.ds-info {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.ds-cat {
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 0;
}
.ds-title {
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: -0.2px; line-height: 1.35; color: white; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-price {
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700;
  color: #F75E1C; margin: 4px 0 0;
}
.ds-price-sale {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700;
  color: #F75E1C; margin: 4px 0 0;
}
.ds-price-original {
  text-decoration: line-through; color: rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 400;
}
.ds-price-member {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700;
  color: #F75E1C; margin: 4px 0 0;
}
.ds-price-member .ds-price-was {
  text-decoration: line-through; color: rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 400;
}
.ds-member-note {
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: #F75E1C; margin: 4px 0 0;
}

/* Sale promo banner — matches the Dumb Deals Showcase hero: solid red→orange
   gradient, shimmer sweep, big Barlow Condensed countdown, dark code pill. */
.ds-promo-banner {
  position: relative;
  overflow: hidden;
  display: block;
  /* Default look when the deal carries no background image. A deal's bgImage is
     applied inline by the script below and paints over this. */
  background: linear-gradient(135deg, #7a1414, #b3261e 45%, #f65e1b);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  margin: 16px auto 18px;
  max-width: 860px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  color: #f6efe5;
  min-height: 240px;
  container-type: inline-size;   /* so Kay + the reserved gap both scale to banner WIDTH */
}
/* Scrim that keeps the copy legible over whatever art the sale supplies. It is
   only painted when there IS a background image — over the plain gradient it
   would just mud the colour. With a character it fades out before the cutout so
   the character stays bright; without one it is an even wash. */
.ds-promo-banner.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12,17,12,0.9) 0%, rgba(12,17,12,0.78) 55%, rgba(12,17,12,0.62) 100%);
}
.ds-promo-banner.has-bg.has-char::before {
  background: linear-gradient(90deg, rgba(12,17,12,0.93) 0%, rgba(12,17,12,0.82) 44%, rgba(12,17,12,0.38) 66%, rgba(12,17,12,0) 86%);
}
/* countdown/info column on the left */
.ds-promo-info {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* Copy column is CENTRED (2026-08-20, Chris) — eyebrow, headline, caption,
     countdown, CTA and sub-line all sit on the same axis. */
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
  padding: 26px 34px;
  min-height: 240px;
}
/* Reserve the right-hand column only when this sale actually has a character. */
.ds-promo-banner.has-char .ds-promo-info { padding-right: 52cqw; }
/* The sale's character cutout — sized to the banner WIDTH so it never overruns
   the copy, biased downward so the crop takes the body, not the face. */
.ds-promo-char {
  position: absolute;
  right: 0;
  bottom: -9%;
  width: 50cqw;
  height: auto;
  z-index: 2;
  filter: drop-shadow(-16px 8px 20px rgba(0,0,0,0.32));
  pointer-events: none;
  user-select: none;
}
@keyframes dsPromoShine {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
.ds-promo-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f65e1b;
  opacity: 1;
}
.ds-promo-headline {
  font-family: 'Barlow Condensed', 'Poppins', sans-serif;
  font-size: clamp(28px, 5.5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.ds-promo-headline strong { color: #fff; font-weight: 800; }
.ds-promo-cd-caption {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
  margin-bottom: -2px;
}
/* CTA reuses the .ds-promo-code chrome but is an <a>, so kill the
   underline and keep the value (the call to action) on one line. */
.ds-promo-cta { text-decoration: none !important; }
.ds-promo-cta .ds-promo-code-value { white-space: nowrap; }
.ds-promo-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 0.3px;
}
.ds-promo-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.ds-promo-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.ds-promo-cd-num {
  font-family: 'Barlow Condensed', 'Poppins', sans-serif;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-promo-cd-lbl {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.8;
  margin-top: 4px;
  font-weight: 600;
}
.ds-promo-cd-sep {
  font-family: 'Barlow Condensed', 'Poppins', sans-serif;
  font-size: clamp(24px, 5vw, 40px);
  color: #fff;
  opacity: 0.7;
  font-weight: 800;
  line-height: 1;
  align-self: flex-start;
  padding-top: 2px;
}
.ds-promo-code {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #120a05;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.ds-promo-code:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}
.ds-promo-code:active { transform: translateY(0); }
.ds-promo-code.copied { background: #0c3; color: #031; }
.ds-promo-code-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.7;
}
.ds-promo-code-value {
  font-family: 'Barlow Condensed', 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #f65e1b;
  font-variant-numeric: tabular-nums;
}
.ds-promo-code.copied .ds-promo-code-value { color: #fff; }
.ds-promo-code-action {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}
@media (max-width: 600px) {
  /* Phones get ONE centred column (2026-08-22, Chris) — same treatment as the
     Video widget and the Deals hero. The .has-char 52cqw gutter is dropped so
     the copy stays on the banner's centre axis; the cutout falls behind it
     under a bottom-up scrim, and the pill is a full-width row that can't
     overflow the banner edges. */
  .ds-promo-banner { padding: 0; }
  .ds-promo-info,
  .ds-promo-banner.has-char .ds-promo-info { padding: 22px 18px; align-items: center; text-align: center; gap: 9px; }
  .ds-promo-banner.has-bg::before,
  .ds-promo-banner.has-bg.has-char::before { background: linear-gradient(to top,
    rgba(10,14,10,0.96) 0%, rgba(10,14,10,0.92) 44%, rgba(10,14,10,0.8) 70%, rgba(10,14,10,0.52) 100%); }
  .ds-promo-char { width: 64cqw; right: -8%; bottom: -4%;
    filter: drop-shadow(-16px 8px 20px rgba(0,0,0,0.32)) brightness(0.58); }
  .ds-promo-eyebrow { white-space: nowrap; font-size: clamp(9px,3vw,13px); letter-spacing: 1px; }
  .ds-promo-headline { font-size: clamp(30px,9vw,46px); }
  .ds-promo-countdown { gap: 20px; }
  .ds-promo-cd-unit { min-width: 0; flex: 0 0 auto; }
  .ds-promo-cd-num { font-size: clamp(26px,10.5vw,42px); }
  .ds-promo-cd-sep { display: none; }
  .ds-promo-cd-lbl { font-size: 9px; margin-top: 3px; }
  /* Pill stacks: label / code / action on one centre axis, so a long promo
     code can never push the side labels off the banner. */
  .ds-promo-code { display: flex; flex-direction: column; width: 100%; max-width: 100%;
    box-sizing: border-box; align-items: center; justify-content: center; gap: 3px; padding: 11px 16px; }
  .ds-promo-code-label, .ds-promo-code-action { font-size: 10px; }
  .ds-promo-code-value { font-size: 21px; }
  /* The pre-sale CTA is nowrap at desktop; on a phone let it wrap instead of
     running off the pill. */
  .ds-promo-cta .ds-promo-code-value { white-space: normal; }
}

/* Banner above the grid: a single CTA strip that shows either
   "your discount applies at checkout" (members) or "join and save"
   (everyone else). Hidden by default; the discount-tier script flips
   it on once it knows which message to show. */
#ds-member-banner {
  display: none;
  margin: 12px 0 18px;
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(247,94,28,0.12);
  border: 1px solid rgba(247,94,28,0.35);
  text-align: center;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.2px; color: #fff;
}
#ds-member-banner.is-visible { display: block; }
#ds-member-banner a {
  color: #F75E1C; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(247,94,28,0.6);
}
#ds-member-banner a:hover { border-bottom-color: #F75E1C; }

/* Responsive (header layout only -- grid breakpoints are defined
   alongside #ds-grid above using a mobile-first min-width ladder) */
@media (max-width: 768px) {
  #ds-header-top { flex-direction: column; align-items: center; padding: 16px 0; gap: 16px; }
  #ds-header-top picture { flex: none !important; width: 240px !important; display: block; }
  #ds-logo { display: block !important; width: 240px !important; max-width: 240px !important; margin: 0 auto !important; }
  #ds-controls { width: 100%; align-items: stretch; }
  #ds-search-sort-row { width: 100%; gap: 8px; }
  #ds-search-wrap { flex: 1; min-width: 0; }
  #ds-search { width: 100%; max-width: none; font-size: 16px; }
  #ds-sort { flex-shrink: 0; }
  #ds-header-bottom { padding: 0 0 6px; display: flex; justify-content: stretch; width: 100%; }
  #ds-filter-track-wrap { display: none; }
  #ds-mobile-filter-wrap { display: flex; }
}

/* Back to top */
#ds-back-to-top {
  position: fixed; bottom: 30px; right: 30px;
  background: #F75E1C; color: white; border: none;
  border-radius: 50%; width: 56px; height: 56px;
  font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(247,94,28,0.4);
  transition: opacity 0.2s, transform 0.2s; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; opacity: 0; pointer-events: none;
}
#ds-back-to-top.visible { opacity: 1; pointer-events: auto; }
#ds-back-to-top:hover { transform: translateY(-4px); box-shadow: 0 6px 25px rgba(247,94,28,0.6); }
#ds-back-text { font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 700; margin-top: 2px; }