/*
Theme Name: Last Ones Left
Theme URI: https://lastonesleft.co.uk
Author: Last Ones Left
Description: Blackout block theme for Last Ones Left. WW2 Home Front meets biohazard containment. Built for WooCommerce.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: last-ones-left
*/

/* ---------- Tokens (mirror theme.json for use in custom CSS) ---------- */
:root {
	--lol-bg: var(--wp--preset--color--blackout, #0D0E0B);
	--lol-panel: var(--wp--preset--color--panel, #16170F);
	--lol-line: var(--wp--preset--color--line, #2B2C21);
	--lol-text: var(--wp--preset--color--bone, #E6E0CC);
	--lol-muted: var(--wp--preset--color--muted, #9C9782);
	--lol-olive: var(--wp--preset--color--olive, #4C4F2E);
	--lol-brass: var(--wp--preset--color--brass, #C6A15A);
	--lol-hazard: var(--wp--preset--color--hazard, #E3B11A);
	--lol-accent: var(--lol-hazard);
	--lol-tape: repeating-linear-gradient(-45deg, var(--lol-hazard) 0 14px, var(--lol-bg) 14px 28px);
	--lol-red: var(--wp--preset--color--signal-red, #A5281E);
	--lol-stencil: var(--wp--preset--font-family--stencil);
	--lol-ui: var(--wp--preset--font-family--ui);
	--lol-mono: var(--wp--preset--font-family--mono);
	--lol-gutter: max(16px, 2.2vw);
	color-scheme: dark;
}

body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--lol-accent); color: var(--lol-bg); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--lol-accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.lol-muted { color: var(--lol-muted); }

/* Film grain on dark surfaces */
.lol-grain { position: relative; isolation: isolate; }
.lol-grain::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .14; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared bits */
.lol-eyebrow {
	font-family: var(--lol-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--lol-accent); margin: 0;
}
.lol-btn {
	display: inline-block; text-decoration: none; border-radius: 2px;
	font-family: var(--lol-ui); font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em;
	padding: .85rem 1.4rem; background: var(--lol-accent); color: var(--lol-bg);
	transition: background-color .2s ease, color .2s ease;
}
.lol-btn:hover { background: var(--lol-text); color: var(--lol-bg); }
.lol-btn--ghost { background: transparent; color: var(--lol-text); box-shadow: inset 0 0 0 1.5px var(--lol-text); }
.lol-btn--ghost:hover { background: var(--lol-text); color: var(--lol-bg); }

/* ---------- Header ---------- */
.lol-header { position: relative; z-index: 20; }
.lol-announce {
	gap: .4rem 2rem; padding: .5rem var(--lol-gutter); text-align: center;
	font-family: var(--lol-ui); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.lol-announce p { margin: 0; }
.lol-announce a { color: var(--lol-accent); text-decoration: none; }
.lol-mast { gap: 1.5rem; padding: 1rem var(--lol-gutter); border-bottom: 1px solid var(--lol-line); }
.lol-logo { display: block; flex: none; line-height: 0; }
.lol-logo img { width: clamp(118px, 12vw, 164px); height: auto; }
.lol-search { flex: 1 1 auto; max-width: 640px; margin: 0 !important; }
.lol-search .wp-block-search__inside-wrapper { border: 1px solid var(--lol-line) !important; border-radius: 3px; padding: 0 !important; background: transparent; }
.lol-search .wp-block-search__input { background: transparent; color: var(--lol-text); border: 0; padding: .7rem 1rem; font-family: var(--wp--preset--font-family--body); }
.lol-search .wp-block-search__input::placeholder { color: var(--lol-muted); }
.lol-search .wp-block-search__button { margin: 0; background: var(--lol-panel); color: var(--lol-text); border-left: 1px solid var(--lol-line); border-radius: 0; padding: 0 .9rem; }
.lol-search .wp-block-search__button svg { fill: currentColor; }
.lol-tools { gap: 1rem; flex: none; }
.lol-tools .wc-block-mini-cart__button, .lol-tools .wc-block-customer-account a { color: var(--lol-text); }
.lol-tools .wc-block-mini-cart__badge { background: var(--lol-accent); color: var(--lol-bg); }
.lol-nav { padding: 0 var(--lol-gutter); border-bottom: 1px solid var(--lol-line); }
.lol-nav .wp-block-navigation__container { gap: 2rem; }
.lol-nav .wp-block-navigation-item__content { padding: .9rem 0; color: var(--lol-text); text-decoration: none; }
.lol-nav .wp-block-navigation-item__content:hover { color: var(--lol-accent); }
.lol-nav .lol-nav-hot .wp-block-navigation-item__content { color: var(--lol-accent); box-shadow: inset 0 -2px 0 var(--lol-accent); }
.lol-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--lol-bg); color: var(--lol-text); padding: 1.5rem var(--lol-gutter); }
.lol-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .2rem; }
@media (max-width: 781px) {
	.lol-search { display: none; }
	.lol-nav { padding-block: .4rem; }
}

/* ---------- Main ---------- */
.lol-main { margin-top: 0 !important; }
.lol-page { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.lol-page-title { margin-bottom: 1.5rem; }
.lol-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--lol-line); }
.lol-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lol-section-head h2 { margin: 0; }
.lol-section-head a { font-family: var(--lol-ui); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

/* ---------- Hero ---------- */
.lol-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(78vh, 640px); border-bottom: 1px solid var(--lol-line); }
.lol-hero-copy { display: grid; gap: 1.2rem; align-content: center; padding: clamp(2.5rem, 6vw, 5rem) var(--lol-gutter); }
.lol-hero-copy h1 { margin: 0; font-size: var(--wp--preset--font-size--xxl); line-height: .92; text-wrap: balance; }
.lol-hero-lede { color: var(--lol-muted); max-width: 42ch; font-size: 1.05rem; margin: 0; }
.lol-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.lol-specline { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; font-family: var(--lol-mono); font-size: .74rem; color: var(--lol-muted); letter-spacing: .04em; }
.lol-hero-photo {
	display: grid; place-items: center; overflow: hidden; min-height: 320px;
	background: radial-gradient(120% 90% at 20% 30%, color-mix(in srgb, var(--lol-olive) 55%, var(--lol-bg)) 0%, var(--lol-bg) 70%);
}
.lol-hero-photo > img:not(.lol-hero-emblem) { width: 100%; height: 100%; object-fit: cover; }
.lol-hero-emblem { position: relative; height: auto; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)); }
@media (max-width: 860px) {
	.lol-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.lol-hero-photo { min-height: 260px; }
}

/* ---------- Trust strip ---------- */
.lol-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--lol-line); }
.lol-trust li { display: grid; gap: .1rem; padding: 1.1rem var(--lol-gutter); border-left: 1px solid var(--lol-line); }
.lol-trust li:first-child { border-left: 0; }
.lol-trust b { font-family: var(--lol-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.lol-trust span { color: var(--lol-muted); font-size: .85rem; }
@media (max-width: 860px) {
	.lol-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lol-trust li:nth-child(3) { border-left: 0; }
	.lol-trust li:nth-child(n+3) { border-top: 1px solid var(--lol-line); }
}

/* ---------- Loadout steps ---------- */
.lol-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lol-steps li { background: var(--lol-panel); border: 1px solid var(--lol-line); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; }
.lol-steps h3, .lol-steps p { margin: 0; }
.lol-steps p { color: var(--lol-muted); }
.lol-step-no { font-family: var(--lol-stencil); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--lol-accent); }
@media (max-width: 860px) { .lol-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Posts ---------- */
.lol-posts .wp-block-post-template { gap: 1.5rem; }
.lol-posts .wp-block-post { display: grid; gap: .5rem; align-content: start; border-top: 2px solid var(--lol-line); padding-top: 1rem; }
.lol-posts .wp-block-post-title { margin: 0; }
.lol-posts .wp-block-post-title a { color: var(--lol-text); text-decoration: none; }
.lol-posts .wp-block-post-title a:hover { color: var(--lol-accent); }
.lol-posts .wp-block-post-excerpt { color: var(--lol-muted); margin: 0; }
.lol-posts .wp-block-post-excerpt__more-link { font-family: var(--lol-ui); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }

/* ---------- Roll call (warning sign) ---------- */
.lol-roll-call {
	display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap;
	padding: clamp(2.5rem, 6vw, 4rem) var(--lol-gutter); background: var(--lol-hazard); color: var(--lol-bg);
}
.lol-roll-call > div { display: grid; gap: .6rem; max-width: 46ch; }
.lol-roll-call h2 { margin: 0; }
.lol-roll-call p { margin: 0; }
.lol-roll-call .lol-eyebrow { color: var(--lol-bg); opacity: .85; display: flex; align-items: center; gap: .5rem; }
.lol-roll-call h2 { color: var(--lol-bg); }
.lol-roll-call .lol-btn { background: var(--lol-bg); color: var(--lol-hazard); }
.lol-roll-call .lol-btn:hover { background: var(--lol-panel); color: var(--lol-text); }

/* ---------- Footer ---------- */
.lol-footer { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; background: var(--lol-bg); }
.lol-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.lol-footer-brand { display: grid; gap: 1rem; align-content: start; max-width: 32ch; color: var(--lol-muted); }
.lol-footer-brand p { margin: 0; }
.lol-footer h4 { margin: 0 0 .8rem; font-size: .85rem; color: var(--lol-muted); }
.lol-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lol-footer ul a { color: var(--lol-text); text-decoration: none; }
.lol-footer ul a:hover { color: var(--lol-accent); }
.lol-footer-base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--lol-line); display: flex; justify-content: space-between; gap: .5rem 2rem; flex-wrap: wrap; font-family: var(--lol-mono); font-size: .72rem; color: var(--lol-muted); letter-spacing: .05em; }
@media (max-width: 860px) { .lol-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lol-footer-brand { grid-column: 1 / -1; } }

/* ---------- WooCommerce: shared ---------- */
.lol-shop { padding-block: 1.5rem clamp(3rem, 7vw, 5rem); }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-family: var(--lol-mono); font-size: .72rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--lol-muted); }
.woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--lol-muted); text-decoration: none; }
.woocommerce .woocommerce-products-header__title, .woocommerce-products-header h1 { font-size: var(--wp--preset--font-size--xl); margin: .5rem 0 1rem; }
.woocommerce .woocommerce-result-count { font-family: var(--lol-mono); font-size: .75rem; color: var(--lol-muted); }
.woocommerce .woocommerce-ordering select, .woocommerce select, .woocommerce input.input-text, .woocommerce textarea, .woocommerce .quantity .qty {
	background: var(--lol-panel); color: var(--lol-text); border: 1px solid var(--lol-line); border-radius: 2px; padding: .55rem .7rem;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button:not(.is-link) {
	background: var(--lol-accent) !important; color: var(--lol-bg) !important; border-radius: 2px !important;
	font-family: var(--lol-ui) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em;
	padding: .85rem 1.4rem; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--lol-text) !important; }
