/**
 * Theme utility CSS — hand-written, Tailwind-style class names without
 * a Tailwind dependency.
 *
 * This file is the sole source of utility classes (display, position,
 * spacing, typography, colors, transforms, hover/group-hover/responsive
 * variants, etc.) referenced from pattern markup and template PHP.
 * Class names mirror Tailwind so the markup reads familiarly, but
 * there is NO Tailwind CDN, NO tailwind.config, and NO build step.
 *
 * Design tokens come from theme.json via the auto-generated CSS custom
 * properties (--wp--preset--color--*, --wp--preset--font-family--*,
 * --wp--preset--font-size--*). Where a var() is used, an explicit
 * fallback value is included so the visual still works even if the
 * variable resolution fails (e.g. when WP defers the global-styles
 * inline stylesheet).
 *
 * When you find a class used in markup that has no rule here, add it
 * to the appropriate section. The cascade order is:
 *   theme.css (this file) → style.css (theme-specific overrides) →
 *   WP global-styles-inline.css (auto-generated from theme.json)
 * which means WP's global-styles can win on equal specificity. See
 * CLAUDE.md "WordPress + utility CSS — gotchas" for the recurring
 * specificity battles and how style.css patches them.
 */

/* ==========================================================================
   Preflight — minimal CSS reset compatible with Tailwind preflight.
   Without this, browser default margins on headings/paragraphs and
   default heading font sizes show through and break theme spacing.
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    /* In-page anchor navigation (ürün detay sekmeleri vb.) için yumuşak
       scroll. CSS-only; v2'de prefers-reduced-motion altında auto'ya
       düşürülebilir. */
    scroll-behavior: smooth;
    font-family: var(--wp--preset--font-family--body, 'Inter', system-ui, sans-serif);
    /* Disallow synthetic bold/italic — only use the actual loaded font
       weights (Manrope 400-800, Inter 400-800 from Google Fonts). Without
       this, when a weight isn't downloaded yet (during font swap) or fails
       to download, the browser fakes bold by stretching glyphs. The faked
       result has uneven stroke widths and looks "forced". With
       font-synthesis: none, an unavailable weight visibly renders thinner
       — surfaces the real cause instead of papering over it with fake
       glyphs. */
    font-synthesis: none;
    -webkit-font-synthesis: none;
}

body {
    margin: 0;
    line-height: inherit;
}

/* Reset all default heading sizes & weights so utility classes drive them. */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p, blockquote, figure, dl, dd, pre,
hr, address {
    margin: 0;
}

