/**
 * onechip theme — component styles. Consumes tokens from tokens.css.
 * Mobile-first from 360px.
 */

/* Root cause of the mobile horizontal-overflow/right-edge-clipping bug
   (visible on the homepage and every archive/category page): the mobile
   nav drawer (.oc-nav, see "Mobile drawer" rules below) is deliberately
   positioned off-canvas via `position: fixed` + `transform:
   translateX(100%)` while closed, so it sits entirely to the right of
   the viewport by design. A `position: fixed` element's post-transform
   box still contributes to the root document's horizontal scrollable-
   overflow region even though it is visually off-screen and clipped by
   no ordinary ancestor `overflow` (fixed elements are positioned
   against the initial containing block/viewport, which ordinary
   ancestor `overflow: hidden` does not clip). There is no equivalent
   CSS-only technique that keeps the drawer genuinely off-canvas while
   fixed-positioned without this same contribution, short of changing
   the fixed-positioning containing block for the whole page (which
   would break other fixed elements such as .oc-floating-buttons and
   .oc-modal, and the sticky .oc-header, by making them relative to
   body instead of the viewport). Clipping horizontal overflow at the
   root is therefore the correct, narrowly-scoped fix: only overflow-x
   is constrained (vertical scrolling, position:sticky on .oc-header,
   and all fixed-position elements are unaffected). */
html {
	overflow-x: hidden;
}

body {
	font-family: var(--oc-font-base);
	color: var(--oc-color-text);
	background: var(--oc-color-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	transition: color 0.15s ease;
}

.oc-container,
.oc-header-row__inner,
.oc-footer__inner,
.oc-footer__bottom-inner,
.oc-section {
	max-width: var(--oc-container-max);
	margin-inline: auto;
	padding-inline: var(--oc-space-3);
}

/* Buttons */
.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--oc-space-1);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-2) var(--oc-space-4);
	font-weight: 600;
	font-size: var(--oc-text-base);
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}
.oc-btn--primary {
	background: var(--oc-color-accent);
	color: var(--oc-color-white);
}
.oc-btn--primary:hover {
	background: var(--oc-color-accent-dark);
}
.oc-btn--ghost {
	background: transparent;
	border-color: var(--oc-color-border);
	color: var(--oc-color-text);
}
.oc-btn--ghost:hover {
	border-color: var(--oc-color-accent);
	color: var(--oc-color-accent);
}
.oc-btn--sm {
	padding: var(--oc-space-1) var(--oc-space-3);
	font-size: var(--oc-text-sm);
}
.oc-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ===== Header ===== */
.oc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--oc-color-bg);
	box-shadow: var(--oc-shadow-sm);
}

/* Row 1: announcement bar */
.oc-header-row--announcement {
	background: var(--oc-color-header-blue);
	color: var(--oc-color-white);
}
.oc-header-row--announcement .oc-header-row__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-2);
	padding-block: var(--oc-space-2);
	font-size: var(--oc-text-xs);
}
.oc-announcement__welcome {
	margin: 0;
	color: var(--oc-color-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oc-announcement__right {
	display: flex;
	align-items: center;
	gap: var(--oc-space-3);
	flex-shrink: 0;
}
.oc-announcement__phone {
	font-weight: 600;
	white-space: nowrap;
}
.oc-lang-toggle {
	background: none;
	border: 1px solid rgba(255,255,255,0.5);
	color: var(--oc-color-white);
	border-radius: var(--oc-radius);
	padding: 2px var(--oc-space-2);
	cursor: pointer;
	font-size: var(--oc-text-xs);
	white-space: nowrap;
}

/* Row 2: main header */
.oc-header-row--main {
	background: var(--oc-color-white);
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-header-row--main .oc-header-row__inner {
	display: flex;
	align-items: center;
	gap: var(--oc-space-3);
	padding-block: var(--oc-space-3);
	flex-wrap: wrap;
}
.oc-logo {
	font-weight: 700;
	font-size: var(--oc-text-lg);
	color: var(--oc-color-header-blue);
	flex-shrink: 0;
}
.oc-search {
	order: 3;
	flex-basis: 100%;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	overflow: hidden;
}
.oc-search__category {
	border: 0;
	border-right: 1px solid var(--oc-color-border);
	background: var(--oc-color-bg-alt);
	padding: 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	max-width: 120px;
}
.oc-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: var(--oc-space-2) var(--oc-space-3);
	font-size: var(--oc-text-sm);
}
.oc-search__submit {
	border: 0;
	background: var(--oc-color-cta-orange);
	color: var(--oc-color-white);
	padding: var(--oc-space-2) var(--oc-space-4);
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}
.oc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--oc-space-3);
	margin-left: auto;
	order: 2;
}
.oc-header__icon-link {
	font-weight: 600;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-header-blue);
}
.oc-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 0;
	padding: var(--oc-space-2);
	cursor: pointer;
}
.oc-nav-toggle__bar {
	width: 22px;
	height: 2px;
	background: var(--oc-color-header-blue);
}

/* Row 3: category navigation */
.oc-header-row--nav {
	background: var(--oc-color-white);
	border-bottom: 3px solid var(--oc-color-cta-orange);
}
.oc-nav {
	display: none;
}
.oc-nav.is-open {
	display: block;
}
.oc-nav__list {
	display: flex;
	flex-direction: column;
	max-width: var(--oc-container-max);
	margin-inline: auto;
	padding: var(--oc-space-2) var(--oc-space-3);
}
.oc-nav__list a {
	display: block;
	padding: var(--oc-space-2) 0;
	font-size: var(--oc-text-sm);
	font-weight: 500;
	color: var(--oc-color-header-blue);
}

/* ===== Sections ===== */
.oc-section {
	padding-block: var(--oc-space-6);
}
.oc-section__heading {
	font-size: var(--oc-text-2xl);
	margin: 0 0 var(--oc-space-4);
	text-align: center;
}

/* ===== Hero ===== */
.oc-hero {
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-4);
	background: var(--oc-color-bg-alt);
	padding-block: var(--oc-space-6);
}
.oc-hero__text h1 {
	font-size: var(--oc-text-2xl);
	line-height: 1.2;
	margin: 0 0 var(--oc-space-3);
	color: var(--oc-color-primary);
}
.oc-hero__text p {
	color: var(--oc-color-text-muted);
	margin: 0 0 var(--oc-space-4);
	font-size: var(--oc-text-base);
}
.oc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-3);
}
.oc-hero__visual {
	height: 200px;
	border-radius: var(--oc-radius-lg);
	background: linear-gradient(135deg, var(--oc-color-accent) 0%, var(--oc-color-primary) 100%);
}

/* ===== Categories ===== */
.oc-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--oc-space-3);
}
.oc-category-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 96px;
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-3);
	font-weight: 600;
	color: var(--oc-color-white);
	background: var(--oc-color-primary);
}
.oc-category-tile--cables { background: var(--oc-cat-cables); }
.oc-category-tile--chargers-power { background: var(--oc-cat-chargers-power); }
.oc-category-tile--docks-hubs { background: var(--oc-cat-docks-hubs); }
.oc-category-tile--audio-video { background: var(--oc-cat-audio-video); }
.oc-category-tile--stands-accessories { background: var(--oc-cat-stands-accessories); }
.oc-category-tile--networking { background: var(--oc-cat-networking); }
.oc-category-tile--storage { background: var(--oc-cat-storage); }
.oc-category-tile--nas { background: var(--oc-cat-nas); }

/* ===== Subcategory tiles (category archive pages) ===== */
.oc-subcategories {
	margin-bottom: var(--oc-space-5);
}
.oc-subcategories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--oc-space-2);
}
.oc-subcategory-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-2);
	min-height: 56px;
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-2) var(--oc-space-3);
	background: var(--oc-color-bg);
	color: var(--oc-color-text);
	font-weight: 600;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.oc-subcategory-tile:hover,
.oc-subcategory-tile:focus-visible {
	border-color: var(--oc-color-primary);
	background: var(--oc-color-bg-alt);
}
.oc-subcategory-tile__count {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--oc-color-text-muted);
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.oc-subcategories__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.oc-subcategories__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ===== Brands ===== */
.oc-brands__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--oc-space-3);
}
.oc-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	font-weight: 700;
	font-size: var(--oc-text-lg);
	color: var(--oc-color-primary);
	background: var(--oc-color-bg);
}
.oc-brand-tile:hover {
	border-color: var(--oc-color-accent);
}

/* ===== Product grid / card ===== */
.oc-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--oc-space-3);
}
/* WooCommerce core (woocommerce-layout.css) applies a legacy float
   clearfix to ul.products via ::before/::after { display:table }. CSS
   Grid still boxes a display:table pseudo-element as a real grid item,
   so that empty ::before was silently occupying row 1 / column 1 and
   pushing every real product card one cell to the right (visually
   confirmed: first card alone in column 2, second card wrapping to
   row 2 column 1) plus contributing to page-level horizontal overflow.
   Clearfix is meaningless for a grid, so it's neutralized here.
   Selector matches WooCommerce's own ancestor context (.woocommerce /
   .woocommerce-page + ul.products) so this wins on specificity, not
   just source order: .oc-product-grid::before alone loses to
   WooCommerce's more specific .woocommerce ul.products::before. */
.woocommerce ul.products.oc-product-grid::before,
.woocommerce ul.products.oc-product-grid::after,
.woocommerce-page ul.products.oc-product-grid::before,
.woocommerce-page ul.products.oc-product-grid::after {
	content: none;
	display: none;
}
.oc-product-card {
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius-lg);
	overflow: hidden;
	background: var(--oc-color-bg);
	display: flex;
	flex-direction: column;
	min-width: 0; /* CSS Grid items default to min-width:auto, which
		refuses to shrink below their content's intrinsic size — a real
		mobile-overflow bug caught live: the product image's own
		intrinsic size was forcing this card wider than its 1fr column
		share, pushing the grid's second column off-screen. Same class
		of bug already fixed once in this project for a different grid
		(the search-autocomplete product row); same fix here. */
}
.oc-product-card__media {
	position: relative;
	display: block;
}
.oc-product-card__image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--oc-color-bg-alt);
}
.oc-product-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--oc-color-bg-alt);
}
.oc-badge {
	position: absolute;
	top: var(--oc-space-2);
	left: var(--oc-space-2);
	font-size: var(--oc-text-xs);
	font-weight: 700;
	padding: 2px var(--oc-space-2);
	border-radius: var(--oc-radius);
}
.oc-badge--warranty {
	background: var(--oc-color-success);
	color: var(--oc-color-white);
}
.oc-badge--demo {
	display: inline-block;
	position: static;
	margin-top: var(--oc-space-2);
	background: var(--oc-color-bg-alt);
	color: var(--oc-color-text-muted);
	border: 1px solid var(--oc-color-border);
}
.oc-product-card__body {
	padding: var(--oc-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-1);
	flex: 1;
}
.oc-product-card__brand {
	margin: 0;
	font-size: var(--oc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--oc-color-text-muted);
}
.oc-product-card__name {
	margin: 0;
	font-size: var(--oc-text-sm);
	line-height: 1.35;
}
.oc-product-card__name a {
	color: var(--oc-color-text);
}
.oc-product-card__price {
	margin: var(--oc-space-1) 0 0;
	display: flex;
	align-items: baseline;
	gap: var(--oc-space-2);
}
.oc-product-card__price-old {
	text-decoration: line-through;
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
}
.oc-product-card__price-current {
	font-weight: 700;
	font-size: var(--oc-text-base);
	color: var(--oc-color-primary);
}
.oc-product-card__stock {
	margin: 0;
	font-size: var(--oc-text-xs);
	font-weight: 600;
}
.oc-product-card__stock--instock { color: var(--oc-color-success); }
.oc-product-card__stock--lowstock { color: var(--oc-color-warning); }
.oc-product-card__stock--outofstock { color: var(--oc-color-danger); }
.oc-product-card__actions {
	margin-top: var(--oc-space-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-2);
}

/* ===== Before You Buy (info cards) ===== */
.oc-info-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oc-space-3);
}
.oc-info-card {
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-4);
	text-align: center;
}
.oc-info-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: var(--oc-text-xl);
	margin-bottom: var(--oc-space-2);
}
.oc-info-card__icon--green { background: #DCFCE7; }
.oc-info-card__icon--blue { background: #DBEAFE; }
.oc-info-card__icon--orange { background: #FFEDD5; }
.oc-info-card__icon--purple { background: #EDE9FE; }
.oc-info-card__title {
	margin: 0 0 var(--oc-space-1);
	font-size: var(--oc-text-base);
	color: var(--oc-color-primary);
}
.oc-info-card__body {
	margin: 0;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text-muted);
}

/* ===== Reviews ===== */
.oc-reviews {
	background: var(--oc-color-bg-alt);
}
.oc-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oc-space-3);
}
.oc-review-card {
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-4);
}
.oc-review-card__stars {
	color: var(--oc-color-cta-orange);
	font-size: var(--oc-text-lg);
	letter-spacing: 2px;
}
.oc-review-card__text {
	color: var(--oc-color-text);
	font-size: var(--oc-text-sm);
	margin: var(--oc-space-2) 0;
}
.oc-review-card__meta {
	margin: 0;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}

/* ===== Footer ===== */
.oc-footer {
	background: var(--oc-color-primary);
	color: var(--oc-color-white);
}
.oc-footer__inner {
	padding-block: var(--oc-space-6);
	display: grid;
	gap: var(--oc-space-4);
}
.oc-footer .oc-logo {
	color: var(--oc-color-white);
}
.oc-footer__about p {
	color: #94A3B8;
	font-size: var(--oc-text-sm);
}
.oc-footer__contact-line {
	color: #E2E8F0 !important;
	font-weight: 600;
}
.oc-footer__heading {
	font-size: var(--oc-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--oc-space-2);
	color: #CBD5E1;
}
.oc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-1);
}
.oc-footer__col a,
.oc-footer__col li {
	color: #E2E8F0;
	font-size: var(--oc-text-sm);
}
.oc-footer__fbr-box {
	margin-top: var(--oc-space-3);
	border: 1px dashed rgba(255,255,255,0.3);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-2);
	font-size: var(--oc-text-xs);
	color: #CBD5E1;
	text-align: center;
}
.oc-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
}
.oc-footer__bottom-inner {
	padding-block: var(--oc-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-2);
	font-size: var(--oc-text-xs);
	color: #94A3B8;
}
.oc-footer__legal a {
	color: #94A3B8;
	margin-right: var(--oc-space-3);
}

/* ===== Floating buttons ===== */
.oc-floating-buttons {
	position: fixed;
	bottom: var(--oc-space-3);
	left: var(--oc-space-3);
	right: var(--oc-space-3);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 60;
}
.oc-floating-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: var(--oc-space-2) var(--oc-space-4);
	font-weight: 600;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-white);
	box-shadow: var(--oc-shadow-md);
}
.oc-floating-btn--ai {
	background: var(--oc-color-primary);
}
.oc-floating-btn--whatsapp {
	background: #25D366;
}

/* ===== Tablet (640px+) ===== */
@media (min-width: 640px) {
	.oc-search {
		order: 0;
		flex-basis: auto;
		flex: 1;
	}
	.oc-categories__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.oc-brands__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.oc-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.oc-info-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.oc-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.oc-footer__inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
	.oc-footer__bottom-inner {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ===== Desktop (1024px+) ===== */
@media (min-width: 1024px) {
	.oc-nav-toggle {
		display: none;
	}
	.oc-nav {
		display: block;
	}
	.oc-nav__list {
		flex-direction: row;
		justify-content: center;
		gap: var(--oc-space-5);
		padding-block: var(--oc-space-2);
	}
	.oc-nav__list a {
		padding: var(--oc-space-1) 0;
	}
	.oc-hero {
		flex-direction: row;
		align-items: center;
	}
	.oc-hero__text {
		flex: 1;
	}
	.oc-hero__text h1 {
		font-size: var(--oc-text-3xl);
	}
	.oc-hero__visual {
		flex: 1;
		height: 320px;
	}
	.oc-categories__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.oc-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.oc-info-cards {
		grid-template-columns: repeat(4, 1fr);
	}
	.oc-reviews__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== Mobile-only: horizontally scrollable category nav, no visible scrollbar ===== */
@media (max-width: 1023px) {
	.oc-header-row--nav .oc-nav.is-open .oc-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		gap: var(--oc-space-4);
		padding-block: var(--oc-space-2);
	}
	.oc-header-row--nav .oc-nav.is-open .oc-nav__list::-webkit-scrollbar {
		display: none;
	}
	.oc-header-row--nav .oc-nav.is-open .oc-nav__list li {
		flex-shrink: 0;
	}
}

/* ===== Header account/cart icons ===== */
.oc-header__icon-link {
	display: inline-flex;
	align-items: center;
	gap: var(--oc-space-1);
}
.oc-header__icon-link svg {
	width: 20px;
	height: 20px;
	stroke: var(--oc-color-header-blue);
	fill: none;
	stroke-width: 1.8;
}

/* ===== Modal (shared base for quotation builder) ===== */
.oc-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(15, 23, 42, 0.55);
	padding: var(--oc-space-3);
	overflow-y: auto;
}
.oc-modal.is-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
body.oc-modal-open {
	overflow: hidden;
}
.oc-modal__panel {
	background: var(--oc-color-white);
	border-radius: var(--oc-radius-lg);
	width: 100%;
	max-width: 900px;
	margin-block: var(--oc-space-4);
	max-height: calc(100vh - var(--oc-space-6));
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.oc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--oc-space-3) var(--oc-space-4);
	border-bottom: 1px solid var(--oc-color-border);
	flex-shrink: 0;
}
.oc-modal__header h2 {
	margin: 0;
	font-size: var(--oc-text-lg);
}
.oc-modal__close {
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--oc-color-text-muted);
	padding: var(--oc-space-1);
}
.oc-modal__body {
	padding: var(--oc-space-4);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-4);
}

/* ===== Quotation builder specifics ===== */
.oc-quotation-filters {
	display: flex;
	gap: var(--oc-space-2);
	margin-bottom: var(--oc-space-3);
	flex-wrap: wrap;
}
.oc-quotation-filters input,
.oc-quotation-filters select {
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-2);
	font-size: var(--oc-text-sm);
}
.oc-quotation-filters input {
	flex: 1;
	min-width: 160px;
}
.oc-quotation-browse-list {
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
}
.oc-quotation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-2);
	padding: var(--oc-space-2) var(--oc-space-3);
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-quotation-row:last-child {
	border-bottom: 0;
}
.oc-quotation-row__info {
	display: flex;
	flex-direction: column;
	font-size: var(--oc-text-sm);
}
.oc-quotation-row__brand {
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
}
.oc-quotation-row__price {
	font-weight: 600;
	color: var(--oc-color-primary);
}
.oc-quotation-summary {
	border-top: 1px solid var(--oc-color-border);
	padding-top: var(--oc-space-3);
}
.oc-quotation-summary h3 {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-lg);
}
.oc-quotation-summary-list {
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-2);
}
.oc-quotation-empty {
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
}
.oc-quotation-summary-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: var(--oc-space-2);
	font-size: var(--oc-text-sm);
	padding-block: var(--oc-space-1);
}
.oc-quotation-summary-row__qty {
	display: flex;
	align-items: center;
	gap: var(--oc-space-1);
}
.oc-quotation-summary-row__qty button {
	width: 24px;
	height: 24px;
	border: 1px solid var(--oc-color-border);
	background: var(--oc-color-bg-alt);
	border-radius: var(--oc-radius);
	cursor: pointer;
}
.oc-quotation-summary-row__line-total {
	font-weight: 600;
}
.oc-quotation-summary-row__remove {
	background: none;
	border: 0;
	color: var(--oc-color-danger);
	font-size: var(--oc-text-xs);
	cursor: pointer;
}
.oc-quotation-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: var(--oc-space-3);
	padding-top: var(--oc-space-2);
	border-top: 1px solid var(--oc-color-border);
	font-weight: 700;
	font-size: var(--oc-text-lg);
}
.oc-quotation-total-row.is-hidden {
	display: none;
}
.oc-quotation-total-row--request {
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-warning);
}
.oc-quotation-disclaimer {
	margin: var(--oc-space-2) 0 0;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-quotation-actions {
	margin-top: var(--oc-space-3);
	display: flex;
	gap: var(--oc-space-2);
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.oc-modal__body {
		flex-direction: row;
	}
	.oc-quotation-browse {
		flex: 1;
	}
	.oc-quotation-summary {
		flex: 1;
		border-top: 0;
		border-left: 1px solid var(--oc-color-border);
		padding-top: 0;
		padding-left: var(--oc-space-4);
	}
}

/* ===== Print: only the quotation summary ===== */
/* ===== Header rebuild: logo, search, cart badge, mega menu, mobile drawer ===== */

.oc-logo {
	display: inline-flex;
	align-items: center;
}
.oc-logo__image {
	display: block;
	height: 40px;
	width: auto;
}
/* WooCommerce core (woocommerce-layout.css) ships a blanket image reset
   `.woocommerce img, .woocommerce-page img { height: auto; max-width:
   100% }` that only loads on WooCommerce pages (shop, category,
   subcategory, product, cart, etc. — body classes `woocommerce` /
   `woocommerce-page`), never on the homepage. Its specificity (one
   element + one class) beats `.oc-logo__image` (one class alone), so
   on every WooCommerce page the logo's `height: 40px` was silently
   overridden back to `height: auto`, and with no CSS width constraint
   either, the <img> fell back to its raw HTML width="668" height="138"
   attributes — a ~17x oversized logo, and a much taller header row to
   fit it. Re-declaring the same two properties under a two-class
   selector (`.oc-logo .oc-logo__image`) beats WooCommerce's rule on
   specificity alone, with no `!important` and no change to how
   WooCommerce sizes any other image on those pages. */
.oc-logo .oc-logo__image {
	height: 40px;
	width: auto;
}

.oc-search__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--oc-space-1);
}
.oc-search__submit-icon {
	width: 18px;
	height: 18px;
	stroke: var(--oc-color-white);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
}

.oc-header__icon-link--cart {
	position: relative;
}
.oc-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--oc-color-cta-orange);
	color: var(--oc-color-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.oc-header a:focus-visible,
.oc-header button:focus-visible,
.oc-search input:focus-visible,
.oc-search__category:focus-visible {
	outline: 2px solid var(--oc-color-accent);
	outline-offset: 2px;
}

.oc-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.oc-nav__expand {
	background: none;
	border: 0;
	padding: var(--oc-space-2);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.oc-nav__caret {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--oc-color-header-blue);
	border-bottom: 2px solid var(--oc-color-header-blue);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.oc-nav__item.is-open > .oc-nav__row .oc-nav__caret,
.oc-nav__item--has-children:hover > .oc-nav__row .oc-nav__caret,
.oc-nav__item--has-children:focus-within > .oc-nav__row .oc-nav__caret {
	transform: rotate(-135deg);
}

.oc-mega-menu {
	display: none;
}
.oc-nav__item--has-children.is-open .oc-mega-menu {
	display: block;
}
.oc-mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oc-mega-menu__link {
	display: block;
	padding: var(--oc-space-2) var(--oc-space-3);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-mega-menu__link:hover,
.oc-mega-menu__link:focus-visible {
	color: var(--oc-color-header-blue);
	background: var(--oc-color-bg-alt);
}

.oc-nav__drawer-header {
	display: none;
}
.oc-nav__backdrop {
	display: none;
}

/* ===== Mobile drawer (below 1024px) ===== */
@media (max-width: 1023px) {
	.oc-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		max-width: 100%;
		background: var(--oc-color-white);
		box-shadow: var(--oc-shadow-md);
		transform: translateX(100%);
		transition: transform 0.2s ease;
		z-index: 110;
		overflow-y: auto;
		display: block;
	}
	.oc-nav.is-open {
		transform: translateX(0);
	}
	.oc-nav__drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--oc-space-3);
		border-bottom: 1px solid var(--oc-color-border);
	}
	.oc-nav__drawer-title {
		font-weight: 700;
		color: var(--oc-color-text);
	}
	.oc-nav__drawer-close {
		background: none;
		border: 0;
		font-size: 1.5rem;
		line-height: 1;
		min-width: 44px;
		min-height: 44px;
		cursor: pointer;
		color: var(--oc-color-text);
	}
	.oc-nav__list {
		display: block;
		max-width: none;
		padding: var(--oc-space-2) 0;
	}
	.oc-nav__item {
		border-bottom: 1px solid var(--oc-color-border);
	}
	.oc-nav__link {
		padding: var(--oc-space-3);
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.oc-mega-menu__link {
		padding-left: var(--oc-space-5);
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.oc-nav__backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.5);
		z-index: 105;
	}
	body.oc-nav-open .oc-nav__backdrop {
		display: block;
	}
	body.oc-nav-open {
		overflow: hidden;
	}
	.oc-search__submit-text {
		display: none;
	}
}

/* ===== Desktop mega menu (1024px+) ===== */
@media (min-width: 1024px) {
	.oc-nav {
		position: static;
		width: auto;
		transform: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}
	.oc-nav__drawer-header,
	.oc-nav__backdrop {
		display: none !important;
	}
	.oc-nav__item {
		position: relative;
	}
	.oc-nav__row {
		display: block;
	}
	.oc-nav__expand {
		display: none;
	}
	.oc-nav__link {
		padding: var(--oc-space-2) 0;
	}
	.oc-mega-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--oc-color-white);
		border: 1px solid var(--oc-color-border);
		border-radius: var(--oc-radius);
		box-shadow: var(--oc-shadow-md);
		padding: var(--oc-space-2) 0;
		z-index: 60;
	}
	.oc-nav__item--has-children:hover .oc-mega-menu,
	.oc-nav__item--has-children:focus-within .oc-mega-menu,
	.oc-nav__item--has-children.is-open .oc-mega-menu {
		display: block;
	}
}

/* ===== "All Categories" mega menu ===== */

.oc-all-categories-mega {
	display: none;
}
.oc-search__category-wrap.is-open .oc-all-categories-mega {
	display: block;
}
.oc-all-categories-mega__cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oc-all-categories-mega__cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-2);
	padding: var(--oc-space-2) var(--oc-space-3);
	color: var(--oc-color-text);
	font-weight: 600;
	font-size: var(--oc-text-sm);
}
.oc-all-categories-mega__cat-count {
	font-weight: 400;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-all-categories-mega__panel {
	display: none;
}
.oc-all-categories-mega__panel.is-active {
	display: block;
}
.oc-all-categories-mega__panel-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--oc-space-3);
	flex-wrap: wrap;
}
.oc-all-categories-mega__panel-title {
	margin: 0;
	font-size: var(--oc-text-lg);
	color: var(--oc-color-text);
}
.oc-all-categories-mega__view-all {
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-cta-orange);
	white-space: nowrap;
}
.oc-all-categories-mega__view-all:hover {
	text-decoration: underline;
}
.oc-all-categories-mega__subcats {
	list-style: none;
	margin: var(--oc-space-3) 0 0;
	padding: 0;
}
.oc-all-categories-mega__subcats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-2);
	padding: var(--oc-space-1) 0;
	color: var(--oc-color-text);
	font-size: var(--oc-text-sm);
}
.oc-all-categories-mega__subcats a:hover,
.oc-all-categories-mega__subcats a:focus-visible {
	color: var(--oc-color-header-blue);
}
.oc-all-categories-mega__subcat-count {
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	flex-shrink: 0;
}
.oc-all-categories-mega__brands {
	margin-top: var(--oc-space-4);
	padding-top: var(--oc-space-3);
	border-top: 1px solid var(--oc-color-border);
}
.oc-all-categories-mega__brands-title {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--oc-color-text-muted);
}
.oc-all-categories-mega__brands-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-2) var(--oc-space-4);
}
.oc-all-categories-mega__brands-list a {
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-all-categories-mega__brands-list a:hover,
.oc-all-categories-mega__brands-list a:focus-visible {
	color: var(--oc-color-header-blue);
}
.oc-all-categories-mega__brand-count {
	color: var(--oc-color-text-muted);
}

/* ===== Mobile: All Categories shows a simple quick-jump list only;          */
/* ===== full subcategory drill-down already exists via the adjacent         */
/* ===== per-category accordion items directly below it (unchanged).         */
@media (max-width: 1023px) {
	.oc-all-categories-mega__inner {
		padding: var(--oc-space-2) 0;
	}
	.oc-all-categories-mega__cat-link {
		min-height: 44px;
		padding-left: var(--oc-space-5);
	}
	.oc-all-categories-mega__content {
		display: none;
	}
}

/* ===== Desktop: two-pane panel ===== */
@media (min-width: 1024px) {
	.oc-search {
		position: relative;
	}
	.oc-all-categories-mega {
		position: absolute;
		top: 100%;
		left: 0;
		width: min(900px, 90vw);
		background: var(--oc-color-white);
		border: 1px solid var(--oc-color-border);
		border-radius: var(--oc-radius-lg);
		box-shadow: var(--oc-shadow-md);
		z-index: 70;
	}
	.oc-all-categories-mega__inner {
		display: grid;
		grid-template-columns: 240px 1fr;
		min-height: 320px;
		max-height: 70vh;
		overflow-y: auto;
	}
	.oc-all-categories-mega__nav {
		border-right: 1px solid var(--oc-color-border);
		background: var(--oc-color-bg-alt);
		padding: var(--oc-space-2) 0;
		border-radius: var(--oc-radius-lg) 0 0 var(--oc-radius-lg);
	}
	.oc-all-categories-mega__cat-link {
		border-left: 3px solid transparent;
	}
	.oc-all-categories-mega__cat-link:hover,
	.oc-all-categories-mega__cat-link:focus-visible,
	.oc-all-categories-mega__cat-link.is-active {
		background: var(--oc-color-white);
		border-left-color: var(--oc-color-cta-orange);
		color: var(--oc-color-header-blue);
	}
	.oc-all-categories-mega__content {
		padding: var(--oc-space-4) var(--oc-space-5);
	}
	.oc-all-categories-mega__subcats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--oc-space-5);
	}
}
@media (min-width: 1280px) {
	.oc-all-categories-mega__subcats {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== Search-bar "All Categories" control now hosts the mega menu ===== */
.oc-search__category-wrap {
	display: contents;
}

/* ===== "All Categories" trigger button (replaces the old native select) ===== */
.oc-search__category-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--oc-space-1);
	border: 0;
	border-right: 1px solid var(--oc-color-border);
	background: var(--oc-color-bg-alt);
	padding: 0 var(--oc-space-3);
	font-size: 15px;
	font-weight: 600;
	color: var(--oc-color-text);
	cursor: pointer;
	white-space: nowrap;
	height: 100%;
}
.oc-search__category-trigger:hover,
.oc-search__category-trigger:focus-visible {
	color: var(--oc-color-header-blue);
}
.oc-search__category-wrap.is-open .oc-search__category-trigger .oc-nav__caret {
	transform: rotate(-135deg);
}

/* ===== Level 1 item: link + mobile-only expand button, side by side ===== */
.oc-all-categories-mega__cat-item {
	position: relative;
	display: flex;
	align-items: center;
}
.oc-all-categories-mega__cat-link {
	flex: 1;
}
.oc-all-categories-mega__subcat-item {
	position: relative;
	display: flex;
	align-items: center;
}
.oc-all-categories-mega__subcat-link {
	flex: 1;
}
.oc-all-categories-mega__expand {
	background: none;
	border: 0;
	padding: var(--oc-space-2);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.oc-all-categories-mega__expand[aria-expanded="true"] .oc-nav__caret {
	transform: rotate(-135deg);
}

/* ===== Panel body: 2 sub-columns (subcategories + brands) ===== */
.oc-all-categories-mega__panel-body {
	margin-top: var(--oc-space-3);
}
.oc-all-categories-mega__brands-col {
	margin-top: var(--oc-space-4);
	padding-top: var(--oc-space-3);
	border-top: 1px solid var(--oc-color-border);
}
.oc-all-categories-mega__brand-block {
	display: none;
}
.oc-all-categories-mega__brand-block.is-active {
	display: block;
}

/* ===== Mobile (below 1024px): accordion, not hover/absolute overlay ===== */
@media (max-width: 1023px) {
	.oc-all-categories-mega__panel-body {
		padding-left: var(--oc-space-3);
	}
	.oc-all-categories-mega__subcats {
		display: block;
	}
	.oc-all-categories-mega__brands-col {
		display: block;
	}
	.oc-all-categories-mega__brand-block {
		padding-left: var(--oc-space-3);
	}
}

/* ===== Desktop (1024px+): expand buttons unused, true 3-column layout       */
/* ===== (level-1 nav | level-2 subcats | level-3 brands), so subcats reverts */
/* ===== to a single column here — the earlier 2-column subcats grid from    */
/* ===== the previous mega-menu pass was for a 2-column (no brands) layout.  */
@media (min-width: 1024px) {
	.oc-all-categories-mega {
		width: min(1100px, 92vw);
	}
	.oc-all-categories-mega__expand {
		display: none;
	}
	.oc-all-categories-mega__panel-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--oc-space-5);
	}
	.oc-all-categories-mega__subcats {
		grid-template-columns: 1fr;
	}
	.oc-all-categories-mega__brands-col {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		border-left: 1px solid var(--oc-color-border);
		padding-left: var(--oc-space-5);
	}
}
@media (min-width: 1280px) {
	.oc-all-categories-mega__subcats {
		grid-template-columns: 1fr;
	}
}

/* ===== "All Categories" mega menu v2: column headers, breadcrumb, price
   range, brand progress bars, product picks — appended after the v1
   mega-menu rules above; later rules win the cascade for equal
   specificity, so nothing above needed to be edited/removed. ===== */

.oc-all-categories-mega__subcats-col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.oc-all-categories-mega__col-header {
	margin-bottom: var(--oc-space-3);
	padding-bottom: var(--oc-space-3);
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-all-categories-mega__col-title {
	margin: 0 0 2px;
	font-size: var(--oc-text-base);
	font-weight: 700;
}
.oc-all-categories-mega__col-title a {
	color: var(--oc-color-header-blue);
	text-decoration: none;
}
.oc-all-categories-mega__col-title a:hover,
.oc-all-categories-mega__col-title a:focus-visible {
	text-decoration: underline;
}
.oc-all-categories-mega__col-subtitle {
	margin: 0;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}

.oc-all-categories-mega__breadcrumb {
	margin: 0 0 2px;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.oc-all-categories-mega__detail-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--oc-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--oc-space-1);
}
.oc-all-categories-mega__detail-title {
	margin: 0;
	font-size: var(--oc-text-lg);
	font-weight: 700;
}
.oc-all-categories-mega__view-all {
	flex-shrink: 0;
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-header-blue);
	text-decoration: none;
	white-space: nowrap;
}
.oc-all-categories-mega__view-all:hover,
.oc-all-categories-mega__view-all:focus-visible {
	text-decoration: underline;
}
.oc-all-categories-mega__price-range {
	margin: 0 0 var(--oc-space-4);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text-muted);
}

.oc-all-categories-mega__section-title {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-text-muted);
	text-transform: none;
}

.oc-all-categories-mega__brands-list {
	list-style: none;
	margin: 0 0 var(--oc-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-2);
}
.oc-all-categories-mega__brand-row {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	align-items: center;
	gap: var(--oc-space-3);
	text-decoration: none;
	padding: 4px 0;
}
.oc-all-categories-mega__brand-name {
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oc-all-categories-mega__brand-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--oc-color-bg-alt);
	overflow: hidden;
}
.oc-all-categories-mega__brand-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--oc-color-header-blue);
}
.oc-all-categories-mega__brand-count {
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	min-width: 2ch;
	text-align: right;
}
.oc-all-categories-mega__brand-row:hover .oc-all-categories-mega__brand-name,
.oc-all-categories-mega__brand-row:focus-visible .oc-all-categories-mega__brand-name {
	color: var(--oc-color-header-blue);
}

.oc-all-categories-mega__products-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-3);
}
.oc-all-categories-mega__product-row {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: var(--oc-space-3);
	text-decoration: none;
}
.oc-all-categories-mega__product-image {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: var(--oc-color-bg-alt);
	border-radius: 4px;
	flex-shrink: 0;
}
.oc-all-categories-mega__product-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.oc-all-categories-mega__product-sku {
	font-size: 10px;
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
}
.oc-all-categories-mega__product-name {
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oc-all-categories-mega__product-row:hover .oc-all-categories-mega__product-name,
.oc-all-categories-mega__product-row:focus-visible .oc-all-categories-mega__product-name {
	color: var(--oc-color-header-blue);
}
.oc-all-categories-mega__product-price {
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-text);
	white-space: nowrap;
}
.oc-all-categories-mega__product-price del {
	color: var(--oc-color-text-muted);
	font-weight: 400;
	margin-right: 4px;
}

.oc-all-categories-mega__empty-panel {
	margin: 0;
	font-size: var(--oc-text-sm);
}
.oc-all-categories-mega__empty-panel a {
	color: var(--oc-color-header-blue);
}

/* Scroll the two content columns independently once they exceed a
   comfortable viewport-relative height, per "scrollable middle panel
   when needed" — never the whole mega menu. */
@media (min-width: 1024px) {
	.oc-all-categories-mega__subcats-col,
	.oc-all-categories-mega__brands-col {
		max-height: min(65vh, 520px);
		overflow-y: auto;
	}
	.oc-all-categories-mega__subcats-col {
		padding-right: var(--oc-space-2);
	}
	.oc-all-categories-mega__brands-col {
		padding-right: var(--oc-space-2);
	}
}

/* ===== FIX: .oc-search's own overflow:hidden (set at line ~135, purely to
   clip the trigger/submit buttons into the search bar's rounded pill
   shape) was also clipping the "All Categories" mega menu. The menu's
   real DOM parent, .oc-search__category-wrap, uses display:contents (so
   the flex layout of the search bar treats the trigger button and the
   menu as if they were direct children of .oc-search) — which means the
   menu paints INSIDE .oc-search's own box and was being cut off at the
   search bar's ~44px height, even though its display/position/z-index
   were all correct. Fix: stop clipping on .oc-search itself, and instead
   round the two end children's own outer corners to keep the same pill
   visual without clipping anything. ===== */
.oc-search {
	overflow: visible;
}
.oc-search__category-trigger {
	border-top-left-radius: var(--oc-radius);
	border-bottom-left-radius: var(--oc-radius);
}
.oc-search__submit {
	border-top-right-radius: var(--oc-radius);
	border-bottom-right-radius: var(--oc-radius);
}

/* ===== FIX: stale rule (predates the mobile accordion expand-buttons
   added when the mega menu became 3 levels deep) was force-hiding the
   entire subcategory/brand/product content at mobile widths, silently
   blocking the "tap to drill down" behavior those expand buttons are
   supposed to enable. Restoring visibility so the mobile accordion
   inside the All Categories panel actually works. ===== */
@media (max-width: 1023px) {
	.oc-all-categories-mega__content {
		display: block;
	}
}

/* ===== "All Categories" trigger: clean centered text+caret alignment.
   Narrowly scoped override (same single-class selector as the base rule
   above), appended last so it is authoritative without editing that
   rule in place. Does not touch border, background, color, padding, or
   cursor — only alignment, spacing, sizing, and weight. ===== */
.oc-search__category-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	font-size: 15px;
	font-weight: 500;
}

/* ===== Center the "All Categories" mega menu against the viewport/
   header row, not against the search bar/trigger.

   Root cause: the menu's positioned (containing-block) ancestor was
   .oc-search — a narrow flex item sitting next to the logo, not
   full-width — so left:0 anchored the menu to the search bar's own
   left edge and it stretched toward the right from there, looking
   attached to the search bar instead of centered on the page.

   Fix: stop .oc-search from being a positioned ancestor, and instead
   let the menu's containing block be .oc-header-row--main, which is
   already full-bleed (spans the entire viewport width, no max-width
   of its own — only its .oc-header-row__inner child is constrained)
   and whose bottom edge sits exactly below the search/header row, so
   top:100% keeps the menu in the same vertical position as before.
   Then center the menu within that full width. .oc-search's own
   overflow:visible fix (added separately, for the earlier clipping
   bug) is unrelated and still applies regardless of this change. ===== */
@media (min-width: 1024px) {
	.oc-search {
		position: static;
	}
	.oc-header-row--main {
		position: relative;
	}
	.oc-all-categories-mega {
		left: 50%;
		transform: translateX(-50%);
		width: min(1150px, calc(100vw - 32px));
	}
}

/* ===== Lower-navigation-row mega-menu (row 3: Cables / Chargers &
   Power / ... ). Independent component from the "All Categories"
   search-bar mega-menu above — separate class prefix (oc-row-nav-mega,
   not oc-mega-menu) so the two can be styled/fixed without risk of
   collision. Reuses the EXISTING .oc-nav__item--has-children hover/
   focus-within/is-open activation already wired in main.js — no JS
   changes were needed for this component. ===== */
.oc-row-nav-mega {
	display: none;
}
.oc-nav__item--has-children:hover .oc-row-nav-mega,
.oc-nav__item--has-children:focus-within .oc-row-nav-mega,
.oc-nav__item--has-children.is-open .oc-row-nav-mega {
	display: block;
}
.oc-row-nav-mega__heading {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.oc-row-nav-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oc-row-nav-mega__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-3);
	padding: 6px 0;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
	white-space: nowrap;
}
.oc-row-nav-mega__link:hover,
.oc-row-nav-mega__link:focus-visible {
	color: var(--oc-color-header-blue);
}
.oc-row-nav-mega__count {
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	flex-shrink: 0;
	margin-left: var(--oc-space-3);
}

/* Mobile (below 1024px): stacked single column, reusing the existing
   accordion indentation language from the row so it visually matches
   the old dropdown it replaces. No horizontal scrolling risk since
   nothing here is wider than its parent. */
@media (max-width: 1023px) {
	.oc-row-nav-mega {
		padding-left: var(--oc-space-5);
		padding-right: var(--oc-space-3);
	}
	.oc-row-nav-mega__col--brands {
		margin-top: var(--oc-space-3);
		padding-top: var(--oc-space-3);
		border-top: 1px solid var(--oc-color-border);
	}
	.oc-row-nav-mega__link {
		min-height: 44px;
	}
}

/* Desktop (1024px+): floating 2-column panel, positioned relative to
   each item's own <li> (position:relative, set by the existing
   .oc-nav__item desktop rule — no display:contents involved here, a
   plain, reliable containing block) and centered under that specific
   trigger — a reusable rule that works identically for every category
   regardless of its name/width, not a fixed offset tuned to one item.
   The first/last items get edge-anchored instead of centered, purely
   by structural position (:first-child/:last-child), so the panel
   never overflows the viewport at the row's own left/right extremes. */
@media (min-width: 1024px) {
	.oc-row-nav-mega {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: var(--oc-space-2);
		min-width: 320px;
		max-width: min(480px, 92vw);
		background: var(--oc-color-white);
		border: 1px solid var(--oc-color-border);
		border-radius: var(--oc-radius-lg);
		box-shadow: var(--oc-shadow-md);
		padding: var(--oc-space-4);
		z-index: 60;
	}
	.oc-nav__item--has-children:hover .oc-row-nav-mega,
	.oc-nav__item--has-children:focus-within .oc-row-nav-mega,
	.oc-nav__item--has-children.is-open .oc-row-nav-mega {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--oc-space-5);
	}
	.oc-row-nav-mega__col--brands {
		border-left: 1px solid var(--oc-color-border);
		padding-left: var(--oc-space-5);
	}
	.oc-nav__item:first-child .oc-row-nav-mega {
		left: 0;
		transform: none;
	}
	.oc-nav__item:last-child .oc-row-nav-mega {
		left: auto;
		right: 0;
		transform: none;
	}
}

/* ===== Lower-navigation mega-menu REDESIGN: now reuses the exact same
   "All Categories" mega-menu template/CSS/JS (a second instance with
   uniquely-prefixed IDs, #oc-row-all-categories-menu) instead of the
   small 2-column .oc-row-nav-mega dropdown. That per-item component is
   kept for mobile only (see the override below); at desktop it is
   replaced entirely by this shared, full 3-column panel. ===== */
@media (min-width: 1024px) {
	/* The old per-item mobile dropdown must not also render at desktop
	   now that the full mega-menu replaces it there — same selector,
	   same specificity as the rule that shows it, appended later so it
	   wins the cascade tie; no !important needed. */
	.oc-nav__item--has-children:hover .oc-row-nav-mega,
	.oc-nav__item--has-children:focus-within .oc-row-nav-mega,
	.oc-nav__item--has-children.is-open .oc-row-nav-mega {
		display: none;
	}

	.oc-header-row--nav {
		position: relative;
	}

	/* The shared panel is a direct child of .oc-header-row--nav (a
	   full-bleed row, same proven containing-block pattern already used
	   for the search-bar menu's own centering fix), toggled by its own
	   .is-open class (set via JS on row-3 hover/focus) rather than by
	   an ancestor's state, since it is a sibling of the triggers, not a
	   descendant of any single one of them. */
	#oc-row-all-categories-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: min(1150px, calc(100vw - 32px));
	}
	#oc-row-all-categories-menu.is-open {
		display: block;
	}

	/* Keep the active row-3 trigger visually highlighted while its
	   panel is open, even once the pointer has moved off the trigger
	   and into the (sibling, not descendant) panel itself. */
	.oc-nav__item--has-children.is-open > .oc-nav__row .oc-nav__link {
		color: var(--oc-color-header-blue);
	}
}

/* ===== Lower-nav mega-menu CORRECTION: remove the Level-1 parent-
   category list from inside the panel (that list already exists as the
   row-3 navigation row itself — repeating it inside the panel was not
   wanted). Switching between parent categories now happens only via
   hovering the row-3 items outside the panel (already wired in main.js
   — no JS change needed, activateMegaPanel() already degrades safely
   when no nav-column elements are present to update).

   .oc-all-categories-mega__inner is a 2-column CSS grid (nav | content)
   in the shared base rule; without $show_nav rendering the nav element
   at all, that same "240px 1fr" column template would leave an empty
   240px gap where the nav used to be, so it's overridden to a single
   column here, scoped to this specific (--no-nav) instance only — the
   search-bar menu's own grid is untouched. ===== */
@media (min-width: 1024px) {
	.oc-all-categories-mega--no-nav .oc-all-categories-mega__inner {
		grid-template-columns: 1fr;
	}
	/* Narrower than the 3-column version, since it now only needs to
	   fit the subcategories + brands/best-sellers content. */
	#oc-row-all-categories-menu {
		width: min(760px, calc(100vw - 32px));
	}
}

/* ===== Search autocomplete dropdown (independently scoped under
   .oc-search-autocomplete, no broad/global selectors touched).
   Positioned relative to the new .oc-search__input-wrap — deliberately
   NOT .oc-search itself, since .oc-search must stay position:static at
   desktop (load-bearing for the "All Categories" mega-menu's own
   centering fix elsewhere in this file). ===== */
.oc-search__input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
}
.oc-search__input-wrap input {
	width: 100%;
}
.oc-search-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-top: 0;
	border-radius: 0 0 var(--oc-radius) var(--oc-radius);
	box-shadow: var(--oc-shadow-md);
	z-index: 80;
	max-height: 70vh;
	overflow-y: auto;
}
.oc-search-autocomplete__heading {
	padding: var(--oc-space-2) var(--oc-space-3);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-search-autocomplete__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oc-search-autocomplete__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--oc-space-3);
	padding: var(--oc-space-2) var(--oc-space-3);
	text-decoration: none;
}
.oc-search-autocomplete__item:hover,
.oc-search-autocomplete__item:focus-visible {
	background: var(--oc-color-bg-alt);
}
.oc-search-autocomplete__image {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: var(--oc-color-bg-alt);
	border-radius: 4px;
	flex-shrink: 0;
}
.oc-search-autocomplete__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.oc-search-autocomplete__sku {
	font-size: 10px;
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
}
.oc-search-autocomplete__name {
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oc-search-autocomplete__price {
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-text);
	white-space: nowrap;
}
.oc-search-autocomplete__price del {
	color: var(--oc-color-text-muted);
	font-weight: 400;
	margin-right: 4px;
}
.oc-search-autocomplete__view-all {
	display: block;
	width: 100%;
	padding: var(--oc-space-2) var(--oc-space-3);
	background: var(--oc-color-bg-alt);
	border: 0;
	border-top: 1px solid var(--oc-color-border);
	color: var(--oc-color-header-blue);
	font-weight: 600;
	font-size: var(--oc-text-sm);
	text-align: center;
	cursor: pointer;
}
.oc-search-autocomplete__view-all:hover,
.oc-search-autocomplete__view-all:focus-visible {
	background: var(--oc-color-border);
}
.oc-search-autocomplete__loading,
.oc-search-autocomplete__error,
.oc-search-autocomplete__empty {
	padding: var(--oc-space-3);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text-muted);
	text-align: center;
}


/* ===== Mobile-only cleanup (<=639px): product cards, header
   announcement bar, floating buttons =====

   Root causes found by direct measurement, not guesswork:

   1. The product image itself was ALREADY a correct 1:1 square
      (confirmed via getBoundingClientRect: 178x178 on a 180px-wide
      mobile card) — it was never the real driver of "too tall" cards.
      The actual driver was .oc-product-card__body measuring 230px
      tall on that same card, because .oc-product-card__actions'
      `flex-wrap: wrap` let the Add to Cart and Ask on WhatsApp buttons
      stack as two full-width rows instead of sharing one row. Switched
      to object-fit: contain per the explicit request (prevents a
      source image with unusual proportions from being cropped
      differently than its neighbors) and placed the two action
      buttons side by side to remove the second stacked row, which is
      what actually shortens the card.

   2. The header announcement bar's "Welcome to..." text already had
      overflow:hidden/text-overflow:ellipsis/white-space:nowrap, but no
      `min-width: 0`. Flex items default to `min-width: auto`, which
      for a `white-space: nowrap` child equals its full, un-truncated
      text width — so the ellipsis logic could never actually engage;
      the row was forced wider than the viewport instead, overflowing
      and pushing the phone number/language toggle off-screen. Same
      root-cause class as two previously-fixed overflow bugs in this
      project (the search-autocomplete row and the product grid
      column). Adding min-width: 0 lets the text box actually shrink,
      so the ellipsis takes over as originally intended.

   3. The floating "Ask AI" / "Chat on WhatsApp" buttons are
      `position: fixed` at a constant distance from the viewport edges,
      so on a 2-column mobile grid they inevitably sit on top of
      whatever card row is currently at the bottom of the screen.
      Their desktop padding/font-size were simply too large for how
      little mobile screen space is available; shrinking them on
      mobile only reduces how much of the card underneath they cover,
      without removing either button or changing desktop placement. */
@media (max-width: 639px) {
	.oc-product-card__image {
		object-fit: contain;
	}
	.oc-product-card__body {
		padding: var(--oc-space-2);
		gap: 2px;
	}
	/* Root cause of uneven mobile cards: .oc-product-card__name already
	   line-clamps to 2 lines (see the global rule later in this file),
	   but nothing reserved space for a title shorter than 2 lines. A
	   1-line title let price/stock/actions start right away, while a
	   2-line title (same row, neighboring column) pushed them down —
	   so even though CSS Grid already stretches both cards in a row to
	   equal overall height, the CONTENT inside sat at different
	   vertical offsets depending on each card's own title length. This
	   reserves a full 2-line-tall title area (calc, not a guessed px
	   value — matches the name's own font-size/line-height exactly) so
	   price/stock/actions always start at the same offset regardless
	   of title length; a 1-line title simply leaves blank space below
	   it inside this same reserved box, a 2-line title fills it, and
	   anything longer still clamps at 2 lines exactly as before. */
	.oc-product-card__name {
		min-height: calc(2 * 1.35em);
	}
	.oc-product-card__actions {
		margin-top: var(--oc-space-1);
		flex-wrap: nowrap;
		gap: var(--oc-space-1);
	}
	.oc-product-card__actions > * {
		flex: 1 1 0;
		min-width: 0;
		padding: var(--oc-space-1) var(--oc-space-1);
		font-size: var(--oc-text-xs);
		text-align: center;
		white-space: normal;
		line-height: 1.2;
	}

	.oc-announcement__welcome {
		min-width: 0;
	}

	.oc-floating-buttons {
		bottom: var(--oc-space-2);
		left: var(--oc-space-2);
		right: var(--oc-space-2);
	}
	.oc-floating-btn {
		padding: var(--oc-space-1) var(--oc-space-3);
		font-size: var(--oc-text-xs);
	}
	/* Floating WhatsApp: compact circular icon button (mobile only). */
	.oc-floating-btn--whatsapp {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		font-size: 0;
		line-height: 0;
	}
	.oc-floating-btn--whatsapp::before {
		content: "";
		width: 30px;
		height: 30px;
		background: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27white%27><path d=%27M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z%27/></svg>") center / contain no-repeat;
	}

	/* Single product gallery thumbnails: WooCommerce's own default
	   (.flex-control-thumbs { overflow:hidden }, li { width:25%;
	   float:left }) wraps many thumbnails into a multi-row grid rather
	   than a single swipeable row (confirmed live with a 9-image
	   product). Converted to a horizontally-scrollable single row on
	   mobile only, reusing this file's existing horizontal-scroll
	   pattern (the row-nav category bar). Selector matches
	   WooCommerce's own prefix exactly so it wins on specificity, not
	   just source order (same technique used earlier in this file for
	   the product-grid clearfix fix). flexslider's own click handling
	   and .flex-active state are untouched — this only changes layout,
	   not behavior. Desktop is untouched; it keeps WooCommerce's
	   existing wrapped-grid thumbnail layout exactly as before. */
	.woocommerce div.product div.images .flex-control-thumbs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		gap: var(--oc-space-2);
	}
	.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}
	.woocommerce div.product div.images .flex-control-thumbs li {
		width: 72px;
		flex: 0 0 auto;
		float: none;
	}

	/* Mobile main header redesign: logo left, cart + hamburger right,
	   Account hidden from this row (the My Account page/functionality
	   is untouched — only this header link is hidden), "All Categories"
	   selector removed from the search bar (categories remain reachable
	   through the hamburger drawer's own category list, a separate,
	   untouched system — .oc-nav / #oc-primary-nav). The existing flex
	   order already puts the logo and .oc-header__actions on the first
	   line and wraps .oc-search onto its own line below
	   (order:3;flex-basis:100%, set at desktop scope already), so no
	   structural reordering is needed here — hiding these two elements
	   is sufficient, and .oc-search__input-wrap's existing `flex: 1`
	   naturally expands to fill the row once the category trigger is
	   removed from flow. */
	.oc-header__icon-link:not(.oc-header__icon-link--cart) {
		display: none;
	}
	.oc-search__category-wrap {
		display: none;
	}
}

/* ===== Desktop single-product gallery: thumbnail carousel =====
   Root cause of the messy desktop layout: WooCommerce's own default
   gallery CSS (.flex-control-thumbs { overflow:hidden }, li { width:
   25%; float:left }) wraps thumbnails into a multi-row grid once there
   are more than ~4 images, confirmed live on a 9-image product — the
   left column (image + multi-row thumb grid) ends up much taller than
   the right-side product info column, which is exactly the "awkward
   space" / "messy grid" being reported. This mirrors the fix already
   applied for mobile (a horizontally-scrollable single row instead of
   a wrapping grid), but scoped to min-width:640px — the exact inverse
   of the mobile max-width:639px breakpoint, so the two rules can never
   both apply and mobile is structurally guaranteed to be unaffected.
   The left/right arrow buttons (.oc-gallery-thumb-nav) are injected by
   main.js only after WooCommerce's own documented
   "wc-product-gallery-after-init" event, directly into the existing
   FlexSlider-generated thumbnail markup — no new/duplicate gallery,
   no template override. They exist in the DOM on every viewport
   (simplest, most robust injection — no resize listener needed to add
   or remove them) but are display:none by default and only revealed
   inside this same min-width:640px block, so mobile users never see or
   interact with them. ===== */
.oc-gallery-thumb-nav {
	display: none;
}
@media (min-width: 640px) {
	/* v2: arrows as absolutely-positioned overlays on the strip's own
	   edges, rather than flex siblings that constrain the scrollable
	   element's width via flex:1. The earlier flex:1 + overflow-x:auto
	   combination measured correct clientWidth/scrollWidth but the
	   resulting box would not actually accept a scrollLeft assignment
	   in testing — switching .flex-control-thumbs back to a plain,
	   unconstrained-by-flex block (width:100% of a position:relative,
	   non-flex wrapper) resolves that and is also the more
	   conventional carousel-arrow layout (arrows overlaid on the
	   track's edges, not taking up separate row space). */
	.oc-gallery-thumb-row {
		position: relative;
		margin-top: var(--oc-space-2);
	}
	.woocommerce div.product div.images .flex-control-thumbs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-behavior: smooth;
		-ms-overflow-style: none;
		scrollbar-width: none;
		gap: var(--oc-space-2);
		width: 100%;
		box-sizing: border-box;
		padding: 0 40px;
	}
	.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}
	.woocommerce div.product div.images .flex-control-thumbs li {
		width: 84px;
		flex: 0 0 auto;
		float: none;
	}
	.oc-gallery-thumb-nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 32px;
		height: 32px;
		border-radius: 999px;
		border: 1px solid var(--oc-color-border);
		background: var(--oc-color-white);
		color: var(--oc-color-text);
		cursor: pointer;
		padding: 0;
		box-shadow: var(--oc-shadow-sm);
	}
	.oc-gallery-thumb-nav--prev {
		left: 0;
	}
	.oc-gallery-thumb-nav--next {
		right: 0;
	}
	.oc-gallery-thumb-nav:hover {
		border-color: var(--oc-color-accent);
		color: var(--oc-color-accent);
	}
	.oc-gallery-thumb-nav:disabled {
		opacity: 0.35;
		cursor: default;
	}
	.oc-gallery-thumb-row--no-nav .oc-gallery-thumb-nav {
		visibility: hidden;
	}
}

/* ===== Product archive/category page rebuild =====
   .oc-product-grid / .oc-product-card already existed (built for the
   homepage's featured products) and already has the exact responsive
   column counts this rebuild needs (2 / 3 / 4 at the existing
   breakpoints) — reused as-is here, only extended with what was
   missing: title line-clamping, a hover state, and styling for
   WooCommerce's own native add-to-cart button (used on the archive
   grid instead of the homepage's simple link, since the full catalog
   includes variable and occasionally out-of-stock products that need
   WooCommerce's real add-to-cart logic, not a plain link). ===== */

.oc-product-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.oc-product-card:hover,
.oc-product-card:focus-within {
	box-shadow: var(--oc-shadow-md);
	transform: translateY(-2px);
}
.oc-product-card__name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* WooCommerce's native add-to-cart button/link, styled to match .oc-btn
   rather than WooCommerce's default appearance. */
.oc-product-card .add_to_cart_button,
.oc-product-card .button.add_to_cart_button,
.oc-product-card a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--oc-space-2) var(--oc-space-3);
	border-radius: var(--oc-radius);
	background: var(--oc-color-accent);
	color: var(--oc-color-white);
	font-size: var(--oc-text-sm);
	font-weight: 600;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	line-height: 1.2;
}
.oc-product-card .add_to_cart_button:hover,
.oc-product-card .add_to_cart_button:focus-visible {
	background: var(--oc-color-accent-dark);
}
.oc-product-card .add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}
.oc-product-card a.added_to_cart {
	background: var(--oc-color-success);
	margin-left: var(--oc-space-2);
}

/* Archive header area: breadcrumb / category title / subcategory tiles
   (already existed) / result count + sorting — light spacing/typography
   polish so it reads as one cohesive section rather than default
   WooCommerce/theme spacing. */
.woocommerce-breadcrumb {
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
	margin: 0 0 var(--oc-space-3);
}
.woocommerce-breadcrumb a {
	color: var(--oc-color-text-muted);
}
.woocommerce-products-header__title {
	margin: 0 0 var(--oc-space-4);
	font-size: var(--oc-text-2xl);
}
.woocommerce-result-count {
	margin: 0;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text-muted);
}
.woocommerce-ordering select {
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-1) var(--oc-space-2);
	font-size: var(--oc-text-sm);
	background: var(--oc-color-white);
}
.oc-product-grid {
	margin-top: var(--oc-space-4);
}

/* Infinite-scroll sentinel: invisible trigger zone by default (still
   occupies layout space so the IntersectionObserver has something real
   to watch), spinner + text only shown while an actual request is in
   flight — "subtle loading indicator while fetching", not a permanent
   fixture. */
.oc-archive-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--oc-space-2);
	padding: var(--oc-space-5) 0;
	min-height: 48px;
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}
.oc-archive-loader.is-loading {
	opacity: 1;
	visibility: visible;
}
.oc-archive-loader__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--oc-color-border);
	border-top-color: var(--oc-color-header-blue);
	border-radius: 50%;
	animation: oc-archive-spin 0.6s linear infinite;
}
@keyframes oc-archive-spin {
	to { transform: rotate(360deg); }
}

/* Result-count/sorting row: default WooCommerce markup has no shared
   flex wrapper, so float/inline-block them into one tidy row instead
   of stacking awkwardly. */
@media (min-width: 640px) {
	.woocommerce-result-count {
		float: left;
		padding-top: var(--oc-space-2);
	}
	.woocommerce-ordering {
		float: right;
	}
}


/* ===== Single-product info tabs (Description/Specifications/FAQs/
   Reviews) ===== Replaces WooCommerce's default "folder tab" styling
   (background fills, CSS-triangle corner decorations, bordered boxes)
   with a clean underline-active-tab pattern. Selector prefix matches
   WooCommerce's own exactly (.woocommerce div.product .woocommerce-
   tabs ul.tabs ...) so this wins on specificity, not just source
   order — same technique used elsewhere in this file for the product
   archive clearfix fix. Tab switching itself is WooCommerce's own
   native, already-enqueued JS (single-product.min.js) — no new JS
   was written for this; only the markup WooCommerce already renders
   is restyled. Does not touch .woocommerce-product-gallery or any of
   its descendants. */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--oc-space-6);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--oc-color-border);
	gap: var(--oc-space-5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 0;
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--oc-space-3) 0;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: var(--oc-text-base);
	color: var(--oc-color-text-muted);
	white-space: nowrap;
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--oc-color-text);
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--oc-color-text);
	border-bottom-color: var(--oc-color-accent);
}
.woocommerce div.product .woocommerce-tabs .panel {
	margin: var(--oc-space-5) 0 0;
	padding: 0;
	max-width: 760px;
	color: var(--oc-color-text);
	line-height: 1.6;
}
.oc-product-tab__specifications table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--oc-text-sm);
}
.oc-product-tab__specifications th,
.oc-product-tab__specifications td {
	text-align: left;
	padding: var(--oc-space-2) var(--oc-space-3);
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-product-tab__specifications th {
	color: var(--oc-color-text-muted);
	font-weight: 600;
	width: 35%;
}
.oc-product-tab__empty {
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
	margin: 0;
}
.oc-faq-item {
	padding: var(--oc-space-4) 0;
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-faq-item:first-child {
	padding-top: 0;
}
.oc-faq-item:last-child {
	border-bottom: 0;
}
.oc-faq-item__question {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-base);
	font-weight: 700;
	color: var(--oc-color-text);
}
.oc-faq-item__answer {
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
}
.oc-faq-item__answer p {
	margin: 0 0 var(--oc-space-2);
}
.oc-faq-item__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 639px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: var(--oc-space-4);
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		font-size: var(--oc-text-sm);
		padding: var(--oc-space-2) 0;
	}
	.woocommerce div.product .woocommerce-tabs .panel {
		max-width: none;
	}
}

/* Root cause of "Description squeezed into a narrow column with a huge
   blank area on the right" on desktop: .panel's own max-width: 760px
   (above) is a reading-width cap that was fine for plain paragraph text
   but ALSO constrains any product-description IMAGES inside the same
   panel (WooCommerce core's own `.woocommerce img { max-width: 100% }`
   scales them to fit .panel's width, so they shrink to fit 760px
   instead of the page's real ~1248px content width). Desktop-only fix,
   scoped to .panel alone: let it use the full available content width
   of its container (.oc-container, same as the rest of the page) —
   nothing else on the page changes, and the mobile max-width:none rule
   above is untouched. */
@media (min-width: 769px) {
	.woocommerce div.product .woocommerce-tabs .panel {
		max-width: none;
	}
}


/* ===== Single-product purchase area redesign (v2 rework) =====
   The first version used WooCommerce's default 48%/48% column split
   and default hook order. Live comparison against the reference image
   showed real structural/proportion mismatches — this version fixes
   them: a narrower image column (34%/62%, matching the reference's
   visual ratio), a reordered right column (brand/model -> title ->
   rating -> bullets -> price -> warranty -> add to cart, via
   WooCommerce's own hook priorities — see product-purchase.php), a
   static two-row payment-info block instead of a single city-toggled
   line, and compact pill-style payment-method chips instead of
   stacked full-width accordion rows. Selector prefixes still match
   WooCommerce's own exactly where overriding its defaults, for the
   same specificity reasons established earlier in this file. Does
   not touch .woocommerce-product-gallery or any descendant — the
   gallery itself remains completely untouched. */

/* Page-level width containment (new in this pass) — see
   product-purchase.php's woocommerce_before_main_content /
   woocommerce_after_main_content hooks. Reuses the site's existing
   .oc-container utility (max-width 1280px, the same one header/footer/
   homepage already use) so the single-product page's overall
   proportions finally match the rest of the site instead of rendering
   at the full, unconstrained viewport width. */
.oc-single-product-page {
	padding-block: var(--oc-space-4) var(--oc-space-6);
}

/* Top purchase area: CSS Grid, not floats (see product-purchase.php
   for why the previous float-based approach was replaced — it leaked
   into the Description section). .oc-product-top wraps ONLY .images +
   .oc-product-left-extras (left) and .summary (right); it is closed in
   the DOM before Description/Related Products render, so no clear/
   float rule of any kind is needed on those sections any more. */
.oc-product-top {
	display: grid;
	grid-template-columns: minmax(300px, 38%) 1fr;
	gap: var(--oc-space-6);
	align-items: start;
}
.oc-product-left {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.oc-product-left-extras {
	margin-top: var(--oc-space-5);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	box-sizing: border-box;
	width: 100%;
	float: none;
	margin: 0;
	min-width: 0;
}
@media screen and (max-width: 768px) {
	.oc-product-top {
		grid-template-columns: 1fr;
		gap: var(--oc-space-4);
	}
	.oc-product-left-extras {
		margin-top: var(--oc-space-4);
	}
}

/* Mobile only: purchase info (title/price/cart/WhatsApp) before Select City/Delivery/Trust/AI. */
@media screen and (max-width: 639px) {
	.oc-product-left {
		display: contents;
	}
	.oc-product-top > .summary {
		order: 2;
	}
	.oc-product-left-extras {
		order: 3;
		margin-top: 0;
	}
}

/* ----- Select City (light info-box, matching the reference) ----- */
.oc-product-delivery {
	background: var(--oc-color-bg-alt);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-3);
	margin-bottom: var(--oc-space-4);
}
.oc-product-delivery__label {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-city-select {
	position: relative;
}
.oc-city-select__trigger {
	display: flex;
	align-items: center;
	gap: var(--oc-space-2);
	width: 100%;
	box-sizing: border-box;
	padding: var(--oc-space-2) var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	background: var(--oc-color-white);
	cursor: pointer;
	font-size: var(--oc-text-sm);
	font-weight: 600;
	color: var(--oc-color-text);
}
.oc-city-select__trigger:hover {
	border-color: var(--oc-color-accent);
}
.oc-city-select__pin {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--oc-color-accent);
}
.oc-city-select__trigger #oc-city-selected-label {
	flex: 1;
	text-align: left;
}
.oc-city-select__panel {
	position: absolute;
	top: calc(100% + var(--oc-space-2));
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	box-shadow: var(--oc-shadow-md);
	padding: var(--oc-space-3);
	max-height: 320px;
	display: flex;
	flex-direction: column;
}
.oc-city-select__panel[hidden] {
	display: none;
}
.oc-city-select__search {
	width: 100%;
	box-sizing: border-box;
	padding: var(--oc-space-2) var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-sm);
	margin-bottom: var(--oc-space-2);
}
.oc-city-select__popular {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-1);
	margin-bottom: var(--oc-space-2);
}
.oc-city-chip {
	border: 1px solid var(--oc-color-border);
	border-radius: 999px;
	padding: 4px var(--oc-space-2);
	font-size: var(--oc-text-xs);
	background: var(--oc-color-white);
	cursor: pointer;
	color: var(--oc-color-text);
}
.oc-city-chip:hover {
	border-color: var(--oc-color-accent);
	color: var(--oc-color-accent);
}
.oc-city-select__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border-top: 1px solid var(--oc-color-border);
}
.oc-city-select__option {
	display: block;
	width: 100%;
	text-align: left;
	padding: var(--oc-space-2) var(--oc-space-1);
	border: 0;
	background: none;
	cursor: pointer;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-city-select__option:hover {
	background: var(--oc-color-bg-alt);
}
.oc-city-select__empty {
	padding: var(--oc-space-2) var(--oc-space-1);
	color: var(--oc-color-text-muted);
	font-size: var(--oc-text-sm);
}
.oc-delivery-info {
	margin-top: var(--oc-space-3);
}
.oc-delivery-info__date {
	margin: 0 0 var(--oc-space-1);
	font-weight: 700;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-delivery-info__note {
	margin: 0;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}

/* ----- Trust row ----- */
.oc-product-trust {
	display: flex;
	flex-direction: column;
	gap: var(--oc-space-2);
	margin-bottom: var(--oc-space-4);
}
.oc-product-trust__item {
	display: flex;
	align-items: center;
	gap: var(--oc-space-2);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-product-trust__item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--oc-color-success);
}

/* ----- AI product assistant (green border + suggestion chips, matching the reference) ----- */
.oc-product-ai {
	border: 1px solid var(--oc-color-success);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-4);
}
.oc-product-ai__heading {
	margin: 0 0 var(--oc-space-3);
	font-size: var(--oc-text-base);
	font-weight: 700;
}
.oc-product-ai__form {
	display: flex;
	gap: var(--oc-space-2);
}
.oc-product-ai__input {
	flex: 1;
	min-width: 0;
	padding: var(--oc-space-2) var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-sm);
}
.oc-product-ai__submit {
	flex-shrink: 0;
	padding: var(--oc-space-2) var(--oc-space-4);
	border: 0;
	border-radius: var(--oc-radius);
	background: var(--oc-color-accent);
	color: var(--oc-color-white);
	font-weight: 600;
	cursor: pointer;
}
.oc-product-ai__submit:hover {
	background: var(--oc-color-accent-dark);
}
.oc-product-ai__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-1);
	margin-top: var(--oc-space-2);
}
.oc-product-ai__suggestion {
	border: 1px solid var(--oc-color-border);
	border-radius: 999px;
	padding: 4px var(--oc-space-2);
	font-size: var(--oc-text-xs);
	background: var(--oc-color-bg-alt);
	color: var(--oc-color-text);
	cursor: pointer;
}
.oc-product-ai__suggestion:hover {
	border-color: var(--oc-color-success);
	color: var(--oc-color-success);
}
.oc-product-ai__answer {
	margin-top: var(--oc-space-3);
	padding: var(--oc-space-3);
	background: var(--oc-color-bg-alt);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
	line-height: 1.5;
}

/* ----- Right column: brand/model, rating, price row, warranty badge ----- */
.oc-product-brand-model {
	margin: 0 0 var(--oc-space-1);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--oc-color-text-muted);
	text-transform: uppercase;
}
.woocommerce div.product .summary .product_title {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-2xl);
	line-height: 1.3;
	font-weight: 700;
	color: var(--oc-color-text);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
	margin: var(--oc-space-2) 0 var(--oc-space-3);
	font-size: var(--oc-text-sm);
	line-height: 1.6;
	color: var(--oc-color-text);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description ul {
	margin: 0;
	padding-left: 1.1em;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description li {
	margin-bottom: var(--oc-space-1);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {
	.woocommerce div.product .summary .product_title {
		font-size: var(--oc-text-xl);
	}
}
.woocommerce div.product .woocommerce-product-rating {
	margin: 0 0 var(--oc-space-3);
}
.oc-product-price-row {
	margin: var(--oc-space-3) 0;
	padding-top: var(--oc-space-3);
	border-top: 1px solid var(--oc-color-border);
}
.oc-product-price-row .price {
	font-size: var(--oc-text-2xl);
	font-weight: 700;
	color: var(--oc-color-text);
}
.oc-product-warranty-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--oc-space-1);
	margin: 0 0 var(--oc-space-4);
	padding: 4px var(--oc-space-2);
	background: #E7F6EC;
	color: var(--oc-color-success);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-xs);
	font-weight: 600;
}
.oc-product-warranty-badge svg {
	width: 14px;
	height: 14px;
}

/* ----- Quantity stepper + Add to Cart (restyles WooCommerce's own
   native .quantity input / .single_add_to_cart_button — the +/-
   buttons are added by JS around that same native input, not a
   replacement cart system) ----- */
.woocommerce div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--oc-space-2);
	margin-bottom: var(--oc-space-4) !important;
}
.woocommerce div.product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	flex-shrink: 0;
	float: none;
}
.oc-qty-step {
	width: 40px;
	height: 44px;
	border: 0;
	background: none;
	font-size: var(--oc-text-lg);
	font-weight: 600;
	color: var(--oc-color-text);
	cursor: pointer;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 40px;
	height: 44px;
	border: 0;
	border-left: 1px solid var(--oc-color-border);
	border-right: 1px solid var(--oc-color-border);
	text-align: center;
	font-size: var(--oc-text-sm);
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	height: 44px;
	margin: 0;
	border-radius: var(--oc-radius);
	background: var(--oc-color-cta-orange);
	border: 0;
	color: var(--oc-color-white);
	font-weight: 700;
	font-size: var(--oc-text-base);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: #e05f00;
}

/* ----- Right column purchase extras: outlined WhatsApp button,
   static two-row payment info, compact payment-method chips ----- */
.oc-product-purchase-extras {
	margin-top: var(--oc-space-4);
}
.oc-btn--whatsapp-product {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--oc-space-2);
	width: 100%;
	box-sizing: border-box;
	padding: var(--oc-space-3);
	border-radius: var(--oc-radius);
	background: var(--oc-color-white);
	border: 1.5px solid #25D366;
	color: #1ea952;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: var(--oc-space-4);
}
.oc-btn--whatsapp-product:hover {
	background: #F0FDF4;
	color: #1ea952;
}
.oc-btn--whatsapp-product svg {
	width: 20px;
	height: 20px;
	color: #25D366;
}
.oc-payment-info {
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-3);
}
.oc-payment-info__heading {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-payment-info__row {
	display: flex;
	align-items: flex-start;
	gap: var(--oc-space-2);
	padding: var(--oc-space-2) 0;
	border-bottom: 1px solid var(--oc-color-border);
}
.oc-payment-info__row:last-of-type {
	border-bottom: 0;
}
.oc-payment-info__pin {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--oc-color-accent);
}
.oc-payment-info__city {
	margin: 0;
	font-size: var(--oc-text-sm);
	font-weight: 700;
	color: var(--oc-color-text);
}
.oc-payment-info__terms {
	margin: 2px 0 0;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-payment-methods {
	margin-top: var(--oc-space-3);
	padding-top: var(--oc-space-3);
	border-top: 1px solid var(--oc-color-border);
}
.oc-payment-methods__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-2);
}
.oc-payment-method-chip {
	flex: 1 1 auto;
	min-width: 90px;
	padding: var(--oc-space-2) var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	background: var(--oc-color-white);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-text);
	cursor: pointer;
	text-align: center;
}
.oc-payment-method-chip:hover,
.oc-payment-method-chip[aria-expanded="true"] {
	border-color: var(--oc-color-accent);
	color: var(--oc-color-accent);
}
.oc-payment-method__panel {
	margin-top: var(--oc-space-2);
	padding: var(--oc-space-3);
	background: var(--oc-color-bg-alt);
	border-radius: var(--oc-radius);
}
.oc-payment-method__panel p {
	margin: 0 0 var(--oc-space-1);
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-payment-method__panel p:last-child {
	margin-bottom: 0;
}

/* ===== Desktop: "All Categories" trigger as an integrated part of the search bar.
   Root cause of the misalignment: `height: 100%` resolved against an auto-height
   flex row, so the trigger collapsed to ~23px (text content height) and sat at the
   top of the 42px bar. Stretch it to the full height instead; label left, chevron
   right, full-height divider before the input. ===== */
@media (min-width: 1024px) {
	.oc-search__category-trigger {
		align-self: stretch;
		height: auto;
		min-width: 168px;
		justify-content: space-between;
		gap: 12px;
		padding: 0 16px;
		background: var(--oc-color-white);
		line-height: 1;
	}
	.oc-search__category-trigger .oc-nav__caret {
		flex-shrink: 0;
		margin-top: -3px;
	}
}

/* ===== "Create Your Quotation": one button (id oc-quotation-trigger, bound by the quotation JS)
   living in .oc-nav__extras. Desktop: far right of the single category row.
   Mobile drawer: after the categories, before Account / Cart. ===== */
.oc-nav__quote {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--oc-space-3);
	border: 0;
	border-radius: var(--oc-radius);
	background: var(--oc-color-cta-orange);
	color: var(--oc-color-white);
	font-size: var(--oc-text-sm);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
.oc-nav__extras {
	padding: var(--oc-space-3);
}
.oc-nav__extra-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--oc-space-3) 0;
	border-bottom: 1px solid var(--oc-color-border);
	font-size: var(--oc-text-sm);
	font-weight: 500;
	color: var(--oc-color-header-blue);
}
.oc-nav__quote + .oc-nav__extra-link {
	margin-top: var(--oc-space-2);
	border-top: 1px solid var(--oc-color-border);
}
@media (min-width: 1024px) {
	.oc-nav {
		display: flex;
		align-items: center;
	}
	.oc-nav__list {
		flex: 1;
		min-width: 0;
	}
	.oc-nav__extras {
		flex: none;
		padding: 0 var(--oc-space-3) 0 0;
	}
	.oc-nav__quote {
		width: auto;
		padding: 6px 16px;
		white-space: nowrap;
		font-size: 14px;
	}
	.oc-nav__extra-link {
		display: none;
	}
}

/* Narrow desktops (1024-1199px): keep the category row on ONE line now that the quotation button shares it. */
@media (min-width: 1024px) {
	.oc-nav__link {
		white-space: nowrap;
	}
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.oc-nav__list {
		gap: var(--oc-space-3);
	}
}

/* ===== Shop page (brand → category → contextual filters → products) ===== */
.oc-shop {
	padding-block: var(--oc-space-4) var(--oc-space-6);
}
.oc-shop h2 {
	margin: 0 0 var(--oc-space-3);
	font-size: var(--oc-text-lg, 1.125rem);
	color: var(--oc-color-text);
}
.oc-shop-hero {
	background: var(--oc-color-bg-alt);
	border-radius: var(--oc-radius-lg);
	padding: var(--oc-space-5) var(--oc-space-5);
	margin-bottom: var(--oc-space-4);
}
.oc-shop-hero h1 {
	margin: 0 0 var(--oc-space-2);
	color: var(--oc-color-header-blue);
}
.oc-shop-hero p {
	margin: 0;
	color: var(--oc-color-text-muted);
	max-width: 62ch;
}
.oc-shop-brands,
.oc-shop-cats {
	margin-bottom: var(--oc-space-5);
}
.oc-shop-brands__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-3);
}
.oc-shop-brand {
	display: inline-flex;
	align-items: baseline;
	gap: var(--oc-space-2);
	padding: var(--oc-space-3) var(--oc-space-4);
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius-lg);
	font-weight: 700;
	color: var(--oc-color-header-blue);
}
.oc-shop-brand__count {
	font-size: var(--oc-text-xs);
	font-weight: 500;
	color: var(--oc-color-text-muted);
}
.oc-shop-brand:hover,
.oc-shop-brand.is-active {
	border-color: var(--oc-color-header-blue);
	background: var(--oc-color-bg-alt);
}
.oc-shop__layout {
	display: block;
}
.oc-shop__main {
	min-width: 0;
	transition: opacity 0.15s ease;
}
.oc-shop.is-loading .oc-shop__main {
	opacity: 0.55;
	pointer-events: none;
}
.oc-shop__toolbar {
	display: flex;
	align-items: center;
	gap: var(--oc-space-3);
	flex-wrap: wrap;
}
.oc-shop__count {
	font-weight: 600;
	color: var(--oc-color-text);
}
.oc-shop__sort-wrap {
	margin-left: auto;
}
.oc-shop__sort {
	padding: var(--oc-space-2) var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	background: var(--oc-color-white);
	font-size: var(--oc-text-sm);
}
.oc-shop__filters-btn {
	padding: var(--oc-space-2) var(--oc-space-4);
	border: 1px solid var(--oc-color-header-blue);
	border-radius: var(--oc-radius);
	background: var(--oc-color-white);
	color: var(--oc-color-header-blue);
	font-weight: 600;
	cursor: pointer;
}
.oc-shop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-space-2);
	margin-top: var(--oc-space-3);
}
.oc-shop__chips:empty {
	display: none;
}
.oc-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--oc-color-bg-alt);
	border: 1px solid var(--oc-color-border);
	font-size: var(--oc-text-xs);
	font-weight: 600;
	color: var(--oc-color-header-blue);
}
.oc-shop-chip--clear {
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
	color: var(--oc-color-cta-orange);
}
.oc-shop .oc-product-grid {
	grid-template-columns: repeat(2, 1fr);
}
.oc-shop .oc-archive-loader[hidden],
.oc-shop .oc-shop__empty[hidden] {
	display: none;
}
.oc-shop__empty {
	padding: var(--oc-space-5);
	text-align: center;
	color: var(--oc-color-text-muted);
}
/* Sidebar */
.oc-shop__sidebar {
	background: var(--oc-color-white);
}
.oc-shop__sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--oc-space-3);
}
.oc-shop__sidebar-close {
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	min-width: 40px;
	min-height: 40px;
}
.oc-shop-filter {
	padding-block: var(--oc-space-3);
	border-top: 1px solid var(--oc-color-border);
}
.oc-shop-filter h3 {
	margin: 0 0 var(--oc-space-2);
	font-size: var(--oc-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--oc-color-text-muted);
}
.oc-shop-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oc-shop-opt {
	display: flex;
	align-items: center;
	gap: var(--oc-space-2);
	padding: 6px 0;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-text);
}
.oc-shop-opt__box {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--oc-color-border);
	border-radius: 4px;
	background: var(--oc-color-white);
}
.oc-shop-opt.is-active .oc-shop-opt__box {
	background: var(--oc-color-header-blue);
	border-color: var(--oc-color-header-blue);
	box-shadow: inset 0 0 0 3px var(--oc-color-white);
}
.oc-shop-opt.is-active .oc-shop-opt__label {
	font-weight: 700;
	color: var(--oc-color-header-blue);
}
.oc-shop-opt__label {
	flex: 1;
}
.oc-shop-opt em {
	font-style: normal;
	font-size: var(--oc-text-xs);
	color: var(--oc-color-text-muted);
}
.oc-shop-opt:hover .oc-shop-opt__label {
	color: var(--oc-color-header-blue);
}
.oc-shop-opt__children ul {
	margin-left: var(--oc-space-4);
	padding-left: var(--oc-space-3);
	border-left: 2px solid var(--oc-color-border);
}
.oc-shop__apply {
	display: none;
}
.oc-shop__backdrop {
	display: none;
}
/* Mobile / tablet: filters live in a slide-in drawer */
@media (max-width: 1023px) {
	.oc-shop__sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(88vw, 340px);
		padding: var(--oc-space-3);
		overflow-y: auto;
		z-index: 130;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: var(--oc-shadow-md);
	}
	body.oc-shop-filters-open .oc-shop__sidebar {
		transform: none;
	}
	body.oc-shop-filters-open {
		overflow: hidden;
	}
	body.oc-shop-filters-open .oc-shop__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.5);
		z-index: 125;
	}
	.oc-shop__apply {
		display: block;
		position: sticky;
		bottom: 0;
		width: 100%;
		margin-top: var(--oc-space-3);
		padding: var(--oc-space-3);
		border: 0;
		border-radius: var(--oc-radius);
		background: var(--oc-color-cta-orange);
		color: var(--oc-color-white);
		font-weight: 700;
		cursor: pointer;
	}
}
@media (min-width: 640px) {
	.oc-shop .oc-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.oc-shop__layout {
		display: grid;
		grid-template-columns: 270px minmax(0, 1fr);
		gap: var(--oc-space-5);
		align-items: start;
	}
	.oc-shop__sidebar {
		position: sticky;
		top: var(--oc-space-3);
		max-height: calc(100vh - 2 * var(--oc-space-3));
		overflow-y: auto;
		padding: var(--oc-space-3) var(--oc-space-4);
		border: 1px solid var(--oc-color-border);
		border-radius: var(--oc-radius-lg);
	}
	.oc-shop__sidebar-close,
	.oc-shop__filters-btn {
		display: none;
	}
	.oc-shop .oc-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	/* "Shop" is now the first nav item: Cables' panel keeps the left-aligned placement the first category had. */
	.oc-nav__item--shop + .oc-nav__item .oc-row-nav-mega {
		left: 0;
		transform: none;
	}
}
@media (min-width: 1440px) {
	.oc-shop .oc-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ===== Shop top: attached banner + centered Brands (the "Shop by Category" tiles were removed; category filtering stays in the sidebar) ===== */
.oc-shop-hero--banner {
	padding: 0;
	background: #050b1a;
	overflow: hidden;
	line-height: 0;
}
.oc-shop-hero__img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 639px) {
	/* Keep the headline/subtext readable on phones: crop to the left (text) side instead of shrinking the whole banner. */
	.oc-shop-hero__img {
		height: 290px;
		object-fit: cover;
		object-position: left center;
	}
}
.oc-shop-brands {
	text-align: center;
}
.oc-shop-brands__title {
	text-align: center;
	margin-bottom: var(--oc-space-4);
}
.oc-shop-brands__row {
	justify-content: center;
}
.oc-shop-brand {
	--oc-brand-color: var(--oc-color-header-blue);
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 150px;
	padding: var(--oc-space-4) var(--oc-space-5);
	border: 1px solid var(--oc-color-border);
	border-top: 4px solid var(--oc-brand-color);
	border-radius: var(--oc-radius-lg);
	background: var(--oc-color-white);
	box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oc-shop-brand__name {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--oc-brand-color);
}
.oc-shop-brand:hover,
.oc-shop-brand.is-active {
	border-color: var(--oc-brand-color);
	background: var(--oc-color-bg-alt);
	transform: translateY(-2px);
	box-shadow: var(--oc-shadow-md);
}
.oc-shop-brand--ugreen { --oc-brand-color: #16a34a; }
.oc-shop-brand--unitek { --oc-brand-color: #2563eb; }
.oc-shop-brand--vention { --oc-brand-color: #7c3aed; }
.oc-shop-brand--hoco { --oc-brand-color: #dc2626; }
@media (max-width: 639px) {
	.oc-shop-brands__row {
		gap: var(--oc-space-2);
	}
	.oc-shop-brand {
		min-width: calc(50% - var(--oc-space-2));
		flex: 1 1 calc(50% - var(--oc-space-2));
		padding: var(--oc-space-3);
	}
	.oc-shop-brand__name {
		font-size: 1.05rem;
	}
}

/* WooCommerce's `.woocommerce-page img { height: auto }` outranks the single-class banner rule on phones; match its specificity. */
@media (max-width: 639px) {
	.oc-shop-hero--banner .oc-shop-hero__img {
		height: 290px;
		object-fit: cover;
		object-position: left center;
	}
}

/* ===== Quotation modal: optional customer details ===== */
.oc-quotation-customer {
	margin-block: var(--oc-space-3);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	padding: var(--oc-space-2) var(--oc-space-3);
}
.oc-quotation-customer summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--oc-text-sm);
	color: var(--oc-color-header-blue);
}
.oc-quotation-customer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--oc-space-2);
	margin-top: var(--oc-space-2);
}
.oc-quotation-customer__grid input {
	width: 100%;
	min-width: 0;
	padding: var(--oc-space-2);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-sm);
}
.oc-quotation-customer__grid .is-wide {
	grid-column: 1 / -1;
}

/* ===== Printable quotation document (hidden on screen, shown when printing / saving as PDF) ===== */
.oc-qdoc {
	display: none;
}
.qd {
	--qd-navy: #06173d;
	--qd-blue: #0b4fb3;
	--qd-line: #d5e0f2;
	--qd-soft: #f2f6fd;
	width: 210mm;
	margin: 0 auto;
	background: #fff;
	color: #0b1f4d;
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 9.5pt;
	line-height: 1.35;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.qd *,
.qd *::before,
.qd *::after {
	box-sizing: border-box;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.qd svg {
	width: 1em;
	height: 1em;
	flex: none;
}
.qd-top {
	background: linear-gradient(120deg, #06173d 0%, #0a2f73 55%, #0b4fb3 100%);
	color: #fff;
}
.qd-top__inner {
	padding: 6mm 10mm 4.5mm;
	min-height: 34mm;
}
.qd-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2mm;
}
.qd-logo {
	display: inline-block;
	background: #fff;
	border-radius: 3mm;
	padding: 2mm 4mm;
}
.qd-logo img {
	display: block;
	height: 9mm;
	width: auto;
}
.qd-brand__tag {
	font-size: 12pt;
	letter-spacing: 0.04em;
}
.qd-badges {
	display: flex;
	gap: 6mm;
	margin-top: 3.5mm;
	font-size: 7.5pt;
}
.qd-badges span {
	display: inline-flex;
	align-items: center;
	gap: 1.5mm;
}
.qd-badges svg {
	font-size: 14pt;
	color: #4aa3ff;
}
.qd-title {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: #fff;
}
.qd-title__text {
	padding: 4mm 10mm 3mm;
	flex: 1;
}
.qd-title h1 {
	display: flex;
	align-items: center;
	gap: 3mm;
	margin: 0;
	font-size: 23pt;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--qd-navy);
}
.qd-title__ico svg {
	font-size: 24pt;
	color: var(--qd-blue);
}
.qd-title__lead {
	margin: 2mm 0 0;
	font-size: 11pt;
	font-weight: 700;
}
.qd-title__sub {
	margin: 0;
	color: #4a5b80;
	font-size: 8.5pt;
}
.qd-contact {
	flex: none;
	width: 78mm;
	padding: 3.5mm 7mm 3.5mm 12mm;
	background: var(--qd-navy);
	clip-path: polygon(10mm 0, 100% 0, 100% 100%, 0 100%);
	color: #fff;
	font-size: 8pt;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2mm;
}
.qd-contact div {
	display: flex;
	align-items: center;
	gap: 2.5mm;
}
.qd-ico {
	display: inline-flex;
	color: #4aa3ff;
	font-size: 10pt;
}
.qd-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6mm;
	padding: 4mm 10mm 3mm;
}
.qd-box {
	position: relative;
	border: 1px solid var(--qd-line);
	border-radius: 3mm;
	background: var(--qd-soft);
	padding: 3mm 5mm;
}
.qd-box h2 {
	margin: 0 0 2mm;
	font-size: 12pt;
	color: var(--qd-navy);
}
.qd-ref {
	position: absolute;
	top: -3.5mm;
	right: -2mm;
	background: var(--qd-blue);
	color: #fff;
	font-weight: 800;
	font-size: 9pt;
	padding: 1.5mm 6mm;
	border-radius: 1mm;
	transform: skewX(-12deg);
}
.qd-row {
	display: grid;
	grid-template-columns: 5mm 30mm 1fr;
	gap: 2mm;
	align-items: start;
	padding: 0.7mm 0;
	font-size: 8.5pt;
}
.qd-row--plain {
	grid-template-columns: 30mm 1fr;
	font-size: 8.5pt;
}
.qd-k {
	color: #3a4d78;
}
.qd-v {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.qd-table {
	width: calc(100% - 20mm);
	margin: 2mm 10mm 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--qd-line);
	border-radius: 2mm;
	overflow: hidden;
	table-layout: fixed;
}
.qd-table th {
	background: var(--qd-blue);
	color: #fff;
	font-size: 8.5pt;
	padding: 2.5mm 2mm;
	text-align: center;
}
.qd-table th:nth-child(3) {
	text-align: left;
}
.qd-table th:nth-child(1) { width: 9mm; }
.qd-table th:nth-child(2) { width: 24mm; }
.qd-table th:nth-child(4) { width: 12mm; }
.qd-table th:nth-child(5) { width: 29mm; }
.qd-table th:nth-child(6) { width: 31mm; }
.qd-table td {
	padding: 1.8mm 2mm;
	border-top: 1px solid var(--qd-line);
	vertical-align: middle;
	font-size: 8.5pt;
}
.qd-table tr {
	break-inside: avoid;
	page-break-inside: avoid;
}
.qd-table tbody tr:nth-child(even) td {
	background: #fafcff;
}
.qd-c { text-align: center; }
.qd-r { text-align: center; font-weight: 600; }
.qd-img { text-align: center; }
.qd-img img {
	display: block;
	margin: 0 auto;
	max-width: 18mm;
	max-height: 12mm;
	object-fit: contain;
}
.qd-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12mm;
	height: 12mm;
	border-radius: 2mm;
	background: var(--qd-soft);
	border: 1px solid var(--qd-line);
	color: var(--qd-blue);
	font-weight: 800;
	font-size: 14pt;
}
.qd-name strong {
	display: block;
	font-size: 9.5pt;
	color: var(--qd-navy);
}
.qd-name span {
	display: block;
	color: #4a5b80;
	font-size: 8pt;
}
.qd-bottom {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 6mm;
	padding: 4mm 10mm 3mm;
	break-inside: avoid;
	page-break-inside: avoid;
}
.qd-terms {
	border: 1px solid var(--qd-line);
	border-radius: 3mm;
	background: var(--qd-soft);
	padding: 3mm 5mm;
}
.qd-terms h2 {
	margin: 0 0 2mm;
	font-size: 11pt;
	color: var(--qd-navy);
}
.qd-terms ol {
	margin: 0;
	padding-left: 5mm;
	list-style: decimal outside;
	font-size: 7.5pt;
	color: #3a4d78;
}
.qd-terms li {
	margin-bottom: 1.2mm;
}
.qd-totals__row {
	display: flex;
	justify-content: space-between;
	gap: 4mm;
	padding: 2.5mm 4mm;
	border: 1px solid var(--qd-line);
	border-top: 0;
	background: var(--qd-soft);
	font-size: 9.5pt;
}
.qd-totals__row:first-child {
	border-top: 1px solid var(--qd-line);
	border-radius: 2mm 2mm 0 0;
}
.qd-totals__row--grand {
	background: var(--qd-blue);
	border-color: var(--qd-blue);
	color: #fff;
	font-weight: 800;
	font-size: 12pt;
	border-radius: 0 0 2mm 2mm;
}
.qd-totals__row--grand span:last-child {
	text-align: right;
	font-size: 12pt;
}
.qd-thanks {
	margin-top: 2.5mm;
}
.qd-thanks em {
	display: block;
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 18pt;
	color: var(--qd-blue);
	line-height: 1.1;
}
.qd-thanks p {
	margin: 1mm 0 0;
	font-size: 8.5pt;
}
.qd-thanks strong {
	font-size: 8.5pt;
	color: var(--qd-blue);
}
.qd-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4mm;
	margin-top: 2mm;
	padding: 4mm 10mm;
	background: var(--qd-navy);
	color: #fff;
	font-size: 8.5pt;
	break-inside: avoid;
}
.qd-foot span {
	display: inline-flex;
	align-items: center;
	gap: 2mm;
}
.qd-foot svg {
	font-size: 11pt;
	color: #4aa3ff;
}
.qd-foot em {
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 11pt;
}

