@font-face {
	font-family: "Material Symbols Outlined";
	src: url("../fonts/material-symbols-outlined.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Thin.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-UltraLight.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-DemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-ExtraBold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Heavy.woff2") format("woff2");
	font-weight: 850;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: IRANSansX;
	src: url("../fonts/IRANSansX-ExtraBlack.woff2") format("woff2");
	font-weight: 950;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-primary: #0756a8;
	--color-primary-strong: #064585;
	--color-primary-solid: #0756a8;
	--color-primary-soft: #e7f0fa;
	--color-accent: #f5b800;
	--color-accent-strong: #dfaa00;
	--color-accent-ink: #1a2332;
	--color-ink: #1a2332;
	--color-muted: #5c6b7a;
	--color-canvas: #f4f6f8;
	--color-surface: #ffffff;
	--color-line: #d5dee8;
	--color-navy: #07284d;
	--color-paper: #ffffff;
	--color-navy-soft: #b7c6d6;
	--color-success: #0f7a4a;
	--color-success-soft: #e5f6ee;
	--color-danger: #b42318;
	--color-danger-soft: #fdeceb;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--yl-container: 1280px;
	color-scheme: light;
}

html.dark {
	--color-ink: #e7eef6;
	--color-muted: #9aabbb;
	--color-canvas: #0c141d;
	--color-surface: #141e2a;
	--color-line: #2c3d52;
	--color-primary-soft: #16324d;
	--color-success-soft: #123528;
	--color-danger-soft: #3a1c1c;
	--color-primary: #9cc7f5;
	--color-navy-soft: #9aabbb;
	color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: IRANSansX, Tahoma, sans-serif;
	font-size: 1rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.yl-symbol {
	display: inline-block;
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.5rem; }
p { margin: 0 0 0.75rem; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.screen-reader-text:focus {
	position: fixed;
	inset-inline-start: 1rem;
	top: 1rem;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	background: var(--color-surface);
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-md);
}

.container-yl,
.yl-container {
	width: min(100% - 2rem, var(--yl-container));
	margin-inline: auto;
}

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }

.field {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	padding-inline: 0.75rem;
}
textarea.field { padding-block: 0.65rem; }
.field:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding-inline: 1rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	background: transparent;
}
.btn-primary { background: var(--color-primary-solid); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-primary-strong); }
.btn-accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-accent:hover { background: var(--color-accent-strong); }
.btn-ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.yl-on-navy { background: transparent; color: var(--color-paper); border-color: rgba(255,255,255,.35); }

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	font-size: 0.875rem;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.yl-announce { background: var(--color-navy); color: var(--color-paper); }
.yl-announce-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; font-size: 0.875rem; }
.yl-announce button { background: transparent; border: 0; color: inherit; font-size: 1.25rem; cursor: pointer; min-width: 2rem; }

.site-header {
	background: color-mix(in srgb, var(--color-surface) 94%, transparent);
	border-bottom: 1px solid var(--color-line);
	backdrop-filter: blur(10px);
}
.yl-sticky-header .site-header { position: sticky; top: 0; z-index: 40; }
.yl-util { border-bottom: 1px solid var(--color-line); }
.yl-util-inner, .yl-header-bar, .yl-footer-bar .container-yl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.yl-util-inner { padding-block: 0.35rem; font-size: 0.75rem; color: var(--color-muted); }
.yl-util-meta, .yl-util-tools, .yl-header-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.yl-util a:hover, .yl-menu a:hover { color: var(--color-primary); }

.yl-header-bar { padding-block: 0.75rem; gap: 0.75rem; }
.yl-logo { display: flex; align-items: center; gap: 0.6rem; min-width: max-content; }
.yl-mark { width: 2.5rem; height: auto; }
.yl-logo-text { display: flex; flex-direction: column; gap: 0.25rem; line-height: 1.15; }
.yl-logo-text strong, .yl-logo > strong { color: var(--color-primary); font-size: 1.05rem; }
.yl-logo-text small { color: var(--color-muted); font-size: 0.75rem; }
.yl-logo-on-navy strong { color: var(--color-paper); }