.woocommerce span.onsale { background: var(--lol-red); color: var(--lol-text); border-radius: 0; min-height: 0; min-width: 0; line-height: 1; padding: .35rem .55rem; font-family: var(--lol-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
	background: var(--lol-panel) !important; color: var(--lol-text) !important; border: 1px solid var(--lol-line) !important; border-left: 3px solid var(--lol-accent) !important; border-radius: 0 !important;
}
.woocommerce-error { border-left-color: var(--lol-red) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--lol-accent); }
.woocommerce .star-rating span::before { color: var(--lol-accent); }

/* Product grid */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1rem; margin: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; display: grid; align-content: start; gap: .4rem; position: relative; }
.woocommerce ul.products li.product a img { margin: 0 0 .4rem; background: var(--lol-panel); border: 1px solid var(--lol-line); aspect-ratio: 4 / 5; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--lol-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .98rem !important; line-height: 1.2; padding: 0 !important; color: var(--lol-text); }
.woocommerce ul.products li.product .price { font-family: var(--lol-mono); color: var(--lol-text) !important; font-size: .92rem !important; }
.woocommerce ul.products li.product .button { margin-top: .3rem; padding: .6rem .9rem; font-size: .78rem; justify-self: start; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { color: inherit; text-decoration: none; display: grid; gap: .3rem; }
.lol-loop-code { font-family: var(--lol-mono); font-size: .68rem; letter-spacing: .12em; color: var(--lol-accent); }
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Single product */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { background: var(--lol-panel); border: 1px solid var(--lol-line); }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--xl); margin: 0 0 .6rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--lol-text) !important; font-family: var(--lol-stencil); font-weight: 800; font-size: 2rem !important; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--lol-muted); }
.woocommerce div.product form.cart { display: grid; grid-template-columns: auto 1fr; gap: 1rem .8rem; align-items: center; margin-top: 1.5rem; }
.woocommerce div.product form.cart .lol-loadout { grid-column: 1 / -1; }
.woocommerce div.product form.cart .button { width: 100%; padding-block: 1rem; font-size: .95rem; }
.woocommerce div.product .product_meta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lol-line); font-family: var(--lol-mono); font-size: .74rem; color: var(--lol-muted); display: grid; gap: .3rem; }
.woocommerce div.product .stock { font-family: var(--lol-mono); font-size: .78rem; color: var(--lol-accent) !important; }
.woocommerce div.product .stock.out-of-stock { color: var(--lol-red) !important; }
.lol-code { font-family: var(--lol-mono); font-size: .76rem; letter-spacing: .16em; color: var(--lol-accent); margin: 0 0 .4rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 2rem 0 0; border-bottom: 1px solid var(--lol-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 1.5rem 0 0 !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--lol-muted) !important; font-family: var(--lol-ui); text-transform: uppercase; letter-spacing: .07em; padding: .8rem 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--lol-text) !important; box-shadow: inset 0 -2px 0 var(--lol-accent); }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 1.2rem; max-width: 72ch; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--wp--preset--font-size--lg); }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-color: var(--lol-line); background: transparent !important; padding: .6rem; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 3rem; }
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: minmax(0, 1fr); } }

