/* ==========================================================================
   SEDDIR — Components
   header · menu · ticker · search · cart drawer · footer · product card ·
   pairing row ("Yanına yakışır") · feature cards
   ========================================================================== */

/* ==== Header ==============================================================
   Full-bleed bar. On the home page it floats clear over the hero (white logo
   on a soft top shade, no ticker) and turns into the solid page-colour bar once
   the hero has scrolled away — header.js toggles .head-solid. Without JS the
   bar stays solid (.js gates the clear state). */
.site-header {
  position: fixed; z-index: var(--z-header);
  top: 0; left: 0; right: 0;
  background: var(--head-bg); color: var(--head-fg);
  transition: background-color .45s var(--ease-io), color .45s var(--ease-io);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / 0));
  opacity: 0; transition: opacity .45s var(--ease-io);
}
.js [data-page="home"] .site-header { background-color: transparent; color: var(--c-paper); }
.js [data-page="home"] .site-header::before { opacity: 1; }
.js [data-page="home"] .ticker { height: 0; }
.head-solid [data-page="home"] .site-header { background-color: var(--head-bg); color: var(--head-fg); }
.head-solid [data-page="home"] .site-header::before { opacity: 0; }
.head-solid [data-page="home"] .ticker { height: var(--ticker-h); }
.menu-open .site-header { z-index: calc(var(--z-overlay) + 1); }   /* menu sits above the backdrop */
.menu-open [data-page="home"] .site-header { background-color: transparent; color: var(--c-pink); }
.menu-open [data-page="home"] .site-header::before { opacity: 0; }
.menu-open [data-page="home"] .ticker { height: 0; }
.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--bar-h);
  padding: 0 32px 0 36px;
}
.site-header__logo { display: block; width: 240px; transition: transform var(--dur) var(--ease-bounce); }
.site-header__logo:hover { transform: scale(1.04) rotate(-1.5deg); }
.site-header__actions { display: flex; justify-content: flex-end; gap: 14px; }

/* Burger → close morph */
.burger { position: relative; width: 40px; height: 26px; }
.burger i {
  position: absolute; left: 0; width: 100%; height: 3px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast), top var(--dur) var(--ease-spring);
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 11.5px; }
.burger i:nth-child(3) { top: 23px; }
.menu-open .burger i:nth-child(1) { top: 11.5px; transform: rotate(45deg); }
.menu-open .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .burger i:nth-child(3) { top: 11.5px; transform: rotate(-45deg); }
.menu-toggle { width: 48px; justify-items: start; }

.cart-count {
  position: absolute; right: 2px; bottom: 4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--c-red); color: var(--c-paper);
  font: 600 11px/1 var(--ff-body);
  transition: transform var(--dur) var(--ease-bounce);
}
.cart-count.is-bump { animation: bump .5s var(--ease-bounce); }
@keyframes bump { 40% { transform: scale(1.6); } }

/* ==== Menu: colour bands ==================================================
   Three bands (logo-on-colour pairs) + a black social strip slide in from the
   left one after another. The first band runs up behind the header bar, so the
   bar reads as part of it while the menu is open. */
.site-menu {
  position: fixed; inset: 0; z-index: -1;
  visibility: hidden; transition: visibility 0s linear .6s;
}
.menu-open .site-menu { visibility: visible; transition: none; }
.menu-open .site-header { color: var(--c-pink); }        /* bar sits on the navy band */
.site-menu__bands {
  height: 100%;
  display: grid; grid-template-rows: var(--bar-h) 1fr 1fr 1fr .55fr;
}
.site-menu__band {
  --menu-px: calc(var(--inset) + 36px);
  position: relative; display: flex;
  background: var(--band-bg, var(--c-black)); color: var(--band-fg, var(--c-paper));
  transform: translateX(-101%);
  transition: transform .4s var(--ease-io) calc((3 - var(--i)) * 50ms);
}
.site-menu__band:first-child { grid-row: 1 / 3; padding-top: var(--bar-h); }
.menu-open .site-menu__band { transform: none; transition: transform .55s var(--ease-spring) calc(var(--i) * 70ms); }
.site-menu__band > a {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--menu-px);
}
.site-menu__label {
  font-family: var(--ff-display); font-weight: 800; font-stretch: var(--wdth-wide);
  font-size: min(var(--fs-menu), 13svh); line-height: 1; text-transform: uppercase;
  transition: transform var(--dur) var(--ease-bounce);
}
.site-menu__band > a:is(:hover, :focus-visible) .site-menu__label { transform: translateX(clamp(16px, 2.4vw, 40px)); }
.site-menu__band > a[aria-current="page"] .site-menu__label { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .1em; }
.site-menu__sw {                                  /* cushion: fabric inside, piping round the edge */
  flex: none; width: clamp(44px, 5.4vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--f); border: clamp(7px, .9vw, 13px) solid var(--p);
  box-shadow: 0 6px 14px rgb(0 0 0 / .25);
  opacity: 0; transform: scale(.6) rotate(-30deg);
  transition: opacity var(--dur-fast), transform var(--dur) var(--ease-bounce);
}
.site-menu__band > a:is(:hover, :focus-visible) .site-menu__sw { opacity: 1; transform: none; }
.site-menu__band--small { align-items: center; padding: 0 var(--menu-px); }
.site-menu__social { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.site-menu__social a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site-menu__social a:hover { color: var(--c-yellow); }
.site-menu__social svg { width: 18px; height: 18px; flex: none; }

/* ==== Ticker (USP bar) ====================================================
   One endless line: the messages run right-to-left between small cushion
   swatches; the track holds two identical halves and slides by one half. */
.ticker {
  height: var(--ticker-h); overflow: hidden;
  background: var(--ticker-bg); color: var(--ticker-fg);
  font: 600 var(--fs-ticker)/1 var(--ff-display); letter-spacing: .14em; text-transform: uppercase;
  transition: height var(--dur) var(--ease-io);
}
.ticker__track { display: flex; width: max-content; height: 100%; animation: ticker 60s linear infinite; }
.ticker p { display: flex; align-items: center; }
.ticker span { padding: 0 22px; white-space: nowrap; }
.ticker i {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--f); border: 2.5px solid var(--p);
}
.ticker i:nth-of-type(4n + 1) { --f: var(--c-yellow); --p: var(--c-navy); }
.ticker i:nth-of-type(4n + 2) { --f: var(--c-pink);   --p: var(--c-green); }
.ticker i:nth-of-type(4n + 3) { --f: var(--c-red);    --p: var(--c-paper); }
.ticker i:nth-of-type(4n + 4) { --f: var(--c-orange); --p: var(--c-pink); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
.menu-open .ticker { height: 0; }

@media (max-width: 1024.98px) {
  .site-header__bar { padding: 0 16px; }
  .site-header__logo { width: 180px; }
  .site-header__actions { gap: 4px; }
}
@media (max-width: 767.98px) {
  .site-header__bar { padding: 0 10px; }
  .site-header__logo { width: 132px; }
  .burger { width: 30px; height: 20px; }
  .burger i { height: 2.5px; }
  .burger i:nth-child(2) { top: 8.75px; }
  .burger i:nth-child(3) { top: 17.5px; }
  .menu-open .burger i:nth-child(1), .menu-open .burger i:nth-child(3) { top: 8.75px; }
  [data-search-open] { display: none; }
  .site-menu__band { --menu-px: 20px; }
  .site-menu__bands { grid-template-rows: var(--bar-h) 1fr 1fr 1fr auto; }
  .site-menu__band--small { padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .site-menu__social { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 32px; }
}

/* ==== Shared overlay backdrop ============================================= */
.backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--shade);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur), visibility 0s linear var(--dur);
}
.backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur); }

/* ==== Search ============================================================== */
.search {
  position: fixed; z-index: var(--z-drawer);
  top: calc(var(--bar-h) + 24px); left: 50%;
  width: min(560px, calc(100vw - 2 * var(--inset) - 16px));
  transform: translate(-50%, -12px); opacity: 0; visibility: hidden;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast), visibility 0s linear var(--dur);
}
.search.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast); }
.search__field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 52px; border-radius: 12px;
  background: var(--c-paper); color: var(--c-black);
  box-shadow: 0 10px 40px rgb(0 0 0 / .25);
}
.search__field svg { width: 18px; height: 18px; flex: none; opacity: .6; }
.search__field:focus-within { box-shadow: 0 0 0 3px var(--c-yellow), 0 10px 40px rgb(0 0 0 / .25); }
.search__field input:focus-visible { outline: none; box-shadow: none; }
.search__field input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; height: 100%; }
.search__results {
  margin-top: 8px; border-radius: 12px; overflow: hidden;
  background: var(--c-paper); box-shadow: 0 10px 40px rgb(0 0 0 / .25);
}
.search__results:empty { display: none; }
.search__results a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  transition: background-color var(--dur-fast);
}
.search__results a:hover, .search__results a.is-active { background: var(--c-yellow); }
.search__results img { width: 44px; height: 58px; object-fit: cover; }
.search__results strong { display: block; font-family: var(--ff-display); }
.search__results small { color: var(--ink-soft); }
.search__empty { padding: 16px; color: var(--ink-soft); }

/* ==== Cart drawer ========================================================= */
.drawer {
  position: fixed; z-index: var(--z-drawer);
  top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--head-bg); color: var(--head-fg);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-spring), visibility 0s linear var(--dur-slow);
}
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-spring); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.drawer__title { font: 800 20px/1 var(--ff-display); font-stretch: var(--wdth-wide); text-transform: uppercase; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
.drawer__empty { height: 100%; display: grid; place-items: center; text-align: center; font-size: 14px; gap: 16px; align-content: center; }
.drawer__empty .mark { height: 64px; margin: 0 auto; }
.drawer__foot { padding: 0 20px 20px; }
.drawer__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-top: 1px solid currentColor; font-size: 13px;
}
.drawer__row--total { font: 800 18px/1 var(--ff-display); }
.drawer__note { font-size: 12px; opacity: .85; margin: 8px 0 14px; }
.drawer .btn--light:hover { background: var(--c-yellow); color: var(--c-black); }
.drawer__ask { display: grid; gap: 10px; }
.btn--line { border-color: currentColor; color: inherit; }
.btn--line:hover { background: var(--c-paper); color: var(--c-black); }
.drawer__ask [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.drawer__status { font-size: 13px; font-weight: 700; margin-top: 10px; padding: 8px 10px; border: 1.5px dashed currentColor; }
.drawer__status:empty { display: none; }
.drawer__status a { text-decoration: underline; text-underline-offset: 2px; }
.drawer__status strong { word-break: break-all; }

.line-item { display: grid; grid-template-columns: 68px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .2); align-items: center; }
.line-item img { width: 68px; height: 90px; object-fit: cover; }
.line-item__name { font: 800 16px/1.1 var(--ff-display); }
.line-item__meta { font-size: 12px; opacity: .85; margin-top: 2px; }
.line-item__price { font-weight: 700; font-size: 14px; text-align: right; }
.line-item__remove { font-size: 11px; text-decoration: underline; margin-top: 6px; opacity: .85; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid currentColor; border-radius: 999px; margin-top: 8px; }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700; }
.qty output, .qty input { min-width: 22px; width: 34px; text-align: center; font-size: 14px; font-weight: 600; border: 0; background: transparent; }

/* ==== Footer: piping edge ==================================================
   A white piping cord closes the top edge like a cushion seam; the wordmark
   sits full width on the bottom edge and squashes when leaned on. */
.site-footer {
  position: relative;
  background: var(--foot-bg); color: var(--foot-fg);
  padding: 64px var(--inset) 0;
}
.site-footer__cord {
  position: absolute; left: 0; right: 0; top: -7px; height: 14px; border-radius: 99px;
  background:
    repeating-linear-gradient(115deg, rgb(25 50 94 / .1) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #fff 0 45%, #e3e7e3 100%);
  box-shadow: 0 4px 6px rgb(0 0 0 / .22);
  transition: transform var(--dur) var(--ease-bounce);
}
.site-footer__main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 4vw; }
.site-footer__col { display: grid; gap: 18px; align-content: start; }
.site-footer__tagline { font: 800 var(--fs-foot-tag)/1.05 var(--ff-display); font-stretch: var(--wdth-wide); text-wrap: balance; }
.site-footer__text { max-width: 620px; font: 500 var(--fs-foot-contact)/1.45 var(--ff-display); }
.site-footer__usp { display: grid; gap: 6px; font: 800 var(--fs-foot-usp)/1.15 var(--ff-display); font-stretch: 108%; }
.site-footer__contact { font: 700 var(--fs-foot-contact)/1.3 var(--ff-display); }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__social { display: flex; gap: 20px; }
.site-footer__social a { display: block; transition: transform var(--dur) var(--ease-bounce); }
.site-footer__social a:hover { transform: translateY(-3px) rotate(-8deg); }
.site-footer__social svg { width: 22px; height: 22px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 28px; font: 700 var(--fs-foot-legal)/1.2 var(--ff-display); }
.site-footer__legal a:hover, .site-footer__credit a:hover { text-decoration: underline; }
.site-footer__credit { font: 500 var(--fs-foot-credit)/1.2 var(--ff-display); }
.site-footer__credit a { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__giant { margin-top: 56px; overflow: hidden; }
.site-footer__giant a { display: block; margin-bottom: -3.4%; }   /* bottom of the letters sits below the edge */
.site-footer__giant .wordmark {
  display: block; width: 100%; height: auto;
  transform-origin: 50% 100%; transition: transform .55s var(--ease-bounce);
}
.site-footer__giant a:is(:hover, :active, :focus-visible) .wordmark {
  transform: scale(1.025, .8);
  transition-duration: .28s; transition-timing-function: cubic-bezier(.3, .7, .4, 1);
}
.site-footer:has(.site-footer__giant a:is(:hover, :active)) .site-footer__cord { transform: translateY(3px); }

@media (max-width: 1024.98px) {
  .site-footer { padding-top: 48px; }
  .site-footer__giant { margin-top: 40px; }
}
@media (max-width: 767.98px) {
  .site-footer { padding: 40px 16px 0; }
  .site-footer__main { grid-template-columns: 1fr; gap: 22px; }
  .site-footer__col { gap: 12px; }
  .site-footer__cord { height: 10px; top: -5px; }
  .site-footer__legal { gap: 6px 18px; }
  .site-footer__giant { margin: 32px -6px 0; }
}

/* ==== Product card ======================================================== */
.p-card { display: block; position: relative; }
.p-card__media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #fff; padding: 8px;               /* white "frame" around the photo */
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .1);
}
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-circ); }
.p-card:hover .p-card__media img { transform: scale(1.05); }
.p-card__badge {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 5px 9px; background: var(--c-red); color: var(--c-paper);
  font: 800 11px/1 var(--ff-display); text-transform: uppercase;
}
.p-card__swatches { display: flex; gap: 5px; margin-top: 10px; }
.p-card__swatches span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.p-card__name { margin-top: 8px; font: 700 var(--fs-card-name)/1.2 var(--ff-display); }
.p-card__price { font: 700 var(--fs-card-price)/1.1 var(--ff-display); }
.p-card__price s { opacity: .5; margin-left: 4px; }

/* Cushion swatch: fabric inside, piping round the edge (size via --s) */
.cushion {
  display: block; flex: none; width: var(--s, 32px); aspect-ratio: 1; border-radius: 50%;
  background: var(--f); border: calc(var(--s, 32px) * .17) solid var(--p);
  box-shadow: 0 3px 8px rgb(0 0 0 / .22);
}

/* Catalogue card: swatch-book number, name + price on one line, piping bar */
.p-card__no {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  min-width: 34px; padding: 6px 8px; border-radius: 99px; text-align: center;
  background: rgb(245 248 245 / .92); color: var(--c-black);
  font: 800 12px/1 var(--ff-display); letter-spacing: .06em;
}
.p-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.p-card__row .p-card__name { margin-top: 0; }
.p-card__row .p-card__price { font-size: 15px; white-space: nowrap; }
.p-card__cord {
  display: block; width: 34%; height: 14px; margin-top: 12px; border-radius: 99px;
  background: var(--f); box-shadow: inset 0 0 0 3.5px var(--p), 0 2px 4px rgb(0 0 0 / .15);
  transition: width .7s var(--ease-spring);
}
.p-card:is(:hover, :focus-visible, .is-lit) .p-card__cord { width: 100%; }

