/* ==========================================================================
   OFA — the light canvas for every page except the home page (body.is-light, set in
   inc/setup.php): off-white ground, white cards, the site screenshots carry the colour.
   The footer stays a dark night-blue band.
   Mürekkep #111318 for copy, Elektrik #005EFB for labels, "Canlı", active filters and CTAs,
   Kağıt #FAFAF8 as the canvas; sector pastels come from pastel.css. Loaded on the template archive only, after palette.css.
   ========================================================================== */
/* :is(.is-light,.post-type-archive-ofa_template) — the second class keeps the catalog light while a server still runs the old inc/setup.php (OPcache). */

:is(.is-light,.post-type-archive-ofa_template){
	color-scheme:light;
	--paper:#fafaf8;
	--surface:#fff;
	--sunk:#f1f1ee;
	--line:#e8e8e4;
	--line-2:#d6d6d1;
	--text:#111318;
	--muted:#55575f;
	--faint:#72747b;
	--ink:#111318;
	--ink-2:#191b21;
	--ink-3:#111318;
	--brand-ink:var(--ofa-navy-700);
	--brand-soft:rgb(var(--ofa-navy-600-rgb) / .14);
	--tint-soft:var(--ofa-navy-50);
	--tint-ink:var(--ofa-navy-700);
	--sh-1:0 1px 2px rgb(17 19 24 / .05),0 2px 6px rgb(17 19 24 / .04);
	--sh-2:0 2px 4px rgb(17 19 24 / .04),0 18px 36px -18px rgb(17 19 24 / .22);
	--sh-3:0 32px 72px -30px rgb(17 19 24 / .3);
	--night:var(--ofa-navy-700);
	--brand:var(--ofa-navy-700);
	--brand-2:var(--ofa-navy-700);
	--lime:var(--ofa-navy-700);
	--tint:var(--ofa-navy-700);
	background:var(--paper);
	color:var(--text);
}
/* Per-sector tints collapse to the same night blue on light surfaces. */
:is(.is-light,.post-type-archive-ofa_template) [style*="--h:"]{--tint:var(--ofa-navy-700);--tint-soft:var(--ofa-navy-50);--tint-ink:var(--ofa-navy-700)}