/* Cart & checkout blocks */
.wc-block-cart, .wc-block-checkout { color: var(--lol-text); }
.wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-cart-items, .wc-block-components-sidebar { border-color: var(--lol-line) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select, .wc-block-components-textarea {
	background: var(--lol-panel) !important; color: var(--lol-text) !important; border-color: var(--lol-line) !important;
}
.wc-block-components-text-input label, .wc-block-components-combobox label { color: var(--lol-muted) !important; }
.wc-block-components-product-name { color: var(--lol-text) !important; font-family: var(--lol-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wc-block-components-product-details { font-family: var(--lol-mono); font-size: .74rem; color: var(--lol-muted); }
.wc-block-mini-cart__drawer .components-modal__content, .wc-block-mini-cart__drawer .wc-block-mini-cart__footer { background: var(--lol-bg); color: var(--lol-text); }

/* ---------- Containment details (biohazard x Home Front) ---------- */
.lol-bio {
	display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
	-webkit-mask: url("assets/brand/biohazard.svg") center / contain no-repeat; mask: url("assets/brand/biohazard.svg") center / contain no-repeat;
}
.lol-tape { height: 10px; background: var(--lol-tape); margin-block: 0 !important; }
.lol-tape + * { margin-block-start: 0 !important; }
.lol-eyebrow--bio { display: flex; align-items: center; gap: .55rem; }
.lol-eyebrow--bio .lol-bio { font-size: 1.15em; }

.lol-announce { color: var(--lol-bg); }
.lol-announce p { display: flex; align-items: center; gap: .5rem; }
.lol-announce .lol-bio { font-size: 1.05em; }
.lol-announce a { color: var(--lol-bg); text-decoration: underline; text-underline-offset: 3px; }

.lol-section-head h2::before {
	content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; vertical-align: .08em;
	background: repeating-linear-gradient(-45deg, var(--lol-hazard) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--lol-hazard);
}

/* Hero: watermark + warning label */
.lol-hero-photo { position: relative; }
.lol-hero-bio { position: absolute; width: min(118%, 760px); height: auto; aspect-ratio: 1; right: -22%; top: -14%; color: var(--lol-hazard); opacity: .05; transform: rotate(-12deg); }
.lol-label {
	position: absolute; left: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 48px); width: min(300px, calc(100% - 32px));
	background: var(--lol-bg); color: var(--lol-text); border: 2px solid var(--lol-hazard); font-family: var(--lol-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.lol-label__head { display: flex; align-items: center; gap: .6rem; background: var(--lol-hazard); color: var(--lol-bg); padding: .5rem .7rem; font-family: var(--lol-stencil); font-weight: 800; font-size: 1.35rem; letter-spacing: .08em; line-height: 1; }
.lol-label__head .lol-bio { font-size: 1.25rem; }
.lol-label dl { margin: 0; padding: .7rem .8rem .2rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; }
.lol-label dt { color: var(--lol-muted); }
.lol-label dd { margin: 0; }
.lol-label__foot { margin: 0; padding: .6rem .8rem .7rem; border-top: 1px dashed var(--lol-line); color: var(--lol-hazard); }
.lol-label__tape { height: 8px; background: var(--lol-tape); }
/* With the roundel (no hero photo yet): emblem top right, label bottom left, never overlapping */
.lol-hero-photo:has(.lol-hero-emblem) {
	display: grid; grid-template-rows: 1fr auto; place-items: initial; gap: 1rem;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(16px, 4vw, 48px);
}
.lol-hero-photo:has(.lol-hero-emblem) .lol-label { position: relative; left: auto; bottom: auto; justify-self: start; }
.lol-hero-emblem { justify-self: end; align-self: center; margin: 0 !important; width: min(78%, 400px); }
@media (max-width: 860px) { .lol-hero-emblem { justify-self: center; width: min(76%, 320px); } }

/* Products and builder */
.woocommerce ul.products li.product { transition: border-color .2s ease; }
.woocommerce ul.products li.product:hover { border-color: var(--lol-hazard) !important; }
.lol-loadout { background: var(--lol-tape) top / 100% 8px no-repeat, var(--lol-panel) !important; padding-top: calc(1.2rem + 8px) !important; }
.lol-loadout__title { display: flex !important; align-items: center; gap: .55rem; }
.lol-loadout__title::before {
	content: ""; width: 1.2em; height: 1.2em; background: var(--lol-hazard);
	-webkit-mask: url("assets/brand/biohazard.svg") center / contain no-repeat; mask: url("assets/brand/biohazard.svg") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }