/* ==========================================================================
   CAT Design System — site-wide tokens & reusable components
   Single source of truth for the brand look established on the product page.
   Loaded on every page; page stylesheets (e.g. product-modern.css) build on it.

   Brand: Caterpillar yellow (#FFC400) + near-black ink, RTL, IRANSans.
   ========================================================================== */

:root {
	--cat-accent-700: #e8a200; /* deep amber  */
	--cat-accent-500: #ffc400; /* CAT yellow  */
	--cat-accent-300: #ffd84d; /* light gold  */
	--cat-accent-text: #6f5500; /* readable accent for text on white */
	--cat-ink: #17181c;
	--cat-muted: #6b7080;
	--cat-line: #e8e9ee;
	--cat-surface: #f7f7f9;
	--cat-radius: 16px;
	--cat-shadow-soft: 0 24px 60px -30px rgba(30, 30, 40, 0.25), 0 2px 6px rgba(30, 30, 40, 0.06);
	--cat-glow: rgba(255, 196, 0, 0.45);
	--cat-gradient: linear-gradient(135deg, var(--cat-accent-700) 0%, var(--cat-accent-500) 55%, var(--cat-accent-300) 100%);
}

/* --------------------------------------------------------------------------
   Section title — yellow gradient marker + bold heading
   -------------------------------------------------------------------------- */
.cat-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--cat-ink);
	margin: 0 0 0.9em;
}

.cat-section-title::before {
	content: "";
	width: 5px;
	height: 22px;
	border-radius: 4px;
	background: var(--cat-gradient);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
/* Primary card: white, bordered, soft shadow (buy box style) */
.cat-card {
	background: #fff;
	border: 1px solid var(--cat-line);
	border-radius: 18px;
	padding: 22px 20px;
	box-shadow: 0 14px 34px -22px rgba(30, 30, 40, 0.25);
}

/* Flat surface card: soft gray, no shadow (specs / form style) */
.cat-card--surface {
	background: var(--cat-surface);
	border: 1px solid var(--cat-line);
	border-radius: var(--cat-radius);
	box-shadow: none;
	padding: 24px;
}

/* Listing card: borderless with a whisper of shadow (product-card style) */
.cat-card--flat {
	background: #fff;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 1px 4px rgba(25, 28, 40, 0.1);
	transition: box-shadow 0.2s ease;
}

.cat-card--flat:hover {
	box-shadow: 0 8px 22px rgba(25, 28, 40, 0.14);
}

/* --------------------------------------------------------------------------
   Chips & pills
   -------------------------------------------------------------------------- */
/* Ink pill with yellow text (discount / highlight) */
.cat-chip--ink {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--cat-ink);
	color: var(--cat-accent-500);
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
}

/* Quiet outlined pill (counters / meta, e.g. review count, product code) */
.cat-chip--quiet {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	border: 1px solid var(--cat-line);
	border-radius: 999px;
	padding: 4px 14px;
	color: var(--cat-muted);
	font-size: 0.85em;
	font-weight: 500;
}

.cat-chip--quiet b {
	color: var(--cat-ink);
	font-weight: 700;
}

/* Surface chip (soft gray counter) */
.cat-chip--surface {
	display: inline-flex;
	align-items: center;
	background: var(--cat-surface);
	border: 1px solid var(--cat-line);
	color: var(--cat-muted);
	border-radius: 999px;
	padding: 3px 14px;
	font-size: 0.85em;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* Primary action: yellow gradient, ink text, glow */
.cat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--cat-gradient);
	color: var(--cat-ink);
	border: 0;
	border-radius: 12px;
	font-weight: 700;
	font-size: 0.95em;
	padding: 0 18px;
	min-height: 46px;
	/* Flatsome gives bare <button>/.button a 1em bottom + side margin, which
	   knocks buttons out of alignment with whatever they sit beside. Spacing is
	   the container's job (gap), not the button's. */
	margin: 0;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px var(--cat-glow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cat-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -14px var(--cat-glow);
	color: var(--cat-ink);
}