/* Header: white glass with a hairline. */
:is(.is-light,.post-type-archive-ofa_template) .site-head,
:is(.is-light,.post-type-archive-ofa_template) .site-head.is-stuck{background:rgb(255 255 255 / .9);border-bottom-color:var(--line);color:var(--text)}
:is(.is-light,.post-type-archive-ofa_template) .site-head.is-open{background:#fff}
:is(.is-light,.post-type-archive-ofa_template) .search-trigger{background:var(--sunk);border-color:var(--line);color:var(--muted)}
:is(.is-light,.post-type-archive-ofa_template) .search-trigger:hover{border-color:var(--line-2);background:#fff}
:is(.is-light,.post-type-archive-ofa_template) .search-trigger span{white-space:nowrap}
:is(.is-light,.post-type-archive-ofa_template) .search-trigger kbd{background:#fff;border-color:var(--line);color:var(--faint)}

/* Page head: quiet, so the grid is what catches the eye. */
:is(.is-light,.post-type-archive-ofa_template) .cat-hero{background:var(--paper);border-bottom:1px solid var(--line)}
:is(.is-light,.post-type-archive-ofa_template) .cat-hero h1{color:var(--text)}

/* Cards: white, crisp, the screenshot first. */
:is(.is-light,.post-type-archive-ofa_template) .card{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgb(17 19 24 / .04),0 10px 24px -18px rgb(17 19 24 / .2)}
:is(.is-light,.post-type-archive-ofa_template) .card:hover{border-color:var(--line-2);box-shadow:0 2px 4px rgb(17 19 24 / .04),0 24px 44px -22px rgb(17 19 24 / .3)}
:is(.is-light,.post-type-archive-ofa_template) .card__media{background:var(--sunk);border-bottom-color:var(--line)}
:is(.is-light,.post-type-archive-ofa_template) .card__chrome{background:#fcfcfb;border-bottom-color:var(--line)}
:is(.is-light,.post-type-archive-ofa_template) .card__chrome i{background:#d3dae4}
:is(.is-light,.post-type-archive-ofa_template) .card__chrome em{color:var(--faint)}
:is(.is-light,.post-type-archive-ofa_template) .card__family{color:var(--night)}
:is(.is-light,.post-type-archive-ofa_template) .card__sector{color:var(--faint)}
:is(.is-light,.post-type-archive-ofa_template) .card__title{color:var(--text)}
:is(.is-light,.post-type-archive-ofa_template) .card__foot{border-top:1px solid var(--sunk);margin-top:auto;padding-top:12px}
:is(.is-light,.post-type-archive-ofa_template) .card .ofa-price ins{color:var(--text)}
:is(.is-light,.post-type-archive-ofa_template) .card__live{background:var(--ofa-navy-50);color:var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) .card__live:hover{background:var(--ofa-navy-600);color:#fff}
:is(.is-light,.post-type-archive-ofa_template) .card__live .live-dot{background:var(--ofa-navy-600)}
:is(.is-light,.post-type-archive-ofa_template) .card__live:hover .live-dot{background:#fff}
:is(.is-light,.post-type-archive-ofa_template) .badge--hot{background:rgb(255 255 255 / .94);color:var(--text);box-shadow:0 1px 3px rgb(17 19 24 / .18)}
:is(.is-light,.post-type-archive-ofa_template) .badge--new{background:var(--text);color:#fff}
:is(.is-light,.post-type-archive-ofa_template) .ph{background:var(--sunk) repeating-linear-gradient(135deg,rgb(17 19 24 / .035) 0 1px,transparent 1px 10px)}
:is(.is-light,.post-type-archive-ofa_template) .skeleton div{background:linear-gradient(90deg,var(--sunk),#fcfcfb,var(--sunk));background-size:200% 100%}

/* Filters and toolbar: neutral controls; the active choice is night blue. */
:is(.is-light,.post-type-archive-ofa_template) .toolbar select{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%234b5b72' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E")}
:is(.is-light,.post-type-archive-ofa_template) .opt input{background:#fff}
:is(.is-light,.post-type-archive-ofa_template) .opt input:checked{background:var(--ofa-navy-700);border-color:var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) .chip.is-on:hover{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600)}
:is(.is-light,.post-type-archive-ofa_template) .opt:hover{background:#efefec}
:is(.is-light,.post-type-archive-ofa_template) .badge--sale{box-shadow:0 1px 3px rgb(17 19 24 / .18)}

/* Footer stays a dark navy band, in line with the home page identity. */
:is(.is-light,.post-type-archive-ofa_template) .site-foot{background:var(--ofa-navy-950);color:#b9bac0;--ink-line:rgb(255 255 255 / .1)}

/* Fills on the light pages: OFA Volt, a shade deeper on hover. */
:is(.is-light,.post-type-archive-ofa_template) :is(.btn--primary,.brand__mark,.head-cta){background:var(--ofa-navy-700);border-color:var(--ofa-navy-700);color:#fff}
:is(.is-light,.post-type-archive-ofa_template) .btn--primary{--bg:var(--ofa-navy-700);--bd:var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) :is(.btn--primary,.head-cta):hover{background:var(--ofa-volt-press);border-color:var(--ofa-volt-press)}
:is(.is-light,.post-type-archive-ofa_template) .brand__mark i{box-shadow:0 0 0 2px var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) :is(.chip.is-on,.pager__nums a[aria-current],.toggle input:checked + span){background-color:var(--ofa-navy-700);border-color:var(--ofa-navy-700);color:#fff}
:is(.is-light,.post-type-archive-ofa_template) :focus-visible{outline-color:var(--ofa-navy-600)}

/* Small labels (breadcrumb, counts, sector names, ⌘K): #5F6B80 is AA on white (5.4:1) and on --paper (5.0:1). */
:is(.is-light,.post-type-archive-ofa_template){--faint:#5d5f66}

/* Template detail page: its own tokens (palette.css sets them dark) on the same light canvas.
   Literal values: app.css points .tpx's --paper/--sunk/--line/--muted/--sh-2 back at these, so var() here would be a cycle. */
:is(.is-light,.post-type-archive-ofa_template) .tpx{
	--bg:#fafaf8;--surface:#fff;--surface-2:#f1f1ee;
	--border:#e8e8e4;--border-hover:#d6d6d1;
	--text:#111318;--text-muted:#55575f;
	--accent:var(--ofa-navy-700);--accent-hover:var(--ofa-navy-600);
	--shadow-card:0 2px 4px rgb(17 19 24 / .04),0 18px 36px -18px rgb(17 19 24 / .22);
	--ok:#15803d;--ok-soft:rgb(21 128 61 / .1);--bad:#b42318;--bad-soft:rgb(180 35 24 / .08);--warn:#92400e;--warn-soft:rgb(146 64 14 / .08)
}
:is(.is-light,.post-type-archive-ofa_template) .tpx .btn--lime,:is(.is-light,.post-type-archive-ofa_template) .tpx .btn--primary,:is(.is-light,.post-type-archive-ofa_template) .tpx [data-care-add],:is(.is-light,.post-type-archive-ofa_template) .tpx .timeline li::before{background:var(--ofa-navy-700);border-color:var(--ofa-navy-700);color:#fff}
:is(.is-light,.post-type-archive-ofa_template) .tpx .btn--lime:hover,:is(.is-light,.post-type-archive-ofa_template) .tpx .btn--primary:hover,:is(.is-light,.post-type-archive-ofa_template) .tpx [data-care-add]:hover{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600)}
:is(.is-light,.post-type-archive-ofa_template) .tpx .live-dot{background:var(--ofa-navy-600)}
:is(.is-light,.post-type-archive-ofa_template) .tpx-top::before{background-image:radial-gradient(rgb(var(--ofa-navy-600-rgb) / .06) 1px,transparent 1.5px)}

/* WooCommerce defaults on light pages: prices in the text colour, not WooCommerce's olive. */
:is(.is-light,.post-type-archive-ofa_template).woocommerce ul.products li.product .price,:is(.is-light,.post-type-archive-ofa_template) .woocommerce ul.products li.product .price,:is(.is-light,.post-type-archive-ofa_template) .woocommerce div.product p.price,:is(.is-light,.post-type-archive-ofa_template) .woocommerce div.product span.price{color:var(--text)}
:is(.is-light,.post-type-archive-ofa_template) .included{background-color:#fff;color:var(--text)}
/* Accents tuned for dark surfaces (navy-300) → the main night blue on light ones. */
:is(.is-light,.post-type-archive-ofa_template) :is(.tpx-kicker,.tpx-care__grid .icon,.tpx-ticks .icon,.features .icon,.ticks .icon,.link-arrow){color:var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) .step__icon{background:var(--ofa-navy-50);color:var(--ofa-navy-700)}
:is(.is-light,.post-type-archive-ofa_template) :is(.badge--new,.faq__item[open] .faq__icon){background:var(--ofa-navy-50);color:var(--ofa-navy-700)}
/* WooCommerce add-on pages (shop, product): body itself carries .woocommerce, so the price and buttons need the compound selector. */
.is-light.woocommerce div.product p.price,.is-light.woocommerce div.product span.price,.is-light.woocommerce ul.products li.product .price{color:var(--text)}
.is-light.woocommerce :is(a.button,button.button,input.button):not(.alt),.is-light.woocommerce button.single_add_to_cart_button{background:var(--ofa-navy-700);border-color:var(--ofa-navy-700);color:#fff}
.is-light.woocommerce :is(a.button,button.button,input.button):not(.alt):hover,.is-light.woocommerce button.single_add_to_cart_button:hover{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600);color:#fff}

/* About this sector (taxonomy-ofa_sector.php): reading text under the sites, one quiet column on a sunk band. */
.sector-about{padding:clamp(40px,6vw,72px) 0;background:var(--sunk)}
.sector-about__in{max-width:72ch}
.sector-about h2{margin:0 0 16px;font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.sector-about p{margin:0 0 14px;font-size:1rem;line-height:1.7;color:var(--text)}
.sector-about p:last-child{margin-bottom:0}