@media print {
	@page {
		size: A4;
		margin: 0;
	}
	body > *:not(#oc-quotation-doc) {
		display: none !important;
	}
	#oc-quotation-doc {
		display: block !important;
	}
	html,
	body {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}
}

/* Quotation search results: real product thumbnails; the list stays hidden until there is something to show. */
.oc-quotation-browse-list:empty {
	display: none;
}
.oc-quotation-row__img {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--oc-color-border);
	border-radius: 6px;
}
.oc-quotation-row__info {
	flex: 1;
	min-width: 0;
}
.oc-quotation-row__name {
	overflow-wrap: anywhere;
}

/* Quotation document: long real product descriptions are clamped to two lines so rows stay compact. */
.qd-name span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oc-quotation-browse-list.is-loading {
	opacity: 0.5;
}

/* Quotation modal: notes field + saved-quotation confirmation */
.oc-quotation-customer__grid textarea {
	width: 100%;
	min-width: 0;
	padding: var(--oc-space-2);
	border: 1px solid var(--oc-color-border);
	border-radius: var(--oc-radius);
	font-size: var(--oc-text-sm);
	font-family: inherit;
	resize: vertical;
}
.oc-quotation-submitted {
	margin: var(--oc-space-2) 0;
	padding: var(--oc-space-2) var(--oc-space-3);
	border-radius: var(--oc-radius);
	background: #e7f7ee;
	border: 1px solid #b7e4c7;
	color: #12633a;
	font-size: var(--oc-text-sm);
}
.oc-quotation-submitted.is-error {
	background: #fdeaea;
	border-color: #f5b9b9;
	color: #a12020;
}
.oc-quotation-submitted[hidden] {
	display: none;
}