.yl-search { flex: 1; display: none; }
.yl-icon-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	cursor: pointer;
}
.yl-cart-count {
	position: absolute;
	top: -0.35rem;
	inset-inline-start: -0.35rem;
	min-width: 1.2rem;
	padding-inline: 0.2rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.yl-consult { display: none; }
.yl-nav-toggle {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	cursor: pointer;
}
.yl-submenu-toggle {
	display: inline-grid;
	place-items: center;
	min-width: 2rem;
	min-height: 2rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.yl-submenu-toggle .yl-symbol { font-size: 1.25rem; }
.yl-submenu-toggle[aria-expanded="true"] .yl-symbol { transform: rotate(180deg); }

.yl-desktop-nav { display: none; border-top: 1px solid var(--color-line); }
.yl-menu { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.yl-menu a { display: inline-flex; padding: 0.75rem 0.8rem; font-size: 0.92rem; font-weight: 600; }
.yl-menu-mobile { flex-direction: column; }
.yl-menu .sub-menu { padding-inline-start: 1rem; }
.yl-mega { position: relative; }
.yl-mega-panel {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	width: min(40rem, 78vw);
	padding: 0.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 40px rgba(7, 40, 77, 0.12);
	z-index: 30;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
}
.yl-mega:hover .yl-mega-panel,
.yl-mega:focus-within .yl-mega-panel { display: grid; }
.yl-mega-panel a { display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); font-weight: 600; }
.yl-mega-panel a:hover { background: var(--color-primary-soft); }
.yl-mega-panel small { display: block; color: var(--color-muted); font-weight: 500; }

.yl-mobile-nav { border-bottom: 1px solid var(--color-line); background: var(--color-surface); padding-block: 0.5rem 1rem; }
.yl-mobile-nav[hidden] { display: none; }
.yl-mobile-search { padding: 0.6rem 1rem 0.8rem; border-top: 1px solid var(--color-line); }

.yl-hero-block { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.yl-hero-grid, .yl-split, .yl-product-layout {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}
.yl-hero-grid { padding-block: 2.5rem; }
.yl-kicker { color: var(--color-primary); font-weight: 700; font-size: 0.92rem; margin-bottom: 0.4rem; }
.yl-hero-block h1, .yl-page h1 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
.yl-lead, .yl-en { color: var(--color-muted); }
.yl-hero-search { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.yl-chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.yl-hero-grid img, .yl-wide, .card img, .yl-product-layout > img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }
.yl-hero-grid img { aspect-ratio: 16/10; }
.yl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.75rem 0 0; }
.yl-stats div { background: var(--color-canvas); border: 1px solid var(--color-line); border-radius: var(--radius-md); text-align: center; padding: 0.7rem 0.3rem; }
.yl-stats dd { margin: 0; font-weight: 700; font-size: 1.25rem; }
.yl-stats dt { color: var(--color-muted); font-size: 0.78rem; }

.yl-section { padding-block: 2.5rem; }
.yl-section-head, .yl-product-buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.yl-section-head a { color: var(--color-primary); font-weight: 700; }
.yl-band { background: var(--color-surface); border-block: 1px solid var(--color-line); padding-block: 2.5rem; }
.yl-cat-grid, .yl-card-grid, .yl-service-grid, .yl-project-grid, .yl-brand-grid {
	display: grid;
	gap: 1rem;
}
.yl-cat-grid { grid-template-columns: repeat(2, 1fr); }
.yl-card-grid, .yl-service-grid, .yl-project-grid { grid-template-columns: 1fr; }
.yl-cat-grid .card { display: grid; }
.yl-cat-grid img { aspect-ratio: 4/3; border-radius: 0; }
.yl-cat-copy, .yl-service-grid span, .yl-project-grid span, .yl-post-row span { display: block; padding: 0.8rem 1rem 1rem; }
.yl-cat-copy small, .yl-project-grid small, .yl-post-row small { color: var(--color-muted); }
.yl-cat-copy em, .yl-service-grid em, .yl-project-grid em, .yl-post-row em { display: block; color: var(--color-muted); font-style: normal; font-size: 0.9rem; }
.yl-service-grid img, .yl-project-grid img { aspect-ratio: 16/10; border-radius: 0; }
.yl-points { display: grid; gap: 0.8rem; }
.yl-points h3 { font-size: 1rem; margin: 0; }

.yl-product-card { display: flex; flex-direction: column; height: 100%; }
.yl-product-media { position: relative; background: var(--color-canvas); }
.yl-product-media img { aspect-ratio: 1; border-radius: 0; }
.yl-product-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.yl-product-body h2 { font-size: 1rem; }
.yl-product-body h2 a:hover { color: var(--color-primary); }
.yl-product-meta { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--color-muted); font-size: 0.78rem; }
.yl-product-buy { margin-top: auto; padding-top: 0.6rem; }
.yl-product-buy form { margin: 0; }
.yl-price { font-weight: 700; }
.yl-price s, .yl-price-from { color: var(--color-muted); font-weight: 500; font-size: 0.85rem; margin-inline-start: 0.25rem; }
.yl-price-ask { color: var(--color-primary); }
.yl-stock { font-size: 0.82rem; font-weight: 700; }
.yl-stock.is-in { color: var(--color-success); }
.yl-stock.is-out { color: var(--color-danger); }

.yl-cta { background: var(--color-navy); color: var(--color-paper); padding-block: 2.5rem; }
.yl-cta .container-yl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.yl-cta h2, .yl-cta p { margin: 0; }
.yl-cta p { color: var(--color-navy-soft); flex-basis: 100%; }

.yl-page { padding-block: 2rem 3rem; }
.yl-crumb { color: var(--color-muted); font-size: 0.85rem; }
.yl-crumb a:hover { color: var(--color-primary); }
.yl-shop-layout { display: grid; gap: 1rem; }
.yl-filters { padding: 1rem; display: grid; gap: 0.8rem; }
.yl-filters fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.yl-filters legend { font-weight: 700; margin-bottom: 0.25rem; }
.yl-filters label { display: flex; gap: 0.4rem; align-items: center; font-size: 0.92rem; }
.yl-pager { display: flex; gap: 0.4rem; margin-top: 1rem; }
.yl-pager a { min-width: 2.4rem; min-height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
.yl-pager a.is-current { background: var(--color-primary-solid); color: var(--color-paper); border-color: transparent; }
.yl-empty { padding: 1.5rem; }
.yl-prose { max-width: 48rem; }
.yl-comments {
	max-width: 48rem;
	margin-block: 0 3rem;
	padding: clamp(1.1rem, 3vw, 2rem);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.yl-comments-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.yl-comments-heading .yl-kicker { margin-bottom: 0.35rem; }
.yl-comments-heading h2 { margin: 0; }
.yl-comments-count { padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.85rem; font-weight: 700; }
.yl-comments-empty { padding: 1rem; border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-muted); }
.yl-comment-list { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.yl-comment-list .comment { list-style: none; }
.yl-comment-list .comment-body { padding: 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.yl-comment-list .comment-author { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; }
.yl-comment-list .avatar { width: 3rem; height: 3rem; border-radius: 50%; }
.yl-comment-list .comment-author .says { display: none; }
.yl-comment-list .comment-metadata, .yl-comment-list .comment-awaiting-moderation { margin: 0.4rem 0 0.8rem; color: var(--color-muted); font-size: 0.8rem; }
.yl-comment-list .comment-content p:last-child { margin-bottom: 0; }
.yl-comment-list .children { display: grid; gap: 1rem; margin: 1rem 1rem 0 0; padding: 0; }
.yl-comments .comment-respond { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-line); }
.yl-comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.yl-comment-form p { min-width: 0; margin: 0; }
.yl-comment-form label { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.yl-comment-form input:not([type="hidden"]):not([type="submit"]), .yl-comment-form textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}
.yl-comment-form .comment-form-comment, .yl-comment-form .comment-form-url, .yl-comment-form .comment-form-cookies-consent, .yl-comment-form .logged-in-as, .yl-comment-form .form-submit { grid-column: 1 / -1; }
.yl-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; }
.yl-comment-form .comment-form-cookies-consent input { width: auto !important; margin-top: 0.35rem; }
.yl-comment-form .form-submit { margin-top: 0.35rem; }
@media (max-width: 560px) { .yl-comment-form { grid-template-columns: 1fr; } }
.yl-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.yl-prose th, .yl-prose td { border-bottom: 1px solid var(--color-line); text-align: start; padding: 0.45rem 0.3rem; }
.yl-sku { display: flex; gap: 1.5rem; }
.yl-sku dt { color: var(--color-muted); font-size: 0.8rem; }
.yl-sku dd { margin: 0; font-weight: 700; }
.yl-buy-form, .yl-form { display: grid; gap: 0.7rem; max-width: 36rem; }
.yl-form { padding: 1rem; }
.yl-notes { display: grid; gap: 0.35rem; color: var(--color-muted); }
.yl-steps { padding-inline-start: 1.2rem; display: grid; gap: 0.35rem; }
.yl-steps li { list-style: decimal; }
.yl-brand-grid { grid-template-columns: 1fr; margin-top: 1.5rem; }
.yl-brand-grid > li { min-width: 0; }
.yl-brand-grid a.card { display: grid; grid-template-rows: 92px auto; gap: .85rem; padding: .85rem; min-height: 174px; border-radius: 16px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.yl-brand-grid a.card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 12px 26px rgba(7, 40, 77, .09); }
.yl-brand-mark { display: grid; place-items: center; width: 100%; min-width: 0; border: 1px solid var(--color-line); border-radius: 11px; background: var(--color-canvas); }
.yl-brand-grid .yl-brand-logo { display: block; width: min(180px, 80%); height: 64px; object-fit: contain; border-radius: 0; }
.yl-brand-grid .yl-brand-logo--dynatech { padding: 9px; background: #10263b; border-radius: 7px; }
.yl-brand-placeholder { max-width: 90%; color: var(--color-primary); font-size: 1.15rem; font-weight: 800; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.yl-brand-details { display: flex; justify-content: space-between; align-items: center; gap: .7rem; min-width: 0; }
.yl-brand-grid .yl-brand-name { display: block; font-size: 1rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.yl-brand-grid .yl-brand-count { flex: none; white-space: nowrap; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; font-weight: 700; }
@media (min-width: 600px) { .yl-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .yl-brand-grid a.card { transition: none; } .yl-brand-grid a.card:hover { transform: none; } }
.yl-post-row { display: grid; margin-bottom: 1rem; }
.yl-post-row img { aspect-ratio: 16/9; border-radius: 0; }
.yl-cart-list { display: grid; gap: 0.75rem; }
.yl-cart-list li { display: grid; grid-template-columns: 96px 1fr; gap: 0.8rem; padding: 0.7rem; align-items: center; }
.yl-cart-list img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md); }
.yl-total { font-size: 1.1rem; }
.yl-text-btn { background: none; border: 0; color: var(--color-danger); cursor: pointer; padding: 0; }
.yl-error { color: var(--color-danger); font-weight: 700; }
.yl-split { padding-block: 2rem; }
.yl-split img { aspect-ratio: 4/3; }

.site-footer { background: var(--color-navy); color: var(--color-paper); margin-top: 3rem; }
.yl-footer-grid { display: grid; gap: 1.5rem; padding-block: 2.5rem; }
.yl-footer-grid h2 { font-size: 1rem; }
.yl-footer-grid a, .yl-footer-grid p, .yl-footer-grid li { color: var(--color-navy-soft); }
.yl-footer-grid a:hover { color: var(--color-paper); }
.yl-footer-grid li + li { margin-top: 0.35rem; }
.yl-footer-bar { border-top: 1px solid rgba(255,255,255,.12); }
.yl-footer-bar .container-yl { padding-block: 0.9rem; font-size: 0.78rem; color: var(--color-navy-soft); }

.yl-back-to-top {
	display: grid;
	place-items: center;
	position: fixed;
	bottom: 1rem;
	inset-inline-end: 1rem;
	z-index: 30;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-navy);
	color: var(--color-paper);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(7, 40, 77, 0.25);
}

.entry-content, .yl-stack { display: grid; gap: 1rem; }
.widget { margin-bottom: 1rem; }
.yl-layout { display: grid; gap: 1.5rem; padding-block: 2rem; }

@media (min-width: 720px) {
	.yl-hero-search { flex-direction: row; }
	.yl-hero-search .field { flex: 1; }
	.yl-cat-grid, .yl-card-grid, .yl-service-grid, .yl-project-grid { grid-template-columns: repeat(2, 1fr); }
	.yl-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
	.yl-post-row { grid-template-columns: 220px 1fr; }
	.yl-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yl-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
	.yl-split, .yl-product-layout { grid-template-columns: 1.1fr 0.9fr; }
	.yl-consult { display: inline-flex; }
	.yl-account-link { display: grid; }
}

@media (min-width: 1024px) {
	.yl-search, .yl-desktop-nav { display: block; }
	.yl-nav-toggle, .yl-mobile-search { display: none; }
	.yl-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-block: 3.5rem; }
        .yl-hero-grid > div { min-width: 0; }
        .yl-hero-grid img { max-height: 480px; }
	.yl-cat-grid { grid-template-columns: repeat(4, 1fr); }
	.yl-card-grid, .yl-service-grid { grid-template-columns: repeat(3, 1fr); }
	.yl-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
	.yl-project-grid { grid-template-columns: repeat(3, 1fr); }
	.yl-shop-layout { grid-template-columns: 16.5rem 1fr; align-items: start; }
	.yl-filters { position: sticky; top: 7.5rem; }
}

@media (max-width: 1023px) {
	.yl-util { display: none; }
	.yl-consult { display: none; }
	.yl-logo-text { display: none; }
	.yl-mark { width: 2rem; }
	.yl-header-bar { padding-block: 0.35rem; flex-wrap: nowrap; }
	.yl-header-tools { flex-wrap: nowrap; margin-inline-start: auto; }
	.yl-nav-toggle, .yl-icon-btn { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; }
	.yl-announce-inner { padding-block: 0.2rem; }
	.yl-announce-inner p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.yl-mobile-search { padding: 0 1rem 0.35rem; }
	.yl-mobile-search .field { min-height: 2.35rem; padding-block: 0.3rem; }
	.site { padding-bottom: 4.6rem; }
	.yl-back-to-top { bottom: 5.2rem; }
	body.yl-nav-open { overflow: hidden; }
	body.yl-nav-open #yl-mobile-nav {
		position: fixed;
		inset: 0;
		z-index: 80;
		display: block;
		overflow: auto;
		background: var(--color-surface);
		padding: 1rem 1rem 5.5rem;
	}
	body.yl-nav-open #yl-mobile-nav .yl-menu {
		display: flex;
		flex-direction: column;
	}
	body.yl-nav-open #yl-mobile-nav .yl-menu a {
		display: flex;
		padding: 1rem 0.15rem;
		font-size: 1.35rem;
		border-bottom: 1px solid var(--color-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.yl-badge {
	position: absolute;
	z-index: 2;
	top: 0.75rem;
	inset-inline-start: 0.75rem;
	max-width: calc(100% - 1.5rem);
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
}

.yl-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.yl-facts li {
	padding: 0.1rem 0.45rem;
	border-radius: 6px;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-size: 0.75rem;
}

.yl-facts span { color: var(--color-muted); }

.yl-tabs { margin-top: 2rem; }
.yl-tablist {
	display: flex;
	gap: 0.25rem;
	overflow: auto;
	border-bottom: 1px solid var(--color-line);
}
.yl-tablist button {
	min-height: 44px;
	padding-inline: 0.8rem;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	font: inherit;
	font-weight: 700;
}
.yl-tablist button.is-on {
	color: var(--color-primary);
	box-shadow: inset 0 -2px 0 var(--color-primary);
}

.yl-qa { display: grid; gap: 0.75rem; }
.yl-qa-item { padding: 1rem; }
.yl-qa-answer {
	margin-top: 0.75rem;
	padding: 0.75rem;
	border-radius: 10px;
	background: var(--color-canvas);
}
.yl-note {
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: var(--color-primary-soft, #e7f0fa);
}

.yl-stories { border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.yl-hero-block .yl-stories { margin-top: 0; border: 0; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.yl-hero-block .yl-story-row { width: min(100% - 2rem, var(--yl-container)); margin-inline: auto; padding-block: 1rem; }
@media (min-width: 720px) { .yl-hero-block .yl-story-row { justify-content: space-around; } }
.yl-story-row {
	display: flex;
	gap: 1rem;
	overflow: auto;
	padding-block: 1rem;
}
.yl-story {
	display: flex;
	width: 5.2rem;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	border: 0;
	background: transparent;
	color: var(--color-ink);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
}
.yl-story-ring {
	padding: 2px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--color-accent), var(--color-primary-solid, var(--color-primary)));
}
.yl-story-ring img {
	width: 4rem;
	height: 4rem;
	border: 2px solid var(--color-surface);
	border-radius: 999px;
	object-fit: cover;
}
.yl-story-modal {
	position: fixed;
	z-index: 80;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(7, 40, 77, 0.82);
}
.yl-story-modal[hidden] { display: none; }
.yl-story-card {
	width: min(100%, 24rem);
	overflow: hidden;
	border-radius: 16px;
	background: var(--color-surface);
	color: var(--color-ink);
}
.yl-story-card img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.yl-story-copy { display: grid; gap: 0.75rem; padding: 1rem; }
.yl-story-actions { display: flex; align-items: stretch; gap: .35rem; min-width: 0; }
.yl-story-actions .btn { min-width: 0; padding-inline: .55rem; font-size: .85rem; white-space: nowrap; }
.yl-story-actions #yl-story-link { flex: 1; }
.yl-product-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.yl-product-buy .btn { min-height: 2.25rem; }
.yl-product-body { min-width: 0; padding: 0.75rem; }
.yl-product-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--color-muted); }
.yl-carousel-slide .yl-en { display: none; }
.yl-carousel-slide .yl-product-body h2 { font-size: 0.95rem; }
@media (max-width: 719px) {
	.yl-product-buy { flex-direction: column; align-items: stretch; }
	.yl-product-buy .btn, .yl-product-buy form { width: 100%; }
}

