/* Shape frames: the shop's category page (custom_template/category_studio.twig), the landing and the list of designs.
   From the v2 prototype (frame-studio-variants/v2: landing.css + designs-view.css), every rule scoped under
   .studio-cat so nothing reaches the shop's own header, footer or Bootstrap; the shop's font is kept.
   PrintShoppy's colours: blue #0489F5, teal #1DAAA3 / #0f7c77, orange #FF9F1C, navy #10243E. */
.studio-cat { --sc-ease: cubic-bezier(.2, .8, .2, 1); --sc-top: 0px; position: relative; isolation: isolate; background: #fff; color: #212529; overflow-x: clip; }
.studio-cat *, .studio-cat *::before, .studio-cat *::after { box-sizing: border-box; }
/* the page's own type: the shop's Satoshi (it loads 400 + 700) at normal spacing. The shop's theme gives the body
   0.8px letter-spacing and every h1-h6 BebasNeue (one weight, condensed): inherited, the big headings came out
   squeezed and faux-bold and the small text loose (alpha, 11-10) */
.studio-cat { font-family: Satoshi, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.studio-cat * { letter-spacing: normal; }   /* the shop's Bootstrap: * { letter-spacing: .05rem } on every element */
.studio-cat button, .studio-cat input { font-family: inherit; }
.studio-cat img { max-width: 100%; }
.studio-cat em { font-style: normal; color: #0489F5; }
.studio-cat h1, .studio-cat h2 { font-family: inherit; font-weight: 700; color: inherit; text-transform: none; }
/* one view at a time once the script runs (without it, both show and "Choose your design" scrolls to the list) */
.studio-cat.js:not(.on-designs) #designs, .studio-cat.js.on-designs #view-home { display: none; }

/* buttons: flat, like PrintShoppy (named sc-btn: the shop's Bootstrap owns .btn) */
.studio-cat .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 10px; border: 0;
  font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; transition: transform .15s var(--sc-ease), background-color .2s; }
.studio-cat .sc-btn:active { transform: scale(.97); }
.studio-cat .sc-btn-buy { background: #FF9F1C; color: #1b1200; }
.studio-cat .sc-btn-buy:hover { background: #ffad3d; color: #1b1200; }

/* ---------- hero ---------- */
.studio-cat .lp-hero { position: relative; display: grid; gap: 22px; padding: 22px 16px 8px; max-width: 1240px; margin: 0 auto; }
.studio-cat .lp-hero::before { content: ""; position: absolute; inset: 0 -30vw; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 85% 20%, rgba(4, 137, 245, .12), transparent 70%),
              radial-gradient(35% 40% at 5% 80%, rgba(29, 170, 163, .10), transparent 70%),
              linear-gradient(180deg, #F6FAFE 0%, #fff 100%); }
.studio-cat .lp-hero-copy { position: relative; }
.studio-cat .lp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #E1E8EF; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: #0f7c77; }
.studio-cat .lp-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DAAA3; box-shadow: 0 0 0 4px rgba(29, 170, 163, .18); }
.studio-cat .lp-hero h1 { margin: 0; font-size: clamp(42px, 11vw, 86px); line-height: .96; letter-spacing: -2.4px; color: #212529; }
.studio-cat .lp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 22px; }
.studio-cat .lp-price .from { font-size: 14px; color: #8F8F8F; }
.studio-cat .lp-price b { font-size: 38px; letter-spacing: -1px; color: #0489F5; }
.studio-cat .lp-price s { color: #8F8F8F; }
.studio-cat .lp-price .off { font-size: 14px; font-weight: 700; color: #fff; background: #0f7c77; border-radius: 999px; padding: 2px 9px; }
.studio-cat .lp-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; }
.studio-cat .lp-cta { min-height: 56px; padding: 0 30px; font-size: 17px; border-radius: 12px; }
.studio-cat .lp-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; font-size: 13.5px; color: #4b5259; }
.studio-cat .lp-proof li::before { content: "✓"; color: #1DAAA3; font-weight: 700; margin-right: 6px; }

.studio-cat .lp-hero-art { position: relative; }
.studio-cat .laser-stage { position: relative; height: 440px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #fff, #EEF5FC); box-shadow: 0 30px 60px -20px rgba(20, 50, 90, .30), 0 0 0 1px rgba(20, 50, 90, .06); }
.studio-cat .laser-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.studio-cat .laser-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; z-index: 1;
  opacity: 0; transition: opacity .45s ease, filter .5s ease; }
.studio-cat .laser-photo.on { opacity: 1; }
.studio-cat .laser-photo.soft { filter: blur(5px) saturate(.75) brightness(1.04); }
.studio-cat .laser-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px 0; }
.studio-cat .lc-name { display: grid; gap: 1px; min-width: 0; }
.studio-cat .lc-name b { font-size: 15px; color: #212529; }
.studio-cat .laser-thumbs { display: flex; align-items: center; gap: 8px; flex: none; }
.studio-cat .laser-thumbs button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #CED3D7; cursor: pointer; transition: width .3s, background-color .3s; }
.studio-cat .laser-thumbs button.on { width: 24px; background: #0489F5; }
.studio-cat .laser-thumbs button::before { content: ""; position: absolute; inset: -12px -4px; }   /* a bigger tap area */

/* ---------- sections ---------- */
.studio-cat .lp-sec { max-width: 1240px; margin: 0 auto; padding: 40px 16px 0; }
.studio-cat .lp-head { max-width: 780px; margin: 0 auto 20px; text-align: center; }
.studio-cat .lp-eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #0f7c77; }
.studio-cat .lp-eyebrow.light { color: rgba(255, 255, 255, .85); }
.studio-cat .lp-head h2 { margin: 0; font-size: clamp(30px, 7vw, 52px); line-height: 1.02; letter-spacing: -1.4px; color: #212529; }

@media (max-width: 899px) {
  /* phones: the photo first, then what it is, then the price and the button */
  .studio-cat .lp-hero { padding-top: 14px; gap: 20px; }
  .studio-cat .lp-hero-art { order: -1; }
  .studio-cat .laser-stage { height: min(380px, 52svh); border-radius: 22px; }
  .studio-cat .lp-kicker { margin-bottom: 12px; }
  /* phones: the three-line headline at a size that leaves the price and the button in view (user, 11-10: "little big") */
  /* two lines, the second ("In a Shape You Love.", 9.15em wide in Satoshi Bold) filling the width: no empty right side
     (user, 11-10); the third-line break is for desktop only */
  .studio-cat .lp-hero h1 { font-size: min(44px, calc((100vw - 32px) / 9.4)); line-height: 1.05; letter-spacing: -.02em; }
  .studio-cat .lp-hero h1 em { white-space: nowrap; }
  .studio-cat .lp-hero h1 .sc-br3 { display: none; }
  .studio-cat .lp-price { margin-top: 16px; }
  .studio-cat .lp-price b { font-size: 32px; }
  .studio-cat .lp-cta-row { margin-top: 18px; }
  .studio-cat .lp-cta { width: 100%; }
}

/* up close: one photo; four soft blue boxes beside it (under it on phones) */
.studio-cat .lp-up-grid { display: grid; gap: 12px; }
.studio-cat .lp-up-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: #F1F3F5; }
.studio-cat .lp-up-boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.studio-cat .lp-up-boxes li, .studio-cat .lp-size { border-radius: 16px; border: 1px solid #D3E5FB; color: #10243E;
  background: linear-gradient(150deg, #F7FBFF 0%, #EAF3FE 55%, #DDEBFC 100%); box-shadow: inset 0 1px 0 #fff; }
.studio-cat .lp-up-boxes li { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 16px;
  font-size: 17px; font-weight: 700; text-align: center; }
/* 11-11 (owner): the four boxes looked empty - each now holds a close-up from the product photos, the fact over it.
   The order is the template's: 3 mm acrylic (the clear edge), cut to shape (the rounded corner), HD print (the date
   and the script), no nails (a frame up on a wall). */
.studio-cat .lp-up-boxes li { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1; min-height: 0; align-items: flex-end;
  justify-content: flex-start; text-align: left; color: #fff; border-color: transparent; box-shadow: none; padding: 14px;
  background: #ece6dd url("img/detail-print-v1-edge.webp") no-repeat; text-shadow: 0 1px 8px rgba(16, 36, 62, .45); }
.studio-cat .lp-up-boxes li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(16, 36, 62, .7), rgba(16, 36, 62, 0) 58%); }
.studio-cat .lp-up-boxes li:nth-child(1) { background-size: 300%; background-position: 74% 40%; }
.studio-cat .lp-up-boxes li:nth-child(2) { background-size: 300%; background-position: 70% 100%; }
.studio-cat .lp-up-boxes li:nth-child(3) { background-size: 260%; background-position: 22% 68%; }
.studio-cat .lp-up-boxes li:nth-child(4) { background-image: url("img/hero/hero-5-our-home-glossy.webp"); background-size: 150%; background-position: 50% 22%; }

/* sizes */
.studio-cat .lp-size-wrap { display: grid; gap: 12px; }
.studio-cat .lp-seg { justify-self: center; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 420px; margin-bottom: 2px; padding: 5px; gap: 4px; border-radius: 16px; background: #F1F3F5; }
.studio-cat .lp-seg button { height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px; color: #4b5259; transition: background-color .2s, color .2s; }
.studio-cat .lp-seg button:hover { color: #212529; }
.studio-cat .lp-seg button[aria-selected="true"] { background: #212529; color: #fff; }
.studio-cat .lp-gallery { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #ece6dd; }
.studio-cat .lp-gallery img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 7.5%; transition: opacity .25s ease; }   /* 7.5 %: GAL_Y in list.js */
.studio-cat .lp-gallery img.swap { opacity: 0; }
.studio-cat .lp-glabel { position: absolute; transform: translateY(-50%); font-size: 12px; font-weight: 700; line-height: 1.5; color: #212529; white-space: nowrap;
  background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 3px 9px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25); }
.studio-cat .lp-glabel.l { transform: translate(calc(-100% - 6px), -50%); }
.studio-cat .lp-glabel.r { transform: translate(6px, -50%); }
.studio-cat .lp-glabel.u { transform: translate(-50%, 6px); }
.studio-cat .lp-glabel.a { transform: translate(-50%, calc(-100% - 6px)); }
.studio-cat .lp-size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.studio-cat .lp-size { display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 84px; padding: 16px; text-align: center; }
.studio-cat .lp-size b { font-size: 17px; color: #10243E; }
.studio-cat .lp-size .pr strong { color: #0367C7; font-size: 15px; }
.studio-cat .lp-size .pr s { color: #7D8A99; font-size: 12px; margin-left: 4px; }
/* 11-11 (owner): the size boxes looked like a size picker, so they are one: a tap picks the size and opens the designs,
   every design then opening in it (list.js; ?size= on each card's link) */
.studio-cat button.lp-size { width: 100%; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, box-shadow .15s, translate .15s; }
.studio-cat button.lp-size:hover { border-color: #0489F5; translate: 0 -1px; box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(4, 137, 245, .6); }
.studio-cat button.lp-size:focus-visible { outline: 3px solid rgba(4, 137, 245, .35); outline-offset: 2px; }
.studio-cat button.lp-size[aria-pressed="true"] { border-color: #0489F5; box-shadow: inset 0 0 0 1px #0489F5; }
.studio-cat .lp-size .go { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #0489F5; }
.studio-cat .lp-size[aria-pressed="true"] .go { color: #0367C7; }
.studio-cat .dl-size { display: inline-flex; align-items: center; gap: 6px; }
.studio-cat .dl-size b { color: #0367C7; }
.studio-cat .dl-size button { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 13px; font-weight: 700; color: #0489F5; text-decoration: underline; cursor: pointer; }

/* the way on */
.studio-cat .lp-end { padding-bottom: 40px; }
.studio-cat .lp-end-card { position: relative; overflow: hidden; display: grid; gap: 20px; padding: 34px 22px 0; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #39a6ff 0%, #0489F5 40%, #0360b8 100%); }
.studio-cat .lp-end-copy h2 { margin: 0; font-size: clamp(32px, 8vw, 56px); line-height: 1; letter-spacing: -1.6px; color: #fff; }
.studio-cat .lp-end-cta { margin-top: 22px; background: #fff; color: #0367c7; min-height: 54px; padding: 0 26px; border-radius: 12px; font-size: 16.5px; }
.studio-cat .lp-end-cta:hover { background: #F2F8FE; color: #0367c7; }
.studio-cat .lp-end-art { position: relative; height: 230px; }
.studio-cat .lp-end-art img { position: absolute; bottom: -30px; width: 46%; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: 18px;
  border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 20px 40px -12px rgba(0, 20, 50, .5); }
.studio-cat .lp-end-art img:nth-child(1) { left: 2%; transform: rotate(-8deg); }
.studio-cat .lp-end-art img:nth-child(2) { left: 27%; z-index: 2; bottom: -14px; }
.studio-cat .lp-end-art img:nth-child(3) { right: 2%; transform: rotate(8deg); }

.studio-cat .rise { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s var(--sc-ease); }
.studio-cat .rise.in { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .studio-cat .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; padding: 40px 32px 16px; }
  .studio-cat .lp-hero h1 { font-size: clamp(50px, 5.6vw, 78px); }   /* three set lines ("Your photo, / in a shape / you love.") beside the photo */
  .studio-cat .laser-stage { height: min(640px, calc(100vh - 170px)); }
  .studio-cat .lp-sec { padding: 56px 32px 0; }
  .studio-cat .lp-head { margin-bottom: 28px; }
  .studio-cat .lp-up-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .studio-cat .lp-up-boxes { gap: 16px; }
  .studio-cat .lp-up-boxes li { min-height: 0; border-radius: 20px; font-size: 24px; letter-spacing: -.4px; padding: 20px; }
  .studio-cat .lp-size-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tabs tabs" "row gal"; gap: 16px; }
  .studio-cat .lp-seg { grid-area: tabs; margin-bottom: 8px; }
  .studio-cat .lp-gallery { grid-area: gal; }
  .studio-cat .lp-size-row { grid-area: row; gap: 16px; }
  .studio-cat .lp-size { min-height: 0; border-radius: 20px; }
  .studio-cat .lp-size .go { font-size: 14px; }
  .studio-cat .lp-size b { font-size: 24px; letter-spacing: -.4px; }
  .studio-cat .lp-size .pr strong { font-size: 19px; }
  .studio-cat .lp-end-card { grid-template-columns: 1fr 1fr; align-items: center; padding: 56px 56px; min-height: 420px; }
  .studio-cat .lp-end-art { height: 360px; }
  .studio-cat .lp-end-art img { bottom: -80px; width: 44%; }
  .studio-cat .lp-end-art img:nth-child(2) { bottom: -40px; }
  .studio-cat .lp-end { padding-bottom: 64px; }
}

/* ================= the list ("Choose your design") ================= */
.studio-cat .dl { background: #fff; color: #10243E; scroll-margin-top: var(--sc-top); }   /* the browser's own jump to #designs stops under a sticky shop header */
.studio-cat .dl-wrap { max-width: 1360px; margin: 0 auto; padding: 22px 16px 60px; }
.studio-cat .dl-titlebar { text-align: center; }
.studio-cat .dl-titlebar h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.6px; color: #10243E; }
.studio-cat .dl-from { margin: 6px 0 0; font-size: 14.5px; color: #4b5259; }
.studio-cat .dl-from b { color: #10243E; }

/* "See your photo in every frame" (optional): one photo and one name, shown in every card (list.js + list/draw.php) */
.studio-cat .dl-try { max-width: 560px; margin: 16px auto 0; display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid #D3E5FB;
  background: linear-gradient(150deg, #F7FBFF 0%, #EAF3FE 55%, #DDEBFC 100%); text-align: center; }
.studio-cat .dl-try[hidden] { display: none; }
.studio-cat .dl-try-t { margin: 0; font-size: 14.5px; color: #10243E; }
.studio-cat .dl-try-s { color: #6b7178; font-weight: 400; }
.studio-cat .dl-try-row { display: flex; gap: 8px; min-width: 0; text-align: left; }
.studio-cat .dl-try-msg { margin: 0; font-size: 13px; color: #4b5259; }
.studio-cat .dl-try-msg:empty { display: none; }
.studio-cat .pv-photo, .studio-cat .pv-name { position: relative; display: flex; align-items: center; height: 40px; margin: 0; border-radius: 10px; background: #fff; min-width: 0; }
.studio-cat .pv-photo { flex: none; border: 1.5px dashed #9cc4ec; }
.studio-cat .pv-photo.set { border-style: solid; border-color: #cfdbe6; }
.studio-cat .pv-add { display: flex; align-items: center; gap: 7px; height: 100%; border: 0; background: none; padding: 0 12px 0 6px; font-size: 14px; font-weight: 700; color: #0367C7; cursor: pointer; }
.studio-cat .pv-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #e8f3ff center / cover no-repeat; color: #0367C7;
  font-size: 12px; font-weight: 700; flex: none; }
.studio-cat .pv-ico.thumb svg { display: none; }
.studio-cat .pv-name { flex: 1; border: 1.5px solid #cfdbe6; padding-left: 6px; font-weight: 400; }
.studio-cat .pv-name.set, .studio-cat .pv-name:focus-within { border-color: #0489F5; }
.studio-cat .pv-name:focus-within { box-shadow: 0 0 0 3px #e8f3ff; }
.studio-cat .pv-name input { flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: none; background: none; padding: 0 8px; font-size: 15px; color: #10243E; }
.studio-cat .pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.studio-cat .pv-x { flex: none; width: 28px; height: 28px; margin-right: 5px; padding: 0; border: 0; border-radius: 50%; background: #F1F4F7; color: #6b7178; font-size: 12px; line-height: 28px; cursor: pointer; }
.studio-cat .pv-x[hidden] { display: none; }
.studio-cat .pv-x:hover { background: #e3e8ee; color: #10243E; }
/* a card drawn with the customer's photo / name: the drawing shows, the pre-rendered frame hides */
.studio-cat .dl-live { position: absolute; left: 0; top: 0; display: none; max-width: none; pointer-events: none; }
.studio-cat .dl-card.live .dl-live { display: block; }
.studio-cat .dl-card.live .dl-shot, .studio-cat .dl-card.live .dl-sweep { display: none !important; }

/* the occasion chips: one row, centred on desktop, a swipe row on phones; they stay under the shop's header */
.studio-cat .dl-toolbar { position: sticky; top: var(--sc-top); z-index: 20; margin: 16px -16px 0; padding: 10px 0; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); border-bottom: 1px solid #E6EBF0; }
.studio-cat .dl-mchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
.studio-cat .dl-mchips::-webkit-scrollbar { display: none; }
.studio-cat .dl-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #DDE3E9; border-radius: 999px;
  background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: #3d434a; cursor: pointer; transition: background-color .15s, border-color .15s; }
.studio-cat .dl-chip:hover { border-color: #b9c2cc; }
.studio-cat .dl-chip small { font-size: 12px; font-weight: 700; color: #8a929b; }
.studio-cat .dl-chip[aria-selected="true"] { background: #10243E; border-color: #10243E; color: #fff; }
.studio-cat .dl-chip[aria-selected="true"] small { color: rgba(255, 255, 255, .75); }

/* the cards: the card is the room; the frame hangs high on the wall; a frosted glass strip at the foot (name, price,
   Select). Phones: one design a row */
.studio-cat .dl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 600px) { .studio-cat .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.studio-cat .dl-card { display: block; border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s; }
.studio-cat .dl-card:hover { box-shadow: 0 20px 40px -20px rgba(40, 30, 20, .55); text-decoration: none; color: inherit; }
.studio-cat .dl-card[hidden] { display: none; }
.studio-cat .dl-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e8ddd1; }
.studio-cat .dl-wall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.studio-cat .dl-shot { position: absolute; display: block; max-width: none; pointer-events: none; }
.studio-cat .dl-badge { position: absolute; z-index: 3; top: 10px; left: 10px; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.4; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; }
.studio-cat .dl-badge.bestseller { background: #FF9F1C; color: #1b1200; }
.studio-cat .dl-badge.new { background: #0f7c77; color: #fff; }
.studio-cat .dl-strip { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .62); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3); }
.studio-cat .dl-strip-txt { display: grid; gap: 1px; min-width: 0; }
.studio-cat .dl-name { font-size: 15px; line-height: 1.2; color: #10243E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-cat .dl-price { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1.4; }
.studio-cat .dl-price strong { font-size: 15px; color: #10243E; }
.studio-cat .dl-price s { font-size: 12px; color: #6b7178; }
.studio-cat .dl-select { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 11px; background: #0489F5; color: #fff;
  font-size: 14px; font-weight: 700; transition: background-color .2s; }
.studio-cat .dl-card:hover .dl-select { background: #1a95f7; }

/* the moment, once, as the card scrolls in (.in): a shine crosses the acrylic (masked to the frame by list.js) and the
   strip rises. Without the script the cards are simply shown at rest */
.studio-cat .dl-sweep { position: absolute; z-index: 2; display: none; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(110deg, transparent 0%, transparent 44%, rgba(255, 255, 255, .35) 47.5%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .35) 52.5%, transparent 56%, transparent 100%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; opacity: 0; }
.studio-cat .dl-card.in .dl-sweep { animation: sc-sweep 1.4s .25s ease-in-out forwards; }
@keyframes sc-sweep { 0% { opacity: 1; background-position: 100% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 0% 0; } }
.studio-cat.js .dl-card .dl-strip { opacity: 0; translate: 0 22px; }
.studio-cat.js .dl-card.in .dl-strip { opacity: 1; translate: 0 0; transition: opacity .45s .35s, translate .6s .35s cubic-bezier(.2, .9, .2, 1); }

@media (min-width: 900px) {
  .studio-cat .dl-wrap { padding: 34px 32px 90px; }
  .studio-cat .dl-titlebar h2 { font-size: 40px; letter-spacing: -1px; }
  .studio-cat .dl-from { font-size: 15.5px; }
  .studio-cat .dl-toolbar { margin: 22px 0 0; padding: 12px 0; }
  .studio-cat .dl-mchips { justify-content: safe center; flex-wrap: wrap; padding: 0; }
  .studio-cat .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
  .studio-cat .dl-name { font-size: 15.5px; }
}
@media (min-width: 1200px) { .studio-cat .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .studio-cat .dl-card { transition: none; } .studio-cat .dl-sweep { display: none !important; }
  .studio-cat.js .dl-card .dl-strip { opacity: 1; translate: 0 0; transition: none; }
}