/* Obuvki699.com theme — aligned to the approved Stitch design system. Loaded last (see header.twig) so it always wins the cascade. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;700&display=swap');

:root {
	--ob-black: #000000;
	--ob-navy: #12233F;
	--ob-red: #D42027;
	--ob-white: #FFFFFF;
	--ob-bg: #FBF9F8;
	--ob-bg-alt: #EEEEEE;
	--ob-surface: #F0EDED;
	--ob-outline: #73777D;
	--ob-outline-variant: #E4E2E1;
	--ob-success: #28A745;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--ob-bg);
	color: var(--ob-black);
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--ob-black);
}
a {
	color: var(--ob-black);
}
a:hover, a:focus {
	color: var(--ob-red);
}
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	line-height: 1;
}
.ob-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Top announcement strip */
.ob-announce {
	background: var(--ob-navy);
	color: var(--ob-white);
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 6px 10px;
}

/* ===== Header ===== */
.ob-header {
	background: var(--ob-white);
	border-bottom: 1px solid var(--ob-outline-variant);
	position: sticky;
	top: 0;
	z-index: 1000;
}
.ob-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.ob-header-left {
	display: flex;
	align-items: center;
	gap: 40px;
	min-width: 0;
}
.ob-logo {
	flex-shrink: 0;
}
.ob-logo img {
	height: 36px;
	width: auto;
	display: block;
}
.ob-logo a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--ob-black);
	text-decoration: none;
}
.ob-header-right {
	display: flex;
	align-items: normal;
	gap: 8px;
}
.ob-bottom-nav {
	display: none;
}
@media (max-width: 991px) {
	/* Matches the existing 991px breakpoint that .ob-icon-btn.ob-search-toggle and
	   .ob-menu-toggle already used before this — those two buttons just moved down
	   here, everything else (search/currency/account/cart) in .ob-header-right gets
	   hidden outright at this width, since the bottom nav is now the only way to
	   reach them on mobile/tablet. */
	.ob-header-right {
		display: none;
	}
	/* .ob-header-search and .ob-header-right are both hidden above — .ob-header-left
	   (logo + the nav menu panel, itself hidden until toggled open) is the only
	   visible flex child left in .ob-header-inner, so it sits at flex-start by
	   default instead of looking centered. Center it explicitly. */
	.ob-header-inner {
		justify-content: center;
	}
	.ob-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		height: 56px;
		background: var(--ob-white);
		border-top: 1px solid var(--ob-outline-variant);
		box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
	}
	.ob-bottom-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		border: none;
		background: transparent;
		color: var(--ob-navy);
		text-decoration: none;
		cursor: pointer;
	}
	.ob-bottom-nav-item .material-symbols-outlined {
		font-size: 22px;
	}
	.ob-bottom-nav-label {
		font-size: 9px;
		font-weight: 600;
	}
	.ob-bottom-nav-icon-wrap {
		position: relative;
		display: inline-flex;
	}
	.ob-bottom-nav-icon-wrap .ob-cart-badge {
		position: absolute;
		top: -4px;
		right: -8px;
	}
	/* Page content (and the sticky buy bar, see Task 3) needs to clear the bar. */
	body {
		padding-bottom: 56px;
	}
}
.ob-header-search {
	margin-left: auto;
}
#search {
	display: flex;
	align-items: center;
	background: var(--ob-surface);
	border: 1px solid var(--ob-outline-variant);
	border-radius: 999px;
	padding: 2px 4px 2px 14px;
	width: 220px;
}
#search input.form-control {
	border: none;
	background: transparent;
	box-shadow: none;
	height: 32px;
	padding: 0;
	font-size: 13px;
}
#search input.form-control:focus {
	border: none;
	box-shadow: none;
}
#search .input-group-btn {
	display: flex;
	align-items: center;
}
#search .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--ob-black);
	height: 32px;
	width: 32px;
	padding: 0;
	transition: background-color 150ms ease;
}
#search .btn:hover, #search .btn:focus {
	background: var(--ob-white);
}
.ob-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--ob-black);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.ob-icon-btn:hover, .ob-icon-btn:focus {
	background: var(--ob-surface);
	color: var(--ob-black);
	text-decoration: none;
}
/* All header icon glyphs pinned to an explicit size — without this they inherit
   whatever ambient font-size their wrapping element has (e.g. the search button is a
   Bootstrap .btn-lg at 18px, while plain .ob-icon-btn sits at the page's 12px body
   font-size), so the same Material Symbols icon rendered at noticeably different
   sizes depending on which button it sat in. */
.ob-icon-btn .material-symbols-outlined {
	font-size: 22px;
}
/* The "search" glyph (thin ring + short handle) covers much less of its own em-box
   than "person"/"shopping_cart"/"menu" (solid silhouettes) — at an identical
   font-size it reads as visibly smaller/lighter even though the number is the same.
   Sized up here (both the desktop pill button and the mobile toggle) as an optical
   correction so it carries the same visual weight as the other header icons. */
#search .btn .material-symbols-outlined {
	font-size: 26px;
}
/* "person" (a plain circle + shoulder curve) is the thinnest/lightest glyph of the
   set — same optical-correction reasoning as "search" above, just the opposite
   direction. Targeted via the tag (the account link is the only <a class="ob-icon-btn">
   in the header; cart/menu/search-toggle are all <button>) rather than a new class. */
a.ob-icon-btn .material-symbols-outlined {
	font-size: 27px;
}
.ob-cart-widget {
	position: relative;
	display: inline-block;
}
.ob-cart-widget button.ob-cart-loading {
	opacity: 0.5;
	pointer-events: none;
}
/* Appearance comes entirely from the shared .ob-icon-btn class already on this
   button (see cart.twig) — kept as one definition instead of duplicating it here,
   so hover/size/color always stay in sync with the other header icons. */
.ob-cart-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--ob-red);
	color: var(--ob-white);
	font-size: 10px;
	font-weight: 700;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	align-items: center;
	justify-content: center;
}
.ob-minicart {
	min-width: 320px;
	padding: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.ob-minicart-items {
	max-height: 320px;
	overflow-y: auto;
}
.ob-minicart-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ob-outline-variant);
}
.ob-minicart-row:last-child {
	border-bottom: none;
}
.ob-minicart-image {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: var(--ob-bg-alt);
	overflow: hidden;
}
.ob-minicart-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ob-minicart-info {
	flex-grow: 1;
	min-width: 0;
}
.ob-minicart-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ob-black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ob-minicart-meta {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--ob-outline);
}
.ob-minicart-remove {
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--ob-red);
	width: 28px;
	height: 28px;
	cursor: pointer;
}
.ob-minicart-totals {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ob-outline-variant);
}
.ob-minicart-total-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 2px 0;
}
.ob-minicart-total-row:last-child {
	font-size: 15px;
	font-weight: 700;
	padding-top: 6px;
}
.ob-minicart-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}
.ob-minicart-actions .btn {
	font-size: 13px;
	padding: 12px;
}
.ob-minicart-viewcart {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--ob-black);
	text-decoration: none;
	padding: 4px;
}
.ob-minicart-viewcart:hover {
	color: var(--ob-red);
	text-decoration: none;
}

