/* completeSTOP app.css - generated by tools/build-css.py. Do not edit by hand. */
@keyframes cs-pulse{50%{opacity:.5}}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring,#3b82f6)}
/* completeSTOP app base styles (merged into app.css by tools/build-css.py) */

/* ---- scoped reset (replaces the old Tailwind CDN "preflight") ---- */
:where(.cs-app),:where(.cs-app) *,:where(.cs-app) *::before,:where(.cs-app) *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:where(.cs-app) h1,:where(.cs-app) h2,:where(.cs-app) h3,:where(.cs-app) h4,:where(.cs-app) h5,:where(.cs-app) p,:where(.cs-app) figure,:where(.cs-app) ul,:where(.cs-app) ol{margin:0;padding:0;font-size:inherit;font-weight:inherit}
:where(.cs-app) ul,:where(.cs-app) ol{list-style:none}
:where(.cs-app) button,:where(.cs-app) input,:where(.cs-app) textarea,:where(.cs-app) select{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
:where(.cs-app) button{background:transparent;cursor:pointer;-webkit-appearance:button;text-align:inherit}
:where(.cs-app) button:disabled{cursor:not-allowed}
:where(.cs-app) img,:where(.cs-app) svg{display:block;max-width:100%}
:where(.cs-app) img{height:auto}
:where(.cs-app) a{color:inherit;text-decoration:inherit}
:where(.cs-app) input::placeholder,:where(.cs-app) textarea::placeholder{color:#9ca3af}
:where(.cs-app) table{border-collapse:collapse}

/* ---- shell ---- */
body.cs-app-body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f8fafc;font-family:'Plus Jakarta Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.cs-app{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;background:#fff;overflow:hidden;color:#171717;line-height:1.5;font-family:'Plus Jakarta Sans',sans-serif;container-type:inline-size;container-name:csapp}
@media(min-width:640px){
  body.cs-layout-frame.cs-app-body{padding:24px 0}
  body.cs-layout-frame .cs-app{max-width:420px;height:860px;max-height:calc(100vh - 48px);border-radius:44px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid #f3f4f6}
}
.cs-app-embed{width:100%;display:flex;justify-content:center;padding:16px 0}
.cs-app-embed .cs-app{max-width:480px;height:min(860px,92vh);border-radius:32px;border:1px solid #f3f4f6}
.cs-app .custom-logo{max-height:32px;width:auto;display:block}
.cs-view{max-width:1152px;margin:0 auto;width:100%}
.cs-desk-nav{display:none;align-items:center;gap:6px}
.cs-desk-nav button{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#525252;transition:background .2s}
.cs-desk-nav button:hover{background:#f5f5f5}
.cs-desk-nav button.on{color:#e11d48;background:#fff1f2}

/* ---- sheet ---- */
.cs-sheet{position:absolute;inset:0;z-index:60;display:none}
.cs-sheet.open{display:block}
.cs-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.cs-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:85%;overflow-y:auto;background:#fff;border-radius:24px 24px 0 0;padding:18px 16px 22px}
#toast{z-index:70}

/* ---- product grid + responsive (container queries: work in frame, full and embed) ---- */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-hero{height:240px}
.cs-lg-only{display:none}
.cs-detail-wrap{display:block}
.cs-detail-bar{position:absolute;left:0;right:0;bottom:0}
@container csapp (min-width:640px){
  .cs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .cs-hero{height:320px}
}
@container csapp (min-width:900px){
  .cs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-lg-only{display:block}
  .cs-detail-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;max-width:1100px;margin:0 auto;padding:16px 24px 0;align-items:start}
  .cs-detail-media{position:sticky;top:76px}
  .cs-detail-bar{left:50%;right:auto;width:min(1100px,100%);transform:translateX(-50%);border-radius:16px 16px 0 0}
  .cs-sheet-panel{left:50%;right:auto;width:480px;transform:translateX(-50%)}
}
@container csapp (min-width:1000px){
  #bottom-nav{display:none!important}
  .cs-desk-nav{display:flex}
  .cs-app .cs-header{padding-left:max(24px,calc((100cqw - 1152px)/2));padding-right:max(24px,calc((100cqw - 1152px)/2))}
  .cs-hero{height:380px;border-radius:24px}
  #main-view{padding-bottom:48px}
}

/* ---- misc ---- */
.cs-card-link{color:inherit;text-decoration:none}
.cs-chip-on{background:#171717;color:#fff}
.cs-stars button{font-size:24px;line-height:1;color:#d1d5db}
.cs-stars button.on{color:#f59e0b}
.cs-desc p{margin:0 0 8px}
.cs-desc ul{list-style:disc;padding-left:18px;margin:0 0 8px}
.cs-desc ol{list-style:decimal;padding-left:18px;margin:0 0 8px}
.cs-desc h1,.cs-desc h2,.cs-desc h3,.cs-desc h4{font-size:13px;font-weight:700;margin:10px 0 4px}
.cs-desc img{max-width:100%;height:auto;border-radius:12px;margin:6px 0}
.cs-desc table{width:100%;border-collapse:collapse;font-size:11px}
.cs-desc td,.cs-desc th{border:1px solid #e5e7eb;padding:4px 6px}
.cs-honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cs-size-table{width:100%;font-size:12px;text-align:center}
.cs-size-table th,.cs-size-table td{border:1px solid #e5e7eb;padding:8px 6px}
.cs-size-table th{background:#f9fafb;font-weight:800}
@media (prefers-reduced-motion:reduce){.cs-app *{animation:none!important;transition:none!important}}

/* ---- utilities ---- */
.-mt-0\.5{margin-top:calc(0.125rem * -1)}
.-right-1{right:calc(0.25rem * -1)}
.-top-1{top:calc(0.25rem * -1)}
.-translate-x-1\/2{--tw-tx:calc(50% * -1)}
.absolute{position:absolute}
.animate-pulse{animation:cs-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.aspect-\[4\/5\]{aspect-ratio:4/5}
.aspect-\[9\/16\]{aspect-ratio:9/16}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bg-amber-500{background-color:#f59e0b}
.bg-emerald-50{background-color:#ecfdf5}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,transparent),var(--tw-via,var(--tw-to,transparent)) ,var(--tw-to,transparent))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-from,transparent),var(--tw-via,var(--tw-to,transparent)),var(--tw-to,transparent))}
.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-from,transparent),var(--tw-via,var(--tw-to,transparent)),var(--tw-to,transparent))}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-50\/50{background-color:rgba(249,250,251,0.5)}
.bg-neutral-800{background-color:#262626}
.bg-neutral-900{background-color:#171717}
.bg-neutral-900\/70{background-color:rgba(23,23,23,0.7)}
.bg-neutral-900\/95{background-color:rgba(23,23,23,0.95)}
.bg-purple-600{background-color:#9333ea}
.bg-rose-100{background-color:#ffe4e6}
.bg-rose-50{background-color:#fff1f2}
.bg-rose-500{background-color:#f43f5e}
.bg-rose-600{background-color:#e11d48}
.bg-white{background-color:#ffffff}
.bg-white\/50{background-color:rgba(255,255,255,0.5)}
.bg-white\/60{background-color:rgba(255,255,255,0.6)}
.bg-white\/80{background-color:rgba(255,255,255,0.8)}
.bg-white\/90{background-color:rgba(255,255,255,0.9)}
.bg-white\/95{background-color:rgba(255,255,255,0.95)}
.block{display:block}
.border{border-width:1px}
.border-2{border-width:2px}
.border-b{border-bottom-width:1px}
.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-50{border-color:#f9fafb}
.border-rose-100{border-color:#ffe4e6}
.border-rose-600{border-color:#e11d48}
.border-t{border-top-width:1px}
.border-transparent{border-color:transparent}
.border-white{border-color:#ffffff}
.bottom-0{bottom:0px}
.bottom-2{bottom:0.5rem}
.bottom-24{bottom:6rem}
.bottom-3{bottom:0.75rem}
.brightness-95{filter:brightness(.95)}
.col-span-2{grid-column:span 2/span 2}
.cursor-pointer{cursor:pointer}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}
.fill-amber-400{fill:#fbbf24}
.fill-emerald-600{fill:#059669}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.from-amber-400{--tw-from:#fbbf24}
.from-black\/70{--tw-from:rgba(0,0,0,0.7)}
.from-neutral-900{--tw-from:#171717}
.gap-2{gap:0.5rem}
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.h-1\.5{height:0.375rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-3{height:0.75rem}
.h-3\.5{height:0.875rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-full{height:100%}
.inline-flex{display:inline-flex}
.inset-0{top:0;right:0;bottom:0;left:0}
.items-baseline{align-items:baseline}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-around{justify-content:space-around}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-relaxed{line-height:1.625}
.left-0{left:0px}
.left-1\/2{left:50%}
.left-2{left:0.5rem}
.left-3{left:0.75rem}
.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.line-through{text-decoration-line:line-through}
.max-w-\[64px\]{max-width:64px}
.max-w-\[80\%\]{max-width:80%}
.max-w-sm{max-width:24rem}
.mb-1{margin-bottom:0.25rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.min-w-full{min-width:100%}
.ml-0\.5{margin-left:0.125rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-1{margin-top:0.25rem;margin-bottom:0.25rem}
.normal-case{text-transform:none}
.object-cover{object-fit:cover}
.opacity-0{opacity:0}
.opacity-100{opacity:1}
.opacity-40{opacity:0.4}
.opacity-70{opacity:0.7}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-2\.5{padding:0.625rem}
.p-3{padding:0.75rem}
.p-3\.5{padding:0.875rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-\[2px\]{padding:2px}
.pb-1{padding-bottom:0.25rem}
.pb-2{padding-bottom:0.5rem}
.pb-24{padding-bottom:6rem}
.pb-28{padding-bottom:7rem}
.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pl-9{padding-left:2.25rem}
.pointer-events-none{pointer-events:none}
.pr-3{padding-right:0.75rem}
.pr-4{padding-right:1rem}
.pt-1{padding-top:0.25rem}
.pt-16{padding-top:4rem}
.pt-2{padding-top:0.5rem}
.pt-4{padding-top:1rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.relative{position:relative}
.right-0{right:0px}
.right-1{right:0.25rem}
.right-2{right:0.5rem}
.right-4{right:1rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.rounded-tl-none{border-top-left-radius:0}
.rounded-tr-none{border-top-right-radius:0}
.rounded-xl{border-radius:0.75rem}
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.space-x-0\.5>:not([hidden])~:not([hidden]){margin-left:0.125rem}
.space-x-1>:not([hidden])~:not([hidden]){margin-left:0.25rem}
.space-x-1\.5>:not([hidden])~:not([hidden]){margin-left:0.375rem}
.space-x-2>:not([hidden])~:not([hidden]){margin-left:0.5rem}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:0.75rem}
.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}
.space-y-0\.5>:not([hidden])~:not([hidden]){margin-top:0.125rem}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:0.75rem}
.sticky{position:sticky}
.text-\[10px\]{font-size:10px;line-height:1.4}
.text-\[11px\]{font-size:11px;line-height:1.4}
.text-\[9px\]{font-size:9px;line-height:1.4}
.text-amber-400{color:#fbbf24}
.text-center{text-align:center}
.text-emerald-400{color:#34d399}
.text-emerald-600{color:#059669}
.text-emerald-700{color:#047857}
.text-gray-200{color:#e5e7eb}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-neutral-300{color:#d4d4d4}
.text-neutral-400{color:#a3a3a3}
.text-neutral-500{color:#737373}
.text-neutral-600{color:#525252}
.text-neutral-700{color:#404040}
.text-neutral-800{color:#262626}
.text-neutral-900{color:#171717}
.text-right{text-align:right}
.text-rose-300{color:#fda4af}
.text-rose-500{color:#f43f5e}
.text-rose-600{color:#e11d48}
.text-rose-700{color:#be123c}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-white{color:#ffffff}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.to-neutral-800{--tw-to:#262626}
.to-purple-600{--tw-to:#9333ea}
.to-transparent{--tw-to:transparent}
.top-0{top:0px}
.top-1{top:0.25rem}
.top-2{top:0.5rem}
.top-3{top:0.75rem}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.transform{transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-s,1))}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.translate-y-4{--tw-ty:1rem}
.uppercase{text-transform:uppercase}
.via-black\/20{--tw-via:rgba(0,0,0,0.2)}
.via-rose-500{--tw-via:#f43f5e}
.w-1\.5{width:0.375rem}
.w-12{width:3rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-2{width:0.5rem}
.w-3{width:0.75rem}
.w-3\.5{width:0.875rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-full{width:100%}
.w-max{width:max-content}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-50{z-index:50}
.hover\:bg-gray-200:hover{background-color:#e5e7eb}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-neutral-100:hover{background-color:#f5f5f5}
.hover\:bg-neutral-800:hover{background-color:#262626}
.hover\:bg-rose-50:hover{background-color:#fff1f2}
.hover\:bg-rose-700:hover{background-color:#be123c}
.hover\:border-rose-500:hover{border-color:#f43f5e}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.hover\:text-neutral-700:hover{color:#404040}
.hover\:text-rose-500:hover{color:#f43f5e}
.hover\:text-rose-600:hover{color:#e11d48}
.hover\:underline:hover{text-decoration-line:underline}
.active\:scale-95:active{--tw-s:0.95;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) scale(var(--tw-s,1))}
.focus\:border-rose-500:focus{border-color:#f43f5e}
.focus\:ring-rose-500:focus{--tw-ring:#f43f5e}
.focus\:ring-rose-500:focus{--tw-ring:#f43f5e}


/* completeSTOP desktop homepage refinement. Mobile/tablet styles intentionally untouched. */
@container csapp (min-width:1200px){
  .cs-view-home{max-width:1500px;padding-left:32px;padding-right:32px}
  .cs-view-home .cs-hero{height:clamp(360px,25vw,430px);border-radius:22px}
  .cs-view-home > .bg-neutral-900.text-white{border-radius:0 0 10px 10px}
  .cs-view-home > section:first-of-type{padding-left:16px;padding-right:16px}
  .cs-view-home .cs-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .cs-view-home .cs-lg-only{display:block}
  .cs-view-home > section.px-4.pt-4 > div > div{min-height:100px}
  .cs-view-home > section.px-4.py-4{padding-left:4px;padding-right:4px}
  .cs-view-home > section.px-4.pb-6{padding-left:4px;padding-right:4px}
  .cs-view-home .cs-card-link img{transition:transform .25s ease}
  .cs-view-home .cs-card-link:hover img{transform:scale(1.035)}
  .cs-view-home .cs-header{padding-left:max(32px,calc((100cqw - 1500px)/2 + 32px));padding-right:max(32px,calc((100cqw - 1500px)/2 + 32px))}
}


/* completeSTOP desktop-only full-screen home layout.
   Deliberately scoped to the front page and desktop viewport.
   No mobile/tablet rules and no single-product page rules are changed. */
@media screen and (min-width: 1200px) {
  body.home.cs-app-body .cs-app {
    width: 100%;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.home.cs-app-body .cs-view {
    width: calc(100% - 72px);
    max-width: 1600px;
  }

  body.home.cs-app-body .cs-app .cs-header {
    padding-left: max(36px, calc((100cqw - 1600px) / 2));
    padding-right: max(36px, calc((100cqw - 1600px) / 2));
  }

  body.home.cs-app-body .cs-app .cs-hero {
    height: clamp(360px, 27vw, 500px);
    border-radius: 24px;
  }

  body.home.cs-app-body .cs-app #main-view {
    padding-bottom: 52px;
  }

  body.home.cs-app-body .cs-app .cs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
}


/* Desktop-only full-width storefront. Mobile/tablet and embedded widgets remain unchanged. */
@media (min-width: 1024px) {
  body.cs-app-body.cs-layout-frame {
    padding: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
  }
  body.cs-app-body.cs-layout-frame > .cs-app,
  body.cs-app-body.cs-layout-frame .cs-app {
    width: 100%;
    max-width: none !important;
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.cs-app-body.cs-layout-frame .cs-view {
    width: min(100% - 64px, 1600px);
    max-width: 1600px;
  }
  body.cs-app-body.cs-layout-frame .cs-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }
  body.cs-app-body.cs-layout-frame .cs-hero {
    height: clamp(300px, 32vw, 520px);
  }
}


/* Flash sale: six portrait product cards, images fully visible without cropping. */
.cs-flash-sale{margin:12px 12px 0;background:#151515;color:#fff;border:1px solid #2b2b2b;border-radius:16px;padding:12px;box-shadow:0 8px 20px rgba(0,0,0,.10);overflow:hidden}
.cs-flash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cs-flash-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;letter-spacing:.045em;color:#ff2c61}
.cs-flash-title svg{width:16px;height:16px;stroke:currentColor;fill:currentColor}
.cs-flash-countdown{white-space:nowrap;border-radius:999px;background:#e9164d;color:#fff;padding:4px 10px;font-size:11px;font-family:ui-monospace,monospace;font-weight:800}
.cs-flash-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-flash-product{min-width:0;overflow:hidden;border:1px solid #383838;border-radius:12px;background:#1d1d1d;display:flex;flex-direction:column}
.cs-flash-image{display:flex;position:relative;align-items:center;justify-content:center;width:100%;aspect-ratio:3/4;background:#f5f3f0;overflow:hidden;padding:5px}
.cs-flash-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
.cs-flash-discount{position:absolute;left:7px;bottom:7px;background:#ed174e;color:white;font-size:10px;line-height:1;padding:5px 7px;border-radius:999px;font-weight:900}
.cs-flash-info{padding:9px;display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.cs-flash-name{font-size:11px;line-height:1.35;font-weight:700;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.cs-flash-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;color:#fff}
.cs-flash-price strong{font-size:13px;font-weight:900}
.cs-flash-price del{font-size:10px;color:#aaa}
.cs-flash-shop{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:flex-start;margin-top:auto;padding:6px 10px;border-radius:999px;background:#ed174e;color:#fff!important;font-size:10px;font-weight:800}
.cs-flash-no-image{font-size:10px;color:#666;text-align:center}
@container csapp (min-width:640px){.cs-flash-sale{margin:16px 18px 0;padding:14px}.cs-flash-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cs-flash-image{aspect-ratio:3/4}.cs-flash-info{padding:10px}.cs-flash-name{font-size:12px}}
@container csapp (min-width:1000px){.cs-view-home .cs-flash-sale{margin:18px 0 0;padding:14px 16px}.cs-view-home .cs-flash-products{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.cs-view-home .cs-flash-image{aspect-ratio:3/4;padding:7px}.cs-view-home .cs-flash-info{padding:10px}.cs-view-home .cs-flash-name{font-size:12px;min-height:32px}}