/* WooCommerce markup often carries `.button` (and `.button.alt`) alongside
   .cat-btn, and Flatsome styles those at a higher specificity — which strips
   the radius and repaints the label white. Restate the essentials so the
   component survives wherever it lands. */
.cat-btn.button,
a.cat-btn.button,
button.cat-btn.button,
.cat-btn.button.alt,
a.cat-btn.button.alt,
button.cat-btn.button.alt {
	background-color: transparent;
	background-image: var(--cat-gradient);
	color: var(--cat-ink);
	border: 0;
	border-radius: 12px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
}

.cat-btn--outline.button,
a.cat-btn--outline.button,
button.cat-btn--outline.button {
	background-image: none;
	background-color: #fff;
	border: 1px solid var(--cat-line);
}

/* Pill variant — reserved for buy-flow actions (add to cart, proceed to
   checkout, place order) so they read as the dominant control on the page.
   Page utilities keep the 12px radius. */
.cat-btn--pill,
.cat-btn--pill.button,
a.cat-btn--pill.button,
button.cat-btn--pill.button,
.cat-btn--pill.button.alt,
a.cat-btn--pill.button.alt {
	border-radius: 999px;
}

/* Full-width variant */
.cat-btn--block {
	display: flex;
	width: 100%;
}

/* Secondary action: white, bordered, sharp */
.cat-btn--outline {
	background: #fff;
	color: var(--cat-ink);
	border: 1px solid var(--cat-line);
	box-shadow: none;
}

.cat-btn--outline:hover {
	transform: none;
	border-color: var(--cat-accent-500);
	box-shadow: 0 10px 24px -16px var(--cat-glow);
	color: var(--cat-ink);
}

/* Circular icon button (nav arrows, close, bookmark) */
.cat-btn--circle {
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--cat-line);
	box-shadow: none;
	color: var(--cat-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cat-btn--circle:hover {
	transform: none;
	border-color: var(--cat-accent-500);
	box-shadow: 0 8px 18px -12px var(--cat-glow);
}

.cat-btn--circle:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.cat-field input[type="text"],
.cat-field input[type="search"],
.cat-field input[type="email"],
.cat-field input[type="tel"],
.cat-field input[type="number"],
.cat-field input[type="password"],
.cat-field select,
.cat-field textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--cat-line);
	border-radius: 12px;
	padding: 11px 14px;
	font-size: 0.92em;
	color: var(--cat-ink);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	/* Flatsome pins every input to height:2.507em, which collapses the box
	   once our padding is applied — and leaves fields shorter than the 46px
	   buttons they sit beside. */
	height: auto;
	min-height: 46px;
}

.cat-field input:focus,
.cat-field select:focus,
.cat-field textarea:focus {
	border-color: var(--cat-accent-500);
	box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.22);
	outline: none;
}

/* --------------------------------------------------------------------------
   Trust strip (authenticity-badge style: icon tile + two-line text)
   -------------------------------------------------------------------------- */
.cat-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fffdf3;
	border: 1px solid #f6e7b3;
	border-radius: 12px;
	padding: 12px 14px;
}

.cat-strip__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--cat-gradient);
	color: var(--cat-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cat-strip__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cat-strip__text strong {
	color: var(--cat-ink);
	font-size: 0.9em;
}

.cat-strip__text span {
	color: var(--cat-muted);
	font-size: 0.78em;
}

/* --------------------------------------------------------------------------
   Rating stars (display-only row)
   -------------------------------------------------------------------------- */
.cat-stars {
	display: inline-flex;
	gap: 1px;
	font-size: 17px;
	color: #e3e6ee;
	direction: ltr;
}

.cat-stars .is-on {
	color: #f5b301;
}

/* --------------------------------------------------------------------------
   Header Navigation — white menu bar on every page (was light yellow
   everywhere except the product page)
   -------------------------------------------------------------------------- */
.cat-hd__bar {
	--cat-hd-bar-bg: #ffffff;
	background: #ffffff;
}

/* --------------------------------------------------------------------------
   Header Navigation — Menu Icons
   -------------------------------------------------------------------------- */
.cat-menu-icon {
	display: inline-block;
	vertical-align: middle;
	width: 17px;
	height: 17px;
	margin-inline-end: 6px;
	color: currentColor;
	opacity: 0.82;
	flex-shrink: 0;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, color 0.2s ease;
}

.cat-hd__menu > li > a,
.cat-hd__dmenu > li > a {
	display: inline-flex;
	align-items: center;
}

/* Desktop main menu: 15px labels, 22px icons (every page) */
.cat-hd__menu > li > a {
	font-size: 15px;
}

.cat-hd__menu > li > a .cat-menu-icon {
	width: 22px;
	height: 22px;
}

/* Narrower desktops: keep all nine items on one row */
@media (min-width: 850px) and (max-width: 1500px) {
	.cat-hd__menu > li > a {
		font-size: 14px;
		padding-inline: 9px;
	}

	.cat-hd__menu > li > a .cat-menu-icon {
		width: 19px;
		height: 19px;
		margin-inline-end: 4px;
	}
}

.cat-hd__menu > li:hover > a .cat-menu-icon,
.cat-hd__menu > li.current-menu-item > a .cat-menu-icon,
.cat-hd__dmenu > li:hover > a .cat-menu-icon,
.cat-hd__dmenu > li.current-menu-item > a .cat-menu-icon {
	opacity: 1;
	color: var(--cat-accent-700, #e8a200);
	transform: translateY(-1px);
}

.cat-menu-label {
	display: inline-block;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Header Navigation — «کفش تک سایز» call-to-action (li.cat-nav-single)
   An ink pill on the light-yellow bar: the one menu item that is a button.
   -------------------------------------------------------------------------- */
.cat-hd__menu > li.cat-nav-single {
	margin-inline-start: 12px;
}

.cat-hd__menu > li.cat-nav-single > a {
	height: 40px;
	padding-inline: 14px 18px;
	border-radius: 999px;
	background: var(--cat-ink);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 20px -12px rgba(23, 24, 28, 0.75);
	transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.cat-hd__menu > li.cat-nav-single > a::after {
	content: none;
}

/* Attention dot on the pill's top corner */
.cat-hd__menu > li.cat-nav-single > a::before {
	content: "";
	position: absolute;
	top: -2px;
	inset-inline-end: 2px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--cat-hd-bar-bg, #fff7dc);
	border-radius: 50%;
	background: var(--cat-accent-500);
	animation: cat-nav-single-ping 2.4s ease-out infinite;
}

@keyframes cat-nav-single-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.7);
	}

	70%,
	100% {
		box-shadow: 0 0 0 9px rgba(255, 196, 0, 0);
	}
}

.cat-hd__menu > li.cat-nav-single > a .cat-menu-icon,
.cat-hd__menu > li.cat-nav-single:hover > a .cat-menu-icon,
.cat-hd__menu > li.cat-nav-single.current-menu-item > a .cat-menu-icon {
	color: var(--cat-accent-500);
	opacity: 1;
}

/* The label stays white in every state; only the icon carries the yellow. */
.cat-hd__menu > li.cat-nav-single:hover > a,
.cat-hd__menu > li.cat-nav-single > a:focus-visible,
.cat-hd__menu > li.cat-nav-single.current-menu-item > a {
	color: #fff;
}

.cat-hd__menu > li.cat-nav-single:hover > a {
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -12px rgba(23, 24, 28, 0.8);
}

@media (min-width: 850px) and (max-width: 1500px) {
	.cat-hd__menu > li.cat-nav-single {
		margin-inline-start: 6px;
	}

	.cat-hd__menu > li.cat-nav-single > a {
		height: 36px;
		padding-inline: 11px 14px;
	}
}

/* Ten items on one row: tighten step by step as the bar narrows */
@media (min-width: 850px) and (max-width: 1420px) {
	.cat-hd__menu > li > a {
		font-size: 13.5px;
		padding-inline: 6px;
	}

	.cat-hd__menu > li > a::after {
		inset-inline: 6px;
	}

	.cat-hd__menu > li > a .cat-menu-icon {
		width: 17px;
		height: 17px;
		margin-inline-end: 3px;
	}

	.cat-hd__menu .menu-item-has-children > a::before {
		margin-inline-start: 5px;
	}

	.cat-hd__menu > li.cat-nav-single {
		margin-inline-start: 4px;
	}

	.cat-hd__menu > li.cat-nav-single > a {
		padding-inline: 12px;
	}
}

@media (min-width: 850px) and (max-width: 1400px) {
	.cat-hd__menu > li:not(.cat-nav-single) > a .cat-menu-icon {
		display: none;
	}
}

@media (min-width: 850px) and (max-width: 1180px) {
	.cat-hd__menu > li > a {
		font-size: 13px;
		padding-inline: 4px;
	}

	.cat-hd__menu > li > a::after {
		inset-inline: 4px;
	}

	.cat-hd__menu .menu-item-has-children > a::before {
		margin-inline-start: 4px;
	}

	.cat-hd__menu > li.cat-nav-single > a {
		padding-inline: 11px;
	}

	.cat-hd__menu > li.cat-nav-single > a .cat-menu-icon {
		display: none;
	}
}

@media (min-width: 850px) and (max-width: 1120px) {
	.cat-hd__menu > li > a {
		font-size: 12.5px;
	}
}

@media (min-width: 850px) and (max-width: 1060px) {
	.cat-hd__menu > li > a {
		font-size: 12px;
		padding-inline: 3px;
	}

	.cat-hd__menu > li > a::after {
		inset-inline: 3px;
	}

	.cat-hd__menu > li.cat-nav-single {
		margin-inline-start: 2px;
	}

	.cat-hd__menu > li.cat-nav-single > a {
		height: 34px;
		padding-inline: 9px;
	}
}

/* Mobile drawer: the same ink button, full row */
.cat-hd__drawer-nav .cat-hd__dmenu > li.cat-nav-single {
	padding: 12px 14px;
}

.cat-hd__drawer-nav .cat-hd__dmenu > li.cat-nav-single > a {
	display: flex;
	justify-content: center;
	padding: 13px 18px;
	border-radius: 14px;
	background: var(--cat-ink);
	color: #fff;
	font-weight: 700;
}

.cat-hd__drawer-nav .cat-hd__dmenu > li.cat-nav-single > a .cat-menu-icon {
	color: var(--cat-accent-500);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cat-hd__menu > li.cat-nav-single > a::before {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Header Navigation — Brands Dropdown Menu (2 Columns Megamenu)
   -------------------------------------------------------------------------- */
.cat-hd__menu > li.cat-nav-brands {
	position: relative;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px 12px !important;
	width: 530px !important;
	padding: 16px 14px !important;
	border-radius: 20px !important;
	border: 1px solid var(--cat-line, #e8e9ee) !important;
	background: #ffffff !important;
	box-shadow: 0 24px 56px -16px rgba(23, 24, 28, 0.16), 0 4px 16px -2px rgba(23, 24, 28, 0.05) !important;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu li.cat-nav-brand-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu li.cat-nav-brand-item > a {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 9px 12px !important;
	border-radius: 12px !important;
	background: #fafafc !important;
	border: 1px solid #f0f1f5 !important;
	color: var(--cat-ink, #17181c) !important;
	text-decoration: none !important;
	transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu li.cat-nav-brand-item > a:hover,
.cat-hd__menu > li.cat-nav-brands > .sub-menu li.cat-nav-brand-item.current-menu-item > a {
	background: #ffffff !important;
	border-color: rgba(255, 196, 0, 0.75) !important;
	box-shadow: 0 4px 14px -3px rgba(255, 196, 0, 0.25), 0 2px 6px -1px rgba(23, 24, 28, 0.04) !important;
	transform: translateX(-3px) !important;
}

/* Brand logo icon */
.cat-brand-item__thumb {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 32px !important;
	flex: 0 0 36px !important;
	margin-inline-end: 14px !important;
	transition: transform 0.2s ease !important;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu a:hover .cat-brand-item__thumb {
	transform: scale(1.1) !important;
}

.cat-brand-item__thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: 34px !important;
	max-height: 30px !important;
	object-fit: contain !important;
	display: block !important;
}

/* Brand name in Persian */
.cat-brand-item__name {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--cat-ink, #17181c) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	flex: 1 1 auto !important;
}

.cat-hd__menu > li.cat-nav-brands > .sub-menu a:hover .cat-brand-item__name {
	color: #000000 !important;
}

/* Remove arrow completely */
.cat-brand-item__arrow {
	display: none !important;
}

/* Mobile drawer adaptation */
.cat-hd__drawer-nav .sub-menu li.cat-nav-brand-item > a {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 11px 20px !important;
}

.cat-hd__drawer-nav .sub-menu li.cat-nav-brand-item .cat-brand-item__thumb {
	width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	margin-inline-end: 14px !important;
}

.cat-hd__drawer-nav .sub-menu li.cat-nav-brand-item .cat-brand-item__name {
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Header Navigation — Men & Women Shoes Dropdown Submenu
   -------------------------------------------------------------------------- */
.cat-hd__menu > li.cat-nav-men > .sub-menu,
.cat-hd__menu > li.cat-nav-women > .sub-menu {
	min-width: 250px;
	padding: 8px 6px;
	border-radius: 16px;
	border: 1px solid var(--cat-line, #e8e9ee);
	background: #ffffff;
	box-shadow: 0 20px 48px -15px rgba(23, 24, 28, 0.15), 0 2px 8px rgba(23, 24, 28, 0.05);
}

.cat-hd__menu > li.cat-nav-men > .sub-menu li.cat-nav-men-all > a,
.cat-hd__menu > li.cat-nav-women > .sub-menu li.cat-nav-women-all > a {
	display: flex !important;
	align-items: center !important;
	padding: 10px 14px !important;
	border-radius: 10px;
	font-size: 15px !important;
	font-weight: 800 !important;
	background: #fffdf5 !important;
	color: #17181c !important;
	border-bottom: 1px solid var(--cat-line, #e8e9ee) !important;
	margin-bottom: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.cat-hd__menu > li.cat-nav-men > .sub-menu li.cat-nav-men-all > a:hover,
.cat-hd__menu > li.cat-nav-women > .sub-menu li.cat-nav-women-all > a:hover {
	background: #fff4cf !important;
	color: #17181c !important;
}

.cat-hd__menu > li.cat-nav-men > .sub-menu li.cat-nav-men-sub > a,
.cat-hd__menu > li.cat-nav-women > .sub-menu li.cat-nav-women-sub > a {
	display: flex !important;
	align-items: center !important;
	padding: 9px 14px !important;
	border-radius: 10px;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--cat-ink, #17181c) !important;
	transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.cat-hd__menu > li.cat-nav-men > .sub-menu li.cat-nav-men-sub > a:hover,
.cat-hd__menu > li.cat-nav-women > .sub-menu li.cat-nav-women-sub > a:hover {
	background: #f7f7f9 !important;
	color: var(--cat-accent-700, #e8a200) !important;
	transform: translateX(-3px);
}

/* --------------------------------------------------------------------------
   Header Navigation — Shoe Sizes Megamenu (2 Columns — matching Brands)
   -------------------------------------------------------------------------- */
.cat-hd__menu > li.cat-nav-sizes > .sub-menu {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px 12px !important;
	width: 480px !important;
	min-width: 480px !important;
	padding: 16px 14px !important;
	border-radius: 20px !important;
	border: 1px solid var(--cat-line, #e8e9ee) !important;
	background: #ffffff !important;
	box-shadow: 0 20px 48px -15px rgba(23, 24, 28, 0.15), 0 2px 8px rgba(23, 24, 28, 0.05) !important;
}

.cat-hd__menu .sub-menu li.cat-nav-size-item > a {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 9px 12px !important;
	border-radius: 12px !important;
	background: #fafafc !important;
	border: 1px solid #f0f1f5 !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--cat-ink, #17181c) !important;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
}

.cat-hd__menu .sub-menu li.cat-nav-size-item > a:hover {
	background: #ffffff !important;
	border-color: rgba(255, 196, 0, 0.75) !important;
	box-shadow: 0 4px 14px -3px rgba(255, 196, 0, 0.25), 0 2px 6px -1px rgba(23, 24, 28, 0.04) !important;
	color: var(--cat-ink, #17181c) !important;
	transform: translateX(-3px) !important;
}

.cat-size-item__thumb {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 32px !important;
	flex: 0 0 40px !important;
	margin-inline-end: 12px !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
	line-height: 1 !important;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cat-size-item__thumb--all {
	color: var(--cat-ink, #17181c) !important;
}

.cat-size-item__eu {
	font-size: 8.5px !important;
	font-weight: 800 !important;
	color: var(--cat-muted, #8c909e) !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	margin-bottom: 2px !important;
	transition: color 0.15s ease !important;
}

.cat-size-item__num {
	font-family: var(--cat-hd-num, 'IRANSansFaNum', sans-serif) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	color: var(--cat-ink, #17181c) !important;
	line-height: 1 !important;
	transition: color 0.15s ease !important;
}

.cat-hd__menu .sub-menu a:hover .cat-size-item__thumb {
	background: var(--cat-gradient, linear-gradient(135deg, #e8a200 0%, #ffc400 55%, #ffd84d 100%)) !important;
	border-color: rgba(232, 162, 0, 0.4) !important;
	box-shadow: 0 4px 10px -2px rgba(255, 196, 0, 0.45) !important;
	transform: scale(1.08) !important;
}

.cat-hd__menu .sub-menu a:hover .cat-size-item__eu {
	color: #6f5500 !important;
}

.cat-hd__menu .sub-menu a:hover .cat-size-item__num {
	color: #17181c !important;
}

.cat-size-item__name {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--cat-ink, #17181c) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

.cat-size-item__arrow {
	display: none !important;
}






/* --------------------------------------------------------------------------
   Home — «خرید کفش براساس سایز» image grid (Elementor widget 8bcfd7d)
   Phones: the 2 × 2 grid bleeds into the page gutter so each banner is ~10%
   larger; the section title above keeps the normal gutter.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-8bcfd7d .opt-grid-container {
		width: calc(100% + 38px);
		margin-inline: -19px;
	}
}

/* Homepage hero slider (pooya-banner widget): phone sizing now lives in the
   widget itself (4:5 box with per-slide mobile artwork, 16:9 fallback). */

/* --------------------------------------------------------------------------
   Home — category tiles «مردانه / زنانه / ایمنی / راحتی / اکسسوری»
   (Elementor widget bd400a2). On phones all five fit one screen: the
   widget's −50px edge bleed is dropped, the artwork (card + circle are baked
   into the image) fills each cell, and the label shrinks to a caption.
   `body` prefix outranks Elementor's generated selector.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body .elementor-1029 .elementor-element.elementor-element-bd400a2 .adv-ultimate-wrapper {
		margin-inline: 0;
	}

	body .elementor-1029 .elementor-element.elementor-element-bd400a2 .opt-grid-container {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-gap: 6px;
		width: calc(100% + 8px);
		margin-inline: -4px;
	}

	body .elementor-1029 .elementor-element.elementor-element-bd400a2 .opt-grid-item img {
		width: 100%;
		max-width: 76px;
	}

	body .elementor-1029 .elementor-element.elementor-element-bd400a2 .opt-grid-title {
		margin-top: 6px;
		font-size: 12.5px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--cat-ink, #17181c);
	}
}

/* Hero slider arrows on phones: smaller, tucked into the bottom corners next
   to the dots instead of two big discs over the shoes. */
@media (max-width: 768px) {
	.cb-arrow-c29c5a4 {
		top: auto !important;
		bottom: 10px !important;
		width: 34px !important;
		height: 34px !important;
		margin: 0 !important; /* Flatsome gives every <button> a bottom margin */
		padding: 0 !important;
		min-height: 0 !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
		transform: none !important;
		opacity: 0.85 !important;
		background-color: rgba(255, 255, 255, 0.22) !important;
	}

	.cb-arrow-c29c5a4:hover {
		transform: none !important;
	}

	.cb-arrow-c29c5a4 svg {
		width: 16px !important;
		height: 16px !important;
	}
}