/* =============================================================================
   Stone Galleria — redesign components layer
   Chrome (header, offcanvas, footer) + primitives (buttons, forms, cards,
   accordions, tabs, tables, sliders, pagination) re-skinned in the reference
   design language. Styles only — structure and behaviour stay untouched.
   ========================================================================== */

/* ================================================================= header == */
.header-main {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--rd-line) !important;
	box-shadow: none !important;
	position: sticky !important;
	top: 0;
	z-index: 1030;
	transition:
		box-shadow 0.35s var(--rd-ease),
		background 0.35s var(--rd-ease),
		transform 0.35s var(--rd-ease);
}

/* Product pages: slide the site menu away while the page scrolls down. */
body:has(section.product-dp) .header-main.is-header-hidden {
	pointer-events: none;
	transform: translateY(-100%) !important;
}

.header-main.is-scrolled {
	box-shadow: 0 12px 36px -24px rgba(13, 13, 13, 0.35) !important;
}

.header-main .container {
	max-width: none !important;
	padding-inline: clamp(16px, 3.3vw, 48px) !important;
}

.header-desktop .navbar {
	align-items: center !important;
	display: flex !important;
	gap: 20px;
	height: 80px;
	padding: 0 !important;
	position: relative;
	transition: height 0.3s var(--rd-ease);
}

.header-desktop.is-scrolled .navbar {
	height: 68px;
}

.header-desktop .navbar-brand {
	align-items: center;
	display: flex;
	line-height: 1;
	margin: 0;
	padding: 0;
}

.header-desktop .navbar-brand img {
	height: 54px !important;
	width: auto !important;
	transition: height 0.3s var(--rd-ease);
}

.gg-wordmark {
	align-items: center;
	display: inline-flex;
	text-decoration: none !important;
}

.gg-wordmark__name {
	color: var(--rd-ink);
	font-family: var(--rd-font-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1;
	white-space: nowrap;
}

.header-desktop.is-scrolled .gg-wordmark__name {
	font-size: 18px;
}

.header-desktop.is-scrolled .navbar-brand img {
	height: 44px !important;
}

.header-desktop .navbar-nav {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: clamp(6px, 1.6vw, 26px);
	margin: 0 auto;
}

.header-desktop .navbar-nav .nav-link {
	color: var(--rd-ink) !important;
	font-family: var(--rd-font-display) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: -0.03em;
	opacity: 0.88;
	padding: 8px 2px !important;
	position: relative;
	transition: opacity 0.25s var(--rd-ease);
	white-space: nowrap;
}

.header-desktop .navbar-nav .nav-link::after {
	background: currentColor;
	bottom: 2px;
	content: '';
	height: 1.5px;
	left: 0;
	position: absolute;
	right: 100%;
	transition: right 0.3s var(--rd-ease);
}

.header-desktop .navbar-nav .nav-link:hover,
.header-desktop .navbar-nav .nav-link.active {
	opacity: 1;
}

.header-desktop .navbar-nav .nav-link:hover::after,
.header-desktop .navbar-nav .nav-link.active::after {
	right: 0;
}

.header-desktop .dropdown-toggle::after {
	border: none;
	content: '';
	display: none;
}

/* search: icon-first, expands as a pill */
.header-search {
	align-items: center;
	background: transparent !important;
	display: flex !important;
	position: relative;
	width: auto !important;
}

.header-search .header-search-toggle,
.header-search .header-search-toggle.btn {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: var(--rd-ink) !important;
	display: inline-flex !important;
	height: 42px !important;
	justify-content: center !important;
	margin: 0 !important;
	min-width: 42px !important;
	padding: 0 !important;
	position: static !important;
	width: 42px !important;
}

.header-search .header-search-toggle:hover,
.header-search .header-search-toggle.btn:hover {
	background: var(--rd-grey-100) !important;
	color: var(--rd-ink) !important;
	transform: none !important;
}

.header-search-toggle svg {
	height: 19px;
	width: 19px;
}

.header-search-input {
	background: var(--rd-grey-100) !important;
	border: 1px solid transparent !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-ink) !important;
	font-size: 15px !important;
	height: 42px;
	margin-left: 2px;
	max-width: 0;
	opacity: 0;
	padding: 0 !important;
	transition: max-width 0.35s var(--rd-ease), opacity 0.3s var(--rd-ease), padding 0.3s var(--rd-ease);
	visibility: hidden;
}

.header-search.is-open .header-search-input,
.header-search:focus-within .header-search-input {
	max-width: 260px;
	opacity: 1;
	padding: 0 18px !important;
	visibility: visible;
}

.header-search-input:focus {
	background: var(--rd-paper) !important;
	border-color: var(--rd-ink) !important;
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(13, 13, 13, 0.06) !important;
}

/* language select: quiet dot-sized control */
.header-lang-switch {
	align-items: center;
	display: flex;
}

.header-locale-select {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	background-image: linear-gradient(45deg, transparent 50%, var(--rd-grey-600) 50%),
		linear-gradient(135deg, var(--rd-grey-600) 50%, transparent 50%) !important;
	background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55% !important;
	background-repeat: no-repeat !important;
	background-size: 4px 4px, 4px 4px !important;
	border: 1px solid var(--rd-line-strong) !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-ink) !important;
	cursor: pointer;
	font-family: var(--rd-font-caps) !important;
	font-size: 12px !important;
	font-weight: 500;
	height: 34px;
	letter-spacing: 0.06em;
	padding: 0 22px 0 12px !important;
	transition: border-color 0.25s var(--rd-ease);
}

.header-locale-select:hover {
	border-color: var(--rd-ink) !important;
}

/* the mirror puts its main call-to-action inside the nav list on some routes */
.header-desktop .nav-cta,
.header-desktop a[href$='/quotation/'],
.header-main .btn-quote {
	background: var(--rd-black) !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-paper) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	height: 40px;
	letter-spacing: 0.01em;
	line-height: 40px;
	padding: 0 24px !important;
	transition: transform 0.3s var(--rd-ease), box-shadow 0.3s var(--rd-ease);
}

.header-desktop .nav-cta:hover,
.header-desktop a[href$='/quotation/']:hover {
	box-shadow: var(--rd-shadow-md);
	transform: translateY(-1px);
}

/* --------------------------------------------------- mobile header ------ */
.header-mobile {
	display: none;
}

.header-mobile .navbar {
	align-items: center !important;
	display: flex !important;
	gap: 10px;
	height: 64px;
	justify-content: space-between;
	padding: 0 !important;
}

.header-mobile .navbar-toggler {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0 !important;
	width: 40px;
}

.header-mobile .navbar-toggler-icon {
	background-image: none !important;
	height: 14px;
	position: relative;
	width: 22px;
}

.header-mobile .navbar-toggler-icon::before,
.header-mobile .navbar-toggler-icon::after {
	background: var(--rd-ink);
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	transition: all 0.3s var(--rd-ease);
	width: 100%;
}

.header-mobile .navbar-toggler-icon::before {
	top: 0;
}

.header-mobile .navbar-toggler-icon::after {
	bottom: 0;
}

.header-mobile .navbar-brand img {
	height: 34px !important;
	width: auto !important;
}

.header-mobile .gg-wordmark__name {
	font-size: 18px;
}

.header-mobile .header-search-toggle {
	height: 38px;
	width: 38px;
}

.header-mobile .header-search-input {
	height: 38px;
}

.header-mobile .header-search.is-open .header-search-input {
	max-width: 150px;
}

.header-mobile .header-locale-select {
	height: 32px;
}

@media (max-width: 1199.98px) {
	.header-desktop {
		display: none !important;
	}
	.header-mobile {
		display: block !important;
	}
	:root {
		--rd-header-h: 64px;
	}
}

/* ------------------------------------------------- offcanvas main menu -- */
/* the mirror ships its own full-screen menu (.offcanvas-menu) plus submenu
   screens (.submenu-screen) — styled here, Bootstrap's .offcanvas kept as a
   safety net for any page that uses it. */
.offcanvas-menu,
.submenu-screen {
	background: var(--rd-paper) !important;
	color: var(--rd-ink);
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px clamp(18px, 5vw, 28px) 48px;
	position: fixed;
	width: 100%;
	z-index: 999999;
}

.offcanvas-menu .btn-close,
.submenu-screen .btn-close {
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='1.8'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")
		center/18px no-repeat !important;
	border: 0 !important;
	height: 40px;
	opacity: 1 !important;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 40px;
}

.offcanvas-menu .navbar-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.offcanvas-menu .nav-item {
	width: 100%;
}

.offcanvas-menu .nav-link {
	align-items: center;
	border-bottom: 1px solid var(--rd-line);
	color: var(--rd-ink) !important;
	display: flex;
	font-family: var(--rd-font-display) !important;
	font-size: clamp(19px, 4.6vw, 25px) !important;
	font-weight: 500 !important;
	justify-content: space-between;
	letter-spacing: -0.03em;
	padding: 16px 0 !important;
	text-decoration: none !important;
	transition: opacity 0.25s var(--rd-ease);
}

.offcanvas-menu .nav-link:hover {
	opacity: 0.55;
}

.offcanvas-menu .nav-link svg {
	flex: 0 0 auto;
	margin-left: 8px;
	stroke: var(--rd-ink);
}

.offcanvas-menu .submenu-screen .nav-link,
.submenu-screen .nav-link {
	font-size: clamp(16px, 4vw, 20px) !important;
	font-weight: 400 !important;
}

.submenu-screen .back-btn {
	align-items: center;
	color: var(--rd-ink) !important;
	display: inline-flex;
	font-family: var(--rd-font-caps) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	gap: 8px;
	letter-spacing: 0.08em;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.offcanvas-menu .search-container,
.submenu-screen .search-container {
	margin-bottom: 22px;
	position: relative;
}

.offcanvas-menu .search-container input,
.submenu-screen .search-container input {
	background: var(--rd-grey-100) !important;
	border: 1px solid transparent !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-ink) !important;
	font-family: var(--rd-font) !important;
	min-height: 48px;
	padding: 0 20px !important;
	width: 100%;
}

.offcanvas-menu .search-container button.btn,
.submenu-screen .search-container button.btn {
	color: var(--rd-grey-600);
	width: 48px;
}

.offcanvas {
	background: var(--rd-paper) !important;
	border: 0 !important;
	color: var(--rd-ink);
	width: min(420px, 92vw) !important;
}

.offcanvas .offcanvas-header {
	border-bottom: 1px solid var(--rd-line);
	padding: 20px 24px !important;
}

.offcanvas-header {
	border-bottom: 1px solid var(--rd-line);
	padding: 20px 24px !important;
}

.offcanvas-title,
.offcanvas-header .offcanvas-title {
	font-family: var(--rd-font-display) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -0.03em;
}

.offcanvas .btn-close {
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='1.8'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")
		center/18px no-repeat !important;
	height: 34px;
	opacity: 1 !important;
	width: 34px;
}

.offcanvas .mobile-menu a,
.offcanvas .mobile-menu .menu-link,
.offcanvas nav a {
	border-bottom: 1px solid var(--rd-line);
	color: var(--rd-ink) !important;
	display: block;
	font-family: var(--rd-font-display) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	letter-spacing: -0.03em;
	padding: 15px 0 !important;
	text-decoration: none;
}

.offcanvas .mobile-menu a:hover {
	opacity: 0.6;
}

.offcanvas .mobile-menu .submenu a,
.offcanvas nav .submenu a {
	border: 0;
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 9px 0 9px 14px !important;
}

/* the mirror ships its own offcanvas markup; keep its inner lists tidy */
#mobileMenuDrawer .dropdown-menu,
.offcanvas .dropdown-menu {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 6px 2px !important;
	position: static !important;
}

/* =============================================================== footer == */
.footer {
	background: var(--rd-black) !important;
	color: rgba(255, 255, 255, 0.72) !important;
	margin-top: clamp(48px, 6vw, 96px);
	overflow: hidden;
	padding-block: clamp(44px, 5.5vw, 76px) 26px !important;
	position: relative;
}

/* subtle marble-like sheen: two soft radial glows + fine noise */
.footer::before {
	background: radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, 0.09), transparent 55%),
		radial-gradient(90% 70% at 88% 90%, rgba(241, 223, 194, 0.08), transparent 60%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.footer > .container {
	position: relative;
}

.footer .gg-wordmark__name {
	color: #fff;
	font-size: 28px;
}

.footer h4,
.footer .h4 {
	color: var(--rd-paper) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	margin-bottom: 18px !important;
	opacity: 0.55;
	text-transform: uppercase;
}

.footer a {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 15px !important;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	transition: color 0.25s var(--rd-ease), transform 0.25s var(--rd-ease);
}

.footer a:hover {
	color: var(--rd-paper) !important;
}

.footer nav a,
.footer .middle-footer li a {
	display: inline-block;
	line-height: 1.4;
	padding: 4px 0;
}

.footer nav a:hover {
	transform: translateX(3px);
}

.footer .top-footer {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: clamp(22px, 3vw, 38px);
}

.footer .top-footer h3,
.footer .top-footer h2,
.footer .top-footer .footer-title {
	color: var(--rd-paper) !important;
	font-size: clamp(26px, 3.4vw, 44px) !important;
	font-weight: 500 !important;
	letter-spacing: -0.04em;
}

.footer .middle-footer {
	padding-block: clamp(26px, 3.4vw, 44px);
}

.footer .footer__buttons a,
.footer .brxe-div a.btn,
.footer .top-footer .btn {
	background: var(--rd-paper) !important;
	border: 0 !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-black) !important;
	display: inline-block;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1;
	padding: 14px 26px !important;
	transition: transform 0.3s var(--rd-ease), opacity 0.3s var(--rd-ease);
}

.footer .footer__buttons a:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

.footer__table-item,
.footer__table-links {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 22px;
}

.footer__reviews,
.footer .footer__reviews * {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 13px !important;
}

.footer__closing-row {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: clamp(20px, 2.6vw, 34px);
	padding-top: 18px;
}

.footer__closing-legal,
.footer__closing-legal a,
.footer__bottom-links a {
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 13px !important;
}

.footer__media {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__media a {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	transition: background 0.3s var(--rd-ease), transform 0.3s var(--rd-ease);
	width: 38px;
}

.footer__media a:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
}

.footer__media img,
.footer__media svg {
	height: 16px !important;
	width: 16px !important;
	filter: brightness(0) invert(1);
}

/* outlined links in the footer (e.g. the address email) */
.footer .button_transparent1,
.footer .brxe-text-link.button,
.footer a[href^='mailto:'] {
	border-color: rgba(255, 255, 255, 0.34) !important;
	color: var(--rd-paper) !important;
}

.footer .button_transparent1:hover,
.footer a[href^='mailto:']:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: var(--rd-paper) !important;
}

/* ============================================================== buttons == */
.btn,
button.btn,
.btn-six,
.btn-four,
.btn-five,
.btn-three,
.july-button,
.btn-readmore,
.read-more-btn,
.ss-style-link,
.quote-link,
.sg-tab-btn,
.currency-btn,
.copy-btn,
.light-share-btn {
	background: var(--rd-black) !important;
	border: 1px solid var(--rd-black) !important;
	border-radius: var(--rd-pill) !important;
	box-shadow: none !important;
	color: var(--rd-paper) !important;
	cursor: pointer;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	line-height: 1 !important;
	padding: 15px 28px !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: transform 0.3s var(--rd-ease), box-shadow 0.3s var(--rd-ease),
		background 0.3s var(--rd-ease), color 0.3s var(--rd-ease) !important;
}

.btn:hover,
button.btn:hover,
.btn-six:hover,
.btn-four:hover,
.july-button:hover,
.btn-readmore:hover,
.read-more-btn:hover,
.quote-link:hover,
.sg-tab-btn:hover,
.currency-btn:hover,
.copy-btn:hover,
.light-share-btn:hover {
	background: var(--rd-ink-2) !important;
	box-shadow: var(--rd-shadow-md) !important;
	color: var(--rd-paper) !important;
	transform: translateY(-2px);
}

.btn:active,
.btn:focus,
button:focus-visible {
	box-shadow: 0 0 0 4px rgba(13, 13, 13, 0.12) !important;
	outline: none !important;
}

