/* ---- Dumb Video Widget.html line 13 ---- */
#dvs-outer { max-width: 2000px; margin: 0 auto; width: 100%; padding: 16px 4vw 32px; box-sizing: border-box; }
#dvs-header { margin-bottom: 0; }
#dvs-header-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; gap: 24px; }
#dvs-header-top picture { display: block; flex: 0 0 50%; min-width: 0; }
#dvs-logo { width: 100%; height: auto; display: block; }
#dvs-controls { flex: 0 0 50%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
#dvs-search-sort-row { display: flex; align-items: center; gap: 10px; width: 100%; }
#dvs-search-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
#dvs-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;
}
#dvs-search::placeholder { color: rgba(255,255,255,0.35); }
#dvs-search:focus { outline: none; border-color: rgba(247,94,28,0.6); background: rgba(247,94,28,0.06); }
#dvs-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;
}
#dvs-sort:hover { border-color: rgba(247,94,28,0.5); background: rgba(247,94,28,0.08); }
#dvs-sort:focus { outline: none; border-color: rgba(247,94,28,0.6); }
#dvs-sort option { background: #1a1a1a; color: white; }

#dvs-header-bottom { padding: 0 0 16px; }
#dvs-filter-track-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
  display: flex; justify-content: center;
}
#dvs-filter-track-wrap::-webkit-scrollbar { display: none; }
#dvs-filter-track { display: flex; align-items: center; white-space: nowrap; width: max-content; padding: 8px 0; margin: 0 auto; }
.dvs-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; }
.dvs-filter-link:hover { color: rgba(255,255,255,0.85); }
.dvs-filter-link.dvs-active { color: #F75E1C; font-weight: 600; background: rgba(247,94,28,0.1); }
.dvs-filter-sep { color: rgba(255,255,255,0.12); font-size: 12px; padding: 0 1px; pointer-events: none; user-select: none; }
#dvs-mobile-filter-wrap { display: none; }

/* Sale promo banner — matches the Dumb Deals Showcase hero: solid red→orange
   gradient, shimmer sweep, big Barlow Condensed countdown, dark code pill. */
.dvs-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: 8px auto 24px;
  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 the cutout + reserved gap scale to banner WIDTH */
}
/* Scrim that keeps the copy legible over whatever art the sale supplies. 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. */
.dvs-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%);
}
.dvs-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 */
.dvs-promo-info {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  /* 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; gap: 11px; text-align: center;
  padding: 26px 34px;
  min-height: 240px;
}
/* Reserve the right-hand column only when this sale actually has a character. */
.dvs-promo-banner.has-char .dvs-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. */
.dvs-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;
}
.dvs-promo-eyebrow { font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#f65e1b; opacity:1; }
.dvs-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; }
.dvs-promo-headline strong { color:#fff; font-weight:800; }
.dvs-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 .dvs-promo-code chrome but is an <a>, so kill the
   underline and keep the call to action on one line. */
.dvs-promo-cta { text-decoration:none !important; }
.dvs-promo-cta .dvs-promo-code-value { white-space:nowrap; }
.dvs-promo-sub { font-family:'Poppins',sans-serif; font-size:12px; color:#fff; opacity:0.9; letter-spacing:0.3px; }
.dvs-promo-countdown { display:flex; align-items:flex-start; justify-content:center; gap:6px; }
.dvs-promo-cd-unit { display:flex; flex-direction:column; align-items:center; min-width:60px; }
.dvs-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; }
.dvs-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; }
.dvs-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; }
.dvs-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;
}
.dvs-promo-code:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,0.4); }
.dvs-promo-code:active { transform:translateY(0); }
.dvs-promo-code.copied { background:#0c3; color:#031; }
.dvs-promo-code-label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; opacity:0.7; }
.dvs-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; }
.dvs-promo-code.copied .dvs-promo-code-value { color:#fff; }
.dvs-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). The old rule reserved a
     52cqw cutout gutter on every sale — character or not — which shoved the copy
     off-axis and pushed the code pill past both edges. Now: symmetric padding,
     the cutout (when there is one) sits behind the copy under a bottom-up scrim,
     and the pill is a full-width flex row so it can never overflow. */
  .dvs-promo-info,
  .dvs-promo-banner.has-char .dvs-promo-info { padding:22px 18px; align-items:center; text-align:center; gap:9px; }
  .dvs-promo-banner.has-bg::before,
  .dvs-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%); }
  .dvs-promo-char { width:64cqw; right:-8%; bottom:-4%;
    filter:drop-shadow(-16px 8px 20px rgba(0,0,0,0.32)) brightness(0.58); }
  /* keep the sale name on one line, scaling to fit */
  .dvs-promo-eyebrow { white-space:nowrap; font-size:clamp(9px,3vw,13px); letter-spacing:1px; }
  .dvs-promo-headline { font-size:clamp(30px,9vw,46px); }
  .dvs-promo-countdown { gap:20px; }
  .dvs-promo-cd-unit { min-width:0; flex:0 0 auto; }
  .dvs-promo-cd-num { font-size:clamp(26px,10.5vw,42px); }
  .dvs-promo-cd-sep { display:none; }
  .dvs-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. */
  .dvs-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; }
  .dvs-promo-code-label, .dvs-promo-code-action { font-size:10px; }
  .dvs-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. */
  .dvs-promo-cta .dvs-promo-code-value { white-space: normal; }
}

