/* 1kamas — homepage theme applied to the shared components on every page except the homepage (page headers, breadcrumbs, cards, buttons, chips, forms, accordions, banners).
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-site="base"> tag to undo.

   Scope: the page content only. Most pages wrap it in <main>; the server and blog pages have no
   <main>, so every rule targets `:is(main, .min-h-[60vh])` (the wrapper between the header and
   the footer on every inner page). The header and the footer sit outside it and are untouched.
   Same language as the homepage (1k-home.css, 1k-compact.css, 1k-hero.css): Inter 400/700,
   sentence case, flat panels with a 1px border and 8px corners, no gradients, glows, big
   shadows or hover movement, plum #1d072a for brand moments. Only colors, borders, radii, type
   and spacing change: every heading, text, link, price, form and FAQ entry stays in the page.
   The page-type files (1k-site-product/-server/-blog/-legal/-service/-shop.css) load after
   this one and refine it. */


/* ---------- Page rhythm ---------- */

/* Page wrapper: 24px under the header (as above the homepage hero) and no bottom padding,
   so the gap before the footer is the footer's own 48px, as on the homepage. Not on the 404
   (main.text-center), which is a centered one-message page */
html body > .min-h-\[60vh\] > main.container-1k:not(.text-center),
html body > .min-h-\[60vh\] > div.bg-canvas[class*="py-"],
html body > .min-h-\[60vh\] > article.bg-canvas { padding-top: 24px; padding-bottom: 0; }

/* 48px between sections (was 56px / 80px), down to 32px on small screens */
html body main > section.mt-14 { margin-top: clamp(2rem, 4vw, 3rem); }

/* Content right after a section intro: 24px below it (was up to 48px) */
html body :is(main, .min-h-\[60vh\]) .section-title + p + :is(div, dl, ol, ul) { margin-top: 24px; }


/* ---------- Section titles and intros ---------- */

/* Section titles: left-aligned, 24px / 32px bold (20px / 28px on phones), like the homepage.
   H1s that use the same class (blog, FAQ, loyalty, shop) are the page title: 32px / 40px */
html body :is(main, .min-h-\[60vh\]) h2.section-title { font-size: 24px; line-height: 32px; }
html body :is(main, .min-h-\[60vh\]) h1.section-title { font-size: 32px; line-height: 40px; }
@media (max-width: 639px) {
  html body :is(main, .min-h-\[60vh\]) h2.section-title { font-size: 20px; line-height: 28px; }
  html body :is(main, .min-h-\[60vh\]) h1.section-title { font-size: 26px; line-height: 34px; }
}
html body :is(main, .min-h-\[60vh\]) .section-title.text-center { text-align: left; }

/* Title then intro: 8px apart; title then content: 16px apart */
html body :is(main, .min-h-\[60vh\]) .section-title:has(+ p) { margin-bottom: 8px; }
html body :is(main, .min-h-\[60vh\]) .section-title:not(:has(+ p)) { margin-bottom: 16px; }

/* Intro paragraph: 15px / 24px body text right under the title (widths unchanged); the other
   plain paragraphs of the same section match it. Small print (text-sm / text-xs / muted) keeps
   its size */
html body :is(main, .min-h-\[60vh\]) .section-title + p { margin-top: 0; color: rgb(var(--body)); }
html body :is(main, .min-h-\[60vh\]) .section-title ~ p:not([class*="text-sm"]):not([class*="text-xs"]):not(.text-muted) { font-size: 15px; line-height: 24px; }

/* Sections whose title was centered: the intro and the centered blocks after it (second
   paragraph, timeline) follow the title's left edge. Centered boxes (title without .text-center
   inside a centered card) keep their centering */
html body :is(main, .min-h-\[60vh\]) .section-title.text-center ~ .mx-auto { margin-left: 0; }
html body :is(main, .min-h-\[60vh\]) .section-title.text-center ~ p.text-center,
html body :is(main, .min-h-\[60vh\]) .section-title.text-center + p { text-align: left; }


/* ---------- Plain page header (blog, categories): left-aligned ---------- */

/* Eyebrow + H1 + intro used to be centered; the filters under it follow the same left edge */
html body :is(main, .min-h-\[60vh\]) header.text-center { text-align: left; }
html body :is(main, .min-h-\[60vh\]) header.text-center > p.mx-auto { margin-left: 0; }
html body :is(main, .min-h-\[60vh\]) header.text-center > .eyebrow { justify-content: flex-start; }
html body :is(main, .min-h-\[60vh\]) header.text-center + nav.justify-center { justify-content: flex-start; }