/* ===== Footer v2: company / Quick Links / Categories / Customer Care / Stay Updated ===== */
.oc-footer__inner { padding-block: var(--oc-space-5, 32px); gap: var(--oc-space-4, 24px); }
.oc-footer__contact-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.oc-footer__contact-line svg { width: 16px; height: 16px; flex: none; color: #60a5fa; }
.oc-footer__contact-line a { color: #E2E8F0; }
.oc-footer__social { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.oc-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: #E2E8F0; transition: background .15s, border-color .15s; }
.oc-footer__social a:hover, .oc-footer__social a:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; }
.oc-footer__social svg { width: 17px; height: 17px; }
.oc-footer__col a:hover { color: #fff; text-decoration: underline; }
.oc-footer__subscribe p { color: #94A3B8; font-size: var(--oc-text-sm); margin: 0 0 10px; }
.oc-footer__form { display: flex; gap: 8px; flex-wrap: wrap; }
.oc-footer__form input[type=email] { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: var(--oc-radius, 8px); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: var(--oc-text-sm); }
.oc-footer__form input[type=email]::placeholder { color: #94A3B8; }
.oc-footer__form .oc-btn { flex: 0 0 auto; }
.oc-footer__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.oc-footer .oc-footer__form-msg { min-height: 1.2em; margin: 8px 0 0; font-size: var(--oc-text-xs); }
.oc-footer__form-msg.is-ok { color: #86efac !important; }
.oc-footer__form-msg.is-error { color: #fca5a5 !important; }
.oc-footer__fine { color: #94A3B8; font-size: 12px; }
.oc-footer__bottom-inner { justify-content: center; text-align: center; }
.oc-footer__copyright { margin: 0; }
@media (min-width: 640px) { .oc-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .oc-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; } }
@media (max-width: 639px) { .oc-footer__inner { grid-template-columns: 1fr; } .oc-footer__form .oc-btn { width: 100%; } }

/* Create Quotation: account-required notice */
.oc-quote-login-notice { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 440px); padding: 12px 16px; border-radius: 10px; background: #06173d; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(6,23,61,.35); }
.oc-quote-login-notice a { color: #fff; background: #ff6a00; padding: 6px 12px; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.oc-quote-login-notice button { background: none; border: 0; color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
/* Footer v2 refinements: social icons in a row, compact two-column mobile layout */
.oc-footer .oc-footer__social { flex-direction: row; flex-wrap: wrap; }
@media (max-width: 639px) {
	.oc-footer__inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
	.oc-footer__about, .oc-footer__subscribe { grid-column: 1 / -1; }
	.oc-footer__inner > .oc-footer__col:nth-child(3) { grid-column: 1 / -1; order: 4; }
	.oc-footer__inner > .oc-footer__col:nth-child(3) ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
	.oc-footer__about { order: 1; } .oc-footer__inner > .oc-footer__col:nth-child(2) { order: 2; } .oc-footer__inner > .oc-footer__col:nth-child(4) { order: 3; } .oc-footer__subscribe { order: 5; }
}

/* ===== Category archive pages (hero + subcategory cards; filters/grid reuse the Shop styles above) ===== */
.oc-cat-hero {
	--oc-cat-a: #0b1f4d; --oc-cat-b: #1d4ed8;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oc-space-4);
	min-height: 150px;
	padding: var(--oc-space-5);
	margin-bottom: var(--oc-space-4);
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(100deg, var(--oc-cat-a) 0%, var(--oc-cat-b) 100%);
	background-size: cover;
	background-position: center;
}
.oc-cat-hero[data-cat="chargers-power"] { --oc-cat-a: #0b1f4d; --oc-cat-b: #0f766e; }
.oc-cat-hero[data-cat="docks-hubs"] { --oc-cat-a: #1e1b4b; --oc-cat-b: #4338ca; }
.oc-cat-hero[data-cat="audio-video"] { --oc-cat-a: #3b0764; --oc-cat-b: #7e22ce; }
.oc-cat-hero[data-cat="nas"] { --oc-cat-a: #0f172a; --oc-cat-b: #334155; }
.oc-cat-hero[data-cat="storage"] { --oc-cat-a: #0c4a6e; --oc-cat-b: #0369a1; }
.oc-cat-hero[data-cat="stands-accessories"] { --oc-cat-a: #7c2d12; --oc-cat-b: #c2410c; }
.oc-cat-hero[data-cat="networking"] { --oc-cat-a: #052e16; --oc-cat-b: #15803d; }
.oc-cat-hero__text { position: relative; z-index: 1; min-width: 0; max-width: 560px; }
.oc-cat-hero h1 { margin: var(--oc-space-2) 0 var(--oc-space-1); color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
.oc-cat-hero p { margin: 0; color: rgba(255, 255, 255, .88); font-size: var(--oc-text-base); }
.oc-cat-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--oc-text-sm); color: rgba(255, 255, 255, .8); }
.oc-cat-crumbs a { color: #fff; text-decoration: none; font-weight: 600; }
.oc-cat-crumbs a:hover { text-decoration: underline; }
.oc-cat-hero__art { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.oc-cat-hero__art img { width: 120px; height: 120px; object-fit: contain; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.oc-cat-hero__art img:nth-child(1) { transform: rotate(-4deg); }
.oc-cat-hero__art img:nth-child(3) { transform: rotate(4deg); }
.oc-cat-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--oc-space-3); margin-bottom: var(--oc-space-5); }
.oc-cat-sub {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-areas: "img name" "img count";
	column-gap: var(--oc-space-3);
	align-items: center;
	padding: var(--oc-space-3);
	background: var(--oc-color-white);
	border: 1px solid var(--oc-color-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(11, 31, 77, .06);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.oc-cat-sub:hover { border-color: var(--oc-color-accent); box-shadow: 0 6px 16px rgba(11, 31, 77, .12); transform: translateY(-2px); }
.oc-cat-sub__img { grid-area: img; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--oc-color-bg-alt); border-radius: 12px; overflow: hidden; }
.oc-cat-sub__img img { width: 100%; height: 100%; object-fit: contain; }
.oc-cat-sub__name { grid-area: name; font-weight: 700; color: var(--oc-color-header-blue); line-height: 1.25; }
.oc-cat-sub__count { grid-area: count; font-size: var(--oc-text-xs); color: var(--oc-color-text-muted); }
@media (max-width: 767px) {
	.oc-cat-hero { min-height: 0; padding: var(--oc-space-4); border-radius: 14px; }
	.oc-cat-hero__art { display: none; }
	.oc-cat-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-space-2); }
	.oc-cat-sub { grid-template-columns: 44px minmax(0, 1fr); padding: var(--oc-space-2); }
	.oc-cat-sub__img { width: 44px; height: 44px; }
	.oc-cat-sub__name { font-size: var(--oc-text-sm); }
}
.oc-cat .oc-product-card { border-radius: 14px; box-shadow: 0 1px 3px rgba(11, 31, 77, .06); background: #fff; }
.oc-cat .oc-product-card__image { object-fit: contain; padding: 14px; background: #fff; }
.oc-cat .oc-shop__sidebar { border-radius: 14px; }
/* ===== Homepage redesign (hero, categories, product sliders, brands, info cards) ===== */
.oc-front-page .oc-hero {
	position: relative; overflow: hidden; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px;
	margin: 16px auto 0; padding: 48px 44px; border-radius: 22px; color: #fff;
	background:
		radial-gradient(760px 380px at 88% 15%, rgba(37, 99, 235, .6), transparent 62%),
		radial-gradient(520px 300px at 8% 105%, rgba(14, 165, 233, .28), transparent 60%),
		linear-gradient(135deg, #040a1c 0%, #0b1f4d 58%, #0a1a3f 100%);
}
.oc-front-page .oc-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 38px 38px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%); mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.oc-front-page .oc-hero__text { position: relative; z-index: 1; max-width: 560px; }
.oc-front-page .oc-hero__text h1 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.15; letter-spacing: -.01em; }
.oc-front-page .oc-hero__text p { color: rgba(255, 255, 255, .82); font-size: 1.05rem; max-width: 48ch; }
.oc-btn--ghost-light { border: 1px solid rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .08); }
.oc-btn--ghost-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.oc-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.oc-hero__chips li { padding: 5px 12px; font-size: .8rem; font-weight: 600; color: #dbeafe; border: 1px solid rgba(147, 197, 253, .35); border-radius: 999px; background: rgba(37, 99, 235, .18); }
.oc-front-page .oc-hero__visual.oc-hp-art {
	position: relative; z-index: 1; flex: 0 0 auto; height: auto; display: grid; grid-template-columns: repeat(2, 168px); gap: 14px; background: none;
}
.oc-hp-art__tile { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; padding: 12px; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(2, 8, 30, .45), 0 0 0 1px rgba(147, 197, 253, .25), 0 0 40px rgba(37, 99, 235, .35); }
.oc-hp-art__tile:nth-child(even) { transform: translateY(22px); }
.oc-hp-art__tile img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 899px) {
	.oc-front-page .oc-hero { flex-direction: column; align-items: stretch; padding: 28px 20px 26px; gap: 22px; border-radius: 16px; margin-inline: var(--oc-space-3); }
	.oc-front-page .oc-hero__visual.oc-hp-art { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.oc-hp-art__tile { width: auto; height: auto; aspect-ratio: 1; padding: 6px; border-radius: 12px; }
	.oc-hp-art__tile:nth-child(even) { transform: none; }
}
@media (min-width: 900px) and (max-width: 1100px) { .oc-front-page .oc-hero__visual.oc-hp-art { grid-template-columns: repeat(2, 130px); } .oc-hp-art__tile { width: 130px; height: 130px; } }

.oc-hp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oc-hp-cat { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; padding: 18px 12px 16px; text-align: center; text-decoration: none; background: #fff; border: 1px solid var(--oc-color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 31, 77, .06); transition: border-color .15s, box-shadow .15s, transform .15s; }
.oc-hp-cat:hover { border-color: var(--oc-color-accent); box-shadow: 0 8px 20px rgba(11, 31, 77, .12); transform: translateY(-2px); }
.oc-hp-cat__img { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; background: var(--oc-color-bg-alt); border-radius: 16px; overflow: hidden; }
.oc-hp-cat__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.oc-hp-cat__name { font-weight: 700; color: var(--oc-color-header-blue, #0b1f4d); line-height: 1.25; }
.oc-hp-cat__count { font-size: var(--oc-text-xs); color: var(--oc-color-text-muted); }
@media (min-width: 768px) { .oc-hp-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.oc-slider { position: relative; }
.oc-slider__track { position: relative; display: flex; gap: 16px; margin: 0; padding: 4px 2px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.oc-slider__track::-webkit-scrollbar { display: none; }
.oc-slider__item { flex: 0 0 calc((100% - 48px) / 4); display: flex; min-width: 0; scroll-snap-align: start; }
.oc-slider__item > .oc-product-card { width: 100%; }
.oc-slider .oc-product-card { border-radius: 14px; box-shadow: 0 1px 3px rgba(11, 31, 77, .06); background: #fff; }
.oc-slider .oc-product-card__image { object-fit: contain; padding: 12px; background: #fff; }
.oc-slider__nav { position: absolute; top: 24%; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--oc-color-border); border-radius: 50%; background: #fff; color: var(--oc-color-header-blue, #0b1f4d); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(11, 31, 77, .18); }
.oc-slider__nav:hover { background: var(--oc-color-accent); color: #fff; border-color: var(--oc-color-accent); }
.oc-slider__nav--prev { left: -14px; }
.oc-slider__nav--next { right: -14px; }
.oc-slider__nav[hidden] { display: none; }
.oc-slider--rows2 .oc-slider__track { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); }
.oc-slider--rows2 .oc-slider__nav { top: 20%; }
.oc-hp-more { margin: 4px 0 0; text-align: center; }
.oc-hp-more a { font-weight: 600; color: var(--oc-color-accent); text-decoration: none; }
.oc-hp-more a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
	.oc-slider__item { flex-basis: calc((100% - 32px) / 3); }
	.oc-slider--rows2 .oc-slider__track { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (max-width: 767px) {
	.oc-slider__track { gap: 12px; }
	.oc-slider__item { flex-basis: calc((100% - 12px) / 2); }
	.oc-slider--rows2 .oc-slider__track { grid-auto-columns: calc((100% - 12px) / 2); }
	.oc-slider__nav { display: none; }
}

.oc-hp-brands { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 16px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.oc-hp-brands::-webkit-scrollbar { display: none; }
.oc-hp-brand { flex: 1 1 0; min-width: 150px; max-width: 280px; display: flex; align-items: center; justify-content: center; height: 92px; padding: 14px 20px; background: #fff; border: 1px solid var(--oc-color-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 31, 77, .06); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.oc-hp-brand:hover { border-color: var(--oc-color-accent); box-shadow: 0 8px 20px rgba(11, 31, 77, .12); }
.oc-hp-brand img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.oc-hp-brand__word { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--oc-color-header-blue, #0b1f4d); }
@media (max-width: 767px) { .oc-hp-brands { justify-content: flex-start; } .oc-hp-brand { flex: 0 0 150px; height: 80px; } }

.oc-hp-reviews-head { padding-bottom: 0; }
.oc-info-card__icon svg { width: 24px; height: 24px; }
.oc-info-card__icon--green { color: #16a34a; }
.oc-info-card__icon--blue { color: #2563eb; }
.oc-info-card__icon--orange { color: #ea580c; }
.oc-info-card__icon--purple { color: #7c3aed; }
@media (max-width: 767px) { .oc-front-page .oc-info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .oc-front-page .oc-info-card { padding: 14px 10px; } .oc-front-page .oc-info-card__title { font-size: .9rem; } .oc-front-page .oc-info-card__body { font-size: .78rem; } }
/* Homepage tab switcher (Best Sellers / New Arrivals) */
.oc-hp-tabs { display: flex; justify-content: center; gap: 10px; margin: -4px 0 18px; flex-wrap: wrap; }
.oc-hp-tab { padding: 10px 26px; border: 2px solid var(--oc-tab, #2563eb); border-radius: 999px; background: #fff; color: var(--oc-tab, #2563eb); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.oc-hp-tab--0 { --oc-tab: #f97316; }
.oc-hp-tab--1 { --oc-tab: #2563eb; }
.oc-hp-tab:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 31, 77, .15); }
.oc-hp-tab.is-active { color: #fff; background: var(--oc-tab); box-shadow: 0 6px 16px rgba(11, 31, 77, .22); }
.oc-hp-tab--0.is-active { background: linear-gradient(135deg, #f97316, #f59e0b); }
.oc-hp-tab--1.is-active { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.oc-hp-tab:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.oc-hp-panel[hidden] { display: none; }
@media (max-width: 767px) { .oc-hp-tabs { gap: 8px; } .oc-hp-tab { padding: 9px 20px; font-size: .92rem; } }
/* ===== FAQ page ===== */
.oc-faq-hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #e6f0ff 0%, #f3f8ff 55%, #e9f2ff 100%); border-bottom: 1px solid #dbe7fb; }
.oc-faq-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, .18) 1px, transparent 1.5px), linear-gradient(115deg, transparent 60%, rgba(37, 99, 235, .08) 60.4%, transparent 61%), linear-gradient(115deg, transparent 70%, rgba(37, 99, 235, .06) 70.4%, transparent 71%); background-size: 26px 26px, auto, auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent); }
.oc-faq-hero__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--oc-container-max); margin-inline: auto; padding: 34px var(--oc-space-3) 30px; }
.oc-faq-hero__bar { display: block; width: 36px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: #f26a21; }
.oc-faq-hero__title { margin: 0 0 8px; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; color: #0b1f4d; }
.oc-faq-hero__title span { color: #2563eb; }
.oc-faq-hero__sub { margin: 0; max-width: 80ch; color: var(--oc-color-text-muted); font-size: 1rem; }
.oc-faq-hero__art { flex: 0 0 auto; width: 250px; height: auto; }
.oc-faq { padding-block: 28px var(--oc-space-6); }
.oc-faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.oc-faq__col { display: grid; gap: 12px; align-content: start; }
.oc-faq__item { background: #fff; border: 1px solid #e3ebf7; border-radius: 12px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); transition: border-color .15s, box-shadow .15s; }
.oc-faq__item:hover { border-color: #c5d6f5; }
.oc-faq__item.is-open { border-color: #2563eb; box-shadow: 0 6px 18px rgba(37, 99, 235, .14); }
.oc-faq__h { margin: 0; font-size: inherit; }
.oc-faq__q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; font-weight: 600; color: #0b1f4d; line-height: 1.35; border-radius: 12px; }
.oc-faq__q:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.oc-faq__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8f0ff; color: #2563eb; }
.oc-faq__item.is-open .oc-faq__ico { background: #2563eb; color: #fff; }
.oc-faq__text { min-width: 0; flex: 1 1 auto; }
.oc-faq__chev { flex: 0 0 auto; width: 9px; height: 9px; margin: 0 4px 3px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
.oc-faq__item.is-open .oc-faq__chev { transform: rotate(-135deg); margin-bottom: -3px; }
.oc-faq__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
.oc-faq__item.is-open .oc-faq__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.oc-faq__a-in { overflow: hidden; min-height: 0; }
.oc-faq__a-in p { margin: 0; padding: 2px 18px 18px 70px; color: var(--oc-color-text-muted); line-height: 1.6; }
@media (max-width: 899px) {
	.oc-faq__cols { grid-template-columns: 1fr; gap: 12px; }
	.oc-faq-hero__art { width: 150px; }
	.oc-faq-hero__in { padding-block: 26px 22px; }
}
@media (max-width: 599px) {
	.oc-faq-hero__art { width: 96px; align-self: flex-start; }
	.oc-faq__q { gap: 10px; padding: 11px 12px; font-size: .94rem; }
	.oc-faq__ico { width: 36px; height: 36px; }
	.oc-faq__a-in p { padding: 2px 14px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .oc-faq__a, .oc-faq__chev { transition: none; } }
/* Return & Refund Policy page (reuses the FAQ page styles above) */
.oc-policy .oc-faq__a-in ul { margin: 0; padding: 0 18px 8px 88px; list-style: none; color: var(--oc-color-text-muted); }
.oc-policy .oc-faq__a-in ul li { position: relative; margin: 0 0 4px; line-height: 1.55; }
.oc-policy .oc-faq__a-in ul li::before { content: ""; position: absolute; left: -14px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #2563eb; }
.oc-policy .oc-faq__a-in p + p, .oc-policy .oc-faq__a-in ul + p { padding-top: 0; }
.oc-policy .oc-faq__a-in p { padding-bottom: 8px; }
.oc-policy .oc-faq__a-in > :last-child { padding-bottom: 18px; }
.oc-policy .oc-policy__note { font-style: italic; }
.oc-policy .oc-faq__item.is-open { border-color: #dbe6f7; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-policy .oc-faq__item.is-open .oc-faq__ico { background: #e8f0ff; color: #2563eb; }
.oc-policy .oc-faq__q { align-items: center; }
.oc-policy .oc-faq__item .oc-faq__q { cursor: pointer; }
@media (max-width: 599px) { .oc-policy .oc-faq__a-in ul { padding-left: 32px; padding-right: 14px; } }
/* ===== Contact Us page (hero reuses .oc-faq-hero above) ===== */
.oc-ct { max-width: var(--oc-container-max); margin-inline: auto; padding: 26px var(--oc-space-3) var(--oc-space-6); }
.oc-ct h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; color: #0b1f4d; }
.oc-ct p { margin: 0; }
.oc-ct-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #e8f0ff; color: #2563eb; }
.oc-ct-ico--wa { background: #e3f8ec; color: #1fa855; }
.oc-ct-ico--sm { width: 46px; height: 46px; }
.oc-ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.oc-ct-card, .oc-ct-mini { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid #dbe6f7; border-radius: 14px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.oc-ct-card:hover, .oc-ct-mini:hover { border-color: #2563eb; box-shadow: 0 6px 18px rgba(37, 99, 235, .14); transform: translateY(-1px); }
.oc-ct-card__body { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.oc-ct-card__body strong { color: #0b1f4d; font-size: 1.05rem; }
.oc-ct-card__body span { color: var(--oc-color-text-muted); font-size: .88rem; line-height: 1.5; }
.oc-ct-arrow { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid #0b1f4d; border-top: 2px solid #0b1f4d; transform: rotate(45deg); }
.oc-ct-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 22px; }
.oc-ct-side { display: grid; gap: 16px; }
.oc-ct-info { display: flex; gap: 18px; align-items: center; padding: 22px 24px; background: #fff; border: 1px solid #dbe6f7; border-radius: 14px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-ct-info p { margin-top: 6px; color: var(--oc-color-text-muted); font-size: .9rem; line-height: 1.55; }
.oc-ct-formcard { padding: 24px; background: #fff; border: 1px solid #dbe6f7; border-radius: 14px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); scroll-margin-top: 90px; }
.oc-ct-formhead { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.oc-ct-formhead h2 { font-size: 1.15rem; }
.oc-ct-formhead p { margin-top: 3px; color: var(--oc-color-text-muted); font-size: .86rem; }
.oc-ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.oc-ct-field { display: grid; gap: 6px; min-width: 0; }
.oc-ct-field--full, .oc-ct-submit { grid-column: 1 / -1; }
.oc-ct-field label { font-size: .85rem; font-weight: 500; color: #1e293b; }
.oc-ct-field label em { color: #f26a21; font-style: normal; }
.oc-ct-field input, .oc-ct-field select, .oc-ct-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #dbe6f7; border-radius: 10px; background: #fff; font: inherit; font-size: .9rem; color: #0f172a; }
.oc-ct-field textarea { min-height: 112px; resize: vertical; }
.oc-ct-field input::placeholder, .oc-ct-field textarea::placeholder { color: #9aa8bf; }
.oc-ct-field input:focus, .oc-ct-field select:focus, .oc-ct-field textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.oc-ct-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 10px; background: #f97316; color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .15s, transform .15s; }
.oc-ct-submit:hover { background: #ea6a0c; transform: translateY(-1px); }
.oc-ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oc-ct-notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: .9rem; }
.oc-ct-notice ul { margin: 0; padding-left: 18px; }
.oc-ct-notice--ok { background: #e9f9ef; border: 1px solid #b7e8c8; color: #14633a; }
.oc-ct-notice--err { background: #fdecec; border: 1px solid #f5c2c2; color: #8a1c1c; }
.oc-ct-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 18px; align-items: center; padding: 18px 20px; background: linear-gradient(100deg, #e9f2ff, #f4f8ff); border: 1px solid #dbe6f7; border-radius: 16px; }
.oc-ct-help__intro { display: flex; gap: 16px; align-items: center; }
.oc-ct-help__intro h2 { font-size: 1.25rem; }
.oc-ct-help__intro p { margin-top: 4px; color: var(--oc-color-text-muted); font-size: .86rem; line-height: 1.5; }
.oc-ct-help__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.oc-ct-mini { padding: 14px 16px; gap: 12px; }
.oc-ct-mini .oc-ct-card__body strong { font-size: .92rem; }
.oc-ct-mini .oc-ct-card__body span { font-size: .78rem; }
@media (max-width: 1023px) {
	.oc-ct-cards { grid-template-columns: 1fr; gap: 12px; }
	.oc-ct-main { grid-template-columns: 1fr; }
	.oc-ct-help { grid-template-columns: 1fr; }
	.oc-ct-help__cards { grid-template-columns: 1fr; }
	.oc-ct-art { width: 150px; }
}
@media (max-width: 599px) {
	.oc-ct { padding-top: 18px; }
	.oc-ct-form { grid-template-columns: 1fr; }
	.oc-ct-card, .oc-ct-info { padding: 16px; gap: 14px; }
	.oc-ct-ico { width: 52px; height: 52px; }
	.oc-ct-formcard { padding: 18px; }
	.oc-ct-art { width: 96px; }
}
/* ===== Delivery & Payment Methods page (hero reuses .oc-faq-hero above) ===== */
.oc-dp { max-width: var(--oc-container-max); margin-inline: auto; padding: 24px var(--oc-space-3) var(--oc-space-6); }
.oc-dp h2, .oc-dp h3 { margin: 0; }
.oc-dp p { margin: 0; }
.oc-dp-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f0ff; color: #2563eb; }
.oc-dp-ico--lg { width: 62px; height: 62px; }
.oc-dp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.oc-dp-panel { display: grid; gap: 12px; align-content: start; padding: 18px; background: linear-gradient(180deg, #f6faff, #fff); border: 1px solid #dbe6f7; border-radius: 16px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-dp-head { display: flex; gap: 14px; align-items: center; margin-bottom: 2px; }
.oc-dp-head h2 { font-size: 1.35rem; color: #2563eb; line-height: 1.2; }
.oc-dp-head p { margin-top: 4px; color: var(--oc-color-text-muted); font-size: .86rem; }
.oc-dp-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid #dbe6f7; border-radius: 12px; }
.oc-dp-item__body { min-width: 0; flex: 1 1 auto; }
.oc-dp-item h3 { font-size: 1.02rem; color: #0b1f4d; margin-bottom: 6px; }
.oc-dp-item ul { margin: 0; padding: 0; list-style: none; color: var(--oc-color-text-muted); font-size: .88rem; line-height: 1.55; }
.oc-dp-item li { position: relative; padding-left: 14px; margin-bottom: 3px; }
.oc-dp-item li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #2563eb; }
.oc-dp-item li strong, .oc-dp-pill strong { color: #0b1f4d; }
.oc-dp-pill { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 8px; background: #e8f0ff; color: #0b1f4d; font-size: .82rem; }
.oc-dp-arrow { flex: 0 0 auto; width: 8px; height: 8px; margin: 6px 4px 0 0; border-right: 2px solid #2563eb; border-top: 2px solid #2563eb; transform: rotate(45deg); }
.oc-dp-notes { margin-bottom: 20px; padding: 20px 24px 22px; background: linear-gradient(180deg, #eef5ff, #f6faff); border: 1px solid #dbe6f7; border-radius: 16px; }
.oc-dp-notes h2 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-size: 1.25rem; color: #2563eb; text-align: center; }
.oc-dp-notes__i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #2563eb; color: #fff; }
.oc-dp-notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-dp-notes__col { margin: 0; padding: 0 24px; list-style: none; display: grid; gap: 14px; align-content: start; }
.oc-dp-notes__col + .oc-dp-notes__col { border-left: 1px solid #d3e1f6; }
.oc-dp-notes__col:first-child { padding-left: 0; }
.oc-dp-notes__col:last-child { padding-right: 0; }
.oc-dp-notes__col li { display: flex; gap: 14px; align-items: center; color: var(--oc-color-text-muted); font-size: .86rem; line-height: 1.5; }
.oc-dp-notes__ico { flex: 0 0 auto; display: inline-flex; width: 30px; justify-content: center; color: #2563eb; }
.oc-dp-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px; background: linear-gradient(100deg, #e9f2ff, #f4f8ff); border: 1px solid #dbe6f7; border-radius: 16px; }
.oc-dp-cta__text { display: flex; gap: 16px; align-items: center; min-width: 0; }
.oc-dp-cta h2 { font-size: 1.25rem; color: #0b1f4d; }
.oc-dp-cta p { margin-top: 3px; color: var(--oc-color-text-muted); font-size: .86rem; }
.oc-dp-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border-radius: 999px; background: #f97316; color: #fff; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.oc-dp-btn:hover { background: #ea6a0c; color: #fff; transform: translateY(-1px); }
@media (max-width: 1023px) {
	.oc-dp-cols { grid-template-columns: 1fr; }
	.oc-dp-notes__grid { grid-template-columns: 1fr; gap: 14px; }
	.oc-dp-notes__col, .oc-dp-notes__col:first-child, .oc-dp-notes__col:last-child { padding: 0; }
	.oc-dp-notes__col + .oc-dp-notes__col { border-left: 0; padding-top: 14px; border-top: 1px solid #d3e1f6; }
	.oc-dp-art { width: 170px; }
}
@media (max-width: 599px) {
	.oc-dp { padding-top: 16px; }
	.oc-dp-panel { padding: 14px; }
	.oc-dp-item { padding: 14px; gap: 12px; }
	.oc-dp-ico { width: 48px; height: 48px; }
	.oc-dp-ico--lg { width: 54px; height: 54px; }
	.oc-dp-head h2 { font-size: 1.2rem; }
	.oc-dp-notes { padding: 16px; }
	.oc-dp-cta { flex-direction: column; align-items: stretch; text-align: left; }
	.oc-dp-btn { justify-content: center; }
	.oc-dp-art { width: 110px; }
}
/* ===== Order Tracking page (hero reuses .oc-faq-hero above) ===== */
.oc-ot { max-width: var(--oc-container-max); margin-inline: auto; padding: 24px var(--oc-space-3) var(--oc-space-6); display: grid; gap: 20px; }
.oc-ot h2, .oc-ot h3 { margin: 0; }
.oc-ot p { margin: 0; }
.oc-ot-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f0ff; color: #2563eb; }
.oc-ot-ico--lg { width: 68px; height: 68px; }
.oc-ot-card { padding: 24px 28px; background: #fff; border: 1px solid #dbe6f7; border-radius: 16px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-ot-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.oc-ot-card__head h2 { font-size: 1.35rem; color: #0b1f4d; }
.oc-ot-form { display: flex; align-items: flex-end; gap: 16px; }
.oc-ot-field { flex: 1 1 auto; display: grid; gap: 6px; min-width: 0; }
.oc-ot-field label { font-size: .88rem; font-weight: 500; color: #1e293b; }
.oc-ot-field input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid #dbe6f7; border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; color: #0f172a; }
.oc-ot-field input::placeholder { color: #9aa8bf; }
.oc-ot-field input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.oc-ot-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border: 0; border-radius: 10px; background: #f97316; color: #fff; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.oc-ot-btn:hover { background: #ea6a0c; color: #fff; transform: translateY(-1px); }
.oc-ot-btn--sm { padding: 11px 24px; border-radius: 999px; font-size: .92rem; }
.oc-ot-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f5c2c2; color: #8a1c1c; font-size: .92rem; }
.oc-ot-status { padding: 24px 28px 28px; background: linear-gradient(180deg, #f3f8ff, #fff); border: 1px solid #dbe6f7; border-radius: 16px; scroll-margin-top: 90px; }
.oc-ot-status__head { text-align: center; margin-bottom: 18px; }
.oc-ot-status__head h2 { font-size: 1.4rem; color: #2563eb; }
.oc-ot-status__head p { margin-top: 4px; color: var(--oc-color-text-muted); font-size: .92rem; }
.oc-ot-hint { text-align: center; margin-bottom: 18px; color: var(--oc-color-text-muted); font-size: .92rem; }
.oc-ot-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 auto 26px; padding: 14px 18px; background: #fff; border: 1px solid #dbe6f7; border-radius: 12px; }
.oc-ot-result__no { font-weight: 700; color: #0b1f4d; }
.oc-ot-result__chip { padding: 5px 14px; border-radius: 999px; background: #2563eb; color: #fff; font-weight: 700; font-size: .85rem; }
.oc-ot-result.is-bad .oc-ot-result__chip { background: #dc2626; }
.oc-ot-result__msg { flex-basis: 100%; text-align: center; color: var(--oc-color-text-muted); font-size: .92rem; line-height: 1.55; }
.oc-ot-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.oc-ot-step { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 6px; text-align: center; }
.oc-ot-step::before { content: ""; position: absolute; top: 32px; left: -50%; width: 100%; height: 4px; background: #d3e1f6; z-index: 0; }
.oc-ot-step:first-child::before { display: none; }
.oc-ot-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #f1f5f9; color: #94a3b8; border: 3px solid #fff; box-shadow: 0 0 0 2px #d3e1f6; }
.oc-ot-step__label { font-weight: 600; font-size: .92rem; color: #64748b; line-height: 1.3; }
.oc-ot-step.is-done::before, .oc-ot-step.is-current::before { background: #2563eb; }
.oc-ot-step.is-done .oc-ot-dot { background: #2563eb; color: #fff; box-shadow: 0 0 0 2px #2563eb; }
.oc-ot-step.is-done .oc-ot-step__label { color: #0b1f4d; }
.oc-ot-step.is-current .oc-ot-dot { background: #f97316; color: #fff; box-shadow: 0 0 0 2px #f97316, 0 0 0 7px rgba(249, 115, 22, .2); }
.oc-ot-step.is-current .oc-ot-step__label { color: #c2410c; }
.oc-ot-status.is-bad .oc-ot-step.is-upcoming { opacity: .55; }
.oc-ot-ship { padding: 8px 0 0; }
.oc-ot-ship__head { text-align: center; margin-bottom: 16px; }
.oc-ot-ship__head h2 { font-size: 1.4rem; color: #0b1f4d; }
.oc-ot-ship__head p { margin-top: 4px; color: var(--oc-color-text-muted); font-size: .92rem; }
.oc-ot-couriers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.oc-ot-courier { display: flex; align-items: center; gap: 20px; padding: 26px 28px; background: #fff; border: 1px solid #dbe6f7; border-radius: 16px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-ot-courier__body { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.oc-ot-courier h3 { font-size: 1.2rem; color: #0b1f4d; }
.oc-ot-courier p { color: var(--oc-color-text-muted); font-size: .92rem; line-height: 1.5; }
.oc-ot-help { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; background: linear-gradient(100deg, #e9f2ff, #f4f8ff); border: 1px solid #dbe6f7; border-radius: 16px; }
.oc-ot-help__text { display: flex; gap: 16px; align-items: center; min-width: 0; }
.oc-ot-help h2 { font-size: 1.25rem; color: #0b1f4d; }
.oc-ot-help p { margin-top: 3px; color: var(--oc-color-text-muted); font-size: .9rem; }
.oc-ot-help .oc-ot-btn { border-radius: 999px; padding: 12px 28px; }
@media (max-width: 899px) {
	.oc-ot-art { width: 170px; }
	.oc-ot-couriers { grid-template-columns: 1fr; }
	.oc-ot-steps { grid-template-columns: 1fr; gap: 0; max-width: 360px; margin-inline: auto; }
	.oc-ot-step { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; gap: 16px; padding: 0 0 22px; text-align: left; }
	.oc-ot-step:last-child { padding-bottom: 0; }
	.oc-ot-step::before { top: -50%; left: 32px; width: 4px; height: 100%; transform: translateX(-2px); }
}
@media (max-width: 599px) {
	.oc-ot { padding-top: 16px; gap: 16px; }
	.oc-ot-card, .oc-ot-status { padding: 18px 16px 20px; }
	.oc-ot-form { flex-direction: column; align-items: stretch; }
	.oc-ot-courier { padding: 18px; gap: 14px; }
	.oc-ot-ico--lg { width: 56px; height: 56px; }
	.oc-ot-help { flex-direction: column; align-items: stretch; }
	.oc-ot-help .oc-ot-btn { width: 100%; }
	.oc-ot-art { width: 110px; }
}
/* ===== Blog (index + single article); hero reuses .oc-faq-hero ===== */
.oc-bl-hero .oc-faq-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 6px; }
.oc-bl-badge { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 6px; background: #f97316; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .06em; }
.oc-bl-hero__sub { margin: 0 0 8px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; color: #0b1f4d; line-height: 1.3; }
.oc-bl-hero .oc-faq-hero__sub { max-width: 60ch; }
.oc-bl-chips { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.oc-bl-chips li { display: inline-flex; align-items: center; gap: 10px; color: #0b1f4d; font-size: .88rem; font-weight: 500; }
.oc-bl-chips svg { color: #2563eb; }
.oc-bl-art { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 150px); gap: 14px; }
.oc-bl-art__tile { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(2, 8, 30, .22), 0 0 0 1px rgba(147, 197, 253, .35); }
.oc-bl-art__tile:nth-child(even) { transform: translateY(18px); }
.oc-bl-art__tile img { width: 100%; height: 100%; object-fit: contain; }
.oc-bl { max-width: var(--oc-container-max); margin-inline: auto; padding: 28px var(--oc-space-3) var(--oc-space-6); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.oc-bl-main { min-width: 0; display: grid; gap: 26px; }
.oc-bl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe6f7; border-radius: 14px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.oc-bl-card:hover { box-shadow: 0 8px 22px rgba(11, 31, 77, .12); transform: translateY(-2px); }
.oc-bl-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #eef5ff, #f8fbff); overflow: hidden; }
.oc-bl-card__media > img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.oc-bl-card__media.is-collage { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; padding: 16px; aspect-ratio: auto; min-height: 280px; }
.oc-bl-card__media.is-collage > span { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 6px 18px rgba(11, 31, 77, .1); }
.oc-bl-card__media.is-collage > span img { width: 100%; height: 100%; object-fit: contain; max-height: 250px; }
.oc-bl-pill { position: absolute; left: 14px; top: 14px; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: .74rem; font-weight: 700; z-index: 1; }
.oc-bl-pill--static { position: static; display: inline-block; margin: 0 0 12px; }
.oc-bl-card__body { display: grid; gap: 8px; padding: 18px 20px 20px; align-content: start; flex: 1 1 auto; }
.oc-bl-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--oc-color-text-muted); font-size: .8rem; }
.oc-bl-meta span { display: inline-flex; align-items: center; gap: 6px; }
.oc-bl-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.oc-bl-card__title a { color: #0b1f4d; text-decoration: none; }
.oc-bl-card__title a:hover { color: #2563eb; }
.oc-bl-card__excerpt { margin: 0; color: var(--oc-color-text-muted); font-size: .88rem; line-height: 1.55; }
.oc-bl-card--featured .oc-bl-card__title { font-size: 1.4rem; }
.oc-bl-card--featured .oc-bl-card__excerpt { font-size: .95rem; }
.oc-bl-more { justify-self: start; display: inline-flex; gap: 8px; margin-top: 4px; font-weight: 700; color: #2563eb; text-decoration: none; }
.oc-bl-more:hover { text-decoration: underline; }
.oc-bl-sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oc-bl-sechead h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.35rem; color: #0b1f4d; }
.oc-bl-sechead h2 svg { color: #2563eb; }
.oc-bl-sechead a { font-weight: 600; font-size: .88rem; color: #2563eb; text-decoration: none; }
.oc-bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.oc-bl-grid .oc-bl-card__media { aspect-ratio: 4 / 3; }
.oc-bl-empty { padding: 28px; text-align: center; background: #f6faff; border: 1px dashed #c5d6f5; border-radius: 12px; color: var(--oc-color-text-muted); }
.oc-bl-pager { display: flex; gap: 8px; justify-content: center; }
.oc-bl-pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border: 1px solid #dbe6f7; border-radius: 10px; text-decoration: none; color: #0b1f4d; font-weight: 600; }
.oc-bl-pager a.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.oc-bl-side { display: grid; gap: 20px; align-content: start; }
.oc-bl-box { padding: 20px; background: linear-gradient(180deg, #f6faff, #fff); border: 1px solid #dbe6f7; border-radius: 16px; }
.oc-bl-box h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.2rem; color: #0b1f4d; }
.oc-bl-box h2 svg { color: #2563eb; }
.oc-bl-cats, .oc-bl-recent { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.oc-bl-cats a { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; text-decoration: none; color: #0b1f4d; font-size: .9rem; transition: background .15s; }
.oc-bl-cats a:hover, .oc-bl-cats a.is-active { background: #e8f0ff; }
.oc-bl-cats__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #dbe6f7; }
.oc-bl-cats__name { flex: 1 1 auto; font-weight: 500; }
.oc-bl-cats__count { min-width: 28px; padding: 2px 8px; border-radius: 8px; background: #eef2f9; text-align: center; font-size: .78rem; color: var(--oc-color-text-muted); }
.oc-bl-cats__arrow { width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-top: 2px solid #94a3b8; transform: rotate(45deg); }
.oc-bl-recent a { display: flex; gap: 12px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; border-bottom: 1px solid #e6eefb; }
.oc-bl-recent li:last-child a { border-bottom: 0; }
.oc-bl-recent__img { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #dbe6f7; }
.oc-bl-recent__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.oc-bl-recent__t { display: grid; gap: 4px; min-width: 0; }
.oc-bl-recent__t strong { font-size: .86rem; color: #0b1f4d; line-height: 1.35; }
.oc-bl-recent__t em { font-style: normal; font-size: .75rem; color: var(--oc-color-text-muted); }
.oc-bl-recent a:hover strong { color: #2563eb; }
.oc-bl-news { padding: 22px; border-radius: 16px; color: #fff; background: radial-gradient(400px 200px at 90% 0%, rgba(59, 130, 246, .5), transparent 60%), linear-gradient(135deg, #0b1f4d, #12307a); }
.oc-bl-news__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.oc-bl-news__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #1d6fe0; }
.oc-bl-news h2 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; color: #fff; }
.oc-bl-news h2 span { color: #f97316; }
.oc-bl-news p { margin: 0; font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.oc-bl-news form { display: grid; gap: 10px; }
.oc-bl-news input[type=email] { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 8px; font: inherit; }
.oc-bl-news button { padding: 12px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.oc-bl-news button:hover { background: #1d4ed8; }
.oc-bl-news small { display: block; margin-top: 10px; text-align: center; font-size: .75rem; color: rgba(255, 255, 255, .7); }
.oc-bl-news__msg { min-height: 1.2em; margin-top: 8px !important; font-size: .82rem !important; }
.oc-bl-news__msg.is-ok { color: #86efac !important; }
.oc-bl-news__msg.is-error { color: #fecaca !important; }
.oc-bl-hero--article .oc-faq-hero__in { padding-block: 30px 28px; }
.oc-bl-single__title { margin: 0 0 12px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; color: #0b1f4d; }
.oc-bl-crumbs { margin-bottom: 14px; color: var(--oc-color-text-muted) !important; }
.oc-bl-crumbs a { color: #2563eb !important; }
.oc-bl-articlewrap { max-width: 920px; margin-inline: auto; padding: 28px var(--oc-space-3) var(--oc-space-5); display: grid; gap: 24px; }
.oc-bl-collage { border-radius: 16px; border: 1px solid #dbe6f7; }
.oc-bl-article { background: #fff; border: 1px solid #dbe6f7; border-radius: 16px; padding: 28px 32px; box-shadow: 0 1px 4px rgba(11, 31, 77, .06); }
.oc-bl-content { color: #1e293b; font-size: 1.02rem; line-height: 1.75; }
.oc-bl-content h2 { margin: 1.6em 0 .5em; font-size: 1.45rem; color: #0b1f4d; line-height: 1.3; }
.oc-bl-content h2:first-child { margin-top: 0; }
.oc-bl-content p { margin: 0 0 1em; }
.oc-bl-content ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.oc-bl-content li { margin-bottom: .45em; }
.oc-bl-content a { color: #2563eb; font-weight: 500; }
.oc-bl-products h2, .oc-bl-morewrap h2 { margin: 0 0 14px; font-size: 1.35rem; color: #0b1f4d; }
.oc-bl-products__grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.oc-bl-products .oc-product-card__image { object-fit: contain; padding: 12px; background: #fff; }
.oc-bl-back a { font-weight: 600; color: #2563eb; text-decoration: none; }
.oc-bl-morewrap { background: #f6faff; border-top: 1px solid #dbe6f7; }
.oc-bl-morewrap__in { max-width: var(--oc-container-max); margin-inline: auto; padding: 30px var(--oc-space-3) var(--oc-space-6); }
@media (max-width: 1023px) {
	.oc-bl { grid-template-columns: 1fr; }
	.oc-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oc-bl-art { grid-template-columns: repeat(2, 110px); }
	.oc-bl-art__tile { width: 110px; height: 110px; }
}
@media (max-width: 767px) {
	.oc-bl-art { display: none; }
	.oc-bl-card__media.is-collage { grid-template-columns: 1fr 1fr; min-height: 0; }
	.oc-bl-card__media.is-collage > span:nth-child(3) { display: none; }
	.oc-bl-article { padding: 20px 18px; }
}
@media (max-width: 599px) {
	.oc-bl-grid { grid-template-columns: 1fr; }
	.oc-bl-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.oc-bl-chips { gap: 8px 18px; }
	.oc-bl { padding-top: 20px; }
}
/* Footer brand: white logo image + tagline lines (replaces the text name, phone and email lines) */
.oc-footer__logo { display: block; width: 210px; max-width: 100%; margin-bottom: 12px; line-height: 0; }
.oc-footer__logo img { display: block; width: 100%; height: auto; }
.oc-footer__tagline { font-weight: 600; color: #fff; }
/* Footer: full-colour logo on a white plate; Subscribe button and social icons side by side */
.oc-footer__logo { display: block; width: 210px; max-width: 100%; margin-bottom: 14px; line-height: 0; }
.oc-footer__logo img { display: block; width: 100%; height: auto; }
.oc-footer__subrow { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; }
.oc-footer__subrow .oc-footer__social { margin: 0; gap: 6px; flex-wrap: nowrap; }
.oc-footer__subrow .oc-footer__social a { width: 30px; height: 30px; }
.oc-footer__subrow .oc-footer__social svg { width: 15px; height: 15px; }
.oc-footer__form .oc-footer__subrow button { width: auto; flex: 0 0 auto; }
/* Footer social icons: recognisable brand colours */
.oc-footer .oc-soc { border: 0; color: #fff; transition: transform .15s, filter .15s; }
.oc-footer .oc-soc:hover, .oc-footer .oc-soc:focus-visible { transform: translateY(-2px); filter: brightness(1.1); border: 0; }
.oc-footer .oc-soc--facebook { background: #1877f2; }
.oc-footer .oc-soc--facebook:hover, .oc-footer .oc-soc--facebook:focus-visible { background: #1877f2; }
.oc-footer .oc-soc--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.oc-footer .oc-soc--instagram:hover, .oc-footer .oc-soc--instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.oc-footer .oc-soc--tiktok { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.oc-footer .oc-soc--tiktok:hover, .oc-footer .oc-soc--tiktok:focus-visible { background: #000; }
.oc-footer .oc-soc--tiktok svg { filter: drop-shadow(-1.2px -1.2px 0 #25f4ee) drop-shadow(1.2px 1.2px 0 #fe2c55); }
.oc-footer .oc-soc--email { background: #2563eb; }
.oc-footer .oc-soc--email:hover, .oc-footer .oc-soc--email:focus-visible { background: #2563eb; }
/* Homepage: tabs section without its heading - tighter spacing around the Best Sellers / New Arrivals buttons */
.oc-hp-products--new { padding-top: 0; margin-top: -22px; }
.oc-hp-products--new .oc-hp-tabs { margin: 0 0 8px; }
/* Homepage "Our Featured Brands": dark band + four brand cards */
.oc-hp-bb { margin-top: 12px; padding: 46px 0 54px; background: radial-gradient(900px 320px at 50% -8%, rgba(37, 99, 235, .38), transparent 62%), linear-gradient(180deg, #0b3a6f 0%, #092c58 100%); }
.oc-hp-bb__in { max-width: var(--oc-container-max); margin-inline: auto; padding-inline: var(--oc-space-3); }
.oc-hp-bb__head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 32px; }
.oc-hp-bb__title { margin: 0; padding: 10px 40px; border-radius: 16px; border: 2px solid #49c2ff; background: linear-gradient(180deg, #1e8bff, #0d6df0); box-shadow: 0 0 20px rgba(30, 144, 255, .55); color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; line-height: 1.25; text-align: center; }
.oc-hp-bb__title strong { font-weight: 700; }
.oc-hp-bb__line { flex: 1 1 60px; max-width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #2f8dff); }
.oc-hp-bb__line--r { background: linear-gradient(270deg, transparent, #2f8dff); }
.oc-hp-bb__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.oc-hp-bb__card { --bc: #2b9bf4; --bc-glow: rgba(43, 155, 244, .35); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 206px; padding: 24px 66px 24px 26px; background: linear-gradient(180deg, #ffffff, #eef4fc); border: 2px solid var(--bc); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 18px var(--bc-glow); transition: transform .18s, box-shadow .18s; }
.oc-hp-bb__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 24px var(--bc-glow); }
.oc-hp-bb__card::before { content: ""; position: absolute; left: 0; top: 0; width: 88px; height: 76px; background: var(--bc); clip-path: polygon(0 0, 100% 0, 0 100%); }
.oc-hp-bb__card--ugreen { --bc: #14b26a; --bc-glow: rgba(20, 178, 106, .3); }
.oc-hp-bb__card--unitek { --bc: #ec1c3a; --bc-glow: rgba(236, 28, 58, .45); }
.oc-hp-bb__card--vention { --bc: #2b9bf4; --bc-glow: rgba(43, 155, 244, .4); }
.oc-hp-bb__card--hoco { --bc: #3c4655; --bc-glow: rgba(60, 70, 85, .25); }
.oc-hp-bb__logo { position: relative; display: block; width: auto; height: auto; max-width: 100%; max-height: 56px; }
.oc-hp-bb__tag { position: relative; margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.35; color: #1b2738; text-align: center; }
.oc-hp-bb__link { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.oc-hp-bb__go { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--bc); background: #fff; color: var(--bc); transition: transform .15s, background .15s, color .15s; }
.oc-hp-bb__card--unitek .oc-hp-bb__go, .oc-hp-bb__card--vention .oc-hp-bb__go { background: var(--bc); color: #fff; }
.oc-hp-bb__link:hover .oc-hp-bb__go, .oc-hp-bb__link:focus-visible .oc-hp-bb__go { transform: scale(1.1); }
.oc-hp-bb__link:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
@media (max-width: 1023px) { .oc-hp-bb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
	.oc-hp-bb { padding: 34px 0 40px; }
	.oc-hp-bb__grid { grid-template-columns: 1fr; gap: 14px; }
	.oc-hp-bb__card { min-height: 176px; padding: 22px 62px 22px 22px; }
	.oc-hp-bb__title { padding: 8px 24px; }
	.oc-hp-bb__line { max-width: 40px; }
}
/* Homepage: compact vertical rhythm around Featured Picks / Featured Brands / Smarter Storage */
.oc-hp-products--featured { padding-top: 28px; padding-bottom: 24px; }
.oc-hp-bb { margin-top: 0; }
.oc-hp-products--nas { padding-top: 26px; }
/* ===== Brand pages: contained layout + premium brand banner ===== */
body.tax-product_brand .site-main { max-width: var(--oc-container-max); margin-inline: auto; padding: 16px var(--oc-space-3) 56px; box-sizing: border-box; }
body.tax-product_brand .woocommerce-breadcrumb { margin: 0 0 14px; font-size: .88rem; color: var(--oc-color-text-muted); }
body.tax-product_brand .woocommerce-products-header { margin: 24px 0 6px; }
body.tax-product_brand .term-description { max-width: 120ch; color: var(--oc-color-text-muted); font-size: .95rem; line-height: 1.7; }
body.tax-product_brand .term-description p { margin: 0 0 .8em; }
.oc-bb { --bb-dark: #0a2f45; --bb-mid: #14566f; --bb-accent: #22d081; position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 340px; padding: 36px 40px; border-radius: 22px; overflow: hidden; color: #fff; background: radial-gradient(520px 260px at 62% 12%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(100deg, var(--bb-dark) 0%, var(--bb-dark) 28%, var(--bb-mid) 46%, #dfe8f3 70%, #f1f5fa 100%); box-shadow: 0 10px 30px rgba(11, 31, 77, .18); }
.oc-bb__text { position: relative; z-index: 1; flex: 0 1 46%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.oc-bb__logo { margin: 0 0 16px; line-height: 0; font-size: 2rem; font-weight: 800; color: #fff; }
.oc-bb__logo img { display: block; width: auto; height: auto; max-width: min(100%, 280px); max-height: 66px; }
.oc-bb__tag { margin: 0; font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.25; }
.oc-bb__tag span { color: var(--bb-accent); }
.oc-bb__rule { display: block; width: 46px; height: 2px; margin: 16px 0; background: var(--bb-accent); opacity: .8; }
.oc-bb__desc { margin: 0 0 22px; max-width: 42ch; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.oc-bb__features { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 0; padding: 0; list-style: none; }
.oc-bb__features li { display: grid; justify-items: center; gap: 8px; width: 78px; text-align: center; font-size: .72rem; font-weight: 600; line-height: 1.25; color: #fff; }
.oc-bb__ico { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--bb-accent); color: var(--bb-accent); background: rgba(255, 255, 255, .06); }
.oc-bb__art { position: relative; flex: 1 1 54%; min-width: 0; align-self: center; aspect-ratio: 2 / 1; }
.oc-bb__art::before { content: ""; position: absolute; inset: -16% -3% -8% -3%; background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6) 58%, rgba(255, 255, 255, 0)); pointer-events: none; }
.oc-bb__art::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 16%; background: radial-gradient(closest-side, rgba(11, 31, 77, .2), rgba(11, 31, 77, 0)); pointer-events: none; }
.oc-bb__tile { position: absolute; display: block; z-index: 2; aspect-ratio: 1; mix-blend-mode: multiply; }
.oc-bb__tile img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.oc-bb__tile::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 9%; z-index: -1; background: radial-gradient(closest-side, rgba(11, 31, 77, .38), rgba(11, 31, 77, 0)); }
.oc-bb__tile--1 { left: 35%; bottom: 3%; width: 31%; z-index: 4; }
.oc-bb__tile--2 { left: 6%; bottom: 5%; width: 27%; z-index: 3; }
.oc-bb__tile--3 { left: 65%; bottom: 5%; width: 27%; z-index: 3; }
.oc-bb__tile--4 { left: 4%; bottom: 47%; width: 21%; z-index: 2; }
.oc-bb__tile--5 { left: 27%; bottom: 53%; width: 20%; z-index: 2; }
.oc-bb__tile--6 { left: 52%; bottom: 52%; width: 20%; z-index: 2; }
.oc-bb__tile--7 { left: 75%; bottom: 46%; width: 21%; z-index: 2; }
.oc-bb__art--few .oc-bb__tile--4 { left: 17%; bottom: 46%; width: 24%; }
.oc-bb__art--few .oc-bb__tile--5 { left: 58%; bottom: 46%; width: 24%; }
@media (max-width: 1023px) {
	.oc-bb { flex-direction: column; min-height: 0; padding: 28px 26px 30px; background: linear-gradient(180deg, var(--bb-dark) 0%, var(--bb-mid) 56%, #dfe8f3 100%); }
	.oc-bb__text { flex-basis: auto; }
	.oc-bb__art { flex: 0 0 auto; width: 100%; margin-top: 8px; }
}
@media (max-width: 599px) {
	body.tax-product_brand .site-main { padding-top: 12px; }
	.oc-bb { border-radius: 16px; padding: 22px 18px 24px; gap: 18px; }
	.oc-bb__logo img { max-height: 54px; }
	.oc-bb__features { gap: 12px; }
	.oc-bb__features li { width: 72px; }
	.oc-bb__art { aspect-ratio: 5 / 3; }
}

/* Brand archive: slightly more compact product cards (~11% shorter) so the second row peeks above the fold.
   Image area 1:1 -> 6:5 with contain (nothing is cropped); body padding trimmed a few px. Phones are untouched. */
@media (min-width: 640px) {
	body.tax-product_brand .oc-product-card__image { aspect-ratio: 6 / 5; object-fit: contain; background: #fff; }
	body.tax-product_brand .oc-product-card__body { padding: 12px var(--oc-space-3) 14px; }
}