.yl-cat-section { padding-block: 2.5rem; }
.yl-cat-section.is-alt { background: var(--color-surface); }
.yl-cat-section .yl-lead { margin: 0.25rem 0 0; font-size: 0.95rem; }
.yl-carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.5rem;
	align-items: center;
	margin-top: 1.25rem;
}
.yl-carousel-window { overflow: hidden; }
.yl-carousel-track {
	display: flex;
	gap: 1rem;
	transition: transform 550ms ease;
}
.yl-carousel-slide { min-width: 0; }
.yl-carousel-btn {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 1.4rem;
	line-height: 1;
}
.yl-carousel-btn:disabled { opacity: 0.4; }

.yl-tabbar {
	position: fixed;
	z-index: 45;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--color-line);
	background: var(--color-surface);
	padding-bottom: env(safe-area-inset-bottom);
}
.yl-tabbar a, .yl-tabbar button {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding: 0.4rem 0.15rem 0.5rem;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	font: inherit;
	font-size: 0.68rem;
	font-weight: 700;
}
.yl-tabbar .yl-symbol { font-size: 1.4rem; }
.yl-cat-sheet {
	position: fixed;
	z-index: 50;
	inset: 0;
	background: rgba(7, 40, 77, 0.72);
}
.yl-cat-sheet[hidden] { display: none; }
.yl-cat-sheet-panel {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	bottom: 4.4rem;
	max-height: 70vh;
	overflow: auto;
	border-radius: 16px 16px 0 0;
	background: var(--color-surface);
	padding: 1rem;
}
.yl-cat-sheet ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.yl-cat-sheet a { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.yl-cat-sheet img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 8px; }

@media (min-width: 1024px) {
	.yl-tabbar { display: none; }
}
/* WooCommerce's native purchase form within the theme's product layout. */
.yl-wc-single .yl-product-layout > .yl-product-media {
    align-self: start;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.yl-wc-single .yl-product-layout > .yl-product-media > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.yl-wc-single .yl-wc-gallery {
    display: flex;
    gap: .5rem;
    padding: .5rem;
}
.yl-wc-single .yl-wc-gallery img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
}
.yl-wc-single .yl-price { margin-block: .75rem; font-size: 1.25rem; }
.yl-wc-single .yl-sku { margin-block: .75rem 1.25rem; }
.yl-wc-single form.cart {
    display: grid;
    gap: .75rem;
    width: 100%;
    max-width: 36rem;
}
.yl-wc-single form.cart .quantity { width: 100%; }
.yl-wc-single form.cart .qty {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .8rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.yl-wc-single form.cart .single_add_to_cart_button {
    min-height: 3rem;
    width: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 700;
    cursor: pointer;
}
.yl-wc-single form.cart .single_add_to_cart_button:hover {
    background: var(--color-accent-strong);
}
.yl-wc-single .yl-wc-details { border-top: 1px solid var(--color-line); padding-top: 1.5rem; }

/* Shop widget follows the theme's sidebar layout. */
.yl-filters .widget { margin: 0; }
.yl-filters .yl-wc-filter { display: grid; gap: .75rem; }
.yl-filters .yl-wc-filter label { display: grid; gap: .3rem; }
.yl-filters .yl-wc-filter .yl-wc-check { display: flex; align-items: center; gap: .45rem; }
.yl-filters .yl-wc-filter input[type="checkbox"] { width: auto; flex: none; }
.yl-filters .yl-wc-filter .field { width: 100%; max-width: none; }

/* Uploaded site logo in the existing header and footer slots. */
.yl-logo-image { display: block; width: auto; height: auto; max-width: 14rem; max-height: 3.25rem; object-fit: contain; }
@media (max-width: 1023px) { .yl-header-bar .yl-logo-image { max-width: 8rem; max-height: 2.3rem; } }
/* Project archive only. */
.yl-project-archive { padding-block: 2rem 4rem; }
.yl-project-archive .site-main { min-width: 0; }
.yl-project-archive__header {
        position: relative;
        overflow: hidden;
        margin: 0 0 1.5rem;
        padding: clamp(1.5rem, 4vw, 3rem);
        border: 1px solid var(--color-line);
        border-radius: 22px;
        background: linear-gradient(115deg, var(--color-primary-soft), var(--color-surface) 72%);
}
.yl-project-archive__header::before {
        content: '';
        position: absolute;
        width: 18rem;
        height: 18rem;
        inset-inline-end: -6rem;
        inset-block-start: -12rem;
        border: 2.5rem solid var(--color-primary);
        border-radius: 50%;
        opacity: .08;
        pointer-events: none;
}
.yl-project-archive__eyebrow {
        display: inline-block;
        margin-bottom: .3rem;
        color: var(--color-primary);
        font-size: .88rem;
        font-weight: 700;
}
.yl-project-archive__header h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.4; }
.yl-project-archive__header p { margin: .5rem 0 0; color: var(--color-muted); }
.yl-project-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.yl-project-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: 18px;
        background: var(--color-surface);
        box-shadow: 0 8px 28px rgba(10, 37, 68, .05);
        transition: transform .2s ease, box-shadow .2s ease;
}
.yl-project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10, 37, 68, .12); }
.yl-project-card__media { display: block; position: relative; overflow: hidden; background: var(--color-primary-soft); }
.yl-project-card__media img { width: 100%; height: clamp(190px, 24vw, 270px); object-fit: cover; transition: transform .35s ease; }
.yl-project-card:hover .yl-project-card__media img { transform: scale(1.035); }
.yl-project-card__placeholder { display: grid; min-height: 230px; place-items: center; color: var(--color-primary); font-weight: 700; }
.yl-project-card__category {
        position: absolute;
        inset-inline-start: 1rem;
        inset-block-end: 1rem;
        padding: .25rem .7rem;
        border-radius: 999px;
        background: var(--color-surface);
        color: var(--color-primary-strong);
        font-size: .78rem;
        font-weight: 700;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.yl-project-card__content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.35rem 1.5rem 1.5rem; }
