/* =====================================================================
   U13 Design System
   Replica of dosupply.com visual language. rem base = 10px (html 62.5%).
   Breakpoints: layout >=1200px / typography >=1240px.
   ===================================================================== */

:root {
	--u13-font-base: "Biennale", Arial, sans-serif;

	--u13-color-primary: #006ecb;
	--u13-color-primary-hover: #0060b5;
	--u13-color-primary-active: #00509b;
	--u13-color-primary-bg: #f0f5fc;
	--u13-color-primary-deep: #003c6f;

	--u13-color-secondary: #198038;
	--u13-color-warning: #ee7700;

	--u13-color-black: #000000;
	--u13-color-body: #000000;
	--u13-color-body-muted: #4f5155;
	--u13-color-meta: #7e838c;
	--u13-color-placeholder: #959ead;

	--u13-color-border: #e3e3e5;
	--u13-color-border-strong: #c4cdd5;
	--u13-color-surface: #f9fafb;
	--u13-color-surface-muted: #f1f1f1;
	--u13-color-white: #ffffff;
	--u13-color-topbar-bg: #f0f5fc;
	--u13-color-topbar-text: #003c6f;
	--u13-color-footer-bg: #000000;

	--u13-radius-4: 4px;
	--u13-radius-6: 6px;
	--u13-radius-8: 8px;
	--u13-radius-12: 12px;
	--u13-radius-16: 16px;
	--u13-radius-full: 100px;

	--u13-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.16);
	--u13-shadow-float: 0 20px 50px rgba(0, 0, 0, 0.08);

	--u13-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--u13-dur: 0.15s;

	--u13-bp-desktop: 1200px;
	--u13-bp-type: 1240px;

	--u13-container: 1280px;
	--u13-gutter: 20px;
}

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

html {
	font-size: 62.5%; /* 1rem = 10px */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--u13-font-base);
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--u13-color-body);
	background: var(--u13-color-white);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--u13-color-primary);
	text-decoration: none;
}
a:hover {
	color: var(--u13-color-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--u13-color-body);
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.5rem; }

p { margin: 0 0 1.6rem; }

ul, ol { margin: 0 0 1.6rem; padding-left: 2rem; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Layout helpers ---------- */
.l-site { min-height: 100vh; display: flex; flex-direction: column; }
.l-main { flex: 1 0 auto; }
.l-container {
	width: 100%;
	max-width: var(--u13-container);
	margin-inline: auto;
	padding-inline: var(--u13-gutter);
}
.l-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}
.l-archive__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.l-single { max-width: 880px; margin: 4rem auto; }
.l-page { max-width: 1000px; margin: 4rem auto; }
.l-product { margin: 3.2rem auto; }

.u-visually-hidden,
.u-skip-link {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.u-skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	background: #fff; padding: 8px 12px; z-index: 200;
}

/* ---------- Top bar ---------- */
.c-topbar { background: var(--u13-color-topbar-bg); color: var(--u13-color-topbar-text); }
.c-topbar__inner { padding-block: 0.8rem; }
.c-topbar__text { margin: 0; font-size: 1.3rem; text-align: center; }

/* ---------- Header ---------- */
.c-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--u13-color-white);
	border-bottom: 1px solid var(--u13-color-border);
}
.c-header__inner {
	display: flex; align-items: center; gap: 1.6rem;
	padding-block: 1.2rem;
}
.c-header__logo { font-size: 2rem; font-weight: 700; color: var(--u13-color-primary); display: flex; align-items: center; }
.c-header__logo img { max-height: 4rem; width: auto; }
.c-header__logo .custom-logo { max-height: 4rem; }

.c-search { display: flex; flex: 1 1 auto; max-width: 42rem; }
.c-search__input {
	flex: 1; padding: 1rem 1.2rem;
	font-size: 1.4rem; color: var(--u13-color-body);
	border: 1px solid var(--u13-color-border-strong);
	border-right: 0; border-radius: var(--u13-radius-4) 0 0 var(--u13-radius-4);
	background: var(--u13-color-white);
}
.c-search__input::placeholder { color: var(--u13-color-placeholder); }
.c-search__btn {
	padding: 1rem 1.6rem; font-size: 1.4rem; color: #fff;
	background: var(--u13-color-primary); border: 1px solid var(--u13-color-primary);
	border-radius: 0 var(--u13-radius-4) var(--u13-radius-4) 0;
}
.c-search__btn:hover { background: var(--u13-color-primary-hover); }