/* light ("secondary") variants used across the mirror */
.btn-light,
.btn-outline-dark,
.btn-outline-light,
.btn-white,
.btn-second,
.btn-secondary,
.currency-btn.active,
.sg-tab-btn.active {
	background: var(--rd-paper) !important;
	border-color: var(--rd-line-strong) !important;
	color: var(--rd-ink) !important;
}

.btn-light:hover,
.btn-outline-dark:hover,
.btn-white:hover {
	background: var(--rd-grey-100) !important;
	color: var(--rd-black) !important;
}

.btn-outline-light:hover {
	background: var(--rd-paper) !important;
	color: var(--rd-black) !important;
}

/* ghost text links ("Read more", "Explore") */
.read-more-btn,
.btn-readmore {
	background: transparent !important;
	border-color: var(--rd-line-strong) !important;
	color: var(--rd-ink) !important;
}

.read-more-btn:hover,
.btn-readmore:hover {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

/* small in-card buttons (price / specs rows) */
.currency-btn,
.copy-btn,
.light-share-btn {
	font-size: 12.5px !important;
	padding: 9px 16px !important;
}

.currency-btn {
	background: transparent !important;
	border-color: var(--rd-line-strong) !important;
	color: var(--rd-ink) !important;
}

.currency-btn.active {
	background: var(--rd-black) !important;
	border-color: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

/* plain links that behave like buttons keep pointer affordance */
a.btn,
a.btn-six,
a.btn-four,
a.july-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================ headings on dark surfaces == */
/* the global heading colour is ink, so dark bands need to opt back in */
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.community h1,
.community h2,
.community h3,
.community h4,
.community h5,
.hero-tabs .tab-heading,
.hero-tabs .tab-pane h1,
.hero-tabs .tab-pane h2,
.hero-tabs .tab-pane h3,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-black h1,
.bg-black h2,
.bg-black h3,
.bg-black h4,
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.marquee-container h1,
.marquee-container h2 {
	color: var(--rd-paper) !important;
}

/* ================================================================= forms == */.form-label,
label.form-label,
.floating-label,
.finish-label,
.grade-label-wrap > label {
	color: var(--rd-grey-600) !important;
	font-family: var(--rd-font) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	margin-bottom: 8px !important;
	text-transform: none !important;
}

.form-control,
.form-select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
select,
textarea {
	background: var(--rd-grey-100) !important;
	border: 1px solid transparent !important;
	border-radius: var(--rd-radius-md) !important;
	box-shadow: none !important;
	color: var(--rd-ink) !important;
	font-family: var(--rd-font) !important;
	font-size: 15px !important;
	letter-spacing: -0.01em;
	padding: 14px 20px !important;
	transition: background 0.25s var(--rd-ease), border-color 0.25s var(--rd-ease),
		box-shadow 0.25s var(--rd-ease);
}

.form-select,
select {
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--rd-ink) 50%),
		linear-gradient(135deg, var(--rd-ink) 50%, transparent 50%) !important;
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50% !important;
	background-repeat: no-repeat !important;
	background-size: 5px 5px, 5px 5px !important;
	padding-right: 46px !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
	background: var(--rd-paper) !important;
	border-color: var(--rd-ink) !important;
	box-shadow: 0 0 0 4px rgba(13, 13, 13, 0.07) !important;
	outline: none !important;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

.form-check-input {
	border: 1.5px solid var(--rd-grey-400) !important;
	box-shadow: none !important;
}

.form-check-input:checked {
	background-color: var(--rd-black) !important;
	border-color: var(--rd-black) !important;
}

.form-check-label {
	color: var(--rd-grey-700);
	font-size: 14px;
}

/* inline validation text stays legible */
.invalid-feedback,
.text-danger {
	color: #d0342c !important;
}

/* ================================================================= cards == */
.card,
.news-item,
.zara-block,
.emc-item,
.glossary-card,
.articleBox,
.related-list__item,
.thickness-card,
.meta-card-pro,
.sg-card {
	background: var(--rd-paper) !important;
	border: 1px solid var(--rd-line) !important;
	border-radius: var(--rd-radius-lg) !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: transform 0.45s var(--rd-ease), box-shadow 0.45s var(--rd-ease),
		border-color 0.45s var(--rd-ease);
}

.card:hover,
.news-item:hover,
.zara-block:hover,
.emc-item:hover,
.glossary-card:hover,
.articleBox:hover,
.thickness-card:hover,
.meta-card-pro:hover {
	border-color: var(--rd-line-strong) !important;
	box-shadow: var(--rd-shadow-md) !important;
	transform: translateY(-4px);
}

/* card imagery gets a slow zoom on hover (see motion.css for the rules) */
.card img,
.news-img img,
.post-thumbnail img,
.articleBox img,
.related-list__thumb img,
.image-container img.owl-product-image,
.sg-product-card-image {
	display: block;
	object-fit: cover;
	transition: transform 0.9s var(--rd-ease);
}

.news-img,
.post-thumbnail,
.articleBox .post-thumbnail {
	border-radius: var(--rd-radius-md) !important;
	overflow: hidden;
}

.card img.rounded-3,
.rounded-3 {
	border-radius: var(--rd-radius-md) !important;
}

/* card titles */
.card-title,
.news-title,
.entry-title,
.post-title,
.sg-product-card-title,
.owl-product-title,
.glossary-term,
.emc-item__name,
.articleBox h3 {
	color: var(--rd-ink) !important;
	font-family: var(--rd-font-display) !important;
	font-weight: 500 !important;
	letter-spacing: -0.025em;
	line-height: 1.22;
	text-decoration: none !important;
}

.news-title,
.post-title {
	font-size: clamp(17px, 1.5vw, 21px) !important;
}

/* media chips / badges / tags */
.badge,
.category-badge,
.synonym-badge,
.blog-tag,
.sgccb-v15-tag,
.sg-ui-h3-visual {
	border-radius: var(--rd-pill) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	padding: 7px 14px !important;
	text-transform: uppercase;
}

.badge.bg-dark,
.blog-tag,
.category-badge {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

.badge.bg-light,
.synonym-badge {
	background: var(--rd-grey-100) !important;
	color: var(--rd-grey-700) !important;
}

/* ============================================================== tabs == */
.nav-tabs {
	border-bottom: 1px solid var(--rd-line) !important;
	gap: 6px;
}

.nav-tabs .nav-link {
	border: 0 !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-grey-600) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 11px 20px !important;
	transition: background 0.25s var(--rd-ease), color 0.25s var(--rd-ease);
}

.nav-tabs .nav-link:hover {
	color: var(--rd-ink) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

/* ========================================================== accordions == */
.panel-heading,
.accordion-button,
.faq-heading,
.sg-faq-question,
.care-accordion__trigger {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rd-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--rd-ink) !important;
	font-family: var(--rd-font-geist) !important;
	font-size: clamp(18px, 1.7vw, 24px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em;
	padding: 22px 0 !important;
	text-align: left;
	transition: opacity 0.25s var(--rd-ease);
	width: 100%;
}

.panel-heading:hover,
.accordion-button:hover,
.faq-heading:hover,
.care-accordion__trigger:hover {
	opacity: 0.65;
}

.accordion-button::after {
	background-image: none !important;
	content: '+';
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	transform: none !important;
}

.accordion-button:not(.collapsed)::after {
	content: '\2212';
}

.panel-collapse,
.accordion-collapse,
.care-accordion__content,
.faq-collapse {
	border-bottom: 1px solid var(--rd-line);
}

.panel-body,
.accordion-body,
.care-accordion__content > *,
.sg-faq-answer {
	color: var(--rd-grey-700) !important;
	font-size: 15.5px;
	line-height: 1.65;
	padding-block: 4px 22px;
}

/* Open panels stay inside the viewport and scroll on their own.
   Covers Bootstrap accordions, FAQ collapses, product care/info,
   homepage factory toggles, and <details> accordions. */
.accordion-collapse.show,
.panel-collapse.show,
.faq-collapse.show,
.care-accordion__content.is-open,
.accordion-content.active,
.summary-section.open .summary-content,
.tk-acc[open] > .tk-acc-body,
.sgccb-v2-details[open] > :not(summary),
.price-filter-details > .price-filter-body,
.price-filter-details[open] > .price-filter-body {
	-webkit-overflow-scrolling: touch;
	max-height: min(70vh, 640px) !important;
	min-height: 0;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

@media (max-width: 767.98px) {
	.accordion-collapse.show,
	.panel-collapse.show,
	.faq-collapse.show,
	.care-accordion__content.is-open,
	.accordion-content.active,
	.summary-section.open .summary-content,
	.tk-acc[open] > .tk-acc-body,
	.sgccb-v2-details[open] > :not(summary),
	.price-filter-details > .price-filter-body,
	.price-filter-details[open] > .price-filter-body {
		max-height: min(60vh, 480px) !important;
	}
}

/* =========================================================== tables == */
.table {
	--bs-table-color: var(--rd-ink);
	--bs-table-border-color: var(--rd-line);
	--bs-table-bg: transparent;
	font-size: 15px;
}

.table > :not(caption) > * > * {
	border-color: var(--rd-line);
	padding: 14px 16px;
}

.table thead th,
.table th {
	color: var(--rd-grey-600) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	vertical-align: middle;
}

.table tbody td {
	color: var(--rd-ink) !important;
	vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background: var(--rd-grey-50);
}

/* ========================================================= sliders == */
.slick-slide img,
.slick-track img {
	border-radius: var(--rd-radius-md);
}

.slick-prev,
.slick-next,
.slider-button,
.nav-arrow {
	align-items: center;
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid var(--rd-line) !important;
	border-radius: 50% !important;
	box-shadow: var(--rd-shadow-sm);
	color: var(--rd-ink) !important;
	display: inline-flex !important;
	height: 44px !important;
	justify-content: center;
	transition: background 0.3s var(--rd-ease), transform 0.3s var(--rd-ease);
	width: 44px !important;
	z-index: 5;
}

.slick-prev:hover,
.slick-next:hover,
.slider-button:hover,
.nav-arrow:hover {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
	transform: scale(1.05);
}

.slick-prev path,
.slick-next path,
.slider-button svg,
.nav-arrow svg {
	stroke: currentColor;
}

.slick-dots {
	bottom: -34px !important;
}

.slick-dots li {
	margin: 0 4px !important;
	width: auto !important;
}

.slick-dots li button {
	background: var(--rd-grey-300) !important;
	border-radius: var(--rd-pill) !important;
	height: 6px !important;
	padding: 0 !important;
	transition: width 0.3s var(--rd-ease), background 0.3s var(--rd-ease);
	width: 6px !important;
}

.slick-dots li button::before {
	content: '' !important;
	display: none !important;
}

.slick-dots li.slick-active button {
	background: var(--rd-black) !important;
	width: 26px !important;
}

/* thumbnail strips in galleries */
.thumbnails .thumbnail,
.thumbnail-slider .thumbnail {
	border: 1px solid var(--rd-line) !important;
	border-radius: var(--rd-radius-md) !important;
	overflow: hidden;
	transition: border-color 0.25s var(--rd-ease), transform 0.25s var(--rd-ease);
}

.thumbnails .thumbnail:hover,
.thumbnail-slider .thumbnail:hover {
	transform: translateY(-2px);
}

.thumbnails .thumbnail.active,
.thumbnail-slider .thumbnail.active {
	border-color: var(--rd-black) !important;
	box-shadow: 0 0 0 2px rgba(13, 13, 13, 0.14);
}

/* ======================================================= pagination == */
.pagination {
	gap: 6px;
}

.pagination .page-link,
.page-numbers,
.pagination a,
.pagination span {
	align-items: center;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-ink) !important;
	display: inline-flex;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500;
	height: 40px;
	justify-content: center;
	min-width: 40px;
	text-decoration: none !important;
	transition: background 0.25s var(--rd-ease), color 0.25s var(--rd-ease);
}

.pagination .page-link:hover,
.pagination a:hover {
	background: var(--rd-grey-100) !important;
}

.pagination .active .page-link,
.pagination .page-link.active,
.page-numbers.current,
.pagination span.current {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

.pagination .disabled .page-link {
	color: var(--rd-grey-400) !important;
}

/* ==================================================== modal / popovers == */
.modal-content {
	border: 0 !important;
	border-radius: var(--rd-radius-xl) !important;
	box-shadow: var(--rd-shadow-lg);
	overflow: hidden;
}

.modal-header {
	border-bottom: 1px solid var(--rd-line) !important;
	padding: 22px 28px !important;
}

.modal-title {
	font-family: var(--rd-font-display) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	letter-spacing: -0.03em;
}

.modal-body {
	padding: 26px 28px !important;
}

.modal-footer {
	border-top: 1px solid var(--rd-line) !important;
	padding: 18px 28px !important;
}

.modal-backdrop.show {
	opacity: 0.4;
}

/* the floating contact dock / scroll-up pill */
.scroll-up,
#scrollUp,
.scrollToTop,
.contact-dock,
.floating-widget {
	border-radius: var(--rd-pill) !important;
	box-shadow: var(--rd-shadow-md) !important;
}

/* newsletter / cookie overlays */
.newsletter-modal .modal-content,
.cookie-banner,
.cookie-panel {
	border-radius: var(--rd-radius-lg) !important;
}

.cookie-banner,
.cookie-panel {
	background: var(--rd-paper) !important;
	border: 1px solid var(--rd-line) !important;
	bottom: 18px !important;
	box-shadow: var(--rd-shadow-lg) !important;
	color: var(--rd-ink) !important;
	left: 18px !important;
	max-width: 420px;
	padding: 22px !important;
}

.cookie-banner h5,
.cookie-panel h5 {
	font-size: 18px !important;
}

.cookie-banner p,
.cookie-panel p {
	color: var(--rd-grey-700) !important;
	font-size: 13.5px !important;
}

/* ================================================== legacy accent remap == */
/* the mirrored origin CSS carries a warm brown accent (#8b6f4e). The redesign
   palette is paper / ink / cream, so that brown is neutralised everywhere it
   acted as an accent — same components, same hierarchy, new palette. */
.sub-heading .withline,
.sub-heading div.withline {
	color: var(--rd-grey-600) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
}

.sub-heading .withline::before,
.sub-heading div.withline::before {
	background: var(--rd-ink) !important;
	height: 1.5px !important;
}

.arrow-link span {
	background: var(--rd-ink) !important;
}

.arrow-link::before {
	border-color: var(--rd-ink) !important;
}

.arrow-link::after {
	border-color: var(--rd-ink) !important;
}

.content-inner-all a,
.form-message-detail a,
.image-container a,
a#readLessBtn,
a#readMoreBtn,
.lma-faq h4 a,
.on-this-page-cta .cta-text,
.on-this-page-box > div,
.toggle-btn {
	color: var(--rd-ink) !important;
}

.content-inner-all blockquote {
	background: var(--rd-cream-soft) !important;
	border-left-color: var(--rd-ink) !important;
	color: var(--rd-ink-2) !important;
}

/* the legacy accent also underlined section headings — keep the rule, change ink */
hr {
	border-color: var(--rd-line) !important;
}

.heading,
h2.heading,
h3.heading,
.emc-item__count,
.ss-tracked-first .heading,
.ss-tracked-first1 .heading,
.ps-tabs .heading,
.real .heading,
.sizes .heading,
.thickness .heading,
.finish .heading,
.suitable .heading,
.ps-tabs h2,
.real h2,
.sizes h2,
.thickness h2,
.finish h2,
.suitable h2 {
	border-color: var(--rd-line-strong) !important;
}

.emc-item__count {
	color: var(--rd-grey-500) !important;
}

.btn-six,
.tab-button {
	background: transparent !important;
	border: 1px solid var(--rd-ink) !important;
	color: var(--rd-ink) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.btn-six:hover,
.tab-button:hover,
.btn-six:focus,
.tab-button.active {
	background: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

.custom-pagination .page-item.active .page-link,
.custom-pagination .page-link:hover {
	background: var(--rd-black) !important;
	border-color: var(--rd-black) !important;
	color: var(--rd-paper) !important;
}

.load-more-btn,
.appointment .appointment-wrapper .appointment-content .form-submit .submitb {
	background: var(--rd-black) !important;
	border-radius: var(--rd-pill) !important;
	color: var(--rd-paper) !important;
	font-family: var(--rd-font-caps) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.load-more-btn:hover,
.appointment .appointment-wrapper .appointment-content .form-submit .submitb:hover {
	background: var(--rd-ink-2) !important;
	color: var(--rd-paper) !important;
}