:root {
  --color-primary: #d4a843;
  --color-accent: #f3dc95;
  --color-background: #0b0908;
  --color-foreground: #efe4cc;
  --color-muted: #8f846f;
  --link-color: #d4a843;
  --button-background: #d4a843;
  --button-foreground: #1a0303;
  --button-border: #f3dc95;
  --input-background: #14100d;
  --input-foreground: #efe4cc;
  --input-border: rgba(212, 168, 67, .2);
  --card-background: #14100d;
  --card-border: rgba(212, 168, 67, .22);
  --acc-rgb: 212, 168, 67;
  --hi-rgb: 243, 220, 149;
  --color-heading: #f3e7c9;
  --px-red: #ff2a36;
  --font-display: "MF Display", Georgia, serif;
  --font-mono: "MF Type", ui-monospace, monospace;
}

@font-face { font-family: "MF Display"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/playfair-display@latest/latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "MF Display"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/playfair-display@latest/latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "MF Type"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/special-elite@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MF Body"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MF Body"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@property --mf-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }


@keyframes mf-rise   { from { opacity: 0; translate: 0 26px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes mf-drop   { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
@keyframes mf-reveal { from { opacity: 0; translate: 0 50px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mf-pop    { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mf-foil   { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes mf-shine  { 0%, 62% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes mf-spin   { to { --mf-a: 360deg; } }
@keyframes mf-smoke  { 0% { translate: -6% 2%; scale: 1; } 50% { translate: 4% -3%; scale: 1.12; } 100% { translate: 8% 1%; scale: 1.02; } }
@keyframes mf-swing  { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@keyframes mf-rain   { from { translate: 0 0; } to { translate: -80px 240px; } }
@keyframes mf-flick  { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; } }
@keyframes mf-type   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mf-caret  { 50% { opacity: 0; } }
@keyframes mf-stamp  { 0% { opacity: 0; scale: 2.2; rotate: -24deg; } 60% { opacity: .95; scale: .92; rotate: -12deg; } 100% { opacity: .9; scale: 1; rotate: -14deg; } }
@keyframes mf-lock  { from { opacity: 0; scale: 1.9; rotate: 90deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mf-sway  { 0%, 100% { translate: 0 0; } 25% { translate: 3px -2px; } 50% { translate: -2px 2px; } 75% { translate: 2px 3px; } }
@keyframes mf-ooze  { 0%, 100% { scale: 1 .82; } 50% { scale: 1 1.06; } }
@keyframes mf-intro {
  0% { opacity: 1; visibility: visible; background-color: #000; color: rgba(212, 168, 67, 0); }
  22% { color: rgba(212, 168, 67, 1); background-color: #000; }
  30% { background-color: #000; }
  31% { background-color: #fff1cf; color: #1a0303; }
  33% { background-color: #000; color: rgba(212, 168, 67, 1); }
  42% { background-color: #000; }
  43% { background-color: #ffe2a8; color: #1a0303; }
  45% { background-color: #000; color: #d11f2a; }
  53% { background-color: #000; }
  54% { background-color: #fff6dc; color: #1a0303; }
  56% { background-color: #000; color: #d11f2a; }
  74% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; background-color: #000; color: #d11f2a; }
}
@keyframes mf-glow   { 0%, 100% { box-shadow: 0 10px 30px -12px rgba(212, 168, 67, .55), inset 0 1px 0 rgba(255, 246, 214, .6); } 50% { box-shadow: 0 14px 44px -10px rgba(212, 168, 67, .85), inset 0 1px 0 rgba(255, 246, 214, .6); } }


body {
  background: #0b0908 !important;
  color: #efe4cc;
  font-family: "MF Body", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212, 168, 67, .10), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(163, 18, 27, .14), transparent 55%),
    repeating-radial-gradient(circle at 23% 37%, rgba(255, 240, 210, .025) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 63%, rgba(0, 0, 0, .25) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .7) 100%);
  animation: mf-flick 11s infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: -260px -100px 0 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(103deg, transparent 0 22px, rgba(239, 228, 204, .05) 22px 23px, transparent 23px 61px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
  animation: mf-rain .9s linear infinite;
  will-change: translate;
}

::selection { background: #a3121b; color: #fff4dc; }
* { scrollbar-width: thin; scrollbar-color: #4a3a1c #0b0908; }


h1, h2, h3 {
  font-family: "MF Display", "Playfair Display", Georgia, serif;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #f3e7c9;
}
h4, h5 { font-family: "MF Body", ui-sans-serif, system-ui, sans-serif; font-weight: 700; color: #f3e7c9; }
p, li { color: #b9ad97; }
small, [class*="subtitle"], [class*="Subtitle"], [class*="muted"] { color: #8f846f; }
a { color: #d4a843; transition: color .2s ease; }
a:hover { color: #f3dc95; }


:is(.mf-products, .mf-faq) :is(h1, h2):first-of-type {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(100deg, #b8892e 0%, #f3dc95 20%, #d4a843 40%, #fff3c8 50%, #d4a843 60%, #b8892e 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: mf-foil 8s linear infinite;
}
:is(.mf-products, .mf-faq) :is(h1, h2):first-of-type::after {
  content: "";
  display: block;
  width: 120px;
  height: 9px;
  margin-top: 12px;
  background:
    linear-gradient(45deg, transparent 40%, #a3121b 40% 60%, transparent 60%) 50% 50% / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, #d4a843 30%, #d4a843 42%, transparent 43% 57%, #d4a843 58%, #d4a843 70%, transparent) 0 50% / 100% 1px no-repeat;
}


.mf-header {
  background: linear-gradient(180deg, rgba(8, 6, 5, .92), rgba(8, 6, 5, .72)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(212, 168, 67, .22) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 12px 40px -20px rgba(0, 0, 0, .9);
  animation: mf-drop .8s cubic-bezier(.2, .9, .2, 1) both;
}
.mf-header img { filter: drop-shadow(0 0 12px rgba(212, 168, 67, .3)); animation: mf-flick 9s infinite; }
.mf-header nav a {
  font-family: "MF Type", "Special Elite", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82em;
  color: #e6d9bc;
  text-decoration: none;
  background: linear-gradient(90deg, #a3121b, #d4a843) left 100% / 0% 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size .35s cubic-bezier(.2, .9, .2, 1), color .2s ease;
}
.mf-header nav a:hover { background-size: 100% 1px; color: #f3dc95; }


.mf-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 78px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34px 7px at 50% 0, #6e070c 96%, transparent) 0 0 / 70px 8px repeat-x,
    linear-gradient(90deg, transparent 40px, #6e070c 40px 46px, transparent 46px) 0 0 / 420px 46px repeat-x,
    radial-gradient(circle at 43px 46px, #6e070c 0 6px, transparent 6.5px) 0 0 / 420px 60px repeat-x,
    linear-gradient(90deg, transparent 130px, #6e070c 130px 134px, transparent 134px) 0 0 / 420px 22px repeat-x,
    radial-gradient(circle at 132px 22px, #6e070c 0 4.5px, transparent 5px) 0 0 / 420px 30px repeat-x,
    linear-gradient(90deg, transparent 205px, #6e070c 205px 212px, transparent 212px) 0 0 / 420px 64px repeat-x,
    radial-gradient(circle at 208.5px 64px, #6e070c 0 7px, transparent 7.5px) 0 0 / 420px 74px repeat-x,
    linear-gradient(90deg, transparent 300px, #6e070c 300px 304px, transparent 304px) 0 0 / 420px 30px repeat-x,
    radial-gradient(circle at 302px 30px, #6e070c 0 5px, transparent 5.5px) 0 0 / 420px 38px repeat-x,
    linear-gradient(90deg, transparent 360px, #6e070c 360px 365px, transparent 365px) 0 0 / 420px 14px repeat-x,
    radial-gradient(circle at 362.5px 14px, #6e070c 0 4px, transparent 4.5px) 0 0 / 420px 20px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  transform-origin: top;
  animation: mf-ooze 7s ease-in-out infinite;
}

body:has(.mf-hero) .mf-header { animation-delay: 1.1s; }


body:has(.mf-hero) .mf-footer::before {
  content: "THE MAFIA";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: 900 clamp(42px, 9vw, 110px)/1 "MF Display", "Playfair Display", Georgia, serif;
  letter-spacing: .06em;
  background: #000;
  opacity: 0;
  visibility: hidden;
  animation: mf-intro 1.7s ease-out both;
}


:is(.mf-header, header) a:is([href*="review"], [href*="Review"], [href*="feedback"], [href*="vouch"], [href*="faq"], [href*="FAQ"], [href*="contact"], [href*="Contact"], [href*="support"], [href*="ticket"]),
:is(.mf-header, header) li:has(> a:is([href*="review"], [href*="Review"], [href*="feedback"], [href*="vouch"], [href*="faq"], [href*="FAQ"], [href*="contact"], [href*="Contact"], [href*="support"], [href*="ticket"])) {
  display: none !important;
}


button, [role="button"] {
  font-family: "MF Body", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .25s cubic-bezier(.2, .9, .2, 1), box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .2s ease;
}
button:active, [role="button"]:active { transform: scale(.97); }


:is(button, a):is(
  [class*="primary"], [class*="Primary"], [class*="cta"], [class*="Cta"], [class*="CTA"],
  [class*="add-to-cart"], [class*="addToCart"], [class*="AddToCart"],
  [class*="buy-now"], [class*="buyNow"], [class*="BuyNow"],
  [class*="checkout"], [class*="Checkout"]
), button[type="submit"], .mf-hero a[href="/products"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #f6e3a1 0%, #d4a843 45%, #9c7424 100%) !important;
  color: #1a1206 !important;
  border: 1px solid #f3dc95 !important;
  border-radius: 4px !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 244, 210, .4);
  animation: mf-glow 3.4s ease-in-out infinite;
}
:is(button, a):is(
  [class*="primary"], [class*="Primary"], [class*="cta"], [class*="Cta"], [class*="CTA"],
  [class*="add-to-cart"], [class*="addToCart"], [class*="AddToCart"],
  [class*="buy-now"], [class*="buyNow"], [class*="BuyNow"],
  [class*="checkout"], [class*="Checkout"]
)::after, button[type="submit"]::after, .mf-hero a[href="/products"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 252, 235, .7) 50%, transparent 70%);
  animation: mf-shine 3.8s ease-in-out infinite;
}
:is(button, a):is(
  [class*="primary"], [class*="Primary"], [class*="cta"], [class*="Cta"], [class*="CTA"],
  [class*="add-to-cart"], [class*="addToCart"], [class*="AddToCart"],
  [class*="buy-now"], [class*="buyNow"], [class*="BuyNow"],
  [class*="checkout"], [class*="Checkout"]
):hover, button[type="submit"]:hover, .mf-hero a[href="/products"]:hover {
  transform: translateY(-2px);
  color: #1a1206 !important;
}


:is(button, a):is([class*="secondary"], [class*="Secondary"], [class*="outline"], [class*="Outline"], [class*="ghost"], [class*="Ghost"]),
.mf-hero a[href*="t.me"] {
  background: rgba(163, 18, 27, .08) !important;
  color: #f3e7c9 !important;
  border: 1px solid rgba(209, 31, 42, .65) !important;
  border-radius: 4px !important;
  transition: transform .25s cubic-bezier(.2, .9, .2, 1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
:is(button, a):is([class*="secondary"], [class*="Secondary"], [class*="outline"], [class*="Outline"], [class*="ghost"], [class*="Ghost"]):hover,
.mf-hero a[href*="t.me"]:hover {
  transform: translateY(-2px);
  background: #a3121b !important;
  border-color: #d11f2a !important;
  box-shadow: 0 14px 40px -14px rgba(209, 31, 42, .8);
  color: #fff4dc !important;
}


input, select, textarea {
  background: rgba(20, 16, 13, .9) !important;
  color: #efe4cc !important;
  border: 1px solid rgba(212, 168, 67, .2) !important;
  border-radius: 4px !important;
  font-family: "MF Body", ui-sans-serif, system-ui, sans-serif;
  caret-color: #d4a843;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(212, 168, 67, .4) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #d4a843 !important;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, .18) !important;
}
input::placeholder, textarea::placeholder { color: #6f6553; }
input[type="checkbox"], input[type="radio"] { accent-color: #d4a843; }


.mf-hero { position: relative; isolation: isolate; overflow: hidden; }


.mf-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 22% at 30% 70%, rgba(220, 210, 190, .09), transparent 70%),
    radial-gradient(ellipse 26% 18% at 64% 58%, rgba(220, 210, 190, .07), transparent 70%),
    radial-gradient(ellipse 34% 26% at 80% 82%, rgba(220, 210, 190, .06), transparent 70%),
    radial-gradient(ellipse 36% 22% at 50% 78%, rgba(163, 18, 27, .2), transparent 70%);
  filter: blur(14px);
  animation: mf-smoke 18s ease-in-out infinite alternate;
  will-change: translate, scale;
}

.mf-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -40px;
  width: 1100px;
  height: 900px;
  margin-left: -550px;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 236, 190, .13) 14deg, rgba(255, 236, 190, .2) 20deg, rgba(255, 236, 190, .13) 26deg, transparent 40deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 90% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 90% at 50% 0%, #000 30%, transparent 75%);
  transform-origin: 50% 0%;
  animation: mf-swing 9s ease-in-out infinite;
  will-change: rotate;
}

.mf-hero :is(h1, h2, p, a) { animation: mf-rise 1s cubic-bezier(.2, .9, .2, 1) both; }
.mf-hero :is(h1, h2) { animation-delay: 1.35s; }
.mf-hero p { animation-delay: 1.55s; }
.mf-hero a { animation-delay: 1.75s; }
.mf-hero a + a { animation-delay: 1.85s; }

.mf-hero :is(h1, h2):first-of-type {
  font-size: clamp(2.6rem, 7.4vw, 6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #9c7424 0%, #f3dc95 18%, #d4a843 34%, #fff6d6 46%, #d4a843 58%, #b8892e 78%, #f3dc95 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .7));
  animation: mf-rise 1s 1.35s cubic-bezier(.2, .9, .2, 1) both, mf-foil 7s 2.4s linear infinite, mf-flick 6s 3s infinite;
}
.mf-hero p { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #b9ad97; }


.mf-hero :is([class*="eyebrow"], [class*="Eyebrow"]) {
  display: inline-block;
  position: relative;
  padding: 6px 14px;
  border: 1px solid rgba(163, 18, 27, .7);
  background: rgba(163, 18, 27, .12);
  color: #e8604f !important;
  font-family: "MF Type", "Special Elite", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: mf-rise .6s 1.1s both, mf-type 1.4s 1.25s steps(22, end) both;
}


.mf-hero :is([class*="rotat"], [class*="Rotat"], [class*="typewrit"], [class*="Typewrit"], [class*="typing"], [class*="typed"], [class*="cycl"], [class*="highlight"], [class*="Highlight"]),
.mf-hero :is(h1, h2) mark {
  display: none !important;
}


:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *),
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article)) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(212, 168, 67, .9) 0 10px, transparent 10px) top left / 22px 22px no-repeat,
    linear-gradient(225deg, rgba(212, 168, 67, .9) 0 10px, transparent 10px) top right / 22px 22px no-repeat,
    linear-gradient(180deg, #17120f, #0e0b09) !important;
  border: 1px solid rgba(212, 168, 67, .22) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(255, 240, 210, .05) inset, 0 20px 40px -30px #000;
  transition: transform .5s cubic-bezier(.2, .9, .2, 1), box-shadow .5s ease, border-color .3s ease;
}

:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *)::before,
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article))::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 50%;
  width: 112px;
  height: 112px;
  margin-left: -56px;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle, #ff2a36 0 3px, transparent 3.5px),
    radial-gradient(circle, transparent 0 44%, #ff2a36 45% 47.5%, transparent 48.5%),
    radial-gradient(circle, transparent 0 29%, rgba(255, 42, 54, .5) 30% 31%, transparent 32%),
    linear-gradient(#ff2a36, #ff2a36) 50% 0 / 2px 34% no-repeat,
    linear-gradient(#ff2a36, #ff2a36) 50% 100% / 2px 34% no-repeat,
    linear-gradient(#ff2a36, #ff2a36) 0 50% / 34% 2px no-repeat,
    linear-gradient(#ff2a36, #ff2a36) 100% 50% / 34% 2px no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 30, 40, .9));
  opacity: 0;
}

:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *)::after,
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article))::after {
  content: "MARKED";
  position: absolute;
  top: 18px;
  right: 14px;
  z-index: 2;
  pointer-events: none;
  padding: 5px 10px;
  border: 2px solid #d11f2a;
  border-radius: 3px;
  color: #d11f2a;
  font: 400 15px/1 "MF Type", "Special Elite", ui-monospace, monospace;
  letter-spacing: .26em;
  background: rgba(11, 9, 8, .55);
  opacity: 0;
  rotate: -14deg;
}

:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]), .mf-products :is(a, article), .mf-hero { cursor: crosshair; }
.mf-hero a { cursor: pointer; }
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *):hover,
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article)):hover {
  transform: translateY(-6px) rotate(-.4deg);
  border-color: rgba(209, 31, 42, .65) !important;
  box-shadow: 0 30px 60px -24px rgba(209, 31, 42, .55), 0 0 0 1px rgba(209, 31, 42, .25);
}
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *):hover::before,
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article)):hover::before {
  animation: mf-lock .5s cubic-bezier(.2, 1.4, .4, 1) both, mf-sway 2.4s .5s ease-in-out infinite;
}
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):not(:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) *):hover::after,
.mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article)):hover::after {
  animation: mf-stamp .45s cubic-bezier(.3, 1.4, .5, 1) both;
}


:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) img, .mf-products img {
  width: 100% !important;
  height: auto !important;
  max-height: 210px !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  filter: sepia(.45) saturate(.8) contrast(1.05) brightness(.85);
  transition: filter .6s ease, scale .8s cubic-bezier(.2, .9, .2, 1);
}
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):hover img,
.mf-products :is(a, article):hover img { filter: none; scale: 1.05; }


:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) :is(h2, h3, h4), .mf-products :is(a, article) :is(h2, h3, h4) {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "MF Display", "Playfair Display", Georgia, serif !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  margin: 8px 0 4px !important;
  transition: color .25s ease;
}
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]):hover :is(h2, h3, h4),
.mf-products :is(a, article):hover :is(h2, h3, h4) { color: #f3dc95; }
:is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) p, .mf-products :is(a, article) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px !important;
  margin: 2px 0 !important;
}


[class*="price"], [class*="Price"] {
  color: #e6c46a !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:is(s, del)[class*="price"], [class*="price"] :is(s, del), [class*="Price"] :is(s, del) { color: #6f6553 !important; font-weight: 400; }
[class*="badge"], [class*="Badge"], [class*="chip"], [class*="Chip"] {
  font-family: "MF Type", "Special Elite", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-radius: 2px !important;
  border-color: rgba(209, 31, 42, .55) !important;
  color: #e8604f !important;
}


details {
  background: linear-gradient(180deg, #15110e, #0f0c0a);
  border: 1px solid rgba(212, 168, 67, .16) !important;
  border-left: 3px solid rgba(163, 18, 27, .7) !important;
  border-radius: 4px !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
details:hover { border-color: rgba(212, 168, 67, .35) !important; }
details[open] {
  border-color: rgba(212, 168, 67, .5) !important;
  border-left-color: #d11f2a !important;
  box-shadow: 0 20px 50px -30px rgba(212, 168, 67, .4);
}
summary { cursor: pointer; font-family: "MF Display", Georgia, serif; font-weight: 900; color: #f3e7c9; letter-spacing: .01em; }
details[open] > :not(summary) { animation: mf-rise .45s cubic-bezier(.2, .9, .2, 1) both; }


[role="dialog"] {
  background: linear-gradient(180deg, #15110e, #0c0a08) !important;
  border: 1px solid rgba(212, 168, 67, .25) !important;
  box-shadow: 0 40px 120px -30px #000, 0 0 0 1px rgba(0, 0, 0, .6);
  animation: mf-pop .45s cubic-bezier(.2, .9, .2, 1) both;
}
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 168, 67, .5), transparent); }


@supports (animation-timeline: view()) {
  .mf-reveal {
    animation: mf-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  .mf-products :is(a, article):has(img):not(:is(a, article) :is(a, article)) {
    animation: mf-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
}


.mf-footer {
  background: linear-gradient(180deg, transparent, #050403) !important;
  border-top: 1px solid rgba(212, 168, 67, .18) !important;
  color: #7d7361 !important;
  font-family: "MF Type", "Special Elite", ui-monospace, monospace;
  letter-spacing: .08em;
}
.mf-footer a { color: #9d927c !important; }
.mf-footer a:hover { color: #f3dc95 !important; }


footer a[href*="shoppex"], .mf-footer a[href*="shoppex"],
:is(footer, .mf-footer) :is(p, div, span, small, li):has(> a[href*="shoppex"]):not(:has(a:not([href*="shoppex"]))),
[class*="powered"], [class*="Powered"] {
  display: none !important;
}


.mf-hero a[href="/products"] { animation: mf-rise 1s 1.75s cubic-bezier(.2, .9, .2, 1) both, mf-glow 3.4s 2.8s ease-in-out infinite; }
.mf-hero a[href*="t.me"] { animation: mf-rise 1s 1.85s cubic-bezier(.2, .9, .2, 1) both; }
.mf-hero a[href*="t.me"]::after { content: none !important; }


@media (max-width: 640px) {
  .mf-hero::after { width: 700px; margin-left: -350px; }
  :is([class*="product-card"], [class*="productCard"], [class*="ProductCard"]) img, .mf-products img { max-height: 170px !important; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}