.c-header__nav { display: none; }
.c-nav__list { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.c-nav__item { position: relative; }
.c-nav__link { font-size: 1.5rem; color: var(--u13-color-body); padding: 0.6rem 0; display: inline-block; }
.c-nav__link:hover { color: var(--u13-color-primary); }
.c-nav__item.is-current > .c-nav__link { color: var(--u13-color-primary); font-weight: 600; }
.c-nav__submenu { list-style: none; margin: 0; padding: 1rem 0; position: absolute; top: 100%; left: 0; min-width: 22rem; background: #fff; border: 1px solid var(--u13-color-border); border-radius: var(--u13-radius-6); box-shadow: var(--u13-shadow-hover); }

.c-header__burger {
	display: inline-flex; flex-direction: column; gap: 4px;
	background: none; border: 1px solid var(--u13-color-border-strong);
	border-radius: var(--u13-radius-4); padding: 0.8rem;
}
.c-header__burger-bar { width: 2rem; height: 2px; background: var(--u13-color-body); display: block; }

/* ---------- Mobile drawer ---------- */
.c-drawer {
	position: fixed; inset: 0 0 0 auto; width: min(82vw, 36rem);
	background: #fff; z-index: 100; padding: 2rem var(--u13-gutter);
	box-shadow: var(--u13-shadow-float); overflow-y: auto;
	transform: translateX(100%); transition: transform var(--u13-dur) var(--u13-ease);
}
.c-drawer[hidden] { display: block; } /* keep animatable; JS toggles .is-open */
.c-drawer.is-open { transform: translateX(0); }
.c-drawer__list { list-style: none; margin: 0; padding: 0; }
.c-drawer__list li { padding: 1.2rem 0; border-bottom: 1px solid var(--u13-color-border); }
.c-drawer__list a { font-size: 1.6rem; color: var(--u13-color-body); }

/* ---------- Buttons ---------- */
.c-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 1.2rem 2.4rem; font-size: 1.6rem; font-weight: 600;
	border-radius: var(--u13-radius-4); border: 1px solid transparent;
	transition: background-color var(--u13-dur) var(--u13-ease), color var(--u13-dur) var(--u13-ease);
	line-height: 1.2;
}
.c-btn--primary { background: var(--u13-color-primary); color: #fff; }
.c-btn--primary:hover { background: var(--u13-color-primary-hover); color: #fff; }
.c-btn--ghost { background: transparent; color: var(--u13-color-primary); border-color: var(--u13-color-primary); }
.c-btn--ghost:hover { background: var(--u13-color-primary-bg); }

/* ---------- Hero ---------- */
.c-hero {
	background: linear-gradient(180deg, rgba(240, 245, 252, 0.95), rgba(240, 245, 252, 0.6)), #003c6f;
	background-size: cover; background-position: center;
	padding-block: 6.4rem 7.2rem;
}
.c-hero__inner { text-align: center; color: #fff; }
.c-hero__title { font-size: 3.2rem; color: #fff; max-width: 72rem; margin-inline: auto; }
.c-hero__subtitle { font-size: 1.6rem; color: rgba(255,255,255,0.92); max-width: 56rem; margin: 1.6rem auto 2.4rem; }
.c-hero__actions { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Features ---------- */
.c-features {
	display: grid; grid-template-columns: 1fr; gap: 3.2rem;
	padding-block: 6.4rem;
}
.c-feature { text-align: center; padding: 2.4rem; background: var(--u13-color-surface); border-radius: var(--u13-radius-8); }
.c-feature__title { font-size: 2.2rem; color: var(--u13-color-primary); }
.c-feature__text { font-size: 1.5rem; color: var(--u13-color-body-muted); margin: 0; }

/* ---------- CTA ---------- */
.c-cta { padding-block: 4rem 6.4rem; }
.c-cta__card {
	background: var(--u13-color-primary); color: #fff;
	border-radius: var(--u13-radius-16); padding: 4rem; text-align: center;
}
.c-cta__title { color: #fff; font-size: 2.4rem; margin-bottom: 2rem; }

/* ---------- Archive / page titles ---------- */
.c-archive__header { margin-block: 3.2rem 2.4rem; }
.c-archive__title { font-size: 3.2rem; }
.c-archive__desc { color: var(--u13-color-body-muted); font-size: 1.5rem; }
.c-page__title { font-size: 3.2rem; margin-block: 3.2rem 0; }

/* ---------- Product card ---------- */
.c-product-card {
	border: 1px solid var(--u13-color-border);
	border-radius: var(--u13-radius-8);
	background: #fff; overflow: hidden;
	transition: box-shadow var(--u13-dur) var(--u13-ease), transform var(--u13-dur) var(--u13-ease);
}
.c-product-card:hover { box-shadow: var(--u13-shadow-hover); transform: translateY(-2px); }
.c-product-card__link { display: block; color: inherit; }
.c-product-card__media { aspect-ratio: 4 / 3; background: var(--u13-color-surface-muted); }
.c-product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.c-product-card__ph { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 10px, #e9e9ec 10px, #e9e9ec 20px); }
.c-product-card__body { padding: 1.6rem 2rem 2rem; }
.c-product-card__title { font-size: 1.6rem; margin: 0 0 0.8rem; }
.c-product-card__meta { font-size: 1.3rem; color: var(--u13-color-meta); margin: 0; }

/* ---------- Post card ---------- */
.c-post-card { border: 1px solid var(--u13-color-border); border-radius: var(--u13-radius-8); overflow: hidden; background: #fff; }
.c-post-card__media { aspect-ratio: 16 / 9; background: var(--u13-color-surface-muted); }
.c-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-post-card__title { font-size: 1.8rem; margin: 1.6rem 2rem 0.8rem; }
.c-post-card__meta { color: var(--u13-color-meta); font-size: 1.3rem; padding: 0 2rem; }
.c-post-card__excerpt { color: var(--u13-color-body-muted); font-size: 1.4rem; padding: 0 2rem 2rem; }

/* ---------- Badge ---------- */
.c-badge { display: inline-block; font-size: 1.2rem; padding: 0.2rem 0.8rem; border-radius: var(--u13-radius-full); }
.c-badge--stock { background: var(--u13-color-secondary); color: #fff; }

/* ---------- Product single ---------- */
.c-product__head { margin-bottom: 2.4rem; }
.c-product__title { font-size: 3.2rem; margin: 0; }
.c-product__mpn { color: var(--u13-color-meta); font-size: 1.5rem; margin: 0.8rem 0 0; }
.c-product__layout { display: grid; grid-template-columns: 1fr; gap: 2.4rem; margin-bottom: 3.2rem; }
.c-product__media { background: var(--u13-color-surface-muted); border-radius: var(--u13-radius-8); min-height: 32rem; display: flex; align-items: center; justify-content: center; }
.c-product__media img { max-height: 52rem; object-fit: contain; }
.c-product__media-ph { width: 100%; height: 32rem; background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 12px, #e9e9ec 12px, #e9e9ec 24px); }
.c-product__summary { align-self: start; }
.c-product__gallery { display: flex; gap: 1.2rem; margin-top: 1.6rem; flex-wrap: wrap; }
.c-product__gallery-img { width: 9.6rem; height: 9.6rem; object-fit: cover; border-radius: var(--u13-radius-6); border: 1px solid rgba(0,0,0,0.08); }
.c-product__meta { font-size: 1.4rem; color: var(--u13-color-meta); }
.c-product__buy { display: flex; align-items: center; gap: 1.6rem; margin: 1.6rem 0; flex-wrap: wrap; }
.c-product__price { font-size: 2.2rem; font-weight: 700; margin: 0; color: var(--u13-color-primary); }
.c-product__assurance { list-style: none; margin: 0; padding: 1.6rem; background: var(--u13-color-primary-bg); border-radius: var(--u13-radius-8); }
.c-product__assurance li { font-size: 1.4rem; padding: 0.4rem 0; color: var(--u13-color-primary-deep); }
.c-product__section-title { font-size: 2.2rem; margin-top: 3.2rem; border-bottom: 2px solid var(--u13-color-primary); padding-bottom: 0.8rem; }
.c-product__desc { font-size: 1.6rem; color: var(--u13-color-body-muted); }
.c-product__related { margin-top: 4rem; }

/* ---------- Table ---------- */
.c-table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 1.4rem; }
.c-table th, .c-table td { text-align: left; padding: 1.2rem 1.6rem; border: 1px solid var(--u13-color-border); }
.c-table th { background: var(--u13-color-surface); width: 32%; color: var(--u13-color-body-muted); font-weight: 600; }

/* ---------- Accordion ---------- */
.c-accordion { border: 1px solid var(--u13-color-border); border-radius: var(--u13-radius-8); overflow: hidden; }
.c-accordion__item + .c-accordion__item { border-top: 1px solid var(--u13-color-border); }
.c-accordion__trigger {
	width: 100%; text-align: left; background: #fff; border: 0;
	padding: 1.6rem 2rem; font-size: 1.5rem; font-weight: 600; color: var(--u13-color-body);
	display: flex; justify-content: space-between; align-items: center;
}
.c-accordion__trigger::after { content: "+"; font-size: 2rem; color: var(--u13-color-primary); }
.c-accordion__trigger[aria-expanded="true"]::after { content: "\2212"; }
.c-accordion__panel { padding: 0 2rem 1.6rem; font-size: 1.4rem; color: var(--u13-color-body-muted); }

/* ---------- Breadcrumb ---------- */
.c-breadcrumb { margin: 2.4rem 0 0; }
.c-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; font-size: 1.3rem; color: var(--u13-color-meta); }
.c-breadcrumb__item:not(:last-child)::after { content: "/"; margin-left: 0.6rem; color: var(--u13-color-border-strong); }
.c-breadcrumb__item a { color: var(--u13-color-meta); }
.c-breadcrumb__item a:hover { color: var(--u13-color-primary); }

/* ---------- Pagination ---------- */
.c-pagination { margin: 3.2rem 0; }
.c-pagination__list { display: flex; gap: 0.8rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.c-pagination__item a,
.c-pagination__item span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 3.6rem; height: 3.6rem; padding: 0 1rem;
	border: 1px solid var(--u13-color-border); border-radius: var(--u13-radius-4);
	font-size: 1.4rem; color: var(--u13-color-body);
}
.c-pagination__item .current,
.c-pagination__item a:hover { background: var(--u13-color-primary); color: #fff; border-color: var(--u13-color-primary); }

/* ---------- Forms ---------- */
.c-form__field { margin-bottom: 1.6rem; }
.c-form__label { display: block; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.6rem; }
.c-form__input, .c-form__textarea {
	width: 100%; padding: 1rem 1.2rem; font-size: 1.5rem;
	border: 1px solid var(--u13-color-border-strong); border-radius: var(--u13-radius-4);
	font-family: inherit;
}
.c-form__textarea { min-height: 14rem; }

/* ---------- None ---------- */
.c-none { text-align: center; padding: 4rem 2rem; color: var(--u13-color-body-muted); }
.c-none__text { font-size: 1.6rem; }

/* ---------- 404 ---------- */
.c-404 { text-align: center; padding: 8rem 2rem; }
.c-404__title { font-size: 3.6rem; }
.c-404__text { color: var(--u13-color-body-muted); margin-bottom: 2.4rem; }

/* ---------- Footer ---------- */
.c-footer { background: var(--u13-color-footer-bg); color: #fff; margin-top: 6.4rem; }
.c-footer__inner {
	display: grid; grid-template-columns: 1fr; gap: 3.2rem;
	padding-block: 4.8rem;
}
.c-footer__title { font-size: 1.6rem; color: #fff; margin-bottom: 1.6rem; }
.c-footer__menu { list-style: none; margin: 0; padding: 0; }
.c-footer__menu li { padding: 0.6rem 0; }
.c-footer__menu a { color: rgba(255,255,255,0.82); font-size: 1.4rem; }
.c-footer__menu a:hover { color: #fff; }
.c-footer__contact p { margin: 0.4rem 0; font-size: 1.4rem; color: rgba(255,255,255,0.82); }
.c-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-block: 1.6rem; }
.c-footer__bottom small { color: rgba(255,255,255,0.6); font-size: 1.2rem; }

/* ---------- Widget ---------- */
.c-widget { margin-bottom: 2.4rem; }
.c-widget__title { font-size: 1.6rem; margin-bottom: 1.2rem; }

/* Footer + drawer widget bands (rendered via dynamic_sidebar) */
.c-footer__widgets { border-top: 1px solid rgba(255,255,255,0.12); padding-block: 3.2rem; max-width: 56rem; }
.c-footer__widgets .c-widget__title { color: #fff; }
.c-footer__widgets .c-widget, .c-footer__widgets .c-widget p { color: rgba(255,255,255,0.82); font-size: 1.4rem; }
.c-drawer__widgets { padding: 2.4rem; border-top: 1px solid rgba(0,0,0,0.08); }
.c-drawer__widgets .c-search { width: 100%; }

/* =====================================================================
   Responsive — desktop (>1200px layout, >1240px type)
   ===================================================================== */
@media (min-width: 1240px) {
	h1 { font-size: 4.4rem; }
	h2 { font-size: 3.6rem; }
	h3 { font-size: 2.8rem; }
	h4 { font-size: 2.2rem; }
	h5 { font-size: 2rem; }
	h6 { font-size: 1.6rem; }
	body { font-size: 1.6rem; }
	.c-hero__title { font-size: 4.4rem; }
	.c-archive__title, .c-page__title, .c-product__title { font-size: 4.4rem; }
}

@media (min-width: 1200px) {
	.c-header__nav { display: block; }
	.c-header__burger { display: none; }
	.l-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; }
	.l-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; }
	.c-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9.6rem; }
	.c-footer__inner { grid-template-columns: repeat(4, 1fr); }
	.c-product__layout { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
	.c-hero { padding-block: 10.6rem 11.2rem; }
}