/* Homepage "Shop by category" bento cards (Ester's pack, 6 Nov 2026). Unlayered overlay: no Tailwind recompile. Bump -vN on every edit.
   Template: Magento_Cms/templates/elements/category-cards.phtml. Heading font = theme stack var(--font-heading) (MADE Outer Sans); bold weights only. */
.ds-cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; }
@media (min-width: 640px) { .ds-cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 14px; } }
@media (min-width: 1024px) { .ds-cc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; } }
.ds-cc-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 14px; border-radius: 18px; isolation: isolate;
  background: #120E1C center / cover no-repeat; color: #fff; text-decoration: none; font-family: var(--font-heading); }
/* the smoke background is its own layer so it can move (transform only, runs on the GPU); it loads when the block is near the screen */
.ds-cc-fog { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; transform: translateZ(0); }
.ds-cc-fog::before { content: ""; position: absolute; inset: -14%; background: center / cover no-repeat; }
.ds-cc.is-seen .ds-cc-fog::before { background-image: var(--ds-bg); }
@media (prefers-reduced-motion: no-preference) {
  .ds-cc.is-seen .ds-cc-fog::before { animation: ds-cc-bgdrift 14s ease-in-out infinite alternate; will-change: transform; }
  .ds-cc.is-seen .ds-cc-card:nth-child(even) .ds-cc-fog::before { animation-duration: 18s; animation-direction: alternate-reverse; }
  .ds-cc.is-seen .ds-cc-card:nth-child(3n) .ds-cc-fog::before { animation-duration: 22s; }
  .ds-cc:not(.is-live) .ds-cc-fog::before, .ds-cc:not(.is-live) .ds-cc-smoke::before { animation-play-state: paused; }
}
@keyframes ds-cc-bgdrift { 0% { transform: translate(-7%, -4%) scale(1.04) rotate(-1deg); } 100% { transform: translate(7%, 4%) scale(1.2) rotate(1.5deg); } }
@media (min-width: 640px) { .ds-cc-card { padding: 18px; } }
.ds-cc-card--big { grid-column: span 2; grid-row: span 2; padding: 26px; }
.ds-cc-card:focus-visible { outline: 3px solid #2A1857; outline-offset: 3px; z-index: 5; }
.ds-cc-scrim { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to top right, rgba(8,6,16,.55), transparent 55%); }
/* product cut-out: breaks out of the card top; soft edges and glow are made here, not in the picture */
.ds-cc-prod { position: absolute; z-index: 1; left: 22%; right: 22%; top: 10%; bottom: 10%; display: flex; justify-content: center; align-items: center; pointer-events: none;
  transform-origin: 50% 55%; transition: transform .45s cubic-bezier(.2,.8,.2,1.15);
  filter: drop-shadow(0 0 1.5px var(--glow-a)) drop-shadow(0 0 12px var(--glow-b)) drop-shadow(0 16px 16px rgba(0,0,0,.45)); }
/* the product sits inside the card, centred in the free space right of the name and button; it only leaves the frame when it magnifies on hover */
.ds-cc-prod img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (min-width: 640px) { .ds-cc-prod { left: 24%; right: 24%; top: 12%; bottom: 12%; } }


