/* Coinable Shop Flightline v1.0.1: cinematic wide-screen / low-headroom presentation.
 * Scoped to the independent Shop. Flight Deck, app, products and checkout stay untouched.
 */
.cfs-shop {
  --cfs-gap: clamp(12px, 1.08vw, 21px);
  background:
    radial-gradient(ellipse 72% 36% at 48% -7%, rgba(45,99,195,.20), transparent 78%),
    radial-gradient(ellipse 45% 43% at 100% 54%, rgba(99,51,168,.075), transparent 79%),
    radial-gradient(ellipse 45% 43% at 0 53%, rgba(18,134,213,.085), transparent 79%),
    #070f1e;
  padding-bottom: 50px;
}
.cfs-shop__inner {
  width: 100%;
  max-width: 2700px;
  padding: 10px clamp(15px, 2.15vw, 58px) 0;
}
.cfs-hero {
  border: 1px solid #315184;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 42% 160% at 58% 51%, rgba(52,81,191,.16), transparent 70%),
    radial-gradient(ellipse 26% 95% at 102% 17%, rgba(130,51,207,.23), transparent 73%),
    linear-gradient(108deg,#081a34 0%,#091628 46%,#131737 100%);
  box-shadow: 0 16px 46px rgba(0,0,0,.27), 0 0 28px rgba(39,94,177,.10), inset 0 1px rgba(182,211,255,.10);
}
.cfs-hero::before { opacity: .19; }
.cfs-hero::after {
  content: ''; position: absolute; top: 0; left: 7%; right: 7%; height: 2px;
  background: linear-gradient(90deg, transparent, #26baff 25%, #7458ff 68%, #ffc24a 89%, transparent);
  box-shadow: 0 0 21px rgba(91,163,255,.7); pointer-events: none;
}
.cfs-hero__main {
  position: relative; z-index: 1;
  grid-template-columns: minmax(0,1.22fr) minmax(220px,.62fr) minmax(270px,.67fr);
  gap: clamp(13px,1.6vw,38px);
  padding: clamp(18px,1.65vw,34px) clamp(20px,2.15vw,48px);
  min-height: 290px;
}
.cfs-hero__copy { min-width: 0; }
.cfs-kicker { font-size: 12px; letter-spacing: .12em; color: #83d5ff !important; }
.cfs-live-dot { height: 8px; width: 8px; }
.cfs-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(34px,2.9vw,75px);
  line-height: 1.015; letter-spacing:-.048em;
  text-wrap: balance; max-width: 1000px;
  text-shadow: 0 8px 35px rgba(0,0,0,.16);
}
.cfs-hero h1 em {
  background: linear-gradient(103deg,#61bdfb 0%,#739bff 41%,#b676ff 83%,#ce94ff 100%);
  -webkit-background-clip: text; background-clip: text;
}
.cfs-hero__lead { font-size: clamp(14px,1vw,17px); line-height:1.51; color:#c9ddf3 !important; max-width:850px; }
.cfs-hero__stats { margin-top:16px; gap:10px 20px; }
.cfs-hero__stats span { border-color:#4f94d7; padding-left:10px; color:#c0cee7; font-size:11px; letter-spacing:.065em; }
.cfs-hero__stats strong { color:#f4fbff; font-size:16px; }
/* Product art is taken from a live, catalog-visible WooCommerce product. */
.cfs-hero__featured {
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:235px; height:100%;
  align-self:stretch; position:relative; isolation:isolate;
  background:radial-gradient(circle at 51% 45%,rgba(28,87,181,.34),rgba(21,31,74,.15) 51%,transparent 74%);
  border:1px solid rgba(99,141,220,.18); border-radius:18px;
  box-shadow:inset 0 0 38px rgba(4,10,36,.34);
  overflow:hidden;
}
.cfs-hero__featured:focus-visible { outline-offset:1px; }
.cfs-hero__featured-label {
  position:absolute; z-index:3; top:13px; left:15px; right:15px;
  display:flex; justify-content:space-between; gap:12px;
  font-size:11px; letter-spacing:.105em; color:#b5d9ff; font-weight:850;
}
.cfs-hero__featured-label span { color:#ffd576; }
.cfs-hero__orbit {
  position:absolute; z-index:-1; width:73%; aspect-ratio:1;
  left:50%; top:48%; transform:translate(-50%,-50%);
  pointer-events:none; border-radius:50%;
}
.cfs-hero__orbit--outer {
  width:95%; border:2px dashed rgba(85,150,255,.40);
  box-shadow:0 0 40px rgba(81,119,250,.13),inset 0 0 32px rgba(37,98,222,.12);
  animation:cfs-hero-spin 36s linear infinite;
}
.cfs-hero__orbit--inner {
  border:3px solid rgba(111,95,255,.40);
  outline:1px solid rgba(95,193,255,.18); outline-offset:10px;
  box-shadow:0 0 23px rgba(78,126,255,.30), inset 0 0 26px rgba(102,56,244,.26);
}
.cfs-hero__featured-image {
  position:relative; z-index:1; display:grid; place-items:center;
  width:min(64%,290px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  border:3px solid rgba(112,178,255,.34);
  box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 46px rgba(55,138,235,.20);
  background:radial-gradient(circle,#182a44,#101a31);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cfs-hero__featured-image img { width:100%; height:100%; object-fit:contain; object-position:center; padding:5px; box-sizing:border-box; border-radius:18px; }
.cfs-hero__featured-image svg { width:60%; height:60%; color:#81c4ff; }
.cfs-hero__featured:hover .cfs-hero__featured-image {
  transform:scale(1.065) rotate(-2deg);
  box-shadow:0 18px 48px rgba(0,0,0,.48),0 0 50px rgba(83,165,255,.43);
}
.cfs-hero__featured-caption {
  position:absolute; z-index:2; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border:1px solid rgba(118,159,231,.36);
  border-radius:10px; background:rgba(8,21,46,.88);
  box-shadow:0 7px 20px rgba(0,0,0,.24); backdrop-filter:blur(10px);
}
.cfs-hero__featured-caption strong { font-size:12px; letter-spacing:.06em; color:#fff; }
.cfs-hero__featured-caption span { display:flex; align-items:center; gap:5px; font-size:10px; color:#b9ddff; font-weight:800; white-space:nowrap; }
.cfs-hero__featured-caption svg { width:15px; height:15px; }
.cfs-hero__actions { gap:12px; }
.cfs-cta { border-radius:13px; }
.cfs-cta--hero { min-height:82px; padding:15px clamp(14px,1.2vw,22px); font-size:clamp(12px,.96vw,16px); }
.cfs-cta--hero small { font-size:clamp(10px,.65vw,12px); letter-spacing:.035em; }
.cfs-cta--amber { border-color:#ffd24d; background:linear-gradient(113deg,#332209 0%,#4d340d 55%,#2c200b 100%); }
.cfs-cta--violet { border-color:#70b7ff; background:linear-gradient(116deg,#09264c 0%,#16245c 51%,#42145b 100%); }
.cfs-cta--card { min-height:43px; padding:9px 12px; font-size:clamp(10px,.68vw,12px); }
.cfs-cta:hover { filter:brightness(1.09); }
.cfs-hero__jump {
  padding:9px clamp(12px,2vw,35px); justify-content:flex-start;
  gap:9px; border-top-color:#284269;
}
.cfs-hero__jump > span { font-size:10px; margin-right:10px; color:#c1d6f1; }
.cfs-jump { min-height:35px; font-size:11px; padding:7px 13px; }
/* The two manufacturing lines read as vivid full-width rails, not cramped page-two boxes. */
.cfs-line {
  position:relative; isolation:isolate;
  margin-top:17px; padding:17px clamp(14px,1.55vw,31px) 16px;
  border:1px solid #284367; border-radius:19px;
  background:linear-gradient(116deg,rgba(10,29,55,.97),rgba(9,19,38,.97) 70%);
  box-shadow:0 12px 40px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035);
  scroll-margin-top:75px;
}
.cfs-line:before {
  content:''; position:absolute; left:18px; right:18px; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cfs-line-accent),transparent 63%);
  filter:drop-shadow(0 0 8px var(--cfs-line-accent)); pointer-events:none;
}
.cfs-line--round { --cfs-line-glow:rgba(49,158,255,.23); --cfs-line-accent:#55bdff; }
.cfs-line--cast { --cfs-line-glow:rgba(167,93,255,.24); --cfs-line-accent:#bc81ff; }
.cfs-line__header { margin-bottom:9px; gap:15px; }
.cfs-line__identity { gap:15px; }
.cfs-line__icon { width:55px; height:55px; flex-basis:55px; border-radius:16px; }
.cfs-line__icon svg { width:32px; height:32px; }
.cfs-line h2 { font-size:clamp(23px,1.65vw,35px); margin:3px 0 1px; letter-spacing:-.045em; }
.cfs-line__eyebrow { font-size:clamp(11px,.75vw,13px); color:var(--cfs-line-accent) !important; }
.cfs-line__count { font-size:11px; color:#d5e6fb; }
.cfs-line__description { color:#c7d6e8 !important; font-size:clamp(12px,.79vw,14px); }
.cfs-line__scroll-hint { margin-bottom:1px; color:#9db2d4; font-size:10px; }
.cfs-line__navigation { gap:10px; }
.cfs-arrow {
  width:45px; height:45px;
  border:1px solid #638cca; border-radius:11px;
  background:linear-gradient(140deg,#172a4a,#10203b);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  font-size:22px;
}
.cfs-arrow:hover:not(:disabled) { transform:translateY(-1px); }
.cfs-line__position { font-size:13px; color:#bbceeb; }
.cfs-current { font-size:19px; }
.cfs-track {
  grid-auto-columns:calc((100% - 4 * var(--cfs-gap)) / 5);
  padding:8px 5px 16px;
  scrollbar-color:#4273ba transparent;
  scrollbar-width:thin;
}
.cfs-track::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#388fe8,#8e55f8); }
.cfs-product {
  border-color:#34507a; border-radius:16px;
  background:linear-gradient(158deg,#16243d,#0b1629 78%);
  box-shadow:0 7px 24px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.07);
  will-change: auto;
}
.cfs-product::after {
  content:''; position:absolute; z-index:0; top:0; left:-85%; bottom:0; width:50%;
  transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(151,194,255,.065),transparent);
  pointer-events:none; transition:left .6s ease;
}
.cfs-product:hover::after { left:145%; }
.cfs-product:hover { border-color:var(--cfs-line-accent); box-shadow:0 0 23px var(--cfs-line-glow),0 16px 35px rgba(0,0,0,.31); }
.cfs-product__visual {
  aspect-ratio:1.45/1;
  background:radial-gradient(ellipse at 50% 43%,rgba(81,119,174,.35),#101a2c 75%);
  border-bottom:1px solid rgba(120,156,207,.18);
}
.cfs-product__visual img { width:100%; height:100%; object-fit:contain; }
.cfs-product__size { min-height:32px; font-size:18px; border-color:#9caed4; }
.cfs-sale { font-size:10px; background:linear-gradient(115deg,#cb840c,#f7b73d); color:#071426; }
.cfs-product__body { padding:15px 16px 16px; }
.cfs-product__type { font-size:11px; }
.cfs-product__title { margin:4px 0 10px !important; font-size:clamp(16px,.99vw,20px); }
.cfs-product__price { padding:10px 0; min-height:39px; }
.cfs-product__price-label { font-size:10px; color:#b3c6e2; }
.cfs-product__money { font-size:clamp(19px,1.06vw,25px); }
.cfs-product__money del { font-size:13px; }
.cfs-product__actions { gap:8px; }
.cfs-progress { background:#263e5f; height:4px; margin-top:4px; }
.cfs-footer-cta { margin-top:17px; gap:18px; padding:22px 28px; border-radius:17px; }
.cfs-footer-cta h2 { font-size:clamp(22px,1.8vw,33px); margin:3px 0 5px; }
.cfs-footer-cta p:not(.cfs-kicker) { font-size:14px; }
.cfs-cta--footer { padding:13px 17px; }
@keyframes cfs-hero-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@media (min-width:2200px) {
  .cfs-track { grid-auto-columns:calc((100% - 5 * var(--cfs-gap)) / 6); }
  .cfs-hero__main { min-height:315px; }
  .cfs-hero__featured { min-height:290px; }
}
@media (max-width:1500px) {
  .cfs-hero__main { grid-template-columns:minmax(0,1.05fr) minmax(200px,.60fr) minmax(250px,.71fr); gap:17px; }
  .cfs-track { grid-auto-columns:calc((100% - 3 * var(--cfs-gap)) / 4); }
  .cfs-hero__featured { min-height:225px; }
}
@media (max-width:1100px) {
  .cfs-hero__main { grid-template-columns:minmax(0,1fr) minmax(225px,.75fr); }
  .cfs-hero__featured { display:none; }
  .cfs-track { grid-auto-columns:calc((100% - 2 * var(--cfs-gap)) / 3); }
  .cfs-hero h1 { font-size:clamp(34px,4.15vw,49px); }
  .cfs-shop__inner { padding-left:18px; padding-right:18px; }
}
@media (max-width:800px) {
  .cfs-shop__inner { padding:8px 13px 0; }
  .cfs-hero__main { grid-template-columns:1fr; gap:15px; padding:20px; min-height:0; }
  .cfs-hero__actions { grid-template-columns:1fr 1fr; }
  .cfs-cta--hero { min-height:75px; font-size:12px; }
  .cfs-line { padding:15px 13px; margin-top:13px; }
  .cfs-track { grid-auto-columns:calc((100% - var(--cfs-gap)) / 2); }
  .cfs-line__icon { width:49px; height:49px; flex-basis:49px; }
}
@media (max-width:570px) {
  .cfs-shop { padding-bottom:30px; }
  .cfs-shop__inner { padding:5px 10px 0; }
  .cfs-hero { border-radius:16px; }
  .cfs-hero__main { padding:19px 16px 15px; gap:12px; }
  .cfs-hero h1 { font-size:clamp(29px,8.2vw,39px); margin:8px 0 9px; }
  .cfs-hero__lead { font-size:13px; line-height:1.45; }
  .cfs-hero__stats { gap:7px 9px; margin-top:12px; }
  .cfs-hero__stats span { padding-left:7px; font-size:9px; }
  .cfs-hero__stats strong { font-size:14px; }
  .cfs-hero__actions { grid-template-columns:1fr; gap:8px; }
  .cfs-cta--hero { min-height:55px; padding:9px 12px; font-size:12px; }
  .cfs-cta--hero small { font-size:9px; }
  .cfs-hero__jump { padding:8px 12px; gap:7px; }
  .cfs-hero__jump > span { display:none; }
  .cfs-jump { flex:1 1 0; min-width:0; padding:8px; font-size:9px; gap:5px; }
  .cfs-jump svg { width:15px; height:15px; flex:none; }
  .cfs-line { margin-top:12px; padding:13px 11px; border-radius:14px; }
  .cfs-line__header { gap:9px; margin-bottom:8px; }
  .cfs-line__identity { gap:9px; }
  .cfs-line__icon { width:44px; height:44px; flex-basis:44px; }
  .cfs-line__icon svg { width:26px; height:26px; }
  .cfs-line h2 { font-size:19px; line-height:1.13; }
  .cfs-line__eyebrow { font-size:10px; }
  .cfs-line__count { font-size:9px; padding:2px 5px; margin-left:4px; }
  .cfs-line__description { font-size:11px; }
  .cfs-line__navigation { gap:5px; margin-left:auto; }
  .cfs-arrow { width:32px; height:34px; font-size:17px; border-radius:8px; }
  .cfs-line__position { font-size:10px; }
  .cfs-current { font-size:15px; }
  .cfs-line__scroll-hint { font-size:9px; text-align:left; margin-bottom:4px; }
  .cfs-track { grid-auto-columns:85%; padding:8px 3px 14px; }
  .cfs-product__body { padding:14px; }
  .cfs-product__title { font-size:17px; }
  .cfs-footer-cta { margin-top:13px; padding:18px 15px; gap:11px; }
  .cfs-footer-cta p:not(.cfs-kicker) { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .cfs-hero__orbit--outer { animation:none; } }

/* v1.0.2: proportionally sized source + containment means no lost coin edges. */
.cfs-shop .cfs-product__visual { aspect-ratio:1.16/1; display:block; padding:clamp(8px,.8vw,16px); box-sizing:border-box; overflow:hidden; }
.cfs-shop .cfs-product__visual img { display:block !important; position:static !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; object-position:center !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }
.cfs-shop .cfs-product:hover .cfs-product__visual img { transform:none !important; }
.cfs-shop .cfs-hero__featured-image { border-radius:18px; }
.cfs-shop .cfs-hero__featured-image img { object-fit:contain !important; object-position:center !important; border-radius:14px !important; padding:6px !important; box-sizing:border-box !important; }
@media (max-width:570px) { .cfs-shop .cfs-product__visual { aspect-ratio:1.14/1; padding:12px; } }