/* ---------- Eyebrow labels ---------- */

/* Sentence case, normal tracking, 13px (were uppercase, spaced) */
html body :is(main, .min-h-\[60vh\]) .eyebrow { text-transform: none; letter-spacing: normal; font-size: 13px; line-height: 18px; }

/* Kept by the owner: the small uppercase label right above a page title (H1) */
html body :is(main, .min-h-\[60vh\]) .eyebrow:has(+ h1) { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; line-height: 16px; }

/* Labels inside cards ("Jeu", "Prix actuel", "Service", game names): quiet grey, not purple */
html body :is(main, .min-h-\[60vh\]) .card .eyebrow { color: rgb(var(--muted)); font-weight: 400; }


/* ---------- Page hero (about, delivery, refund, contact, sell kamas) ----------
   The lavender gradient banner becomes a flat plum block like the homepage hero: 8px corners,
   32px padding, left-aligned white title and text. The faint "1K" watermark stays (white, 4%);
   the purple radial glow layer is removed. */
html body main section.rounded-hero[class*="linear-gradient"] {
  background: #1e1226; border-width: 0; border-radius: 8px; box-shadow: none;
}
html body main section.rounded-hero[class*="linear-gradient"] > [aria-hidden="true"][class*="radial-gradient"] { display: none; }
html body main section.rounded-hero[class*="linear-gradient"] > span[aria-hidden="true"] { color: rgba(255, 255, 255, .04); }
html body main section.rounded-hero[class*="linear-gradient"] > div.relative { padding: 32px; text-align: left; column-gap: 32px; row-gap: 24px; }
@media (max-width: 639px) {
  html body main section.rounded-hero[class*="linear-gradient"] > div.relative { padding: 24px 20px; }
}
html body main section.rounded-hero[class*="linear-gradient"] .eyebrow { justify-content: flex-start; color: rgba(220, 210, 246, .86); }
html body main section.rounded-hero[class*="linear-gradient"] h1 {
  color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; text-transform: none; letter-spacing: normal;
}
html body main section.rounded-hero[class*="linear-gradient"] h1 + p { margin-left: 0; color: rgba(255, 255, 255, .85); }

/* Notice box inside the hero (operator, responsible sourcing): flat dark box, light text */
html body main section.rounded-hero[class*="linear-gradient"] .rounded-xl.bg-brand-tint {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: rgba(228, 225, 234, .86);
}
html body main section.rounded-hero[class*="linear-gradient"] .rounded-xl.bg-brand-tint strong { color: #fff; }
html body main section.rounded-hero[class*="linear-gradient"] .rounded-xl.bg-brand-tint > svg { color: rgba(220, 210, 246, .86); }

/* Company details list (contact, sell kamas): label, text, icons and links readable on plum */
html body main section.rounded-hero[class*="linear-gradient"] p.uppercase { color: rgba(220, 210, 246, .86); }
html body main section.rounded-hero[class*="linear-gradient"] ul.text-body { color: rgba(228, 225, 234, .86); }
html body main section.rounded-hero[class*="linear-gradient"] ul.text-body svg { color: rgba(220, 210, 246, .86); }
html body main section.rounded-hero[class*="linear-gradient"] ul.text-body a { color: #fff; text-decoration-color: rgba(220, 210, 246, .45); }
html body main section.rounded-hero[class*="linear-gradient"] ul.text-body a:hover { text-decoration-color: #dcd2f6; }

/* Dark mode: same plum with a thin light outline, as the homepage hero */
html[data-theme="dark"] body main section.rounded-hero[class*="linear-gradient"] { background: #22162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }


/* ---------- Breadcrumbs ---------- */

/* 13px grey trail; the current page in plain body text */
html body :is(main, .min-h-\[60vh\]) nav[aria-label].text-muted.items-center { font-size: 13px; line-height: 20px; }
html body :is(main, .min-h-\[60vh\]) nav[aria-label].text-muted.items-center > span:last-child:not([aria-hidden]) {
  color: rgb(var(--body)); font-weight: 400;
}


/* ---------- Cards and panels ----------
   Flat surface, 1px line border, 8px corners, no gradient, no purple top line, no shadow.
   The background color is left to the card's own classes (white, or a tint the page sets). */
html body :is(main, .min-h-\[60vh\]) :is(.card, .hp-card, .hp-lift, .hp-static) {
  background-image: none; border-radius: 8px; box-shadow: none;
}
html body :is(main, .min-h-\[60vh\]) :is(.card, .hp-card) { border-color: rgb(var(--line)); }
html body :is(main, .min-h-\[60vh\]) .hp-card::before { content: none; }

/* Hover: cards never move (the site lifts them 3-6px), and cards that aren't links don't react.
   The second selector is as specific as the site's own .card:not(...):hover rule */
html body :is(main, .min-h-\[60vh\]) :is(.card, .hp-card, .hp-lift, .hp-static):hover,
html body :is(main, .min-h-\[60vh\]) .card:not(.hp-card):not(.hp-lift):not(.hp-static):hover {
  transform: none !important; box-shadow: none; border-color: rgb(var(--line));
}

/* Link cards (shop products, blog articles): only the border turns purple on hover. The second
   selector outranks the "cards don't react" rule above for a plain a.card */
html body :is(main, .min-h-\[60vh\]) :is(a.card, a.hp-card, .hp-lift):hover,
html body :is(main, .min-h-\[60vh\]) a.card:not(.hp-card):not(.hp-lift):not(.hp-static):hover { border-color: rgb(var(--brand) / .45); }

/* No image zoom inside cards on hover */
html body :is(main, .min-h-\[60vh\]) .group:hover :is(.group-hover\:scale-105, .group-hover\:scale-110, .group-hover\:scale-\[1\.03\]) { transform: none; }


/* ---------- Shadows and corners ---------- */

/* Shadow utilities: none (flat panels) */
html body :is(main, .min-h-\[60vh\]) :is(.shadow-card, .shadow-soft, .shadow-hero, .shadow-media, .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: none; }

/* Except floating layers (sticky buy bar, floating buy card): the light cookie-banner shadow so
   they still read as above the page */
html body :is(main, .min-h-\[60vh\]) .fixed:is(.shadow-hero, .shadow-media, .shadow-lg, .shadow-xl) { box-shadow: 0 8px 24px rgb(22 22 27 / .12); }

/* 8px corners instead of 12-24px blobs */
html body :is(main, .min-h-\[60vh\]) :is(.rounded-3xl, .rounded-2xl, .rounded-xl, .rounded-hero) { border-radius: 8px; }

/* Pill-shaped text (tags, status badges, filters, year labels): 6px corners. Only elements with
   horizontal padding, so dots, avatars, switches and the bitcoin logo stay round */
html body :is(main, .min-h-\[60vh\]) :is(.rounded-pill, .rounded-full)[class*="px-"] { border-radius: 6px; }

/* Numbered steps (1, 2, 3...): soft 8px square with a purple number, as on the homepage, instead
   of a filled purple circle. Size unchanged. The chat avatar (font-display) stays round.
   The number uses the darker purple in light mode (5.5:1 on the tint; the brand purple was 4.25:1)
   and the brand purple in dark mode (6.5:1) */
html body :is(main, .min-h-\[60vh\]) :is(.rounded-pill, .rounded-full).bg-brand.font-bold:not(.font-display):not([class*="px-"]) {
  border-radius: 8px; background-color: rgb(var(--brand) / .08); color: rgb(var(--brand-dark));
}
html[data-theme="dark"] body :is(main, .min-h-\[60vh\]) :is(.rounded-pill, .rounded-full).bg-brand.font-bold:not(.font-display):not([class*="px-"]) {
  color: rgb(var(--brand));
}

/* Decorative icon squares: quiet 32px square, 10% purple, purple icon (were 40px lavender) */
html body :is(main, .min-h-\[60vh\]) span.rounded-card.bg-brand-soft.text-brand:is(.h-9, .h-10, .h-11):has(> svg) {
  width: 32px; height: 32px; background-color: rgb(var(--brand) / .10);
}


/* ---------- Lavender boxes → neutral ---------- */

/* Info boxes (operator notice, responsible sourcing, declaration checkbox): white panel with a
   hairline border, like the homepage "responsible sourcing" panel */
html body :is(main, .min-h-\[60vh\]) .rounded-xl.bg-brand-tint { background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }

/* Other lavender fills (loyalty tier tiles, chat bubble, table header rows): light neutral tint */
html body :is(main, .min-h-\[60vh\]) div.bg-brand-tint:not(.rounded-xl),
html body :is(main, .min-h-\[60vh\]) tr:is(.bg-brand-tint, .bg-brand-soft) { background-color: rgb(var(--ink) / .04); }


/* ---------- Buttons ---------- */

/* Flat: no gradient, no glow, no lift; 8px corners, bold */
html body :is(main, .min-h-\[60vh\]) .btn-primary,
html body :is(main, .min-h-\[60vh\]) .btn-primary:hover { background-image: none; box-shadow: none; transform: none; }
html body :is(main, .min-h-\[60vh\]) :is(.btn-primary, .btn-ghost) { border-radius: 8px; font-weight: 700; }

/* Secondary: white with a 1px border; on hover only the border turns violet (was a lavender fill) */
html body :is(main, .min-h-\[60vh\]) .btn-ghost:hover { background-color: rgb(var(--surface)); border-color: rgb(var(--brand) / .45); }
html body :is(main, .min-h-\[60vh\]) .btn-ghost.cursor-not-allowed:hover { border-color: rgb(var(--line)); }

/* Dark mode: accent fills with white text (active blog and category filter, selected server on the
   product page, contact chat mock). The dark-mode accent is light (lavender #C0B1DD, or purple
   #B899E8 inside a purchase block), so white text on it is about 2:1: dark text instead (7.6:1 or
   more). The step numbers above keep their own colors (more specific rule) */
html[data-theme="dark"] body :is(main, .min-h-\[60vh\]) .bg-brand.text-white:not(.btn-primary) { color: #16151c; }

/* Buy buttons: the purchase purple, the most colourful thing on the page. Every other .btn-primary
   follows the muted violet --brand (contact, support, forms). A buy button is a .btn-primary link
   to a product page (server pages, "?serveur=" links), to the shop (about page) or back to
   payment (cancelled checkout). Light: #765EB8, white text (5.2:1); dark: lilac #B8A4EE, dark
   text (8.6:1). Buy buttons on a dark plum block keep the lilac of their own file (more specific) */
html body :is(main, .min-h-\[60vh\]) a.btn-primary:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"], [href$="/boutique/"], [href$="/shop/"], [href$="/tienda-de-kamas/"], [href$="/comprar-kamas/"], [href$="/checkout-express/"], [href$="/checkout/"], [href$="/finalizar-compra/"]) {
  background-color: rgb(var(--cta)); color: #fff;
}
html body :is(main, .min-h-\[60vh\]) a.btn-primary:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"], [href$="/boutique/"], [href$="/shop/"], [href$="/tienda-de-kamas/"], [href$="/comprar-kamas/"], [href$="/checkout-express/"], [href$="/checkout/"], [href$="/finalizar-compra/"]):hover {
  background-color: rgb(var(--cta-hover)); color: #fff;
}
html[data-theme="dark"] body :is(main, .min-h-\[60vh\]) a.btn-primary:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"], [href$="/boutique/"], [href$="/shop/"], [href$="/tienda-de-kamas/"], [href$="/comprar-kamas/"], [href$="/checkout-express/"], [href$="/checkout/"], [href$="/finalizar-compra/"]) {
  background-color: rgb(var(--cta-on-dark)); color: #16151c;
}
html[data-theme="dark"] body :is(main, .min-h-\[60vh\]) a.btn-primary:is([href*="/produit/"], [href*="/product/"], [href*="/producto/"], [href*="/produto/"], [href$="/boutique/"], [href$="/shop/"], [href$="/tienda-de-kamas/"], [href$="/comprar-kamas/"], [href$="/checkout-express/"], [href$="/checkout/"], [href$="/finalizar-compra/"]):hover {
  background-color: #a68fe6; color: #16151c;
}


/* ---------- Chips and tags ---------- */

/* Neutral grey tag, 6px corners, no border (kept transparent so the size doesn't change) */
html body :is(main, .min-h-\[60vh\]) .chip {
  background-color: rgb(var(--ink) / .06); color: rgb(var(--body)); border-color: transparent; border-radius: 6px; font-weight: 500;
}
/* Plain tags don't react; link tags get a light purple fill and purple text */
html body :is(main, .min-h-\[60vh\]) span.chip:hover { background-color: rgb(var(--ink) / .06); color: rgb(var(--body)); }
html body :is(main, .min-h-\[60vh\]) a.chip:hover { background-color: rgb(var(--brand) / .10); color: rgb(var(--brand)); }


/* ---------- Form controls ---------- */

/* Inputs, selects, text areas: white, 1px line border, 8px corners (some were lavender / 12px) */
html body :is(main, .min-h-\[60vh\]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-color: rgb(var(--line)); border-radius: 8px; background-color: rgb(var(--surface)); color: rgb(var(--ink));
}
html body :is(main, .min-h-\[60vh\]) :is(input, textarea)::placeholder { color: rgb(var(--muted)); }

/* Focus: purple border and a thin purple ring (the fields remove the browser outline) */
html body :is(main, .min-h-\[60vh\]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); outline: none;
}

/* Checkboxes and radios in the brand purple */
html body :is(main, .min-h-\[60vh\]) :is(input[type="checkbox"], input[type="radio"]) { accent-color: rgb(var(--brand)); }


/* ---------- FAQ accordions ----------
   Same as the homepage FAQ: one white panel, rows separated by 1px lines, 15px bold questions,
   14px / 22px answers, two columns on desktop when there are 7 questions or more.
   Two patterns: the bordered list (FAQ, product, contact, sell kamas: rows of button + answer
   or <details>) and the plain <details> list (server pages). */
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface,
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) {
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; box-shadow: none; padding: 4px 24px;
}
@media (max-width: 639px) {
  html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface,
  html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) { padding: 4px 16px; }
}

/* Full width of the content column, left edge on the section title, as the homepage FAQ panel.
   The lists were capped at 1140px (centered on product and contact pages, left on server pages),
   so they stopped 10-20px short of the cards above them */
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface.max-w-content,
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t.max-w-content:has(> details) { max-width: none; margin-left: 0; margin-right: 0; }

/* Questions: 15px / 22px bold; on hover only the text turns purple (was a lavender fill) */
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface > * > :is(button, summary) {
  padding: 12px 0; font-size: 15px; line-height: 22px;
}
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) > details > summary { font-size: 15px; line-height: 22px; }

/* Questions that wrap: no lone "?" or single word on the last line (the French texts put a
   space before "?" and ":", so at 375px "Puis-je demander un remboursement ?" ended with "?"
   alone). Same fix as the server FAQ in 1k-site-server.css; set on the text span too, where
   the question sits. Only line breaks change: no size, layout or hover change.
   balance first as a fallback for browsers without pretty */
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface > * > :is(button, summary),
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface > * > :is(button, summary) > span,
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) > details > summary { text-wrap: balance; text-wrap: pretty; }

html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface > * > :is(button, summary):hover,
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) > details > summary:hover { background-color: transparent; color: rgb(var(--brand)); }

/* Answers: 14px / 22px */
html body :is(main, .min-h-\[60vh\]) .divide-y.rounded-card.border.bg-surface > * > div { padding: 0 0 12px; font-size: 14px; line-height: 22px; }
html body :is(main, .min-h-\[60vh\]) .divide-y.border-t:has(> details) > details > p { font-size: 14px; line-height: 22px; }

/* Desktop, 7+ questions: two columns; each row has its own bottom line, the last row none */
@media (min-width: 1024px) {
  html body :is(main, .min-h-\[60vh\]) :is(.divide-y.rounded-card.border.bg-surface, .divide-y.border-t:has(> details)):has(> :nth-child(7)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start;
  }
  html body :is(main, .min-h-\[60vh\]) :is(.divide-y.rounded-card.border.bg-surface, .divide-y.border-t:has(> details)):has(> :nth-child(7)) > * {
    border-style: solid; border-color: rgb(var(--line)); border-width: 0 0 1px 0;
  }
  html body :is(main, .min-h-\[60vh\]) :is(.divide-y.rounded-card.border.bg-surface, .divide-y.border-t:has(> details)):has(> :nth-child(7)) > :nth-last-child(-n+2) { border-bottom-width: 0; }
}


/* ---------- Tables ---------- */

/* Header row: neutral tint, 13px bold sentence-case labels */
html body :is(main, .min-h-\[60vh\]) th { font-size: 13px; font-weight: 700; color: rgb(var(--ink)); }

/* Tables in articles: hairline grid */
html body :is(main, .min-h-\[60vh\]) .prose-1k table { border-collapse: collapse; font-size: 14px; line-height: 22px; }
html body :is(main, .min-h-\[60vh\]) .prose-1k :is(th, td) { border: 1px solid rgb(var(--line)); padding: 8px 12px; text-align: left; vertical-align: top; }
html body :is(main, .min-h-\[60vh\]) .prose-1k thead tr,
html body :is(main, .min-h-\[60vh\]) .prose-1k tr:first-child > th { background-color: rgb(var(--ink) / .04); }


/* ---------- Long text (.prose-1k: articles, product and service texts) ---------- */

/* Headings a step smaller and tighter, as the homepage section titles; 8px corners on images */
html body :is(main, .min-h-\[60vh\]) .prose-1k h2:not(.section-title) { margin-top: 32px; margin-bottom: 8px; font-size: 20px; line-height: 28px; }
html body :is(main, .min-h-\[60vh\]) .prose-1k h3 { margin-top: 24px; margin-bottom: 8px; font-size: 17px; line-height: 26px; }
html body :is(main, .min-h-\[60vh\]) .prose-1k img { border-radius: 8px; }
html body :is(main, .min-h-\[60vh\]) .prose-1k li::marker { color: rgb(var(--muted)); }


/* ---------- Type: sentence case, two weights ---------- */

/* Uppercase / spaced labels (server groups, form labels, table headers, hero titles) */
html body :is(main, .min-h-\[60vh\]) :is(.uppercase, [class*="tracking-"]) { text-transform: none; letter-spacing: normal; }

/* 600 → 700 */
html body :is(main, .min-h-\[60vh\]) .font-semibold { font-weight: 700; }


/* ---------- Decorations removed ---------- */

/* Emoji before the product security warning title (the title text stays) */
html body :is(main, .min-h-\[60vh\]) p.text-warn-text > span[aria-hidden="true"]:first-child { display: none; }

/* Decorative gradient / glow layers */
html body :is(main, .min-h-\[60vh\]) [aria-hidden="true"]:is([class*="radial-gradient"], [class*="linear-gradient"]) { display: none; }

/* Animated white-and-lilac shine sweeping over the rating stars (product buy box): a sparkle
   layer on top of each star. The stars themselves (svg) and the rating text stay */
html body :is(main, .min-h-\[60vh\]) .star-glint { display: none; }

/* ---------- Category tabs: the current one as a folder tab (1k-tabs.js), from 640px ----------
   The tab's top corners are rounded; two 12px pieces outside its bottom corners, painted with the
   same banner layers and hollowed by a quarter circle, join it to the banner's top edge. */
@media (min-width: 640px) {
  :is(.k1g-tab, .k1m-tab)[aria-current] { position: relative; border-radius: 12px 12px 0 0; }
  :is(.k1g-tab, .k1m-tab).is-folder::before, :is(.k1g-tab, .k1m-tab).is-folder::after {
    content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; pointer-events: none;
    background-image: var(--k1t-img); background-size: var(--k1t-size); background-repeat: no-repeat; background-color: var(--k1t-color);
  }
  :is(.k1g-tab, .k1m-tab).is-folder::before {
    left: -12px; background-position: var(--k1t-pos-l);
    -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000 100%); mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000 100%);
  }
  :is(.k1g-tab, .k1m-tab).is-folder::after {
    right: -12px; background-position: var(--k1t-pos-r);
    -webkit-mask: radial-gradient(circle 12px at 100% 0, transparent 98%, #000 100%); mask: radial-gradient(circle 12px at 100% 0, transparent 98%, #000 100%);
  }
}

/* Comptes / Objets tabs: on hover the whole tab box fills and rises like the current tab (same
   colours as .k1g-tab[aria-current] in 1k-site-product.css), so it reads as clickable. Not on the
   current tab, which is no link, nor on the grey "coming soon" ones, which are no <a>. */
a:is(.k1g-tab, .k1m-tab) { cursor: pointer; border-radius: 12px 12px 0 0; }
@media (any-hover: hover) {
  html a:is(.k1g-tab, .k1m-tab):hover { background: #dcd2e3; color: #1d072a; }
  html[data-theme="dark"] a:is(.k1g-tab, .k1m-tab):hover { background: #3f3148; color: #fff; }
}
@media (any-hover: hover) and (min-width: 640px) {
  html a:is(.k1g-tab, .k1m-tab):hover { height: 46px; }
}
html a:is(.k1g-tab, .k1m-tab):active { background: #cfc2d9; }
html[data-theme="dark"] a:is(.k1g-tab, .k1m-tab):active { background: #4a3a55; }
a:is(.k1g-tab, .k1m-tab):focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  a:is(.k1g-tab, .k1m-tab) { transition: background-color .15s ease, color .15s ease, height .15s ease; }
}