.ds-cc-card--big .ds-cc-prod { left: 12%; right: 12%; top: 16%; bottom: 16%; }
@media (min-width: 640px) { .ds-cc-card--big .ds-cc-prod { left: 14%; right: 14%; top: 14%; bottom: 14%; } }
/* smoke in front of the product's lower part: the product rises out of the smoke */
/* fog drifting over the lower part of the product (the product rises out of the smoke); fades away on hover. The wide texture inside moves slowly (transform only). */
.ds-cc-smoke { position: absolute; z-index: 2; left: 10%; width: 80%; top: 40%; height: 52%; overflow: hidden; opacity: .6; mix-blend-mode: screen; pointer-events: none; transition: opacity .45s;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.ds-cc-smoke::before { content: ""; position: absolute; inset: 0 -45%; background: no-repeat 50% 60% / cover; }
.ds-cc.is-seen .ds-cc-smoke::before { background-image: var(--ds-bg); }
.ds-cc-card--big .ds-cc-smoke { left: 8%; width: 84%; top: 38%; height: 42%; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .ds-cc.is-seen .ds-cc-smoke::before { animation: ds-cc-drift 24s ease-in-out infinite alternate; will-change: transform; }
  .ds-cc-card:nth-child(even) .ds-cc-smoke::before { animation-duration: 30s; animation-direction: alternate-reverse; }
}
@keyframes ds-cc-drift { from { transform: translateX(-14%) scale(1.05); } to { transform: translateX(14%) scale(1.2); } }
/* ground shadow under shoes: a flat dark ellipse at the foot of the product box, so the shoe floats above it */
.ds-cc-card--big .ds-cc-prod::before, .ds-cc-card--wide .ds-cc-prod::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -6px; height: 14%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 70%); }
.ds-cc-name { position: relative; z-index: 3; max-width: 100%; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; font-size: 13px; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,.45); overflow-wrap: normal; }
@media (min-width: 640px) { .ds-cc-name { max-width: 100%; font-size: 14px; letter-spacing: .01em; } }
.ds-cc-card--big .ds-cc-name { max-width: none; font-size: clamp(24px, 2.6vw, 34px); }
.ds-cc-btn { position: relative; z-index: 3; align-self: flex-start; max-width: 100%; margin-top: 10px; padding: 8px 12px; overflow: hidden; border-radius: 8px; background: #BFFF00; color: #1A1A1A;
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; transition: transform .45s cubic-bezier(.2,.8,.2,1.15); }
.ds-cc-card--big .ds-cc-btn { margin-top: 14px; padding: 11px 16px; font-size: 13px; }
.ds-cc-full { display: none; }
@media (min-width: 640px) { .ds-cc-full { display: inline; } .ds-cc-short { display: none; } }
.ds-cc-badge { display: none; }
@media (min-width: 640px) { .ds-cc-badge { position: absolute; left: 16px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  background: #fff; color: #2A1857; font-size: 11px; font-weight: 700; line-height: 1.5; } }
.ds-cc-badge i { width: 7px; height: 7px; border-radius: 50%; background: #E11D2A; }
/* hover (mouse only) and keyboard focus: product grows and tilts, smoke in front fades, button lifts, the card rises above its neighbours */
@media (hover: hover) and (pointer: fine) {
  .ds-cc-card:hover { z-index: 5; }
  .ds-cc-card:hover .ds-cc-prod { transform: translateY(-8px) scale(1.16) rotate(-3deg); }
  .ds-cc-card--big:hover .ds-cc-prod { transform: translateY(-10px) scale(1.09) rotate(-2deg); }
  .ds-cc-card:hover .ds-cc-smoke { opacity: 0; }
  .ds-cc-card:hover .ds-cc-btn { transform: translateY(-2px); }
}
.ds-cc-card:focus-visible .ds-cc-prod { transform: translateY(-8px) scale(1.16) rotate(-3deg); }
.ds-cc-card--big:focus-visible .ds-cc-prod { transform: translateY(-10px) scale(1.09) rotate(-2deg); }
.ds-cc-card:focus-visible .ds-cc-smoke { opacity: 0; }
.ds-cc-card:focus-visible .ds-cc-btn { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .ds-cc-prod, .ds-cc-smoke, .ds-cc-btn { transition: none; } }
@media (min-width: 640px) and (max-width: 1023px) { .ds-cc-card:not(.ds-cc-card--big) .ds-cc-name { font-size: 12px; } }

/* Mitja 6 Nov: non-footwear products sit well right of centre (clear of the name and button); the Jordan shoe is smaller and sits above the text; the big Kobe shoe sits 5 % higher */
.ds-cc-card:not(.ds-cc-card--big):not(.ds-cc-card--wide) .ds-cc-prod { left: 40%; right: 6%; }
.ds-cc-card--wide .ds-cc-prod { top: 10%; bottom: 42%; }
@media (min-width: 640px) { .ds-cc-card--wide .ds-cc-prod { top: 10%; bottom: 36%; } }
.ds-cc-card--big .ds-cc-prod { top: 4%; bottom: 30%; }
@media (min-width: 640px) { .ds-cc-card--big .ds-cc-prod { top: 5%; bottom: 23%; } }
/* Mitja 6 Nov (2): the Jordan shoe lines up with the other cards (right of centre, above the text); shoes stand level (the cut-outs tilt the toe up by about 10 degrees) */
.ds-cc-card--wide .ds-cc-prod { left: 40%; right: 6%; }
.ds-cc-card--big .ds-cc-prod img { transform: rotate(9deg); }