/* "Yanına yakışır": the cushion being viewed sits beside each suggestion */
.picks { padding: 0 var(--inset); }
.picks__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; list-style: none; margin: 0; padding: 0; }
.p-card__pair { position: absolute; left: 18px; bottom: 18px; z-index: 1; display: flex; }
.p-card__pair .cushion { --s: 46px; transition: margin-left .5s var(--ease-spring), transform .5s var(--ease-spring); }
.p-card__pair .cushion + .cushion { margin-left: -14px; }
.p-card:is(:hover, :focus-visible) .p-card__pair .cushion + .cushion { margin-left: 6px; transform: rotate(14deg); }
.p-card__with { margin-top: 14px; font: 700 12px/1 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.p-card__with + .p-card__name { margin-top: 6px; }

@media (max-width: 1024.98px) {
  .pairs {
    display: flex; gap: 20px; margin: 0 calc(-1 * var(--inset)); padding: 0 var(--inset) 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--inset);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pairs::-webkit-scrollbar { display: none; }
  .pairs > li { flex: none; width: 300px; scroll-snap-align: start; }
  .picks__head { margin-bottom: 24px; }
}
@media (max-width: 767.98px) {
  .pairs { gap: 14px; }
  .pairs > li { width: 62vw; }
  .p-card__pair .cushion { --s: 38px; }
  .p-card__row { flex-direction: column; gap: 4px; }
  .p-card__row .p-card__price { font-size: 13px; }
  .p-card__no { top: 12px; right: 12px; }
}

/* ==== Feature cards (Hakkımızda / Koleksiyon) ============================ */
.features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 54px;
  padding: 0 var(--inset);
}
.feature {
  --f-bg: var(--c-navy); --f-fg: var(--c-pink);
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 653 / 416;
  background: var(--f-bg); color: var(--f-fg);
  transition: background-color var(--dur) var(--ease-bounce), color var(--dur) var(--ease-bounce);
}
.feature--about:hover   { --f-bg: var(--c-red);    --f-fg: var(--c-yellow); }
.feature--catalog       { --f-bg: var(--c-pink);   --f-fg: var(--c-navy); }
.feature--catalog:hover { --f-bg: var(--c-yellow); --f-fg: var(--c-red); }

.feature__label {
  position: absolute; left: 6%; bottom: 7%;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 800 clamp(30px, 3.3vw, 48px)/1 var(--ff-display);
  text-transform: uppercase;
}
.feature__art { position: absolute; inset: 0; }
.feature__art .mark {
  position: absolute; left: 30%; top: -8%; height: 116%;
  transition: transform .9s var(--ease-bounce);
}
.feature--about:hover .feature__art .mark { transform: rotate(-5deg) translateX(-2%); }
.feature__cord { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; }
.feature__cord path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out-circ); }
.feature:hover .feature__cord path { stroke-dashoffset: 2; }

/* Rotating badge */
.badge {
  position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.badge__ring { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.feature--catalog:hover .badge__ring { animation-duration: 8s; }
.badge__ring text { font: 800 54px var(--ff-display); font-stretch: var(--wdth-wide); letter-spacing: 6px; fill: currentColor; text-transform: uppercase; }
.badge__ring circle { fill: none; stroke: currentColor; }
.badge .mark { position: absolute; left: 50%; top: 50%; height: 30%; transform: translate(-50%, -50%) rotate(-4deg); transition: transform .9s var(--ease-bounce); }
.feature--catalog:hover .badge .mark { transform: translate(-50%, -50%) rotate(8deg) scale(1.1); }
.badge__spark { position: absolute; width: 14%; fill: currentColor; transition: transform .9s var(--ease-bounce); }
.badge__spark--1 { right: 14%; top: 14%; }
.badge__spark--2 { left: 12%; bottom: 20%; width: 10%; }
.feature--catalog:hover .badge__spark { transform: rotate(90deg) scale(1.15); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 767.98px) {
  .features { grid-template-columns: 1fr; gap: 16px; }
  .feature__label { font-size: 6.4vw; }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .features { grid-template-columns: 1fr; gap: 24px; }
  .feature__label { font-size: 6vw; }
}

.p-card__badge--out { background: var(--c-black); }

/* ==== Checkout (server build only) ======================================== */
.checkout { flex: 1; overflow-y: auto; padding: 4px 20px 20px; display: grid; gap: 12px; align-content: start; overscroll-behavior: contain; }
.checkout__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-decoration: underline; justify-self: start; }
.checkout__back svg { width: 16px; height: 16px; }
.checkout__lead { font: 800 18px/1.1 var(--ff-display); text-transform: uppercase; margin-top: 4px; }
.checkout__field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
.checkout__field input, .checkout__field textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid currentColor;
  background: rgb(255 255 255 / .08); color: inherit; font: 16px/1.3 var(--ff-body); resize: vertical;
}
.checkout__field input:focus-visible, .checkout__field textarea:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 1px; }
.checkout__consent { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; align-items: flex-start; }
.checkout__consent input { margin-top: 2px; accent-color: var(--c-yellow); width: 16px; height: 16px; flex: none; }
.checkout__consent a { text-decoration: underline; }
.checkout__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout__error { font-size: 13px; font-weight: 600; color: var(--c-yellow); min-height: 1em; }
.checkout__error:empty { display: none; }
.checkout__mail { text-decoration: underline; font-weight: 700; }
.checkout--done { text-align: center; align-content: center; font-size: 14px; }
.checkout--done .mark { height: 64px; margin: 0 auto; }