.yl-project-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--color-primary); font-size: .84rem; font-weight: 700; }
.yl-project-card__meta span + span::before { content: '•'; margin-inline-end: .8rem; color: var(--color-line); }
.yl-project-card__content h2 { margin: .4rem 0 .55rem; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; }
.yl-project-card__content h2 a:hover { color: var(--color-primary); }
.yl-project-card__content p { margin: 0 0 1.2rem; color: var(--color-muted); line-height: 1.9; }
.yl-project-card__more { margin-top: auto; color: var(--color-primary); font-weight: 700; }
.yl-project-card__more span { display: inline-block; margin-inline-start: .4rem; transition: transform .2s ease; }
.yl-project-card__more:hover span { transform: translateX(-4px); }
.yl-project-archive .navigation.pagination { margin-top: 2rem; }
@media (max-width: 700px) {
        .yl-project-archive { padding-block: 1rem 2.5rem; }
        .yl-project-cards { grid-template-columns: 1fr; gap: 1rem; }
        .yl-project-card__media img { height: 220px; }
        .yl-project-card__content { padding: 1rem 1.1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
        .yl-project-card, .yl-project-card__media img, .yl-project-card__more span { transition: none; }
        .yl-project-card:hover, .yl-project-card:hover .yl-project-card__media img { transform: none; }
}

/* About page */
.yl-about { padding-block: 2.25rem 3rem; }
.yl-about-hero { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.4rem, 3vw, 3rem); background: linear-gradient(145deg, var(--color-primary-soft), var(--color-surface) 75%); border: 1px solid var(--color-line); border-radius: 24px; overflow: hidden; }
.yl-about-copy { min-width: 0; }
.yl-about-kicker { display: inline-block; color: var(--color-primary); font-weight: 800; margin-bottom: .55rem; }
.yl-about h1 { max-width: 19ch; line-height: 1.4; margin: 0 0 1rem; color: var(--color-navy); }
.yl-about-content { color: var(--color-ink); line-height: 2; }
.yl-about-content p { margin: 0 0 .85rem; }
.yl-about-content .yl-about-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 700; color: var(--color-primary-strong); line-height: 1.9; }
.yl-about-points { display: grid; gap: .55rem; padding: 0; margin: 1.2rem 0 0; list-style: none; }
.yl-about-points li { position: relative; padding: .52rem 2rem .52rem .75rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 12px; font-weight: 700; }
.yl-about-points li::before { content: '✓'; position: absolute; right: .7rem; color: var(--color-success); }
.yl-about-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.yl-about-visual { position: relative; align-self: stretch; min-height: 350px; border-radius: 20px; overflow: hidden; background: var(--color-navy); }
.yl-about-visual img { width: 100%; height: 100%; min-height: 350px; object-fit: cover; object-position: center; }
.yl-about-visual::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(7,40,77,.72)); pointer-events: none; }
.yl-about-visual span { position: absolute; z-index: 1; bottom: 1.4rem; right: 1.4rem; color: white; font-size: 1.1rem; font-weight: 800; }
@media (min-width: 920px) { .yl-about-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
@media (max-width: 919px) { .yl-about-visual { min-height: 290px; } .yl-about-visual img { max-height: 400px; min-height: 290px; } }
@media (max-width: 520px) { .yl-about { padding-block: 1rem 2rem; } .yl-about-hero { padding: 1.2rem; border-radius: 16px; } .yl-about-actions .btn { flex: 1 1 100%; text-align: center; } .yl-about-visual { min-height: 230px; } .yl-about-visual img { min-height: 230px; } }

@media (min-width: 1050px) { .yl-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }