/* ==========================================================================
   Oyunmarkt — Mağaza alanı (shop.css).
   Legacy rules still used by other areas (game artwork, cart suggestions grid,
   journal placeholder, sorting select, marketplace filters), then the demo port.
   ========================================================================== */
.om-empty { margin: 0; padding: clamp(32px, 5vw, 56px) 24px; text-align: center; color: var(--om-muted); box-shadow: inset 0 0 0 1px var(--om-border); }
.om-game-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: var(--game-color, #1a1a1d); isolation: isolate; }
span.om-game-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--game-pos, 50% 50%); }
.om-game-visual > .om-icon { width: 40%; height: 40%; color: rgb(255 255 255 / .7); }
span.om-game-visual--brand > img { width: 50%; height: 50%; object-fit: contain; filter: brightness(0) invert(1); }
.om-card-brand-name { position: absolute; left: 14px; bottom: 14px; color: #fff; font-size: 15px; font-weight: 700; }
.om-card-denomination { position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; background: rgb(10 10 12 / .82); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.om-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 32px 20px; }
.om-article-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--om-ink); color: #fff; font-weight: 700; letter-spacing: -.05em; font-size: 28px; }
.om-article-placeholder span { display: block; font-size: 12px; letter-spacing: .08em; color: #a1a1a6; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { min-height: 42px; padding: 0 38px 0 14px; appearance: none; -webkit-appearance: none; background: var(--om-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; font-size: 14px; font-weight: 500; }
.vgnw-om-marketplace__filters label { display: flex; flex-direction: column; gap: 7px; min-width: 140px; flex: 1; }
@media (max-width: 760px) {
    .om-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .omd-toast { animation: none; }
}

/* ==========================================================================
   Demo port — storefront (home, store, catalog, search, departments).
   The markup carries the demo's inline styles; this block holds only what inline
   styles cannot express: dark-mode states set by scripts, hidden states, feedback.
   ========================================================================== */
.om-demo { font-family: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
.om-demo [hidden] { display: none !important; }
/* Undo the theme's global element styles inside ported markup: the demo relies on browser defaults. */
.om-demo :is(h1, h2, h3, h4) { margin: revert; font-size: revert; font-weight: revert; font-stretch: revert; letter-spacing: inherit; line-height: inherit; color: inherit; }
.om-demo p { margin: revert; }
.om-demo :is(img, svg) { max-width: none; vertical-align: baseline; }
.om-demo label { font-size: inherit; font-weight: inherit; }
.om-demo input, .om-demo input:focus { min-height: 0; box-shadow: none; }
.om-demo button { font: inherit; color: inherit; cursor: pointer; }
.om-demo button:disabled { cursor: not-allowed; }
.om-demo [data-om-add]:disabled, .om-demo [data-om-add-selected]:disabled { opacity: .35; }
.om-demo [aria-busy="true"] { opacity: .6; pointer-events: none; }
.om-demo :focus-visible { outline: 2px solid #D92D20; outline-offset: 2px; }
.om-demo .pkrow:has(> [role="radio"]:focus-visible) { outline: 2px solid #D92D20; outline-offset: 2px; }
.om-demo .pkrow > [role="radio"]:focus-visible { outline: 0; }
.om-demo .omd-about-extra p { margin: 16px 0 0; }
.om-demo .omd-about-extra a { text-decoration: underline; text-underline-offset: 3px; }
.om-demo .omd-pages ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.om-demo .omd-pages a, .om-demo .omd-pages span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; box-shadow: inset 0 0 0 1px #D6D6D2; font-size: 15px; font-weight: 600; text-decoration: none; }
.om-demo .omd-pages .current { background: #111111; color: #FFFFFF; box-shadow: none; }

/* Hero banner: the running progress bar (and with it the autoplay) pauses while the banner is hovered or focused. */
[data-om-banner-hover]:is(:hover, :focus-within) [data-om-banner-bar] { animation-play-state: paused !important; }

/* The demo's 12-column grids keep eleven 40–48px gaps on phones and overflow to 544px; one column instead. */
@media (max-width: 900px) { .om-demo .g12 { grid-template-columns: minmax(0, 1fr) !important; } }

/* Dark mode for states that scripts paint with the light demo values. */

/* Add-to-cart feedback when the cart drawer is not present. */
.omd-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; width: max-content; max-width: min(92vw, 440px); margin: 0; padding: 12px 16px; transform: translateX(-50%); background: #111111; color: #FFFFFF; font: 500 14px/1.4 "Instrument Sans", system-ui, sans-serif; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); animation: omIn .25s ease; }
.omd-toast[hidden] { display: none; }