ul, ol, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
[role="button"] {
    cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    border: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

[hidden] {
    display: none;
}

/* ==========================================================================
   Display
   ========================================================================== */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.inline-grid   { display: inline-grid; }
.hidden        { display: none; }
.contents      { display: contents; }
.table         { display: table; }

/* ==========================================================================
   Position
   ========================================================================== */
.static    { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; }

.inset-0       { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0     { right: 0; left: 0; }
.inset-y-0     { top: 0; bottom: 0; }
.top-0         { top: 0; }
.top-28        { top: 7rem; }
.top-full      { top: 100%; }
.right-0       { right: 0; }
.bottom-0      { bottom: 0; }
.bottom-full   { bottom: 100%; }
.left-0        { left: 0; }
.left-8        { left: 2rem; }
.left-1\/2     { left: 50%; }
.-bottom-10    { bottom: -2.5rem; }
.-right-10     { right: -2.5rem; }

/* ==========================================================================
   Z-index
   ========================================================================== */
.z-0     { z-index: 0; }
.z-10    { z-index: 10; }
.z-20    { z-index: 20; }
.z-30    { z-index: 30; }
.z-40    { z-index: 40; }
.z-50    { z-index: 50; }
.z-60    { z-index: 60; }
.z-100   { z-index: 100; }
.z-\[1\] { z-index: 1; }

/* ==========================================================================
   Flexbox & Grid common
   ========================================================================== */
.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }

.flex-1           { flex: 1 1 0%; }
.flex-auto        { flex: 1 1 auto; }
.flex-none        { flex: none; }
.flex-shrink-0,
.shrink-0         { flex-shrink: 0; }
.flex-grow,
.grow             { flex-grow: 1; }

.items-start      { align-items: flex-start; }
.items-center     { align-items: center; }
.items-end        { align-items: flex-end; }
.items-stretch    { align-items: stretch; }
.items-baseline   { align-items: baseline; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-items-center { justify-items: center; }

.self-start       { align-self: flex-start; }
.self-center      { align-self: center; }
.self-end         { align-self: flex-end; }
.self-stretch     { align-self: stretch; }

.col-span-1   { grid-column: span 1 / span 1; }
.col-span-2   { grid-column: span 2 / span 2; }
.col-span-3   { grid-column: span 3 / span 3; }
.col-span-4   { grid-column: span 4 / span 4; }
.col-span-5   { grid-column: span 5 / span 5; }
.col-span-6   { grid-column: span 6 / span 6; }
.col-span-7   { grid-column: span 7 / span 7; }
.col-span-12  { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12  { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Gap */
.gap-0   { gap: 0; }
.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }

/* space-y / space-x using lobotomized owl */
.space-y-1  > * + * { margin-top: 0.25rem; }
.space-y-2  > * + * { margin-top: 0.5rem; }
.space-y-3  > * + * { margin-top: 0.75rem; }
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-5  > * + * { margin-top: 1.25rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }
.space-y-8  > * + * { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-16 > * + * { margin-top: 4rem; }
.space-y-20 > * + * { margin-top: 5rem; }
.space-y-24 > * + * { margin-top: 6rem; }
.space-x-2  > * + * { margin-left: 0.5rem; }
.space-x-4  > * + * { margin-left: 1rem; }

/* ==========================================================================
   Width / Height / Max-Width / Min-Height / Aspect
   ========================================================================== */
.w-auto    { width: auto; }
.w-full    { width: 100%; }
.w-screen  { width: 100vw; }
.w-px      { width: 1px; }
.w-1\/2    { width: 50%; }
.w-1\/3    { width: 33.333333%; }
.w-2\/3    { width: 66.666667%; }
.w-1\/4    { width: 25%; }
.w-3\/4    { width: 75%; }
.w-2       { width: 0.5rem; }
.w-4       { width: 1rem; }
.w-6       { width: 1.5rem; }
.w-8       { width: 2rem; }
.w-10      { width: 2.5rem; }
.w-12      { width: 3rem; }
.w-16      { width: 4rem; }
.w-24      { width: 6rem; }
.w-32      { width: 8rem; }
.w-48      { width: 12rem; }
.w-72      { width: 18rem; }

.h-auto    { height: auto; }
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.h-px      { height: 1px; }
.h-1       { height: 0.25rem; }
.h-2       { height: 0.5rem; }
.h-4       { height: 1rem; }
.h-6       { height: 1.5rem; }
.h-8       { height: 2rem; }
.h-10      { height: 2.5rem; }
.h-12      { height: 3rem; }
.h-16      { height: 4rem; }
.h-24      { height: 6rem; }
.h-32      { height: 8rem; }
.h-48      { height: 12rem; }

.min-h-screen   { min-height: 100vh; }
.min-h-full     { min-height: 100%; }
.min-h-\[819px\]{ min-height: 819px; }

.max-w-none           { max-width: none; }
.max-w-xs             { max-width: 20rem; }
.max-w-sm             { max-width: 24rem; }
.max-w-md             { max-width: 28rem; }
.max-w-lg             { max-width: 32rem; }
.max-w-xl             { max-width: 36rem; }
.max-w-2xl            { max-width: 42rem; }
.max-w-3xl            { max-width: 48rem; }
.max-w-4xl            { max-width: 56rem; }
.max-w-5xl            { max-width: 64rem; }
.max-w-6xl            { max-width: 72rem; }
.max-w-7xl            { max-width: 80rem; }
.max-w-screen-sm      { max-width: 640px; }
.max-w-screen-md      { max-width: 768px; }
.max-w-screen-lg      { max-width: 1024px; }
.max-w-screen-xl      { max-width: 1280px; }
.max-w-screen-2xl     { max-width: 1536px; }
.max-w-\[1600px\]     { max-width: 1600px; }
.max-w-full           { max-width: 100%; }

.aspect-square         { aspect-ratio: 1 / 1; }
.aspect-video          { aspect-ratio: 16 / 9; }
.aspect-auto           { aspect-ratio: auto; }
.aspect-\[4\/5\]       { aspect-ratio: 4 / 5; }
.aspect-\[3\/2\]       { aspect-ratio: 3 / 2; }

/* ==========================================================================
   Spacing — margin & padding
   ========================================================================== */
.m-0  { margin: 0; }
.m-2  { margin: 0.5rem; }
.m-4  { margin: 1rem; }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto;  margin-bottom: auto; }
.mx-0  { margin-left: 0;        margin-right: 0; }
.mx-2  { margin-left: 0.5rem;   margin-right: 0.5rem; }
.mx-4  { margin-left: 1rem;     margin-right: 1rem; }
.mx-6  { margin-left: 1.5rem;   margin-right: 1.5rem; }
.mx-8  { margin-left: 2rem;     margin-right: 2rem; }
.mx-12 { margin-left: 3rem;     margin-right: 3rem; }
.mx-16 { margin-left: 4rem;     margin-right: 4rem; }
.mx-24 { margin-left: 6rem;     margin-right: 6rem; }
.my-0  { margin-top: 0;         margin-bottom: 0; }
.my-2  { margin-top: 0.5rem;    margin-bottom: 0.5rem; }
.my-4  { margin-top: 1rem;      margin-bottom: 1rem; }
.my-8  { margin-top: 2rem;      margin-bottom: 2rem; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }
.-mt-1  { margin-top: -0.25rem; }
.-mt-2  { margin-top: -0.5rem; }
.-mt-4  { margin-top: -1rem; }
.-mt-6  { margin-top: -1.5rem; }
.-mt-8  { margin-top: -2rem; }
.-mt-12 { margin-top: -3rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-20 { margin-top: -5rem; }
.-mt-24 { margin-top: -6rem; }
.-mt-32 { margin-top: -8rem; }
.-mb-4  { margin-bottom: -1rem; }
.-mb-8  { margin-bottom: -2rem; }
.-mb-16 { margin-bottom: -4rem; }
.-ml-1  { margin-left: -0.25rem; }
.-ml-2  { margin-left: -0.5rem; }
.-ml-4  { margin-left: -1rem; }
.-mr-1  { margin-right: -0.25rem; }
.-mr-2  { margin-right: -0.5rem; }
.-mr-4  { margin-right: -1rem; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

.ml-0  { margin-left: 0; }
.ml-2  { margin-left: 0.5rem; }
.ml-3  { margin-left: 0.75rem; }
.ml-4  { margin-left: 1rem; }

.mr-0  { margin-right: 0; }
.mr-2  { margin-right: 0.5rem; }
.mr-3  { margin-right: 0.75rem; }
.mr-4  { margin-right: 1rem; }

.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-3   { padding: 0.75rem; }
.p-4   { padding: 1rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.p-12  { padding: 3rem; }
.p-16  { padding: 4rem; }
.p-20  { padding: 5rem; }
.p-24  { padding: 6rem; }

.px-0  { padding-left: 0;        padding-right: 0; }
.px-2  { padding-left: 0.5rem;   padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem;  padding-right: 0.75rem; }
.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; }
.px-8  { padding-left: 2rem;     padding-right: 2rem; }
.px-10 { padding-left: 2.5rem;   padding-right: 2.5rem; }
.px-12 { padding-left: 3rem;     padding-right: 3rem; }
.px-16 { padding-left: 4rem;     padding-right: 4rem; }
.px-24 { padding-left: 6rem;     padding-right: 6rem; }

.py-0  { padding-top: 0;         padding-bottom: 0; }
.py-1  { padding-top: 0.25rem;   padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem;   padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;      padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem;   padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;    padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem;      padding-bottom: 2rem; }
.py-12 { padding-top: 3rem;      padding-bottom: 3rem; }
.py-16 { padding-top: 4rem;      padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;      padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;      padding-bottom: 6rem; }
.py-32 { padding-top: 8rem;      padding-bottom: 8rem; }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: 0.5rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }

.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-32 { padding-bottom: 8rem; }

.pl-0  { padding-left: 0; }
.pl-4  { padding-left: 1rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-8  { padding-left: 2rem; }
.pl-24 { padding-left: 6rem; }

.pr-0  { padding-right: 0; }
.pr-4  { padding-right: 1rem; }
.pr-6  { padding-right: 1.5rem; }
.pr-8  { padding-right: 2rem; }
.pr-24 { padding-right: 6rem; }

/* ==========================================================================
   Typography
   ========================================================================== */
.text-xs    { font-size: var(--wp--preset--font-size--xs,   0.75rem);  line-height: 1rem; }
.text-sm    { font-size: var(--wp--preset--font-size--sm,   0.875rem); line-height: 1.25rem; }
.text-base  { font-size: var(--wp--preset--font-size--base, 1rem);     line-height: 1.5rem; }
.text-lg    { font-size: var(--wp--preset--font-size--lg,   1.125rem); line-height: 1.75rem; }
.text-xl    { font-size: var(--wp--preset--font-size--xl,   1.25rem);  line-height: 1.75rem; }
.text-2xl   { font-size: var(--wp--preset--font-size--2xl,  1.5rem);   line-height: 2rem; }
.text-3xl   { font-size: var(--wp--preset--font-size--3xl,  1.875rem); line-height: 2.25rem; }
.text-4xl   { font-size: var(--wp--preset--font-size--4xl,  2.25rem);  line-height: 2.5rem; }
.text-5xl   { font-size: var(--wp--preset--font-size--5xl,  3rem);     line-height: 1; }
.text-6xl   { font-size: var(--wp--preset--font-size--6xl,  3.75rem);  line-height: 1; }
.text-7xl   { font-size: var(--wp--preset--font-size--7xl,  4.5rem);   line-height: 1; }
.text-8xl   { font-size: var(--wp--preset--font-size--8xl,  6rem);     line-height: 1; }
.text-9xl   { font-size: var(--wp--preset--font-size--9xl,  8rem);     line-height: 1; }
.text-\[10px\]   { font-size: 10px; }
.text-\[12rem\]  { font-size: 12rem; }

.font-thin       { font-weight: 100; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

.font-headline { font-family: var(--wp--preset--font-family--headline, 'Manrope', system-ui, sans-serif); }
.font-display  { font-family: var(--wp--preset--font-family--headline, 'Manrope', system-ui, sans-serif); }
.font-body     { font-family: var(--wp--preset--font-family--body,     'Inter',   system-ui, sans-serif); }
.font-label    { font-family: var(--wp--preset--font-family--label,    'Inter',   system-ui, sans-serif); }

.italic     { font-style: italic; }
.not-italic { font-style: normal; }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case{ text-transform: none; }

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

.leading-none      { line-height: 1; }
.leading-tight     { line-height: 1.25; }
.leading-snug      { line-height: 1.375; }
.leading-normal    { line-height: 1.5; }
.leading-relaxed   { line-height: 1.625; }
.leading-loose     { line-height: 2; }
.leading-\[0\.9\]  { line-height: 0.9; }

/* Letter-spacing tüm site genelinde devre dışı; tracking-* utility'leri
   no-op olarak korunur (pattern markup'larındaki class'lar zarar
   vermesin diye). İleride istenirse buradaki değerler restore edilir. */
.tracking-tighter   { letter-spacing: 0; }
.tracking-tight     { letter-spacing: 0; }
.tracking-normal    { letter-spacing: 0; }
.tracking-wide      { letter-spacing: 0; }
.tracking-wider     { letter-spacing: 0; }
.tracking-widest    { letter-spacing: 0; }
.tracking-\[0\.2em\] { letter-spacing: 0; }
.tracking-\[0\.3em\] { letter-spacing: 0; }

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }

.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }

.whitespace-nowrap { white-space: nowrap; }

/* ==========================================================================
   Colors — text, background, border (theme.json palette via CSS vars)
   ========================================================================== */
/* Text colors */
.text-primary               { color: var(--wp--preset--color--primary); }
.text-primary-container     { color: var(--wp--preset--color--primary-container); }
.text-on-primary            { color: var(--wp--preset--color--on-primary); }
.text-on-primary-container  { color: var(--wp--preset--color--on-primary-container); }
.text-secondary             { color: var(--wp--preset--color--secondary); }
.text-tertiary              { color: var(--wp--preset--color--tertiary); }
.text-on-surface            { color: var(--wp--preset--color--on-surface); }
.text-on-surface-variant    { color: var(--wp--preset--color--on-surface-variant); }
.text-on-background         { color: var(--wp--preset--color--on-background); }
.text-surface-container-high{ color: var(--wp--preset--color--surface-container-high); }
.text-outline               { color: var(--wp--preset--color--outline); }
.text-outline-variant       { color: var(--wp--preset--color--outline-variant); }
.text-error                 { color: var(--wp--preset--color--error); }
.text-white                 { color: #ffffff; }
.text-black                 { color: #000000; }
.text-zinc-100              { color: #f4f4f5; }
.text-zinc-200              { color: #e4e4e7; }
.text-zinc-300              { color: #d4d4d8; }
.text-zinc-400              { color: #a1a1aa; }
.text-zinc-500              { color: #71717a; }
.text-zinc-600              { color: #52525b; }
.text-zinc-700              { color: #3f3f46; }
.text-zinc-800              { color: #27272a; }
.text-zinc-900              { color: #18181b; }
.text-zinc-950              { color: #09090b; }
.text-red-500               { color: #ef4444; }
.text-red-600               { color: #dc2626; }
.text-red-700               { color: #b91c1c; }

/* Text colors with opacity (Tailwind shorthand /xx) */
.text-on-surface\/80        { color: rgba(26, 28, 28, 0.8); }
.text-on-surface\/70        { color: rgba(26, 28, 28, 0.7); }
.text-on-primary\/80        { color: rgba(255, 255, 255, 0.8); }
.text-white\/80             { color: rgba(255, 255, 255, 0.8); }
.text-white\/90             { color: rgba(255, 255, 255, 0.9); }
.text-white\/60             { color: rgba(255, 255, 255, 0.6); }
.text-outline-variant\/40   { color: rgba(229, 189, 187, 0.4); }
.text-outline-variant\/30   { color: rgba(229, 189, 187, 0.3); }

/* Background colors */
.bg-primary                  { background-color: var(--wp--preset--color--primary); }
.bg-primary-container        { background-color: var(--wp--preset--color--primary-container); }
.bg-on-primary               { background-color: var(--wp--preset--color--on-primary); }
.bg-secondary                { background-color: var(--wp--preset--color--secondary); }
.bg-tertiary                 { background-color: var(--wp--preset--color--tertiary); }
.bg-background               { background-color: var(--wp--preset--color--background); }
.bg-surface                  { background-color: var(--wp--preset--color--surface); }
.bg-surface-bright           { background-color: var(--wp--preset--color--surface-bright); }
.bg-surface-dim              { background-color: var(--wp--preset--color--surface-dim); }
.bg-surface-container        { background-color: var(--wp--preset--color--surface-container); }
.bg-surface-container-low    { background-color: var(--wp--preset--color--surface-container-low); }
.bg-surface-container-lowest { background-color: var(--wp--preset--color--surface-container-lowest); }
.bg-surface-container-high   { background-color: var(--wp--preset--color--surface-container-high); }
.bg-surface-container-highest{ background-color: var(--wp--preset--color--surface-container-highest); }
.bg-error-container          { background-color: var(--wp--preset--color--error-container); }
.bg-white                    { background-color: #ffffff; }
.bg-black                    { background-color: #000000; }
.bg-transparent              { background-color: transparent; }
.bg-zinc-100                 { background-color: #f4f4f5; }
.bg-zinc-200                 { background-color: #e4e4e7; }
.bg-zinc-300                 { background-color: #d4d4d8; }
.bg-zinc-700                 { background-color: #3f3f46; }
.bg-zinc-800                 { background-color: #27272a; }
.bg-zinc-900                 { background-color: #18181b; }
.bg-zinc-950                 { background-color: #09090b; }
.bg-white\/10                { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/80                { background-color: rgba(255, 255, 255, 0.8); }

/* Gradients (Tailwind bg-gradient-* shortcuts) */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.bg-gradient-to-tl {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}

/* Gradient stops (using CSS custom properties à la Tailwind) */
.from-primary           { --tw-gradient-from: var(--wp--preset--color--primary); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-primary             { --tw-gradient-to: var(--wp--preset--color--primary); --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--tw-gradient-to); }
.to-primary-container   { --tw-gradient-to: var(--wp--preset--color--primary-container); --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--tw-gradient-to); }
.from-surface           { --tw-gradient-from: var(--wp--preset--color--surface); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-surface\/60        { --tw-gradient-stops: var(--tw-gradient-from), rgba(249, 249, 249, 0.6), var(--tw-gradient-to, transparent); }
.to-transparent         { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--tw-gradient-to); }

/* Borders */
.border          { border-width: 1px; }
.border-0        { border-width: 0; }
.border-2        { border-width: 2px; }
.border-4        { border-width: 4px; }
.border-t        { border-top-width: 1px; }
.border-r        { border-right-width: 1px; }
.border-b        { border-bottom-width: 1px; }
.border-l        { border-left-width: 1px; }
.border-b-2      { border-bottom-width: 2px; }
.border-l-4      { border-left-width: 4px; }

.border-none           { border-style: none; }
.border-solid          { border-style: solid; }

.border-transparent           { border-color: transparent; }
.border-current               { border-color: currentColor; }
.border-primary               { border-color: var(--wp--preset--color--primary); }
.border-outline               { border-color: var(--wp--preset--color--outline); }
.border-outline-variant       { border-color: var(--wp--preset--color--outline-variant); }
.border-surface-dim           { border-color: var(--wp--preset--color--surface-dim); }
.border-surface-container-low { border-color: var(--wp--preset--color--surface-container-low); }
.border-zinc-100              { border-color: #f4f4f5; }
.border-zinc-200              { border-color: #e4e4e7; }
.border-zinc-300              { border-color: #d4d4d8; }
.border-zinc-900              { border-color: #18181b; }
.border-white\/20             { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/30             { border-color: rgba(255, 255, 255, 0.3); }

.rounded         { border-radius: 0.125rem; }
.rounded-sm      { border-radius: 0.125rem; }
.rounded-md      { border-radius: 0.25rem; }
.rounded-lg      { border-radius: 0.25rem; }
.rounded-xl      { border-radius: 0.5rem; }
.rounded-2xl     { border-radius: 0.75rem; }
.rounded-full    { border-radius: 9999px; }
.rounded-none    { border-radius: 0; }

/* Ring (focus rings) */
.ring-0           { box-shadow: 0 0 0 0 transparent; }
.ring-1           { box-shadow: 0 0 0 1px currentColor; }
.ring-primary     { --tw-ring-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 1px var(--tw-ring-color); }
.ring-primary\/20 { --tw-ring-color: rgba(171, 0, 30, 0.2); box-shadow: 0 0 0 1px var(--tw-ring-color); }

/* ==========================================================================
   Effects — shadow, opacity, blur, mix-blend
   ========================================================================== */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow      { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-\[0_20px_40px_rgba\(26\,28\,28\,0\.06\)\] { box-shadow: 0 20px 40px rgba(26, 28, 28, 0.06); }
.shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.2\)\] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.hover\:shadow-\[0_20px_40px_rgba\(26\,28\,28\,0\.06\)\]:hover { box-shadow: 0 20px 40px rgba(26, 28, 28, 0.06); }

.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

.backdrop-blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.backdrop-blur     { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md  { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl  { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.filter            { filter: var(--tw-filter, ); }
.grayscale         { filter: grayscale(100%); }
.grayscale-0       { filter: grayscale(0); }
.mix-blend-multiply{ mix-blend-mode: multiply; }
.mix-blend-screen  { mix-blend-mode: screen; }

/* ==========================================================================
   Transitions & transforms
   ========================================================================== */
.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(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all      { transition-property: all;        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors   { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity  { transition-property: opacity;    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform{ transition-property: transform;  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.duration-100  { transition-duration: 100ms; }
.duration-150  { transition-duration: 150ms; }
.duration-200  { transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }
.duration-500  { transition-duration: 500ms; }
.duration-700  { transition-duration: 700ms; }

.ease-linear    { transition-timing-function: linear; }
.ease-in        { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out       { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out    { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.transform        { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.translate-x-1\/2 { transform: translateX(50%); }
.-translate-x-1\/2{ transform: translateX(-50%); }
.translate-y-full { transform: translateY(100%); }
.-translate-y-full{ transform: translateY(-100%); }
.translate-y-0    { transform: translateY(0); }
.scale-100        { transform: scale(1); }
.scale-105        { transform: scale(1.05); }
.scale-110        { transform: scale(1.1); }
.-skew-x-12       { transform: skewX(-12deg); }
.origin-top-right { transform-origin: top right; }
.origin-center    { transform-origin: center; }

/* ==========================================================================
   Misc
   ========================================================================== */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-visible { overflow: visible; }
.overflow-x-hidden{ overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto; }

.object-cover     { object-fit: cover; }
.object-contain   { object-fit: contain; }
.object-fill      { object-fit: fill; }

.cursor-pointer       { cursor: pointer; }
.cursor-not-allowed   { cursor: not-allowed; }
.cursor-default       { cursor: default; }

.pointer-events-none  { pointer-events: none; }
.pointer-events-auto  { pointer-events: auto; }

.appearance-none      { appearance: none; -webkit-appearance: none; }
.accent-primary       { accent-color: var(--wp--preset--color--primary); }

.select-none { user-select: none; }

.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* ==========================================================================
   Hover variants (utility-level)
   ========================================================================== */
.hover\:opacity-80:hover  { opacity: 0.8; }
.hover\:opacity-90:hover  { opacity: 0.9; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:scale-105:hover   { transform: scale(1.05); }
.hover\:scale-110:hover   { transform: scale(1.1); }

.hover\:text-primary:hover     { color: var(--wp--preset--color--primary, #ab001e); }
.hover\:text-white:hover       { color: #ffffff; }
.hover\:text-zinc-100:hover    { color: #f4f4f5; }
.hover\:text-on-surface:hover  { color: var(--wp--preset--color--on-surface, #1a1c1c); }
.hover\:text-red-500:hover     { color: #ef4444; }
.hover\:text-red-600:hover     { color: #dc2626; }
.hover\:text-red-700:hover     { color: #b91c1c; }

.hover\:bg-primary:hover           { background-color: var(--wp--preset--color--primary); }
.hover\:bg-primary-container:hover { background-color: var(--wp--preset--color--primary-container); }
.hover\:bg-zinc-900:hover          { background-color: #18181b; }
.hover\:bg-white\/10:hover         { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-surface-container-low:hover { background-color: var(--wp--preset--color--surface-container-low); }

.hover\:border-primary:hover { border-color: var(--wp--preset--color--primary); }

.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.hover\:translate-x-1:hover { transform: translateX(0.25rem); }

.hover\:grayscale-0:hover { filter: grayscale(0); }

/* Group hover */
.group:hover .group-hover\:text-primary       { color: var(--wp--preset--color--primary); }
.group:hover .group-hover\:scale-110          { transform: scale(1.1); }
.group:hover .group-hover\:grayscale-0        { filter: grayscale(0); }
.group:hover .group-hover\:opacity-100        { opacity: 1; }
.group:hover .group-hover\:translate-y-0      { transform: translateY(0); }
.group:hover .group-hover\:pointer-events-auto{ pointer-events: auto; }
.group:hover .group-hover\:opacity-20         { opacity: 0.2; }
.group:hover .group-hover\:border-primary     { border-color: var(--wp--preset--color--primary); }

/* Focus */
.focus\:outline-none:focus    { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-0:focus          { box-shadow: 0 0 0 0 transparent; }
.focus\:ring-1:focus          { box-shadow: 0 0 0 1px currentColor; }
.focus\:ring-primary\/20:focus{ box-shadow: 0 0 0 3px rgba(171, 0, 30, 0.2); }

/* ==========================================================================
   Responsive variants — md: (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
    .md\:flex                { display: flex; }
    .md\:inline-flex         { display: inline-flex; }
    .md\:grid                { display: grid; }
    .md\:hidden              { display: none; }
    .md\:block               { display: block; }
    .md\:inline-block        { display: inline-block; }

    .md\:flex-row            { flex-direction: row; }
    .md\:flex-row-reverse    { flex-direction: row-reverse; }
    .md\:flex-col            { flex-direction: column; }
    .md\:items-center        { align-items: center; }
    .md\:items-end           { align-items: flex-end; }
    .md\:justify-between     { justify-content: space-between; }
    .md\:justify-center      { justify-content: center; }

    .md\:grid-cols-2         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4         { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-12        { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .md\:col-span-3          { grid-column: span 3 / span 3; }
    .md\:col-span-4          { grid-column: span 4 / span 4; }
    .md\:col-span-5          { grid-column: span 5 / span 5; }
    .md\:col-span-6          { grid-column: span 6 / span 6; }
    .md\:col-span-7          { grid-column: span 7 / span 7; }

    .md\:w-1\/2              { width: 50%; }
    .md\:w-5\/12             { width: 41.666667%; }
    .md\:w-7\/12             { width: 58.333333%; }
    .md\:w-72                { width: 18rem; }

    .md\:px-24               { padding-left: 6rem; padding-right: 6rem; }
    .md\:pl-24               { padding-left: 6rem; }
    .md\:pr-24               { padding-right: 6rem; }
    .md\:mx-8                { margin-left: 2rem;  margin-right: 2rem; }
    .md\:mx-12               { margin-left: 3rem;  margin-right: 3rem; }
    .md\:mx-16               { margin-left: 4rem;  margin-right: 4rem; }
    .md\:mx-24               { margin-left: 6rem;  margin-right: 6rem; }
    .md\:mt-0                { margin-top: 0; }
    .md\:mb-0                { margin-bottom: 0; }

    .md\:text-right          { text-align: right; }
    .md\:text-left           { text-align: left; }
    .md\:text-center         { text-align: center; }

    .md\:text-xl             { font-size: var(--wp--preset--font-size--xl,  1.25rem);  line-height: 1.75rem; }
    .md\:text-2xl            { font-size: var(--wp--preset--font-size--2xl, 1.5rem);   line-height: 2rem; }
    .md\:text-3xl            { font-size: var(--wp--preset--font-size--3xl, 1.875rem); line-height: 2.25rem; }
    .md\:text-4xl            { font-size: var(--wp--preset--font-size--4xl, 2.25rem);  line-height: 2.5rem; }
    .md\:text-5xl            { font-size: var(--wp--preset--font-size--5xl, 3rem);     line-height: 1; }
    .md\:text-6xl            { font-size: var(--wp--preset--font-size--6xl, 3.75rem);  line-height: 1; }
    .md\:text-7xl            { font-size: var(--wp--preset--font-size--7xl, 4.5rem);   line-height: 1; }
    .md\:text-8xl            { font-size: var(--wp--preset--font-size--8xl, 6rem);     line-height: 1; }

    .md\:left-1\/2           { left: 50%; }
}

/* ==========================================================================
   Responsive variants — lg: (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    .lg\:flex                { display: flex; }
    .lg\:flex-row            { flex-direction: row; }
    .lg\:flex-col            { flex-direction: column; }
    .lg\:hidden              { display: none; }
    .lg\:block               { display: block; }
    .lg\:grid               { display: grid; }
    .lg\:items-center        { align-items: center; }
    .lg\:items-end           { align-items: flex-end; }
    .lg\:justify-between     { justify-content: space-between; }

    .lg\:grid-cols-2         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4         { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6         { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-12        { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .lg\:col-span-2          { grid-column: span 2 / span 2; }
    .lg\:col-span-3          { grid-column: span 3 / span 3; }
    .lg\:col-span-4          { grid-column: span 4 / span 4; }
    .lg\:col-span-5          { grid-column: span 5 / span 5; }
    .lg\:col-span-6          { grid-column: span 6 / span 6; }
    .lg\:col-span-7          { grid-column: span 7 / span 7; }
    .lg\:col-span-8          { grid-column: span 8 / span 8; }
    .lg\:col-span-9          { grid-column: span 9 / span 9; }

    .lg\:gap-2               { gap: 0.5rem; }
    .lg\:gap-4               { gap: 1rem; }
    .lg\:gap-8               { gap: 2rem; }
    .lg\:gap-12              { gap: 3rem; }
    .lg\:gap-16              { gap: 4rem; }
    .lg\:gap-24              { gap: 6rem; }

    .lg\:w-72                { width: 18rem; }
    .lg\:w-1\/2              { width: 50%; }

    .lg\:-mt-16              { margin-top: -4rem; }
    .lg\:-mt-20              { margin-top: -5rem; }
    .lg\:-mt-24              { margin-top: -6rem; }
    .lg\:-mt-32              { margin-top: -8rem; }
    .lg\:-mt-40              { margin-top: -10rem; }
    .lg\:-mt-48              { margin-top: -12rem; }

    .lg\:mt-0                { margin-top: 0; }
    .lg\:mb-0                { margin-bottom: 0; }
    .lg\:px-12               { padding-left: 3rem;  padding-right: 3rem; }
    .lg\:px-16               { padding-left: 4rem;  padding-right: 4rem; }
    .lg\:py-16               { padding-top: 4rem;   padding-bottom: 4rem; }
    .lg\:py-24               { padding-top: 6rem;   padding-bottom: 6rem; }
}

/* ==========================================================================
   Responsive variants — xl: (>=1280px)
   ========================================================================== */
@media (min-width: 1280px) {
    .xl\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}