/* Currency dropdown, tucked into the icon cluster */
#form-currency {
	display: inline-block;
}
#form-currency .pull-left {
	float: none;
}
#form-currency .btn-link {
	color: var(--ob-black);
	text-decoration: none;
	height: 40px;
	padding: 0 10px;
	font-weight: 700;
}
#form-currency .btn-link:hover, #form-currency .btn-link:focus {
	text-decoration: none;
	background: var(--ob-surface);
	border-radius: 999px;
}

/* Flattened top nav (renders inside .ob-header-left via {{ menu }}) */
#menu.navbar {
	margin: 0;
	border: none;
	min-height: 0;
	background: transparent;
	box-shadow: none;
}
.ob-header-left > .container {
	width: auto;
	padding: 0;
	margin: 0;
}
#menu .navbar-header {
	display: none;
}
#menu .navbar-collapse {
	display: block !important;
	padding: 0;
	box-shadow: none;
	border: none;
}
#menu .navbar-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	float: none;
}
#menu .navbar-nav > li {
	float: none;
}
#menu .navbar-nav > li > a {
	padding: 0;
	color: var(--ob-black);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: transparent;
	border-bottom: 2px solid transparent;
	line-height: 1;
	padding-bottom: 2px;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus {
	background: transparent;
	color: var(--ob-red);
}
#menu .navbar-nav > li.dropdown > a .caret {
	display: none;
}
/* Tap-to-expand arrow — mobile-only (see the ≤991px block below); desktop
   keeps the existing hover-triggered dropdown from stylesheet.css untouched. */
.ob-menu-toggle {
	display: none;
}
/* Desktop subcategory dropdown — stylesheet.css's stock `.dropdown-menu li >
   a:hover` paints a blue gradient straight from Bootstrap's default theme,
   completely unrelated to this site's black/white/red palette. Restyled here
   (desktop only; the ≤991px block further down handles the tap-to-expand
   mobile version separately). */
#menu .dropdown-menu {
	border-radius: 0;
	border: 1px solid var(--ob-outline-variant);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	margin-top: 8px;
	padding: 8px 0;
}
/* The 8px margin-top above is a dead zone for :hover — stylesheet.css's
   `#menu .dropdown:hover .dropdown-menu` only stays matched while the mouse
   is over the <li> or the panel itself, and margin belongs to neither, so
   moving the cursor straight down from the trigger into the panel could
   drop out of :hover mid-gap and close the menu before the user reached it.
   This invisible strip is still part of .dropdown-menu's own box (just
   positioned to cover the gap above it), keeping the hover chain unbroken
   without changing anything visible. */
#menu .dropdown-menu:before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
#menu .dropdown-inner a {
	color: var(--ob-black);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	padding: 6px 20px;
}
#menu .dropdown-inner li > a:hover,
#menu .dropdown-inner li > a:focus {
	background: var(--ob-surface);
	background-image: none;
	color: var(--ob-black);
}
#menu .see-all {
	border-top: 1px solid var(--ob-outline-variant);
	margin-top: 8px;
	padding: 8px 20px 0;
	color: var(--ob-red);
	font-weight: 700;
	font-size: 13px;
}
#menu .see-all:hover,
#menu .see-all:focus {
	background: transparent;
	background-image: none;
	color: var(--ob-red);
	text-decoration: underline;
}

@media (max-width: 991px) {
	.ob-header-left {
		gap: 16px;
	}
	.ob-header-search {
		display: none;
	}
	.ob-header-search.ob-search-open {
		display: flex;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		margin: 0;
		padding: 10px 16px;
		background: var(--ob-white);
		border-bottom: 1px solid var(--ob-outline-variant);
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		z-index: 999;
	}
	.ob-header-search.ob-search-open #search {
		width: 100%;
	}
	/* Bottom sheet, not a top-anchored dropdown: the trigger lives in the bottom
	   nav now, and the old position:absolute (anchored to the sticky header)
	   opened up at the top of the page — once scrolled down, that landed off the
	   current viewport, making the button feel broken. position:fixed anchors to
	   the viewport itself regardless of scroll position, and opening from the
	   bottom keeps it visually connected to the bottom-nav button that triggered
	   it (same pattern as .ob-size-sheet). */
	#menu.navbar {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 56px;
		top: auto;
		width: auto;
		max-height: 70vh;
		overflow-y: auto;
		background: var(--ob-white);
		border-bottom: none;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
		z-index: 999;
	}
	.ob-header-left.ob-nav-open #menu {
		display: block;
	}
	#menu .navbar-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 24px 16px;
	}
	#menu .navbar-nav > li {
		width: 100%;
	}
	#menu .navbar-nav > li > a {
		display: block;
		padding: 10px 0;
	}

	/* Subcategory dropdowns rely on stylesheet.css's `#menu .dropdown:hover
	   .dropdown-menu { display: block; }` — a hover-only trigger that never
	   fires on touch, so tapping a category with children just followed its
	   href straight to the category page with no way to reach its
	   subcategories. Below, the dropdown becomes a plain tap-to-expand
	   accordion instead: the row splits into the category link (still
	   navigates as before) and a separate arrow button (toggles
	   .ob-submenu-open on the <li>, see initMobileSubmenu() in obuvki699.js),
	   and the dropdown itself switches from Bootstrap's absolutely-positioned
	   popup to a plain block that pushes the rest of the list down. */
	#menu li.dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	#menu li.dropdown > a.dropdown-toggle {
		flex: 1;
	}
	#menu .ob-menu-toggle {
		display: inline-flex;
		background: none;
		border: none;
		padding: 10px 4px;
		color: var(--ob-black);
		cursor: pointer;
	}
	#menu .ob-menu-toggle .material-symbols-outlined {
		display: block;
		transition: transform 150ms ease;
	}
	#menu li.dropdown.ob-submenu-open .ob-menu-toggle .material-symbols-outlined {
		transform: rotate(180deg);
	}
	/* `div.dropdown-menu` (not just `.dropdown-menu`) matches stylesheet.css's
	   own `#menu div.dropdown-menu { background-color: rgba(0,0,0,0.1); }`
	   (its ≤767px block) specificity-for-specificity — a bare `.dropdown-menu`
	   selector here loses to that stock rule regardless of source order, since
	   `div.dropdown-menu` counts as one extra type-selector match. Confirmed
	   live: the grey stock background was showing through until this matched. */
	#menu div.dropdown-menu {
		display: none;
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0 0 8px 16px;
		border: none;
		box-shadow: none;
		background: transparent;
	}
	#menu li.dropdown.ob-submenu-open div.dropdown-menu {
		display: block;
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner ul {
		display: block;
		width: 100%;
	}
	#menu .dropdown-inner a {
		min-width: 0;
		width: 100%;
		color: var(--ob-outline);
		font-size: 13px;
		padding: 6px 0;
	}
	#menu .dropdown-inner a:hover {
		color: var(--ob-black);
	}
	#menu .see-all {
		border-top: 1px solid var(--ob-outline-variant);
		margin-top: 4px;
		padding: 8px 0 0;
		color: var(--ob-red);
		font-weight: 700;
	}
	#menu .see-all:hover,
	#menu .see-all:focus {
		background: transparent;
		color: var(--ob-red);
	}
}

/* ===== Buttons =====
   stylesheet.css's stock .btn-primary/.btn-default set a background-image gradient
   in addition to background-color; overriding background-color alone leaves that
   gradient painted on top (background-image is separate from background-color and
   isn't reset unless a later rule also sets it). Every button rule below sets
   background-image: none explicitly to guarantee a flat fill. */
.btn {
	box-shadow: none;
	text-shadow: none;
	border-radius: 0;
	background-image: none;
}
.btn-primary {
	background-color: var(--ob-black);
	background-image: none;
	border-color: var(--ob-black);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: none;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-primary:active:hover, .btn-primary:active:focus {
	background-color: #262626;
	background-image: none;
	border-color: #262626;
	box-shadow: none;
}
.ob-btn-urgent {
	background-color: var(--ob-red);
	background-image: none;
	border-color: var(--ob-red);
	color: var(--ob-white);
	box-shadow: none;
	font-weight: 700;
	text-transform: uppercase;
}
.ob-btn-urgent:hover {
	background-color: #b31a20;
	background-image: none;
	border-color: #b31a20;
	color: var(--ob-white);
	box-shadow: none;
}
.btn-outline-navy {
	background: transparent;
	border: 2px solid var(--ob-black);
	color: var(--ob-black);
	font-weight: 700;
	text-transform: uppercase;
}
.btn-outline-navy:hover {
	background: var(--ob-black);
	color: var(--ob-white);
}

/* ===== Homepage: hero, trust bar, categories, newsletter (admin HTML-module content targets these classes) ===== */
.ob-hero {
	position: relative;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-color: var(--ob-navy);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.ob-hero-card {
	background: rgba(255,255,255,0.92);
	padding: 40px;
	max-width: 480px;
	margin: 24px;
}
.ob-hero-card h1 {
	font-size: 32px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.ob-hero-card h1 .ob-price {
	color: var(--ob-red);
}
.ob-hero-card p {
	color: var(--ob-outline);
	font-size: 16px;
	margin: 0 0 24px;
}
.ob-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.ob-hero-actions a {
	padding: 14px 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	text-decoration: none;
	display: inline-block;
}
.ob-hero-actions .ob-hero-btn-solid {
	background: var(--ob-black);
	color: var(--ob-white);
}
.ob-hero-actions .ob-hero-btn-solid:hover {
	background: var(--ob-red);
	color: var(--ob-white);
}
.ob-hero-actions .ob-hero-btn-outline {
	border: 2px solid var(--ob-black);
	color: var(--ob-black);
}
.ob-hero-actions .ob-hero-btn-outline:hover {
	background: var(--ob-black);
	color: var(--ob-white);
}
@media (max-width: 767px) {
	/* Desktop sizing (40px card padding, 480px max-width, 32px h1) wraps the
	   headline to 3 lines and forces the buttons onto separate rows on a phone
	   viewport — shrink the card/type/button scale so it fits one comfortable card. */
	.ob-hero {
		min-height: 320px;
	}
	.ob-hero-card {
		margin: 16px;
		padding: 24px;
		max-width: none;
	}
	.ob-hero-card h1 {
		font-size: 22px;
	}
	.ob-hero-card p {
		font-size: 14px;
		margin: 0 0 16px;
	}
	.ob-hero-actions a {
		padding: 12px 20px;
		font-size: 12px;
	}
}

.ob-trustbar {
	background: var(--ob-white);
	border-bottom: 1px solid var(--ob-outline-variant);
	padding: 24px;
}
.ob-trustbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) {
	.ob-trustbar-inner { grid-template-columns: repeat(3, 1fr); }
}
.ob-trustbar-item {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}
.ob-trustbar-item .material-symbols-outlined {
	font-size: 28px;
	color: var(--ob-black);
}
.ob-trustbar-item p {
	margin: 0;
}
.ob-trustbar-item .ob-trustbar-title {
	font-weight: 700;
	font-size: 14px;
}
.ob-trustbar-item .ob-trustbar-sub {
	font-size: 12px;
	color: var(--ob-outline);
}
@media (max-width: 767px) {
	/* Stacked full-width rows with a title+subtitle each ate a lot of vertical
	   space and read as a plain list. A 3-up icon-over-label grid (icon centered,
	   subtitle dropped — it just repeats/explains the title) is the compact,
	   scannable version of the same content used at desktop width. */
	.ob-trustbar {
		padding: 16px 8px;
	}
	.ob-trustbar-inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
	}
	.ob-trustbar-item {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}
	.ob-trustbar-item .material-symbols-outlined {
		font-size: 24px;
	}
	.ob-trustbar-item .ob-trustbar-title {
		font-size: 12px;
		line-height: 1.25;
	}
	.ob-trustbar-item .ob-trustbar-sub {
		display: none;
	}
}

.ob-section {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px;
}
.ob-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	gap: 12px;
	flex-wrap: wrap;
}
.ob-section-head h2 {
	font-size: 24px;
	text-transform: uppercase;
	margin: 0;
}
.ob-section-head .ob-eyebrow {
	color: var(--ob-red);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
}
.ob-section-head a {
	color: var(--ob-red);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}
.ob-section-head a:hover {
	text-decoration: underline;
}

.ob-category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (min-width: 768px) {
	.ob-category-grid { grid-template-columns: repeat(4, 1fr); }
}
.ob-category-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: block;
	background: var(--ob-surface);
}
.ob-category-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.ob-category-tile:hover img {
	transform: scale(1.05);
}
.ob-category-tile .ob-category-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
	display: flex;
	align-items: flex-end;
	padding: 16px;
}
.ob-category-tile .ob-category-label {
	color: var(--ob-white);
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
}

.ob-newsletter {
	background: var(--ob-black);
	color: var(--ob-white);
	padding: 40px 24px;
}
.ob-newsletter-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ob-newsletter h2 {
	color: var(--ob-white);
	text-transform: uppercase;
	font-size: 24px;
	margin: 0 0 8px;
}
.ob-newsletter p {
	margin: 0;
	opacity: 0.85;
}
.ob-newsletter form {
	display: flex;
}
.ob-newsletter input[type="email"] {
	border: none;
	padding: 14px 16px;
	min-width: 260px;
	font-size: 14px;
}
.ob-newsletter button {
	background: var(--ob-red);
	color: var(--ob-white);
	border: none;
	padding: 14px 28px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}
.ob-newsletter button:hover {
	background: #b31a20;
}

/* ===== Product cards (shared: homepage Latest module, category listing, related products) ===== */
.product-thumb {
	border: 1px solid var(--ob-outline-variant);
	border-radius: 0;
	background: var(--ob-white);
	transition: box-shadow 0.15s ease;
	overflow: visible;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.product-thumb:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.product-thumb .image {
	position: relative;
	overflow: hidden;
	background: var(--ob-bg-alt);
	aspect-ratio: 1 / 1;
}
.product-thumb .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	margin: 0;
}
.product-thumb:hover .image img {
	transform: scale(1.06);
}
.product-thumb h4 {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ob-black);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.product-thumb h4 a {
	color: var(--ob-black);
}
.product-thumb .caption {
	padding: 14px;
	min-height: 0;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.product-thumb .ob-eyebrow {
	color: var(--ob-outline);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 4px;
}
.product-thumb .button-group {
	border: none;
	background: transparent;
	padding: 0 14px 14px;
	margin-top: auto;
}
.product-thumb .button-group button {
	width: 100%;
	background: var(--ob-red);
	color: var(--ob-white);
	border: none;
	line-height: 1;
	padding: 12px;
	min-height: 44px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	float: none;
}
.product-thumb .button-group button:hover {
	background: #b31a20;
	color: var(--ob-white);
}
.product-thumb .button-group button + button {
	display: none;
}

/* Price badge — anchored bottom-right of the product image */
.ob-price-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 78px;
	box-sizing: border-box;
	text-align: center;
	background: var(--ob-red);
	color: var(--ob-white);
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 15px;
	padding: 8px 14px 8px 20px;
	line-height: 1.3;
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.ob-price-badge .ob-price-old {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 11px;
	margin-top: 3px;
	text-decoration: line-through;
	opacity: 0.75;
}
.ob-new-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--ob-red);
	color: var(--ob-white);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 8px;
	z-index: 2;
}

/* ===== Product detail page: buy box, breadcrumb, price =====
   (Landed here by edit history, not physically moved next to a matching "Product
   detail" banner elsewhere — none of these selectors are duplicated anywhere else in
   the file, so reordering would be pure churn for a live stylesheet with no behavior
   change. This banner exists so the section boundary is visible when scanning.) */
/* "Satın alma alanı" (buy box): groups title, price, size/option selection, qty +
   add-to-cart, and the trust-message row into one visually contained block instead
   of a loose stack of elements that only shared the column's own whitespace before. */
#product-product .btn-group {
	margin-bottom: 12px;
}
.ob-buybox {
	border: 1px solid var(--ob-outline-variant);
	background: var(--ob-white);
	padding: 24px;
}
.ob-buybox h1 {
	margin-top: 0;
	font-size: 24px;
}
.ob-buybox > ul.list-unstyled {
	margin-bottom: 16px;
}
.ob-buybox #product {
	margin-top: 4px;
}

/* Mobile sticky "add to cart" bar — appears once the real #button-cart (inside
   .ob-buybox) scrolls out of view, so buying is always one tap away without
   scrolling back up through the description/tabs/related products. Delegates
   its click to the real button (see initStickyBuyBar in obuvki699.js) rather
   than duplicating the add-to-cart AJAX/validation logic. */
.ob-sticky-buybar {
	display: none;
}
@media (max-width: 767px) {
	.ob-sticky-buybar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 56px;
		z-index: 900;
		background: var(--ob-white);
		border-top: 1px solid var(--ob-outline-variant);
		padding: 10px 16px;
		box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
		transform: translateY(100%);
		transition: transform 200ms ease-out;
	}
	.ob-sticky-buybar.ob-sticky-buybar-visible {
		transform: translateY(0);
	}
	.ob-sticky-buybar-price {
		font-family: 'Montserrat', sans-serif;
		font-weight: 800;
		font-size: 16px;
		color: var(--ob-red);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ob-sticky-buybar-old {
		font-size: 12px;
		font-weight: 400;
		color: var(--ob-outline);
		text-decoration: line-through;
		margin-right: 4px;
	}
	.ob-sticky-buybar #ob-sticky-buybar-btn {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		background: var(--ob-navy);
		color: var(--ob-white);
		border: none;
		border-radius: 999px;
		padding: 12px 22px;
		margin: 0;
		font-weight: 700;
		font-size: 13px;
	}
	.ob-sticky-buybar #ob-sticky-buybar-btn:hover {
		background: #0d1a2e;
	}
}

/* Product detail page price — scoped to the .ob-price-display class, not a bare
   h2 tag selector, since some products' admin-entered description text also
   contains an <h2> (their own title, for SEO) which must NOT get this styling. */
.ob-price-display {
	color: var(--ob-red);
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 40px;
}
#product-product .ob-price-old-inline {
	color: var(--ob-outline);
	text-decoration: line-through;
	font-weight: 400;
}
/* Stock breadcrumb (stylesheet.css) is a bordered box with diagonal "ribbon" corner
   cuts between items (see .breadcrumb > li:after) — dated look, and previously only
   partially neutralized on the product page (background/padding only, ribbon corners
   left in place) with the category page not touched at all. Both pages get the same
   plain text-trail treatment here. */
#product-product .breadcrumb,
#product-category .breadcrumb {
	background: transparent;
	border: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 12px;
	color: var(--ob-outline);
}
#product-product .breadcrumb > li,
#product-category .breadcrumb > li {
	padding: 0;
	text-shadow: none;
}
#product-product .breadcrumb > li:after,
#product-category .breadcrumb > li:after {
	display: none;
}
#product-product .breadcrumb > li + li:before,
#product-category .breadcrumb > li + li:before {
	content: '/';
	padding: 0 8px;
	color: var(--ob-outline-variant);
}
#product-product .breadcrumb a,
#product-category .breadcrumb a {
	color: var(--ob-outline);
}
#product-product .breadcrumb a:hover,
#product-category .breadcrumb a:hover {
	color: var(--ob-red);
}
@media (max-width: 767px) {
	#product-product .breadcrumb,
	#product-category .breadcrumb {
		background: var(--ob-surface);
		margin: 0 -15px 20px;
		padding: 10px 15px;
		font-size: 13px;
		text-align: center;
	}
	#product-product .breadcrumb a,
	#product-category .breadcrumb a {
		color: var(--ob-black);
		font-weight: 700;
	}
	#product-product .breadcrumb .fa-home,
	#product-category .breadcrumb .fa-home {
		font-size: 16px;
	}
}

/* ===== Product gallery (Swiper main image + thumbnail strip) ===== */
.ob-gallery-main {
	position: relative;
	background: var(--ob-bg-alt);
	border: 1px solid var(--ob-outline-variant);
	overflow: hidden;
}
.ob-gallery-zoom-btn {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	background: rgba(255,255,255,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ob-gallery-zoom-btn:hover {
	background: var(--ob-white);
}
.ob-gallery-main .swiper-slide {
	text-align: center;
}
.ob-gallery-main img {
	width: 100%;
	height: auto;
	display: block;
}
.ob-gallery-main .swiper-pagination {
	position: static;
	margin-top: 8px;
}
.ob-gallery-main .swiper-pagination-bullet {
	background: var(--ob-outline-variant);
	opacity: 1;
}
.ob-gallery-main .swiper-pagination-bullet-active {
	background: var(--ob-red);
}
.ob-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.ob-gallery-thumb-btn {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid var(--ob-outline-variant);
	background: var(--ob-bg-alt);
	cursor: pointer;
	overflow: hidden;
}
.ob-gallery-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ob-gallery-thumb-btn.ob-active {
	border-color: var(--ob-black);
	border-width: 2px;
}

/* ===== Buy row: quantity stepper + Add to cart share one row ===== */
/* "Други цветове" — same product model in other colors, each a separate
   OpenCart product linked via the admin's native Related Products field
   (see product.twig, right below the size options). Thumbnail-only by
   design: no name/price/buttons, just a small clickable swatch that
   navigates to that color's own product page. */
.ob-other-colors {
	margin-top: 16px;
	margin-bottom: 16px;
}
.ob-other-colors-title {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ob-black);
	margin: 0 0 8px;
}
.ob-other-colors-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ob-other-colors-item {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ob-outline-variant);
	background: var(--ob-white);
	padding: 2px;
	overflow: hidden;
	transition: border-color 150ms ease;
}
.ob-other-colors-item:hover {
	border-color: var(--ob-black);
}
.ob-other-colors-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ob-buy-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.ob-buy-row #button-cart {
	flex-grow: 1;
	margin: 0;
}
.ob-buy-row .ob-qty-stepper {
	flex-shrink: 0;
}
.ob-buy-row .ob-qty-btn,
.ob-buy-row .ob-qty-update,
.ob-buy-row .ob-qty-input.form-control {
	height: 100%;
}

/* ===== Tabs section — now a full-width block below the image/buy-box row ===== */
.ob-product-tabs {
	margin-top: 32px;
}
/* Product descriptions are pasted in with the product name as their own leading
   heading (see oc_product_description.description content) — redundant with the
   <h1> already shown above the tabs, so it's hidden rather than edited per-product. */
#tab-description > h2:first-child {
	display: none;
}

.ob-related-products {
	margin-top: 40px;
}

/* Trust badge row (product detail + cart) */
.ob-trust-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 16px 0;
	padding: 14px;
	background: var(--ob-surface);
}
.ob-trust-row .ob-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ob-black);
	font-size: 12px;
	font-weight: 700;
}
.ob-trust-row .ob-trust-item .material-symbols-outlined {
	font-size: 18px;
}
@media (max-width: 767px) {
	.ob-trust-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		padding: 16px 8px;
	}
	.ob-trust-row .ob-trust-item {
		flex-direction: column;
		gap: 6px;
		text-align: center;
		justify-content: center;
		font-size: 11px;
	}
	.ob-trust-row .ob-trust-item .material-symbols-outlined {
		font-size: 22px;
	}
}

/* Generic form controls */
.btn-default {
	background: var(--ob-white);
	border: 1px solid var(--ob-black);
	color: var(--ob-black);
	border-radius: 0;
}
.btn-default:hover, .btn-default:focus {
	background: var(--ob-black);
	color: var(--ob-white);
}
.form-control {
	border: 1px solid var(--ob-outline-variant);
	border-radius: 0;
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--ob-black);
	box-shadow: none;
}

/* ===== Product detail page: size/option chips (not part of the Tabs section above,
   just adjacent in the file — kept in place, see reordering note further up) ===== */
/* Product options — size selector rendered as boxed chips instead of native radios.
   Scoped to #product (not #product-product) so this also applies inside the
   quick-view modal, which clones the #product block without its #product-product
   wrapper. The native radio circle is hidden (accessibly, not display:none) since
   the label itself becomes the visible control. !important on layout/display is
   deliberate here — this exact rule has been silently overridden by a Bootstrap
   default before despite correct specificity on paper; don't remove without
   re-verifying live. */
#product .radio {
	display: inline-flex !important;
	margin: 0 8px 8px 0 !important;
}
#product .radio label {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 12px;
	text-align: center;
	border: 1px solid var(--ob-outline-variant);
	border-radius: 4px;
	color: var(--ob-black);
	font-weight: 700;
	cursor: pointer;
	margin: 0;
	transition: border-color 150ms ease, background-color 150ms ease;
}
#product .radio input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
#product .radio label:hover {
	border-color: var(--ob-black);
}
#product .radio label:has(input[type="radio"]:checked) {
	border: 2px solid var(--ob-black);
	background: var(--ob-surface);
}
#product .radio label:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--ob-red);
	outline-offset: 2px;
}

/* Missing-selection error state — stock OpenCart just drops a plain <div
   class="text-danger"> after the option and adds .has-error to the .form-group,
   which does nothing visible on these chip-style radios (no .form-control for
   Bootstrap's built-in .has-error border to target). Both the message itself and
   the chips it's complaining about now get a clear, on-brand highlight. */
#product .has-error .radio label {
	border-color: var(--ob-red);
}
#product .text-danger {
	display: block;
	margin-top: 8px;
	padding: 8px 12px;
	background: rgba(212, 32, 39, 0.08);
	border-left: 3px solid var(--ob-red);
	color: var(--ob-red);
	font-size: 12px;
	font-weight: 700;
}

/* Tabs (Description / Specification / Reviews) */
#product-product .nav-tabs {
	border-bottom-color: var(--ob-outline-variant);
}
#product-product .nav-tabs > li.active > a,
#product-product .nav-tabs > li.active > a:hover,
#product-product .nav-tabs > li.active > a:focus {
	color: var(--ob-black);
	border-color: transparent transparent var(--ob-black);
	border-bottom: 2px solid var(--ob-black);
	font-weight: 700;
	background: transparent;
}
#product-product .nav-tabs > li > a {
	color: var(--ob-outline);
	border: none;
	font-weight: 700;
}
#tab-description {
	padding-top: 24px;
	color: var(--ob-outline);
	font-size: 14px;
	line-height: 1.7;
}
#tab-description strong {
	color: var(--ob-black);
}
#tab-description ul,
#tab-description ol {
	margin-bottom: 16px;
	padding-left: 20px;
}
#tab-specification {
	padding-top: 24px;
}
#tab-specification .table {
	font-size: 13px;
}
#tab-specification .table > thead > tr > td {
	background: var(--ob-surface);
	border: none;
	padding: 10px 12px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--ob-black);
}
#tab-specification .table > tbody > tr > td {
	border-color: var(--ob-outline-variant);
	padding: 10px 12px;
	color: var(--ob-outline);
}
#tab-specification .table > tbody > tr > td:first-child {
	color: var(--ob-black);
	font-weight: 700;
	width: 40%;
}

/* Related products heading accent */
#product-product h3 {
	border-left: 4px solid var(--ob-red);
	padding-left: 12px;
	text-transform: uppercase;
	margin-top: 48px;
}

/* ===== Category / listing page ===== */
#product-category h2 {
	font-size: 24px;
	text-transform: uppercase;
}

/* Category description block (admin-entered thumb + rich text) */
.ob-category-intro {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--ob-white);
	border: 1px solid var(--ob-outline-variant);
	padding: 20px;
	margin: 16px 0 24px;
}
.ob-category-intro-thumb {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	object-fit: cover;
}
.ob-category-intro-text {
	color: var(--ob-outline);
	font-size: 14px;
	line-height: 1.6;
}
.ob-category-intro-text p:last-child {
	margin-bottom: 0;
}
@media (max-width: 480px) {
	.ob-category-intro {
		flex-direction: column;
	}
}

/* Subcategory pills (replaces the stock multi-column bullet-list "Уточнете" block) */
.ob-subcat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.ob-subcat-chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--ob-outline-variant);
	color: var(--ob-black);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.ob-subcat-chip:hover {
	border-color: var(--ob-black);
	background: var(--ob-surface);
	color: var(--ob-black);
	text-decoration: none;
}

@media (max-width: 991px) {
	/* A category with 8-10+ subcategories wraps this into 3-4 rows on
	   mobile, pushing the actual product grid well below the fold — a
	   single-row horizontal-scroll slider (same "swipe past it" pattern the
	   homepage carousel already uses) keeps this compact instead. Bled to
	   the viewport edge (negative margin matching the container's own 15px
	   gutter, same trick used for the trust-badge row and breadcrumb bar)
	   so the first/last chip aren't awkwardly clipped by the container. */
	.ob-subcat-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -15px 24px;
		padding: 0 15px;
	}
	.ob-subcat-chips::-webkit-scrollbar {
		display: none;
	}
	.ob-subcat-chip {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Sort/limit/compare toolbar — was stock Bootstrap input-group markup (grey
   input-group-addon label boxes, default <select> chrome), replaced with a plain
   flex bar matching the rest of the theme's flat, square-cornered form language. */
.ob-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	margin-bottom: 20px;
	border-top: 1px solid var(--ob-outline-variant);
	border-bottom: 1px solid var(--ob-outline-variant);
}
.ob-toolbar-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ob-toolbar-count {
	font-size: 13px;
	color: var(--ob-outline);
}
.ob-toolbar-compare {
	font-size: 13px;
	font-weight: 700;
	color: var(--ob-black);
	text-decoration: none;
}
.ob-toolbar-compare:hover {
	color: var(--ob-red);
	text-decoration: none;
}
.ob-toolbar-right {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.ob-toolbar-field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ob-toolbar-field label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ob-outline);
	margin: 0;
	white-space: nowrap;
}
.ob-toolbar-select {
	border: 1px solid var(--ob-outline-variant);
	background-color: var(--ob-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding: 8px 32px 8px 12px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--ob-black);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.ob-toolbar-select:focus {
	outline: none;
	border-color: var(--ob-black);
}
@media (max-width: 767px) {
	.ob-toolbar {
		align-items: flex-start;
	}
	.ob-toolbar-right {
		width: 100%;
		gap: 12px;
	}
	.ob-toolbar-field {
		flex: 1;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.ob-toolbar-select {
		width: 100%;
	}
}
.ob-pagination-row {
	text-align: center;
	margin-top: 16px;
}
.ob-pagination-row .pagination {
	margin: 0;
}

/* Active BrainyFilter selections, read from the DOM/URL client-side (see
   initActiveFilterChips in obuvki699.js) — not part of BrainyFilter's own template,
   kept out of the sidebar entirely so removing one is a single tap regardless of
   which collapsed filter group it's buried in. */
.ob-active-filters {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.ob-active-filters.ob-active-filters-visible {
	display: flex;
}
.ob-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 14px;
	background: var(--ob-surface);
	border: 1px solid var(--ob-outline-variant);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ob-black);
}
.ob-filter-chip button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--ob-outline);
	cursor: pointer;
}
.ob-filter-chip button:hover {
	color: var(--ob-red);
}
.ob-filter-chip button .material-symbols-outlined {
	font-size: 16px;
}
.ob-filter-chip-clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border: 1px solid var(--ob-red);
	border-radius: 999px;
	background: transparent;
	color: var(--ob-red);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.ob-filter-chip-clear:hover {
	background: var(--ob-red);
	color: var(--ob-white);
	text-decoration: none;
}
.ob-filter-chip-clear .material-symbols-outlined {
	font-size: 16px;
}

/* Empty states — category with zero results (stock condition) and category
   filtered down to zero results (detected client-side, see obuvki699.js) */
.ob-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--ob-outline);
}
.ob-empty-state .material-symbols-outlined {
	font-size: 48px;
	color: var(--ob-outline-variant);
	margin-bottom: 16px;
}
.ob-empty-state p {
	font-size: 15px;
	margin-bottom: 20px;
}

/* ===== Cart page ===== */
#checkout-cart h1 {
	color: var(--ob-black);
	text-transform: uppercase;
	font-size: 24px;
}
#checkout-cart .table > thead > tr > td {
	font-weight: 700;
	color: var(--ob-black);
	border-bottom: 2px solid var(--ob-black);
}
#checkout-cart .btn-danger {
	background-color: var(--ob-red);
	background-image: none;
	border-color: var(--ob-red);
}
#checkout-cart .table-bordered,
#checkout-cart .table-bordered > thead > tr > td,
#checkout-cart .table-bordered > tbody > tr > td {
	border-color: var(--ob-outline-variant);
}
#checkout-cart .well,
.ob-cart-summary {
	background: var(--ob-white);
	border: 1px solid var(--ob-outline-variant);
	padding: 24px;
}
.ob-cart-summary h2 {
	font-size: 18px;
	margin: 0 0 16px;
}
.ob-cart-modules-label {
	font-weight: 700;
	font-size: 13px;
	margin: 20px 0 8px;
}
.ob-cart-summary .table td {
	border: none;
	padding: 6px 0;
}
.ob-cart-summary .table tr:last-child td {
	border-top: 1px solid var(--ob-outline-variant);
	padding-top: 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ob-black);
}
.ob-cart-summary > a.btn {
	margin-top: 8px;
	margin-bottom: 16px;
}
.ob-cart-summary .ob-cart-modules {
	margin-top: 16px;
}

/* Cart line items */
.ob-cart-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ob-white);
	border: 1px solid var(--ob-outline-variant);
	padding: 16px;
	margin-bottom: 16px;
}
.ob-cart-item-image {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	background: var(--ob-bg-alt);
	overflow: hidden;
}
@media (max-width: 480px) {
	.ob-cart-item {
		flex-wrap: wrap;
	}
	.ob-cart-item-image {
		width: 72px;
		height: 72px;
	}
	.ob-cart-item-top {
		flex-wrap: wrap;
	}
}
.ob-cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ob-cart-item-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}
.ob-cart-item-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.ob-cart-item-top h3 {
	font-size: 15px;
	margin: 0 0 4px;
}
.ob-cart-item-top h3 a {
	color: var(--ob-black);
}
.ob-cart-item-meta {
	color: var(--ob-outline);
	font-size: 12px;
	margin: 0;
}
.ob-cart-item-price {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ob-red);
	white-space: nowrap;
}
.ob-cart-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	gap: 12px;
	flex-wrap: wrap;
}
.ob-qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--ob-outline-variant);
}
.ob-qty-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.ob-qty-btn:hover {
	background: var(--ob-bg-alt);
}
.ob-qty-input.form-control {
	width: 44px;
	height: 32px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--ob-outline-variant);
	border-right: 1px solid var(--ob-outline-variant);
	border-radius: 0;
	padding: 0;
}
.ob-qty-update {
	width: 32px;
	height: 32px;
	border: none;
	border-left: 1px solid var(--ob-outline-variant);
	background: transparent;
	color: var(--ob-black);
	cursor: pointer;
}
.ob-qty-update:hover {
	background: var(--ob-bg-alt);
}
.ob-cart-remove {
	border: none;
	background: transparent;
	color: var(--ob-red);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.ob-cart-remove:hover {
	text-decoration: underline;
}

/* ===== Footer ===== */
footer {
	background: var(--ob-navy);
	color: var(--ob-white);
	padding-top: 40px;
}
footer h4, footer h5 {
	color: var(--ob-red);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}
footer .ob-footer-brand {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--ob-white);
	margin-bottom: 12px;
}
footer p {
	color: #cfd6e0;
}
footer a {
	color: #cfd6e0;
}
footer a:hover {
	color: var(--ob-white);
}
footer hr {
	border-color: #2a3d5c;
}
.ob-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	color: #cfd6e0;
	font-size: 13px;
}
.ob-footer-contact .material-symbols-outlined {
	color: var(--ob-red);
	font-size: 18px;
}
/* vqmod (seopack.xml) injects a "OpencartUzman" credit div into every theme's
   footer.twig right before </footer> — hidden here rather than touching the
   shared vqmod source, which also targets other stores' themes. */
.copyright-opencart {
	display: none;
}

/* Latest products — horizontal carousel (does not wrap to new rows) */
.ob-carousel-section {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px;
}
.ob-carousel-section .ob-section-head h2 {
	font-size: 24px;
	text-transform: uppercase;
	margin: 0;
}
@media (max-width: 767px) {
	/* 24px uppercase Montserrat wrapped "НАЙ-НОВИ ПРОДУКТИ" onto two lines inside
	   the 24px-padded mobile container — scale the heading down and trim the
	   section's own padding to match the tighter mobile spacing used elsewhere. */
	.ob-carousel-section {
		padding: 28px 16px 32px;
	}
	.ob-carousel-section .ob-section-head h2,
	.ob-section-head h2 {
		font-size: 19px;
		letter-spacing: 0.01em;
	}
}
.ob-carousel-arrows {
	display: flex;
	gap: 8px;
}
.ob-carousel-arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--ob-outline-variant);
	background: var(--ob-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ob-carousel-arrow:hover {
	background: var(--ob-black);
	color: var(--ob-white);
	border-color: var(--ob-black);
}
.ob-carousel-section .swiper-container {
	overflow: hidden;
	padding-bottom: 8px;
}
.ob-carousel-section .swiper-slide {
	height: auto;
}
.ob-carousel-section .swiper-slide .product-thumb {
	height: 100%;
}
.ob-carousel-section .swiper-pagination {
	position: static;
	margin-top: 16px;
}
.ob-carousel-section .swiper-pagination-bullet {
	background: var(--ob-outline-variant);
	opacity: 1;
}
.ob-carousel-section .swiper-pagination-bullet-active {
	background: var(--ob-red);
}
/* Custom prev/next arrows sit in their own row below the track (not overlaid),
   so Swiper's default absolute-positioned/background-image button styles are cleared. */
.ob-carousel-section .swiper-button-prev,
.ob-carousel-section .swiper-button-next {
	position: static;
	margin: 0;
	background-image: none;
	width: auto;
	height: auto;
}
.ob-carousel-section .swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}
/* Size badges: sit in the caption above the product name, not overlaid on the
   image (used to collide with the product photo on narrow mobile cards). Reserves
   a fixed row height so the async ob_sizes.php fetch populating them doesn't
   shift the name/price down once it resolves. */
.ob-size-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-height: 22px;
	margin: 0 0 6px;
}
.ob-size-badge {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--ob-bg-alt);
	border: 1px solid var(--ob-outline-variant);
	color: var(--ob-black);
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Price: image-overlay badge on desktop, plain text under the title on mobile (badge crowds narrow cards) */
.ob-price-inline {
	display: none;
}
@media (max-width: 767px) {
	.ob-price-badge {
		display: none;
	}
	.ob-price-inline {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin: 2px 0 8px;
	}
	.ob-price-inline .ob-price-new {
		font-family: 'Montserrat', sans-serif;
		font-weight: 800;
		font-size: 16px;
		color: var(--ob-red);
	}
	.ob-price-inline .ob-price-old {
		font-size: 12px;
		color: var(--ob-outline);
		text-decoration: line-through;
		opacity: 0.8;
	}
}

/* ===== Scroll-reveal (opt-in via class="ob-reveal") ===== */
.ob-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.ob-reveal-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ob-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Product grid row (category listing + native related-products block — the only two
   ".row.ob-reveal-stagger" uses in this theme): stock OpenCart only inserts a
   clearfix at the 4-per-row (lg/md) breakpoint, none for the 2-per-row (sm/xs) one
   this store actually uses (no sidebar). Without it, a float-based grid lets a card
   creep into the wrong column whenever the row above it has uneven card heights
   (e.g. a 1-line vs 2-line product name) — flex-wrap sidesteps the whole failure
   mode by laying items out strictly row-by-row regardless of height differences. */
.row.ob-reveal-stagger {
	display: flex;
	flex-wrap: wrap;
}

/* ===== Focus-visible: keep it, just on-brand instead of the browser default blue ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.ob-icon-btn:focus-visible,
.ob-carousel-arrow:focus-visible {
	outline: 2px solid var(--ob-red);
	outline-offset: 2px;
}

/* ===== Press feedback on primary tap targets (scale, ~150ms, transform-only) ===== */
.btn:active,
.ob-icon-btn:active,
.product-thumb .button-group button:active,
.ob-qty-btn:active {
	transform: scale(0.97);
}
.btn, .ob-icon-btn, .product-thumb .button-group button, .ob-qty-btn {
	transition: transform 150ms ease-out;
}

/* ===== Quick-view trigger (hover overlay on product card image) =====
   A centered pill rather than the previous full-width bottom bar — that bar sat
   flush against the bottom edge and visually collided with .ob-price-badge (also
   bottom-anchored, bottom-right) whenever both were visible at once. */
.ob-quick-view-trigger {
	position: absolute;
	left: 50%;
	bottom: 16px;
	background: var(--ob-white);
	color: var(--ob-black);
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.16);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.ob-quick-view-trigger .material-symbols-outlined {
	font-size: 16px;
}
.product-thumb:hover .ob-quick-view-trigger,
.ob-quick-view-trigger:focus-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (hover: none) {
	/* touch devices have no hover — keep the trigger reachable, just quieter */
	.ob-quick-view-trigger {
		opacity: 1;
		transform: translate(-50%, 0);
		background: rgba(255,255,255,0.9);
	}
}
@media (max-width: 767px) {
	/* Mobile: the full text pill was as wide as the card itself — collapse to a
	   small icon-only circle (the size badges that used to sit here moved into
	   the caption, see .ob-size-badges above). Bottom-left, not top-right: the
	   top-right corner is where some product photos carry a baked-in badge
	   (e.g. "Genuine Leather" ribbons burned into the image itself, not a CSS
	   overlay we control) and the icon sat right on top of it. Top-left was the
	   other candidate but collides with .ob-new-badge (top:8px/left:8px) on
	   "new" products; bottom-right already belongs to .ob-price-badge. Bottom-
	   left is the one corner nothing else claims. */
	.ob-quick-view-trigger {
		top: auto;
		right: auto;
		left: 8px;
		bottom: 8px;
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 50%;
		opacity: 1;
		transform: none;
		background: rgba(255,255,255,0.92);
	}
	.ob-quick-view-trigger .ob-quick-view-text {
		display: none;
	}
	.ob-quick-view-trigger .material-symbols-outlined {
		font-size: 18px;
	}
	/* Grid gutter: stock Bootstrap's 15px+15px column padding ate 30px of every
	   2-up mobile row for whitespace — tighten it so the product photo gets more
	   of the card width. */
	#product-category .product-layout {
		padding-left: 7px;
		padding-right: 7px;
	}
}

/* ===== Quick-view modal ===== */
.ob-modal {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* visibility (not display:none) so any Swiper instance inside always measures
   real dimensions — a Swiper initialized inside a display:none container caches
   zero-width slides and swipe/arrow navigation silently breaks even after it
   becomes visible later. */
.ob-modal[aria-hidden="false"] {
	z-index: 2000;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.ob-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
}
.ob-modal-panel {
	position: relative;
	background: var(--ob-white);
	max-width: 900px;
	margin: 5vh auto;
	max-height: 90vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px;
}
@media (max-width: 767px) {
	.ob-modal-panel {
		margin: 0;
		max-width: none;
		max-height: 100vh;
		height: 100vh;
		padding: 20px;
	}
}
.ob-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: var(--ob-surface);
	color: var(--ob-black);
	cursor: pointer;
	transition: background-color 150ms ease;
	z-index: 1;
}
.ob-modal-close:hover {
	background: var(--ob-outline-variant);
}
.ob-modal-close .material-symbols-outlined {
	font-size: 20px;
}
@media (max-width: 767px) {
	/* Fixed (not absolute-within-panel) so it stays reachable while scrolling a
	   long quick-view on a full-screen mobile modal — otherwise it scrolls away
	   with the content and there's no way back to it short of scrolling up. */
	.ob-modal-close {
		position: fixed;
		top: 12px;
		right: 12px;
		background: var(--ob-white);
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	}
}
.ob-modal-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.ob-modal-body {
		grid-template-columns: 1fr 1fr;
	}
}
.ob-modal-body .ob-modal-image {
	background: var(--ob-bg-alt);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ob-modal-body .ob-modal-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ob-modal-loading {
	padding: 60px 0;
	text-align: center;
	color: var(--ob-outline);
}
.ob-modal-body .ob-modal-info h2 {
	font-size: 22px;
	margin: 0 0 8px;
}
.ob-modal-body .ob-modal-view-full {
	display: block;
	text-align: center;
	margin-top: 20px;
	padding: 12px;
	border: 1px solid var(--ob-black);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ob-black);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.ob-modal-body .ob-modal-view-full:hover {
	background: var(--ob-black);
	color: var(--ob-white);
	text-decoration: none;
}
/* The cloned #product block reuses the real product page's radio-chip/tab CSS
   automatically (same selectors), it just needs to not force full page width inside the modal. */
.ob-modal-body #product {
	margin-top: 8px;
}

/* ===== Cart confirmation popup — reuses .ob-modal's overlay mechanics ===== */
.ob-cart-confirm .ob-modal-panel {
	max-width: 360px;
	padding: 24px;
}
@media (max-width: 767px) {
	/* .ob-modal-panel's own mobile rule (elsewhere in this file) forces
	   margin:0/max-width:none/height:100vh for the full-screen quick-view modal —
	   correct there, but it would leave this small confirmation card stretched
	   edge-to-edge and full-height instead of a compact centered card. This
	   selector (.ob-cart-confirm .ob-modal-panel) is more specific than the bare
	   .ob-modal-panel rule, so it wins regardless of source order — overrides
	   every property the generic mobile rule sets. */
	.ob-cart-confirm .ob-modal-panel {
		margin: 20vh auto;
		max-width: 320px;
		max-height: none;
		height: auto;
		padding: 20px;
		border-radius: 8px;
	}
}
.ob-cart-confirm-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.ob-cart-confirm-image {
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--ob-bg-alt);
	flex-shrink: 0;
}
.ob-cart-confirm-info p {
	margin: 0 0 2px;
	font-size: 13px;
}
.ob-cart-confirm-name {
	font-weight: 700;
	color: var(--ob-navy);
}
.ob-cart-confirm-actions {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}
.ob-cart-confirm-view,
.ob-cart-confirm-checkout {
	flex: 1;
	text-align: center;
	padding: 10px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
}
.ob-cart-confirm-view {
	background: var(--ob-surface);
	color: var(--ob-black);
}
.ob-cart-confirm-checkout {
	background: var(--ob-navy);
	color: var(--ob-white);
}

/* ===== Size-picker bottom sheet (product page) ===== */
.ob-size-sheet .ob-size-sheet-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ob-white);
	max-height: 70vh;
	overflow-y: auto;
	padding: 20px;
	border-radius: 16px 16px 0 0;
	transform: translateY(100%);
	transition: transform 200ms ease-out;
}
.ob-size-sheet[aria-hidden="false"] .ob-size-sheet-panel {
	transform: translateY(0);
}
@media (min-width: 768px) {
	/* #button-cart (the real buy-box button, always present regardless of viewport)
	   also opens this sheet when a required option is unset — without this, a
	   desktop click gets an edge-to-edge full-width strip instead of a sized dialog
	   consistent with the site's other modals (.ob-modal-panel's own max-width:900px
	   desktop rule, .ob-cart-confirm's 360px). Overrides every positioning property
	   the mobile-first rule above sets; the slide-up transform/transition is for the
	   mobile sheet specifically and isn't worth reproducing here — .ob-modal's own
	   opacity/visibility fade (already used for open/close) is enough on desktop. */
	.ob-size-sheet .ob-size-sheet-panel {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		top: auto;
		margin: 10vh auto;
		width: 90%;
		max-width: 420px;
		border-radius: 8px;
		transform: none;
		transition: none;
	}
}
/* The shared .ob-modal-close's mobile rule (elsewhere in this file) pins it to the
   TOP of the viewport — correct for the full-screen quick-view modal, but this
   sheet is bottom-anchored and doesn't span the screen, so that rule would leave
   the close button floating disconnected from the sheet content. Keep it inside
   the panel's own flow instead. */
.ob-size-sheet .ob-modal-close {
	/* Higher specificity than both the desktop (.ob-modal-close) and mobile
	   (@media...767px .ob-modal-close) generic rules elsewhere in this file, so
	   this one wins regardless of viewport — no separate mobile override needed. */
	position: absolute;
	top: 12px;
	right: 12px;
	box-shadow: none;
}
.ob-size-sheet-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.ob-size-sheet-header img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: var(--ob-bg-alt);
}
.ob-size-sheet-header p {
	margin: 0;
	font-weight: 700;
	font-size: 13px;
}
.ob-size-sheet-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.ob-size-sheet-chip {
	border: 1px solid var(--ob-outline-variant);
	background: var(--ob-white);
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
}
.ob-size-sheet-chip-selected {
	border-color: var(--ob-navy);
	background: var(--ob-navy);
	color: var(--ob-white);
}
.ob-size-sheet-error {
	color: var(--ob-red);
	font-size: 12px;
	min-height: 16px;
}
/* showInlineError() (network-failure fallback, not the option-validation case —
   that goes through the sheet's own .ob-size-sheet-error) inserts right after
   whichever trigger was clicked. Inside .ob-sticky-buybar specifically, that's a
   flex row with no room for a third child — float it above the bar instead of
   letting it squeeze/overflow the row. */
.ob-sticky-buybar .ob-add-to-cart-error {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 100%;
	margin-bottom: 8px;
	background: var(--ob-white);
	padding: 8px 12px;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
	font-size: 12px;
	text-align: center;
}
.ob-size-sheet-add {
	width: 100%;
	margin-top: 12px;
	background: var(--ob-navy);
	color: var(--ob-white);
	border: none;
	border-radius: 999px;
	padding: 14px;
	font-weight: 700;
	font-size: 14px;
}

/* ===== Product image lightbox (fullscreen, swipeable) ===== */
.ob-lightbox .ob-modal-backdrop {
	background: rgba(0,0,0,0.92);
}
.ob-lightbox .ob-modal-close {
	background: rgba(255,255,255,0.15);
	color: var(--ob-white);
	z-index: 10;
}
.ob-lightbox-swiper {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
}
.ob-lightbox-swiper .swiper-wrapper {
	align-items: center;
}
.ob-lightbox-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.ob-lightbox-swiper img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	margin: 0 auto;
}
.ob-lightbox-swiper .ob-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(255,255,255,0.15);
	color: var(--ob-white);
	border: none;
}
.ob-lightbox-swiper .ob-carousel-arrow:hover {
	background: rgba(255,255,255,0.3);
	color: var(--ob-white);
}
.ob-lightbox-swiper .swiper-button-prev {
	left: 16px;
}
.ob-lightbox-swiper .swiper-button-next {
	right: 16px;
}

/* ===== Defensive: nothing on the page should cause horizontal scroll/shift ===== */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}
.swiper-container {
	overflow: hidden;
}