/* Loading */
#dvs-loading { display: none; }
#dvs-empty { display: none; text-align: center; padding: 60px 0; color: rgba(255,255,255,0.4); font-family: 'Poppins', sans-serif; font-size: 14px; }

/* Skeleton tiles */
.dvs-skel {
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(247,94,28,0.12);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2 / 3;
}
.dvs-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: dvsShimmer 1.4s ease-in-out infinite;
}
@keyframes dvsShimmer { 100% { transform: translateX(100%); } }

/* Grid */
#dvs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0;
}

/* Cards */
.dvs-card {
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(247,94,28,0.2);
  border-radius: 16px;
  overflow: hidden;
  display: block;
  text-decoration: none !important;
  color: white;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dvs-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;
}

.dvs-thumb {
  position: relative; width: 100%;
  overflow: hidden; background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
}
.dvs-thumb img {
  width: 100% !important; height: auto !important;
  display: block !important; border-radius: 0 !important;
  transition: transform 0.3s ease;
}
.dvs-card:hover .dvs-thumb img { transform: scale(1.04); }

/* "Purchased" badge — shown on cards the signed-in member owns via a linked
   Gumroad purchase. Those cards link to the video's /v/ page (watch in the
   Clubhouse) instead of the store/checkout page. */
.dvs-thumb .dvs-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: rgba(247,94,28,0.94);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  border-radius: 999px; line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.dvs-thumb .dvs-badge svg { width: 11px; height: 11px; display: block; }

/* Responsive */
@media (max-width: 1500px) { #dvs-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { #dvs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { #dvs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { #dvs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px)  { #dvs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

@media (max-width: 768px) {
  #dvs-header-top { flex-direction: column; align-items: center; padding: 16px 0; gap: 16px; }
  #dvs-header-top picture { flex: none !important; width: 240px !important; display: block; }
  #dvs-logo { display: block !important; width: 240px !important; max-width: 240px !important; margin: 0 auto !important; }
  #dvs-controls { width: 100%; align-items: stretch; }
  #dvs-search-sort-row { width: 100%; gap: 8px; }
  #dvs-search-wrap { flex: 1; min-width: 0; }
  #dvs-search { width: 100%; max-width: none; font-size: 16px; }
  #dvs-sort { flex-shrink: 0; }
  #dvs-header-bottom { padding: 0 0 16px; display: flex; justify-content: stretch; width: 100%; }
  #dvs-filter-track-wrap { display: none; }
  #dvs-mobile-filter-wrap { display: flex; width: 100%; }
  #dvs-mobile-filter-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;
  }
  #dvs-mobile-filter-select:focus { outline: none; border-color: rgba(247,94,28,0.6); }
}