/* MSB Home Showcase [msb_home_showcase] — Custom Section Design v1.8.0 */
.csdsc{--csdsc-accent:#FF9418;--csdsc-accent-dark:#e07d06;--csdsc-ink:#111827;--csdsc-muted:#6b7280;--csdsc-line:#eceef1;--csdsc-soft:#f6f7f9;--csdsc-media-h:176px;position:relative;width:100%;max-width:90%;margin:0 auto;padding:8px 0;box-sizing:border-box;font-family:inherit;color:var(--csdsc-ink);line-height:1.4}
.csdsc *,.csdsc *::before,.csdsc *::after{box-sizing:border-box}

/* Intro */
.csdsc__intro{text-align:center;max-width:720px;margin:0 auto 30px}
.csdsc__eyebrow{display:inline-block;margin:0 0 10px;padding:6px 14px;border-radius:999px;background:#fdeed9;border:1px solid rgba(255,148,24,.25);color:#b45f06;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.csdsc__heading{margin:0 0 10px;font-family:inherit;font-size:clamp(26px,3vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--csdsc-ink)}
.csdsc__heading em{font-style:normal;color:var(--csdsc-accent-dark)}
.csdsc__subheading{margin:0;font-size:15px;color:var(--csdsc-muted)}

/* Grid */
.csdsc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}

/* Card */
.csdsc-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--csdsc-line);border-radius:20px;box-shadow:0 10px 30px -18px rgba(17,24,39,.25);overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease}
.csdsc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--csdsc-accent),var(--csdsc-accent-dark))}
.csdsc-card--helmet::before{background:linear-gradient(90deg,#1f2937,#4b5563)}
.csdsc-card--book::before{background:linear-gradient(90deg,#0056b3,#3b82f6)}
.csdsc-card:hover{border-color:rgba(255,148,24,.45);box-shadow:0 22px 40px -22px rgba(17,24,39,.35);transform:translateY(-3px)}

.csdsc-card__head{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.csdsc-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#fff4e6;color:var(--csdsc-accent-dark)}
.csdsc-card--helmet .csdsc-card__icon{background:#f1f2f4;color:#1f2937}
.csdsc-card--book .csdsc-card__icon{background:#eaf2fd;color:#0056b3}
.csdsc-card__titles{flex:1;min-width:0}
.csdsc-card__title{margin:0;font-family:inherit;font-size:17px;line-height:1.25;font-weight:700;color:var(--csdsc-ink)}
.csdsc-card__sub{margin:2px 0 0;font-size:13px;color:var(--csdsc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csdsc-card__nav{flex:none;display:flex;gap:6px}
.csdsc-nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:1px solid var(--csdsc-line);border-radius:50%;background:#fff;color:var(--csdsc-ink);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.csdsc-nav:hover{background:var(--csdsc-accent);border-color:var(--csdsc-accent);color:#fff}
.csdsc-nav svg{width:16px;height:16px}

/* Slider */
.csdsc-viewport{position:relative;flex:1;overflow:hidden;touch-action:pan-y;padding:0 20px}
.csdsc-track{position:relative;display:flex;gap:20px;height:100%;transition:transform .55s cubic-bezier(.22,.9,.28,1);will-change:transform}
.csdsc.is-dragging .csdsc-track{transition:none}
.csdsc-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;padding:0 0 4px;-webkit-user-select:none;user-select:none}
.csdsc-slide img{-webkit-user-drag:none}

.csdsc-media{position:relative;display:flex;align-items:center;justify-content:center;height:var(--csdsc-media-h);border-radius:14px;background:var(--csdsc-soft);overflow:hidden;text-decoration:none}
.csdsc-media img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.csdsc-body{display:flex;flex-direction:column;flex:1;padding:14px 2px 0}

/* Buttons */
.csdsc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:auto;padding:11px 16px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffa62b,var(--csdsc-accent) 45%,var(--csdsc-accent-dark));color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.csdsc-btn:hover,.csdsc-btn:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(255,122,0,.75)}
.csdsc-btn svg{width:16px;height:16px}
.csdsc-btn--ghost{background:#ed870ecc;color:#fff;cursor:default;border:1px dashed #d1d5db}
.csdsc-btn--ghost:hover{transform:none;box-shadow:none;color:#fff}
.csdsc-btn--link{justify-content:flex-start;width:auto;min-height:0;padding:0;background:none;color:var(--csdsc-accent-dark);font-size:14px}
.csdsc-btn--link:hover,.csdsc-btn--link:focus-visible{color:var(--csdsc-accent-dark);box-shadow:none;transform:none;text-decoration:underline}
.csdsc-btn--link:hover svg{transform:translateX(3px)}
.csdsc-btn--link svg{transition:transform .2s ease}

/* Footer */
.csdsc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:12px 20px 16px}
.csdsc-dots{display:flex;align-items:center;gap:6px}
.csdsc-dot{position:relative;width:8px;height:8px;margin:0;padding:0;border:0;border-radius:999px;background:#d8dbe0;cursor:pointer;overflow:hidden;transition:width .3s ease,background .3s ease}
.csdsc-dot::before{content:"";position:absolute;inset:-8px}
.csdsc-dot.is-active{width:26px;background:#fde3c2}
.csdsc-dot.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--csdsc-accent);transform-origin:left center}
.csdsc.is-playing .csdsc-card:not(.is-paused) .csdsc-dot.is-active::after{animation:csdsc-fill var(--csdsc-int,5s) linear var(--csdsc-wait,0s) both}
@keyframes csdsc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.csdsc-more{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--csdsc-ink);text-decoration:none;white-space:nowrap}
.csdsc-more svg{width:15px;height:15px;transition:transform .2s ease}
.csdsc-more:hover,.csdsc-more:focus-visible{color:var(--csdsc-accent-dark)}
.csdsc-more:hover svg{transform:translateX(3px)}

/* ---------- Card 1 : plans ---------- */
.csdsc-plan__media{background:#f4f6f8;background:linear-gradient(160deg,color-mix(in srgb,var(--plan) 14%,#fff),color-mix(in srgb,var(--plan) 4%,#fff));padding:30px 18px 10px}
.csdsc-plan__media img{height:120px;width:100%;transition:transform .4s ease}
.csdsc-card:hover .csdsc-plan__media img{transform:scale(1.04)}
.csdsc-plan__ribbon{position:absolute;left:12px;top:12px;padding:5px 12px;border-radius:999px;background:var(--plan);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.csdsc-plan__pop{position:absolute;right:12px;top:12px;padding:5px 10px;border-radius:999px;background:#fff;color:var(--plan);font-size:11px;font-weight:700;box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
.csdsc-plan__bikeicon{color:var(--plan)}
.csdsc-plan__bikeicon svg{width:80px;height:80px;stroke-width:1.4}
.csdsc-plan__tag{margin:0 0 2px;font-size:12.5px;font-weight:600;color:var(--csdsc-muted)}
.csdsc-plan__price{margin:0 0 10px;font-size:28px;line-height:1.1;font-weight:800;color:var(--plan)}
.csdsc-plan__price small{font-size:12px;font-weight:600;color:var(--csdsc-muted)}
.csdsc-plan__feats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.csdsc-plan__feats li{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 10px;border-radius:999px;background:var(--csdsc-soft);font-size:12.5px;font-weight:600;color:#374151}
.csdsc-plan__feats svg{width:14px;height:14px;color:var(--plan)}
.csdsc-btn--plan{background:var(--plan)}
.csdsc-btn--plan:hover,.csdsc-btn--plan:focus-visible{box-shadow:0 12px 22px -12px var(--plan);opacity:.95}

/* ---------- Card 2 : accessories ---------- */
.csdsc-acc__media{background:radial-gradient(circle at 50% 60%,#fff 0,#f1f2f4 70%)}
.csdsc-acc__media img{height:150px;width:100%}
.csdsc-helmet{width:72%;max-width:220px;height:auto;transition:transform .5s ease}
.csdsc-card:hover .csdsc-helmet{transform:rotate(-4deg) scale(1.04)}
.csdsc-acc.is-soon .csdsc-acc__media img,.csdsc-acc.is-soon .csdsc-helmet{filter:saturate(.9)}
.csdsc-soon{position:absolute;right:-34px;top:18px;z-index:2;width:140px;padding:5px 0;transform:rotate(45deg);background:linear-gradient(90deg,var(--csdsc-accent),var(--csdsc-accent-dark));color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center;text-transform:uppercase;box-shadow:0 4px 10px -4px rgba(140,55,0,.5)}
.csdsc-soon--out{background:#6b7280}
.csdsc-acc__name{margin:0 0 6px;font-family:inherit;font-size:17px;line-height:1.3;font-weight:700;color:var(--csdsc-ink)}
.csdsc-acc__name a{color:inherit;text-decoration:none}
.csdsc-acc__name a:hover{color:var(--csdsc-accent-dark)}
.csdsc-acc__note{display:flex;align-items:center;gap:6px;margin:0 0 14px;font-size:13px;color:var(--csdsc-muted)}
.csdsc-acc__note svg{width:15px;height:15px;color:var(--csdsc-accent-dark)}
.csdsc-acc__price{margin:0 0 14px;font-size:18px;font-weight:800;color:var(--csdsc-accent-dark)}
.csdsc-acc__price del{color:#9ca3af;font-weight:500;font-size:14px}
.csdsc-acc__price ins{text-decoration:none}

/* ---------- Card 3 : blog ---------- */
.csdsc-post__media{background:#e5e7eb}
.csdsc-post__media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;transition:transform .5s ease}
.csdsc-card:hover .csdsc-post__media img{transform:scale(1.05)}
.csdsc-post__ph{color:#9ca3af}
.csdsc-post__ph svg{width:56px;height:56px;stroke-width:1.4}
.csdsc-post__date{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--csdsc-ink);font-size:12px;font-weight:600}
.csdsc-post__date svg{width:13px;height:13px;color:var(--csdsc-accent-dark)}
.csdsc-post__title{margin:0 0 6px;font-family:inherit;font-size:16.5px;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csdsc-post__title a{color:var(--csdsc-ink);text-decoration:none}
.csdsc-post__title a:hover{color:var(--csdsc-accent-dark)}
.csdsc-post__excerpt{margin:0 0 12px;font-size:13.5px;color:var(--csdsc-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.csdsc-empty{align-items:center;justify-content:center;min-height:260px;color:var(--csdsc-muted);text-align:center}

/* Active-plan notice */
.csdsc-alert{margin:18px 0 0;padding:12px 16px;border-radius:12px;background:#fff3ea;border:1px solid #ea580c;color:#9a3412;font-size:14px;font-weight:500}
.csdsc-alert[hidden]{display:none}

/* Focus */
.csdsc a:focus-visible,.csdsc button:focus-visible{outline:3px solid var(--csdsc-ink);outline-offset:2px}

/* Tablet: 2 + 1 (blog card spans full width) */
@media (max-width:1024px){
  .csdsc{padding:8px 16px;max-width:95%;}
  .csdsc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .csdsc__grid > .csdsc-card:nth-child(3){grid-column:1 / -1}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-slide{flex-direction:row;gap:18px}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-media{flex:0 0 46%}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-body{padding-top:4px}
}
/* Mobile: stacked */
@media (max-width:767px){
  .csdsc{--csdsc-media-h:168px;padding:0px;max-width:100%;}
  .csdsc__intro{margin-bottom:22px}
  .csdsc__grid{grid-template-columns:1fr;gap:16px}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-slide{flex-direction:column;gap:0}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-media{flex:none}
  .csdsc__grid > .csdsc-card:nth-child(3) .csdsc-body{padding-top:14px}
  .csdsc-card__head{padding:18px 16px 12px}
  .csdsc-viewport{padding:0 16px}
  .csdsc-track{gap:16px}
  .csdsc-card__foot{padding:10px 16px 14px}
  .csdsc-card:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .csdsc-track,.csdsc-card,.csdsc-media img,.csdsc-helmet,.csdsc-btn{transition:none !important}
  .csdsc-dot.is-active::after{animation:none !important}
}

.csdsc-tnc{margin-left:auto;font-size:13px;font-weight:600;color:#6b7280;text-decoration:underline;cursor:pointer;white-space:nowrap}
.csdsc-tnc:hover,.csdsc-tnc:focus-visible{color:#ff6a00}
.csdsc-more + .csdsc-tnc{margin-left:12px}