:root { --bathgiant-brand: #3d7dd9;
--bathgiant-brand-deep: #2f68c4;
--bathgiant-public-brand: #3d7dd9;
--bathgiant-public-brand-deep: #2f68c4;
--bathgiant-brand-wash: #eef4fc;
--bathgiant-product-card-footer-wash: var(--bathgiant-brand-wash);
--bathgiant-header-utility: #2c3e50;
--bathgiant-header-band: #4a7eb8;
--bathgiant-header-band-deep: #3d6fa3;
--bathgiant-header-primary-row: #3a6699;
--bathgiant-header-secondary: #243d5c;
--bathgiant-trade: #c41e1e;
--bathgiant-trade-hover: #a81818;
--bathgiant-dark: #0f1419;
--bathgiant-ink: #1f2937;
--bathgiant-ink-muted: #5c6673;
--bathgiant-light: #f6f8fb;
--bathgiant-accent: var(--bathgiant-brand);
--bathgiant-border: #e4e9f0;
--bathgiant-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--bathgiant-font-display: "Zilla Slab", Georgia, "Times New Roman", serif; --bathgiant-text-body: 1rem;
--bathgiant-text-eyebrow: 0.8125rem;
--bathgiant-text-title-section: clamp(1.75rem, 4vw, 2.5rem);
--bathgiant-text-lede: clamp(1rem, 1.5vw, 1.08rem);
--bathgiant-text-lede-weight: 600;
--bathgiant-content-max: 100%;
--bathgiant-gutter-x: 15px;
--bathgiant-sticky-below-header: 9.4rem;
--bathgiant-store-sidebar-sticky-top: calc(var(--bathgiant-sticky-below-header) - 2.75rem);
--bathgiant-layout-rail: 0px;
--bathgiant-radius-sm: 8px;
--bathgiant-radius-md: 12px;
--bathgiant-radius-lg: 16px;
--bathgiant-header-pill: 999px;
--bathgiant-header-control-h: 42px;
--bathgiant-shadow-sm: 0 2px 10px rgba(15, 20, 25, 0.08);
--bathgiant-shadow-md: 0 10px 26px rgba(15, 20, 25, 0.12);
--bathgiant-space-section: clamp(1.4rem, 3vw, 2.4rem);
--bathgiant-space-block: clamp(0.9rem, 2vw, 1.35rem);
--bathgiant-doc-accent: var(--bathgiant-brand-deep);
--bathgiant-doc-table-header-bg: var(--bathgiant-brand-deep);
--bathgiant-footer-heading-rule: color-mix(in srgb, var(--bathgiant-brand) 52%, transparent);
--bathgiant-footer-brand-divider: color-mix(in srgb, var(--bathgiant-brand) 26%, transparent); --bathgiant-nav-ink: #17365d;
--bathgiant-nav-ink-muted: #2f4f73;
--bathgiant-nav-pill-bg: #f5f7fa;
--bathgiant-nav-pill-text: #2f4f73;
--bathgiant-nav-pill-hover-bg: #e2e8f0;
--bathgiant-nav-pill-hover-text: #17365d;
--bathgiant-nav-pill-active-bg: #17365d;
--bathgiant-nav-pill-active-text: #fff;
--bathgiant-nav-link: #3a4f66;
--bathgiant-nav-link-hover-bg: rgba(23, 54, 93, 0.045);
--bathgiant-nav-link-hover-accent: rgba(23, 54, 93, 0.22);
--bathgiant-nav-divider: rgba(23, 54, 93, 0.09);
--bathgiant-nav-border-focus: rgba(47, 104, 196, 0.55);
--bathgiant-nav-card-hover-bg: #f6faff;
--bathgiant-nav-primary-gradient-end: #2f4f73;
--bathgiant-nav-badge-bg: #17365d;
--bathgiant-nav-badge-ghost-text: #17365d;
--bathgiant-nav-cta-shadow: rgba(47, 104, 196, 0.28);
--bathgiant-btn-shadow: rgba(47, 136, 239, 0.28);
--bathgiant-btn-shadow-hover: rgba(47, 136, 239, 0.32);
--bathgiant-btn-font-size: 0.875rem;
--bathgiant-btn-line-height: 1.25;
--bathgiant-btn-font-weight: 600;
--bathgiant-btn-font-size-lg: 1rem;
--bathgiant-ui-link-font-size: 0.875rem;
--bathgiant-info-surface: #eff6ff;
--bathgiant-info-surface-border: #dbeafe;
--bathgiant-info-surface-text: #1e3a5f;
--bathgiant-brand-tint-08: color-mix(in srgb, var(--bathgiant-brand-deep) 8%, transparent);
--bathgiant-brand-tint-10: color-mix(in srgb, var(--bathgiant-brand-deep) 10%, transparent);
--bathgiant-brand-tint-12: color-mix(in srgb, var(--bathgiant-brand-deep) 12%, transparent);
--bathgiant-brand-focus-ring: color-mix(in srgb, var(--bathgiant-brand-deep) 18%, transparent);
--bathgiant-brand-focus-ring-strong: color-mix(in srgb, var(--bathgiant-brand-deep) 32%, transparent); --bathgiant-store-ink: #1f3552;
--bathgiant-store-ink-strong: #1c2f4a;
--bathgiant-store-label: #6a7f99;
--bathgiant-store-muted: #5b6b80;
--bathgiant-store-border: #dce5f0;
--bathgiant-store-border-soft: #e4ebf3;
--bathgiant-store-border-input: #c8d6e7;
--bathgiant-store-panel-border: #d9e4f2;
--bathgiant-store-panel-bg: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
--bathgiant-store-panel-bg-alt: linear-gradient(180deg, #fbfdff 0%, #f2f7fd 100%);
--bathgiant-store-surface-bg: #f8fbff;
--bathgiant-store-surface-border: #dbe6f3;
--bathgiant-store-table-head-bg: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
--bathgiant-store-check-bg: #f9fcff;
--bathgiant-store-check-border: #d8e4f2;
--bathgiant-store-banner-bg: #f0f6fc;
--bathgiant-store-banner-border: #c7d7ec;
--bathgiant-color-primary: #1e3a5f;
--bathgiant-color-primary-dark: #162d4a;
}
body.bathgiant-has-trade-pricing {
--bathgiant-brand: #9f1239;
--bathgiant-brand-deep: #881337;
--bathgiant-header-utility: #3f0a1f;
--bathgiant-header-band: #7f1d3c;
--bathgiant-header-band-deep: #6f1433;
--bathgiant-header-primary-row: #65122f;
--bathgiant-header-secondary: #4a0d22;
--bathgiant-accent: var(--bathgiant-brand);
--bathgiant-doc-accent: var(--bathgiant-brand-deep);
--bathgiant-doc-table-header-bg: var(--bathgiant-brand-deep);
--bathgiant-footer-heading-rule: color-mix(in srgb, var(--bathgiant-header-band) 72%, transparent);
--bathgiant-footer-brand-divider: color-mix(in srgb, var(--bathgiant-header-band) 38%, transparent);
--bathgiant-nav-ink: #65122f;
--bathgiant-nav-ink-muted: #881337; --bathgiant-nav-pill-bg: #f5f7fa;
--bathgiant-nav-pill-text: #5c6673;
--bathgiant-nav-pill-hover-bg: color-mix(in srgb, var(--bathgiant-brand) 11%, #f5f7fa);
--bathgiant-nav-pill-hover-text: var(--bathgiant-brand-deep);
--bathgiant-nav-pill-active-bg: var(--bathgiant-brand-deep);
--bathgiant-nav-pill-active-text: #fff;
--bathgiant-nav-link-hover-bg: rgba(159, 18, 57, 0.07);
--bathgiant-nav-link-hover-accent: rgba(159, 18, 57, 0.35);
--bathgiant-nav-divider: rgba(136, 19, 55, 0.12);
--bathgiant-nav-border-focus: rgba(159, 18, 57, 0.42);
--bathgiant-nav-card-hover-bg: #fff5f5;
--bathgiant-nav-primary-gradient-end: var(--bathgiant-header-band-deep);
--bathgiant-nav-badge-bg: var(--bathgiant-brand-deep);
--bathgiant-nav-badge-ghost-text: var(--bathgiant-brand-deep);
--bathgiant-nav-cta-shadow: rgba(127, 29, 60, 0.32);
--bathgiant-btn-shadow: rgba(159, 18, 57, 0.28);
--bathgiant-btn-shadow-hover: rgba(127, 29, 60, 0.34); --bathgiant-brand-wash: #f5f7fa; --bathgiant-product-card-footer-wash: color-mix(in srgb, var(--bathgiant-trade) 6%, #fff);
--bathgiant-info-surface: #f8fafc;
--bathgiant-info-surface-border: #e2e8f0;
--bathgiant-info-surface-text: #475569; --bathgiant-store-ink: #334155;
--bathgiant-store-ink-strong: #1f2937;
--bathgiant-store-label: #64748b;
--bathgiant-store-muted: #64748b;
--bathgiant-store-border: #e2e8f0;
--bathgiant-store-border-soft: #eef2f7;
--bathgiant-store-border-input: #d1d5db;
--bathgiant-store-panel-border: #e2e8f0;
--bathgiant-store-panel-bg: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
--bathgiant-store-panel-bg-alt: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
--bathgiant-store-surface-bg: #f8fafc;
--bathgiant-store-surface-border: #e2e8f0;
--bathgiant-store-table-head-bg: linear-gradient(180deg, #f5f7fa 0%, #f8fafc 100%);
--bathgiant-store-check-bg: #f8fafc;
--bathgiant-store-check-border: #e2e8f0;
--bathgiant-store-banner-bg: #f8fafc;
--bathgiant-store-banner-border: #e2e8f0;
--bathgiant-store-accent-wash: color-mix(in srgb, var(--bathgiant-brand) 9%, #fff);
--bathgiant-store-accent-wash-hover: color-mix(in srgb, var(--bathgiant-brand) 11%, #f5f7fa);
--bathgiant-color-primary: var(--bathgiant-brand-deep);
--bathgiant-color-primary-dark: var(--bathgiant-header-band-deep);
} body.bathgiant-has-trade-pricing .bathgiant-cart-page .bathgiant-cart-title:hover {
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-cart-price-line__trade,
body.bathgiant-has-trade-pricing .bathgiant-cart-line-total .bathgiant-cart-price-line__trade {
color: var(--bathgiant-brand-deep);
font-weight: 700;
}
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branch-card {
background: linear-gradient(180deg, var(--bathgiant-store-surface-bg) 0%, #fff 100%);
border-color: var(--bathgiant-store-border-soft);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bathgiant-brand-deep) 42%, #e2e8f0);
}
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branch-card__label {
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branch-card__name {
color: var(--bathgiant-store-ink-strong);
}
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branches__summary {
color: var(--bathgiant-store-muted);
}
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branches__disclosure[open] .bathgiant-cart-line-branches__summary,
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branches__summary:hover,
body.bathgiant-has-trade-pricing .bathgiant-cart-line-branches__summary:focus-visible {
background: var(--bathgiant-store-accent-wash-hover);
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-fulfillment-option:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand) 22%, #e2e8f0);
background: var(--bathgiant-store-accent-wash-hover);
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-fulfillment-option.is-selected,
body.bathgiant-has-trade-pricing .bathgiant-fulfillment-option:has(.bathgiant-fulfillment-radio:checked) {
border-color: var(--bathgiant-brand-deep);
background: var(--bathgiant-store-accent-wash);
color: var(--bathgiant-brand-deep);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand) 14%, transparent);
} body.bathgiant-has-trade-pricing .bathgiant-cart-page .bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item--active,
body.bathgiant-has-trade-pricing .bathgiant-cart-page .bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item--default {
border-color: var(--bathgiant-store-border-soft);
background: #fff;
box-shadow: none;
}
body.bathgiant-has-trade-pricing .bathgiant-site-header__band { }
body.bathgiant-has-trade-pricing .bathgiant-header-tabs__primary {
background: linear-gradient(180deg, #65122f 0%, #4a0d22 100%);
}
body.bathgiant-has-trade-pricing .bathgiant-site-header__backdrop {
background: linear-gradient(
180deg,
#a3163c 0%,
#9b1539 22%,
#911535 42%,
#851430 58%,
#65122f 78%,
#4a0d22 100%
);
}
body.bathgiant-has-trade-pricing .bathgiant-account-drawer__visual {
background:
radial-gradient(ellipse 95% 75% at 12% 8%, color-mix(in srgb, #9f1239 30%, transparent) 0%, transparent 52%),
radial-gradient(ellipse 70% 55% at 92% 88%, color-mix(in srgb, #3f0a1f 45%, transparent) 0%, transparent 48%),
linear-gradient(
155deg,
#7f1d3c 0%,
#6f1433 32%,
#65122f 62%,
#4a0d22 100%
);
}
.bathgiant-account-drawer--login-public .bathgiant-account-drawer__visual {
background:
radial-gradient(ellipse 95% 75% at 12% 8%, color-mix(in srgb, var(--bathgiant-public-brand, #3d7dd9) 32%, transparent) 0%, transparent 52%),
radial-gradient(ellipse 70% 55% at 92% 88%, color-mix(in srgb, #0f172a 50%, transparent) 0%, transparent 48%),
linear-gradient(
155deg,
color-mix(in srgb, var(--bathgiant-public-brand-deep, #2f68c4) 38%, #1e3a5f) 0%,
#1e3a5f 34%,
#162d4a 66%,
#0f172a 100%
);
}
.bathgiant-account-drawer--login-trade .bathgiant-account-drawer__visual {
background:
radial-gradient(ellipse 95% 75% at 12% 8%, color-mix(in srgb, #9f1239 30%, transparent) 0%, transparent 52%),
radial-gradient(ellipse 70% 55% at 92% 88%, color-mix(in srgb, #3f0a1f 45%, transparent) 0%, transparent 48%),
linear-gradient(
155deg,
#7f1d3c 0%,
#6f1433 32%,
#65122f 62%,
#4a0d22 100%
);
} body.bathgiant-has-trade-pricing .bathgiant-mnav__header {
background: linear-gradient(135deg, var(--bathgiant-brand-deep) 0%, var(--bathgiant-header-secondary) 100%);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__promo-cta {
background: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__item--all {
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__item--cta {
background: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__item--cta:hover,
body.bathgiant-has-trade-pricing .bathgiant-mnav__item--cta:focus-visible {
background: var(--bathgiant-brand);
} body.bathgiant-has-trade-pricing {
--bathgiant-quote-customer-bg: var(--bathgiant-brand-wash);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__item:hover,
body.bathgiant-has-trade-pricing .bathgiant-mnav__item:focus-visible {
background: var(--bathgiant-brand-tint-08);
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-mnav__item:hover .bathgiant-mnav__chevron,
body.bathgiant-has-trade-pricing .bathgiant-mnav__item:focus-visible .bathgiant-mnav__chevron {
color: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-quote-view-log__badge--trade {
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
border-color: var(--bathgiant-info-surface-border);
}
@media (min-width: 700px) {
:root {
--bathgiant-sticky-below-header: 8.2rem;
--bathgiant-gutter-x: 25px;
}
}
@media (min-width: 900px) {
:root {
--bathgiant-sticky-below-header: 10.75rem;
}
}
@media (min-width: 1280px) {
:root {
--bathgiant-gutter-x: 40px;
}
}
::selection {
background: var(--bathgiant-brand);
color: #fff;
}
body {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: var(--bathgiant-text-body);
line-height: 1.55;
color: var(--bathgiant-ink);
background: #fff;
display: flex;
flex-direction: column;
min-height: 100vh;
} button,
input,
select,
textarea,
optgroup {
font-family: var(--bathgiant-font-sans);
}
h1,
h2,
h3,
h4,
h5,
h6,
.bathgiant-archive-title,
.bathgiant-hero__title,
.bathgiant-home-catalogue__title,
.bathgiant-home-staff-picks__title,
.bathgiant-home-categories__heading,
.bathgiant-news-teasers__title,
.bathgiant-page-panel__title,
.bathgiant-product-single__title,
.bathgiant-product-carousel__title,
.bathgiant-account-panel__title,
.bathgiant-account-form > h3,
.bathgiant-instore-panel__title,
.bathgiant-intact-account__title,
.bathgiant-trade-customers-panel__intro h3,
.bathgiant-trade-customer-dash__title,
.bathgiant-account-tabs-group__label,
.bathgiant-user-guide-training__module-title,
.bathgiant-user-guide-profile-guides__title {
font-family: var(--bathgiant-font-display);
font-weight: 600;
letter-spacing: -0.015em;
}
body.bathgiant-store-mega-open {
overflow: hidden;
}
.bathgiant-main {
flex: 1;
width: 100%;
min-width: 0;
max-width: 100%;
font-family: var(--bathgiant-font-sans);
} html {
overflow-x: clip; }
body {
overflow-x: clip;
width: 100%;
max-width: 100%;
} @media (max-width: 899px) {
html {
font-size: 125%;
}
:root {
--bathgiant-text-title-section: clamp(2rem, 8vw, 2.65rem);
--bathgiant-text-lede: 1.125rem;
}
} body.bathgiant-page-home {
overflow-x: clip;
} .bathgiant-main--home {
--bathgiant-home-row-space: clamp(1.25rem, 4vw, 4rem);
}
.bathgiant-main--home .bathgiant-home-categories__card:hover,
.bathgiant-main--home .bathgiant-home-categories__card:focus-visible,
.bathgiant-main--home .bathgiant-news-teasers__item:hover,
.bathgiant-main--home .bathgiant-trust-strip__link:hover,
.bathgiant-main--home .bathgiant-trust-strip__link:focus-visible,
.bathgiant-main--home .bathgiant-trade-cta__btn--primary:hover,
.bathgiant-main--home .bathgiant-package-card:hover {
transform: none;
}
.bathgiant-brand-logo {
max-height:40px;
width:auto;
}  input[data-bg-postcode],
input[data-bathgiant-fulfillment-postcode],
input.bathgiant-cart-fulfillment__postcode,
input.bathgiant-checkout-form__postcode,
#bathgiant-product-postcode,
input[autocomplete='postal-code']:not([type='password']) {
text-transform: uppercase;
}
.bathgiant-wrap {
width: 100%;
max-width: var(--bathgiant-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
box-sizing: border-box;
}
.bathgiant-layout__body > main {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 1 1 auto;
} .bathgiant-core {
width: 100%;
max-width: min(100%, var(--bathgiant-content-max));
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-container {
width: 100%;
max-width: min(100%, 48rem);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.bathgiant-page-panel {
margin: var(--bathgiant-space-section) 0 calc(var(--bathgiant-space-section) + 0.35rem);
padding: clamp(1.15rem, 2.5vw, 1.8rem);
}
.bathgiant-page-panel__title {
margin: 0 0 1rem;
font-size: clamp(1.5rem, 3vw, 2rem);
}
.bathgiant-page-panel__content > *:first-child {
margin-top: 0;
} .bathgiant-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
flex: 1;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
overflow-x: clip;
}
@media (min-width: 768px) {
.bathgiant-layout {
grid-template-columns: var(--bathgiant-layout-rail) minmax(0, 1fr) var(--bathgiant-layout-rail);
}
}
.bathgiant-layout__body {
grid-column: 1 / -1;
min-width: 0;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.bathgiant-layout__body {
grid-column: 2;
}
}
.bathgiant-layout__rail {
position: relative;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bathgiant-layout__rail--left {
display: none;
background: linear-gradient(180deg, rgba(242, 248, 254, 0.95) 0%, rgba(255, 255, 255, 0.4) 35%, transparent 100%);
border-right: 1px solid rgba(47, 136, 239, 0.07);
}
.bathgiant-layout__rail--right {
display: none;
background: linear-gradient(180deg, rgba(15, 20, 25, 0.04) 0%, transparent 45%, rgba(47, 136, 239, 0.06) 100%);
border-left: 1px solid rgba(47, 136, 239, 0.06);
}
@media (min-width: 768px) {
.bathgiant-layout__rail--left,
.bathgiant-layout__rail--right {
display: none;
}
}
.bathgiant-layout__rail-inner {
position: absolute;
inset: 0;
opacity: 1;
}
.bathgiant-layout__rail--left .bathgiant-layout__rail-inner {
background: repeating-linear-gradient(
-18deg,
transparent 0,
transparent 14px,
rgba(47, 136, 239, 0.045) 14px,
rgba(47, 136, 239, 0.045) 15px
);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 40%, #000 100%);
}
.bathgiant-layout__rail--right .bathgiant-layout__rail-inner {
background: repeating-linear-gradient(
18deg,
transparent 0,
transparent 18px,
rgba(15, 20, 25, 0.04) 18px,
rgba(15, 20, 25, 0.04) 19px
);
mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, #000 35%, #000 100%);
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .bathgiant-heading-rule {
display: flex;
align-items: center;
gap: clamp(0.65rem, 2vw, 1.15rem);
width: 100%;
max-width: 100%;
margin: 0 0 0.65rem;
box-sizing: border-box;
font-size: 0;
line-height: 0;
}
.bathgiant-heading-rule::before,
.bathgiant-heading-rule::after {
content: "";
flex: 1 1 0;
min-width: 0.75rem;
height: 1px;
background: #e5e7eb;
}
.bathgiant-heading-rule__text {
flex: 0 1 auto;
max-width: min(92vw, 48rem);
text-align: center;
}
.bathgiant-heading-rule--sm .bathgiant-heading-rule__text {
font-family: var(--bathgiant-font-display);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0f172a;
}
.bathgiant-heading-rule--section .bathgiant-heading-rule__text {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.2rem, 2.8vw, 1.55rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-heading-rule--sentence .bathgiant-heading-rule__text {
font-family: var(--bathgiant-font-display);
font-size: clamp(1rem, 2.3vw, 1.35rem);
font-weight: 700;
line-height: 1.3;
text-transform: none;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-heading-rule--muted::before,
.bathgiant-heading-rule--muted::after {
background: #e2e8f0;
} .bathgiant-site-chrome {
position: sticky;
top: 0;
z-index: 200;
}
.bathgiant-site-header {
position: relative;
z-index: 1;
background: transparent;
}
.bathgiant-site-header__backdrop {
display: none;
}
.bathgiant-site-header__frame {
position: relative;
z-index: 1;
} .bathgiant-site-header__primary {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 0.5rem;
row-gap: 0.45rem;
align-items: center;
width: 100%;
min-width: 0;
}
.bathgiant-site-header__primary > .bathgiant-site-header__leading {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.bathgiant-site-header__primary > .bathgiant-header-search-wrap {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: auto;
max-width: none;
}
.bathgiant-site-header__primary > .bathgiant-header-actions {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0.45rem;
width: 100%;
min-width: 0;
padding: 0;
}
.bathgiant-site-header__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.bathgiant-site-header__band {
position: relative;
background: linear-gradient(
135deg,
#5d8cc9 0%,
#4f82bd 26%,
#3f6fa8 62%,
#325f95 100%
);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 24px rgba(10, 25, 46, 0.2);
}
.bathgiant-site-header__band::before {
content: "";
pointer-events: none;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 120% 85% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 52%),
radial-gradient(ellipse 90% 70% at 88% 100%, rgba(20, 45, 82, 0.35) 0%, transparent 55%);
opacity: 0.95;
}
.bathgiant-header-menu {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.5rem 0.95rem;
min-height: 44px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--bathgiant-radius-md);
background: rgba(255, 255, 255, 0.97);
color: var(--bathgiant-header-secondary);
font-family: var(--bathgiant-font-display);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 2px 10px rgba(15, 30, 50, 0.13);
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.bathgiant-header-menu:hover {
background: #fff;
border-color: #fff;
color: var(--bathgiant-brand-deep);
box-shadow: 0 4px 18px rgba(15, 30, 50, 0.16);
}
.bathgiant-header-menu:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.bathgiant-header-menu__icons {
position: relative;
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
}
.bathgiant-header-menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.bathgiant-header-menu__icon--grid {
display: none;
}
@media (min-width: 768px) {
.bathgiant-header-menu__icon--grid {
display: inline-flex;
}
.bathgiant-header-menu__icon--bars {
display: none;
}
}
.bathgiant-header-menu__icon--bars {
flex-direction: column;
justify-content: center;
gap: 4px;
width: 20px;
}
.bathgiant-header-menu__bar {
display: block;
width: 20px;
height: 2px;
border-radius: 1px;
background: var(--bathgiant-header-secondary);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.bathgiant-header-menu.is-active .bathgiant-header-menu__bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.bathgiant-header-menu.is-active .bathgiant-header-menu__bar:nth-child(2) {
opacity: 0;
}
.bathgiant-header-menu.is-active .bathgiant-header-menu__bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.bathgiant-header-menu__label {
display: none;
}
@media (min-width: 768px) {
.bathgiant-header-menu__label {
display: inline;
}
}
.bathgiant-header-account {
display: inline-flex;
align-items: center;
gap: 0.45rem;
box-sizing: border-box;
height: var(--bathgiant-header-control-h);
min-height: var(--bathgiant-header-control-h);
padding: 0 0.62rem 0 0.42rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: var(--bathgiant-header-secondary);
text-decoration: none;
font-family: var(--bathgiant-font-sans);
font-size: 0.8125rem;
font-weight: 600;
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.14);
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bathgiant-header-account:hover {
background: #fff;
color: var(--bathgiant-brand-deep);
transform: translateY(-1px);
}
.bathgiant-header-account__icon {
display: inline-flex;
line-height: 0;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(61, 125, 217, 0.1);
position: relative;
}
.bathgiant-header-account__text {
display: none;
}
.bathgiant-header-account:not(.bathgiant-header-account--guest) {
padding: 0 0.42rem;
}
@media (min-width: 900px) {
.bathgiant-header-account--signed-in .bathgiant-header-account__text {
display: inline;
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 0.2rem 0 0.35rem;
font-size: 0.8125rem;
font-weight: 600;
}
}
.bathgiant-header-account--guest {
padding: 0 0.62rem 0 0.42rem;
} .bathgiant-header-account--guest .bathgiant-header-account__text {
display: inline;
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
padding: 0 0.2rem 0 0.1rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
}
button.bathgiant-header-account {
border: none;
cursor: pointer;
font: inherit;
-webkit-appearance: none;
appearance: none;
}
.bathgiant-header-account:focus-visible {
outline: 2px solid var(--bathgiant-brand);
outline-offset: 2px;
}
.bathgiant-header-account--trade-on {
box-shadow: 0 2px 12px rgba(22, 101, 52, 0.2);
}
.bathgiant-header-account__trade-pill {
max-width: 5.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
background: rgba(22, 101, 52, 0.14);
color: #166534;
} @media (max-width: 1024px) {
.bathgiant-header-account__text {
display: none;
}
.bathgiant-header-account--guest .bathgiant-header-account__text {
display: inline;
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
padding: 0 0.2rem 0 0.1rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
}
}
@media (min-width: 900px) {
.bathgiant-site-header__backdrop {
display: block;
position: absolute;
inset: 0;
left: 0;
right: 0;
width: 100%;
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
#5d8cc9 0%,
#4f82bd 20%,
#3f6fa8 45%,
#3a6799 62%,
#355f8e 82%,
#325f95 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 5px 24px rgba(10, 25, 46, 0.2);
}
.bathgiant-site-header__backdrop::after {
content: "";
pointer-events: none;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 120% 85% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 52%),
radial-gradient(ellipse 90% 70% at 88% 100%, rgba(20, 45, 82, 0.35) 0%, transparent 55%);
opacity: 0.95;
}
body.bathgiant-has-trade-pricing .bathgiant-site-header__backdrop::after {
background: radial-gradient(ellipse 120% 85% at 12% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 52%),
radial-gradient(ellipse 90% 70% at 88% 100%, rgba(20, 10, 18, 0.35) 0%, transparent 55%);
}
.bathgiant-site-header__frame {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: start;
column-gap: 1rem;
row-gap: 0;
padding-top: 0;
padding-bottom: 0;
} .bathgiant-site-header__primary {
display: contents;
} .bathgiant-site-header__primary > .bathgiant-site-header__leading {
grid-column: 1;
grid-row: 1 / -1;
align-self: start;
display: flex;
align-items: flex-start;
height: 0;
overflow: visible;
}
.bathgiant-site-header__primary > .bathgiant-header-search-wrap {
grid-column: 2;
grid-row: 1;
align-self: center;
min-width: 0;
width: auto;
max-width: none; padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.bathgiant-site-header__primary > .bathgiant-header-actions {
grid-column: 3;
grid-row: 1;
align-self: center;
justify-self: end;
justify-content: flex-end;
width: auto;
padding: 0.5rem 0;
}
.bathgiant-site-header__body {
grid-column: 2 / -1;
grid-row: 2;
display: block;
min-width: 0;
}
.bathgiant-site-header__logo-slab {
align-self: start;
display: flex;
align-items: center;
justify-content: center;
min-width: 10.25rem;
min-height: auto; margin-bottom: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: 0 0 var(--bathgiant-radius-md) var(--bathgiant-radius-md);
position: relative;
z-index: 2;
}
.bathgiant-site-header__band {
min-width: 0;
background: transparent;
border-bottom: none;
box-shadow: none;
}
.bathgiant-site-header__brand,
.bathgiant-site-header__brand .custom-logo-link,
.bathgiant-site-header__brand .bathgiant-site-logo {
height: 100%;
max-height: 100%;
} .bathgiant-site-header__brand .custom-logo-link img,
.bathgiant-site-header__brand .bathgiant-site-logo__img {
max-height: 5.2rem;
max-width: min(100%, 300px);
width: auto;
height: auto;
object-fit: contain;
}
.bathgiant-site-header__band::before {
display: none;
}
}
@media (max-width: 899px) {
.bathgiant-site-header {
padding-top: env(safe-area-inset-top, 0);
background: linear-gradient(
180deg,
#5d8cc9 0%,
#4f82bd 28%,
#3f6fa8 62%,
#355f8e 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 18px rgba(10, 25, 46, 0.18);
}
body.bathgiant-has-trade-pricing .bathgiant-site-header {
background: linear-gradient(
180deg,
#a3163c 0%,
#911535 42%,
#65122f 78%,
#4a0d22 100%
);
}
.bathgiant-site-header__band {
background: transparent;
border-bottom: none;
box-shadow: none;
}
.bathgiant-site-header__band::before {
display: none;
} .bathgiant-site-header__frame {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.45rem;
padding-top: 0.45rem;
padding-bottom: 0;
}
.bathgiant-site-header__frame.bathgiant-wrap {
padding-left: clamp(0.75rem, 3.5vw, 1.25rem);
padding-right: clamp(0.75rem, 3.5vw, 1.25rem);
}
.bathgiant-site-header__primary {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 0.5rem;
row-gap: 0.45rem;
align-items: center;
width: 100%;
min-width: 0;
}
.bathgiant-site-header__body,
.bathgiant-site-header__band {
display: block;
}
.bathgiant-site-header__primary > .bathgiant-site-header__leading {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
min-width: 0;
min-height: 42px;
padding-right: 0;
margin-top:-8px
}
.bathgiant-site-header__logo-slab {
flex: unset;
min-width: 0;
max-width: min(48vw, 11.5rem);
width: max-content;
min-height: 42px;
margin: 0;
padding: 0.35rem 0.65rem;
border-radius: 0 0 var(--bathgiant-radius-sm) var(--bathgiant-radius-sm);
}
.bathgiant-site-header__brand .custom-logo-link img,
.bathgiant-site-header__brand .bathgiant-site-logo__img {
max-height: 40px;
max-width: min(100%, 180px);
}
.bathgiant-site-header__primary > .bathgiant-header-search-wrap {
grid-column: 2;
grid-row: 1;
flex: none;
min-width: 0;
width: auto;
max-width: none;
}
.bathgiant-header-search {
display: flex;
align-items: stretch;
box-sizing: border-box;
width: 100%;
max-width: none;
min-width: 0;
min-height: 40px;
margin-right: 0;
}
.bathgiant-header-search__input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
}
.bathgiant-site-header__primary > .bathgiant-header-actions {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45rem;
width: 100%;
min-width: 0;
padding: 0;
flex-wrap: nowrap;
}
.bathgiant-header-actions__cluster {
position: static;
top: auto;
right: auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45rem;
flex-wrap: nowrap;
width: 100%;
min-width: 0;
height: auto;
} .bathgiant-header-actions__cluster > .bathgiant-header-vat {
margin-right: auto;
}
.bathgiant-header-actions__cluster > .bathgiant-header-icon,
.bathgiant-header-actions__cluster > .bathgiant-header-account,
.bathgiant-header-actions__cluster > .bathgiant-header-mnav-trigger {
margin-left: 0;
margin-right: 0;
}
.bathgiant-header-account {
flex: 0 0 auto;
width: max-content;
max-width: min(48vw, 10rem);
padding-left: 0.32rem;
padding-right: 0.38rem;
} .bathgiant-header-account:not(.bathgiant-header-account--guest) {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
max-width: 38px;
padding: 0;
gap: 0;
justify-content: center;
}
.bathgiant-header-account__trade-pill {
display: none;
}
.bathgiant-header-account--guest {
padding-left: 0.32rem;
padding-right: 0.45rem;
}
.bathgiant-header-account--guest .bathgiant-header-account__text {
display: inline;
font-size: 0.75rem;
padding: 0 0.12rem 0 0.05rem;
}
.bathgiant-header-vat {
padding: 0.16rem;
}
.bathgiant-header-vat__option {
padding: 0 0.45rem;
font-size: 0.7rem;
}
.bathgiant-header-icon,
.bathgiant-header-mnav-trigger {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
.bathgiant-header-account__icon {
width: 26px;
height: 26px;
}
.bathgiant-header-tabs__primary-inner.bathgiant-wrap {
padding-left: clamp(0.85rem, 4.5vw, 1.25rem);
padding-right: clamp(0.85rem, 4.5vw, 1.25rem);
}
}
@media (max-width: 420px) {
.bathgiant-header-vat__option {
padding: 0 0.38rem;
font-size: 0.66rem;
}
.bathgiant-site-header__frame {
column-gap: 0.35rem;
}
.bathgiant-site-header__logo-slab {
max-width: min(58vw, 14rem);
padding: 0.3rem 0.55rem;
}
}
.bathgiant-site-header__leading {
display: flex;
align-items: center;
min-width: 0;
}
.bathgiant-site-header__logo-slab {
display: inline-flex;
align-items: center;
min-height: 48px;
max-width: 100%;
background: #fff;
padding: 0.3rem 0.55rem;
border-radius: 0 0 var(--bathgiant-radius-md) var(--bathgiant-radius-md);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.12);
line-height: 0;
}
.bathgiant-site-header__brand {
display: inline-flex;
align-items: center;
max-width: 100%;
min-width: 0;
}
.bathgiant-site-header__brand .custom-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
max-width: 100%;
}
.bathgiant-site-header__brand a:not(.custom-logo-link):not(.bathgiant-site-logo) {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.1rem, 2.2vw, 1.4rem);
line-height: 1.1;
color: #0f2f57;
text-decoration: none;
font-weight: 700;
}
.bathgiant-site-header__brand .custom-logo-link img,
.bathgiant-site-logo__img {
max-height: 46px;
width: auto;
height: auto;
display: block;
max-width: min(100%, 240px);
object-fit: contain;
} @media (min-width: 900px) and (max-width: 1199px) {
.bathgiant-site-header__brand .custom-logo-link img,
.bathgiant-site-header__brand .bathgiant-site-logo__img {
max-height: 4.75rem;
max-width: min(100%, 240px);
}
} @media (min-width: 1200px) {
.bathgiant-site-header__primary > .bathgiant-header-search-wrap {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.bathgiant-site-header__primary > .bathgiant-header-actions {
padding: 0.5rem 0;
}
.bathgiant-site-header__logo-slab {
margin-bottom: 0.5rem;
}
.bathgiant-site-header__brand .custom-logo-link img,
.bathgiant-site-header__brand .bathgiant-site-logo__img {
max-height: 5.2rem;
max-width: min(100%, 300px);
}
}
.bathgiant-site-logo {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
}
.bathgiant-site-logo__text {
font-family: var(--bathgiant-font-display, Georgia, serif);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.1;
color: #0f2f57;
}
.bathgiant-header-search {
display: flex;
align-items: stretch;
max-width: none;
width: 100%;
margin-left: 0;
margin-right: auto;
border-radius: var(--bathgiant-header-pill);
overflow: hidden;
min-height: var(--bathgiant-header-control-h);
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.12);
}
.bathgiant-header-search__input {
flex: 1;
min-width: 0;
border: none;
padding: 0.58rem 0.5rem 0.58rem 1rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.9375rem;
color: var(--bathgiant-ink);
background: transparent;
}
.bathgiant-header-search__input::placeholder {
color: #94a3b8;
}
.bathgiant-header-search__input:focus {
outline: none;
}
.bathgiant-header-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.85rem;
flex-shrink: 0;
border: none;
background: transparent;
color: var(--bathgiant-header-band-deep);
cursor: pointer;
border-left: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 0 var(--bathgiant-header-pill) var(--bathgiant-header-pill) 0;
}
.bathgiant-header-search__submit:hover {
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
}
.bathgiant-header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
justify-self: end;
flex-wrap: wrap;
padding: 10px 0 10px 10px;
} .bathgiant-header-actions__cluster {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
flex-wrap: nowrap;
min-width: 0;
}
.bathgiant-header-vat {
display: inline-flex;
align-items: center;
gap: 0.12rem;
box-sizing: border-box;
height: var(--bathgiant-header-control-h);
min-height: var(--bathgiant-header-control-h);
padding: 0.22rem;
border-radius: var(--bathgiant-header-pill);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.12);
flex-shrink: 0;
}
body.bathgiant-has-trade-pricing .bathgiant-header-vat {
border-color: rgba(255, 255, 255, 0.45);
}
.bathgiant-header-vat__option {
display: inline-flex;
align-items: center;
align-self: stretch;
min-height: 0;
padding: 0 0.6rem;
border-radius: var(--bathgiant-header-pill);
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
color: #2b4e7c;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-header-vat__option:hover,
.bathgiant-header-vat__option:focus-visible {
background: var(--bathgiant-brand-tint-10);
color: var(--bathgiant-brand-deep);
}
.bathgiant-header-vat__option.is-active {
background: var(--bathgiant-brand);
color: #fff;
}
.bathgiant-price-vat-label {
display: inline;
margin-left: 0.15rem;
font-size: 0.78em;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
.bathgiant-active-price-group {
display: inline-flex;
flex-wrap: nowrap;
align-items: baseline;
max-width: 100%;
white-space: nowrap;
}
.bathgiant-product-single__vat-note,
.bathgiant-account-quote-detail-vat-note {
margin: 0.35rem 0 0;
font-size: 0.88rem;
}
.bathgiant-header-account-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: var(--bathgiant-header-control-h);
height: var(--bathgiant-header-control-h);
box-sizing: border-box;
padding: 0 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--bathgiant-nav-ink);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand-deep) 28%, transparent);
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.14);
text-decoration: none;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.bathgiant-header-account-badge:hover {
background: #fff;
color: var(--bathgiant-brand-deep);
border-color: color-mix(in srgb, var(--bathgiant-brand-deep) 45%, transparent);
}
.bathgiant-header-account-badge--inactive {
border-style: dashed;
border-color: rgba(88, 112, 145, 0.45);
color: #2b4e7c;
}
.bathgiant-header-account-badge--inactive .bathgiant-header-account-badge__code {
background: rgba(88, 112, 145, 0.14);
color: #2b4e7c;
}
.bathgiant-header-account-badge__label {
text-transform: uppercase;
color: #355a89;
font-size: 0.68rem;
}
.bathgiant-header-account-badge__code {
display: inline-flex;
align-items: center;
min-height: 1.45rem;
padding: 0 0.45rem;
border-radius: 999px;
background: var(--bathgiant-brand-tint-12);
color: var(--bathgiant-nav-ink);
font-size: 0.72rem;
}
@media (max-width: 1024px) {
.bathgiant-header-account-badge__label {
display: none;
}
}
@media (max-width: 699px) {
.bathgiant-header-account-badge {
min-height: 40px;
padding: 0.25rem 0.45rem;
}
}
.bathgiant-header-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--bathgiant-header-control-h);
height: var(--bathgiant-header-control-h);
flex-shrink: 0;
border: none;
border-radius: 50%;
background: #fff;
color: var(--bathgiant-header-secondary);
box-shadow: 0 2px 10px rgba(12, 24, 44, 0.14);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
button.bathgiant-header-icon {
cursor: pointer;
font: inherit;
padding: 0;
-webkit-appearance: none;
appearance: none;
}
.bathgiant-header-icon:hover {
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
transform: translateY(-1px);
}
.bathgiant-header-icon__badge {
position: absolute;
top: -3px;
right: -7px;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.25rem;
border: none;
border-radius: 999px;
background: var(--bathgiant-dark);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 1.1rem;
text-align: center;
box-sizing: border-box;
box-shadow: 0 0 0 2px #fff;
}
.bathgiant-header-icon__badge[hidden] {
display: none !important;
}
.bathgiant-header-tabs-strip {
width: 100%;
position: relative;
z-index: 2;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-header-tabs {
position: relative;
z-index: 1;
} .bathgiant-header-tabs--inline {
position: relative;
z-index: 2;
margin-top: 0;
padding-top: 0.4rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--bathgiant-font-sans);
}
.bathgiant-header-tabs--inline .bathgiant-header-tabs__tablist {
padding-top: 0;
} @media (max-width: 899px) {
.bathgiant-header-tabs--inline {
display: none;
}
}
.bathgiant-header-tabs__primary {
width: 100%;
background: linear-gradient(180deg, var(--bathgiant-header-secondary) 0%, var(--bathgiant-nav-primary-gradient-end) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(16, 35, 60, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bathgiant-header-tabs__primary-inner {
box-sizing: border-box;
}
.bathgiant-header-tabs__tablist {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
gap: 0.12rem; margin: 0 calc(-1 * var(--bathgiant-radius-md));
padding: 0.35rem var(--bathgiant-radius-md) 0;
}
.bathgiant-header-tabs__tab {
appearance: none;
border: 0;
background: rgba(255, 255, 255, 0.05);
color: #e8f1ff;
font-family: var(--bathgiant-font-display);
font-size: 0.98rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
padding: 0.72rem 1.05rem;
border-radius: 8px 8px 0 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-header-tabs__tab:hover:not(.is-active) {
background: rgba(255, 255, 255, 0.13);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.bathgiant-header-tabs__tab.is-active {
position: relative;
z-index: 1;
background: #fff;
color: var(--bathgiant-nav-ink);
box-shadow: none;
}
.bathgiant-header-tabs__tab.is-active::before,
.bathgiant-header-tabs__tab.is-active::after {
content: "";
pointer-events: none;
position: absolute;
bottom: 0;
width: var(--bathgiant-radius-md);
height: var(--bathgiant-radius-md);
} .bathgiant-header-tabs__tab.is-active::before {
left: calc(-1 * var(--bathgiant-radius-md));
background: radial-gradient(
circle at top left,
transparent var(--bathgiant-radius-md),
#fff calc(var(--bathgiant-radius-md) + 0.5px)
);
}
.bathgiant-header-tabs__tab.is-active::after {
right: calc(-1 * var(--bathgiant-radius-md));
background: radial-gradient(
circle at top right,
transparent var(--bathgiant-radius-md),
#fff calc(var(--bathgiant-radius-md) + 0.5px)
);
}
.bathgiant-header-tabs__tab:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.95);
outline-offset: -2px;
border-radius: 8px 8px 0 0;
} .bathgiant-header-tabs-drop {
width: 100%;
max-width: none;
margin: 0;
background: #fff;
border-bottom: 1px solid #d8e2ef;
box-shadow: 0 14px 28px rgba(16, 35, 60, 0.14);
position: relative;
z-index: 3;
opacity: 0;
transform: translateY(-0.4rem);
max-height: 0;
overflow: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.22s ease,
max-height 0.28s ease;
}
.bathgiant-header-tabs-drop[hidden] {
display: none !important;
} .bathgiant-header-tabs-drop.is-open,
.bathgiant-header-tabs-drop.is-closing {
display: block !important;
}
.bathgiant-header-tabs-drop.is-open {
opacity: 1;
transform: translateY(0);
max-height: 90vh;
overflow: visible;
pointer-events: auto;
}
.bathgiant-header-tabs-drop.is-closing {
opacity: 0;
transform: translateY(-0.35rem);
max-height: 0;
overflow: hidden;
pointer-events: none;
}
.bathgiant-header-tabs-drop__inner {
width: 100%;
box-sizing: border-box;
background: #fff;
}
.bathgiant-header-tabs-drop__content {
box-sizing: border-box;
}
.bathgiant-header-tabs__panel {
display: none;
padding: 0;
}
.bathgiant-header-tabs__panel.is-active {
display: block;
animation: bathgiant-header-panel-in 0.22s ease both;
}
@keyframes bathgiant-header-panel-in {
from {
opacity: 0;
transform: translateY(0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bathgiant-header-tabs__panel-inner {
min-height: 4.5rem;
} .bathgiant-header-tabs__substrip {
width: 100%;
background: #fff;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-header-tabs__substrip-inner {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.15rem; padding-top: 0.4rem;
padding-bottom: 0.4rem;
scrollbar-width: thin;
}
.bathgiant-header-tabs__strip-item {
appearance: none;
border: 0; background: var(--bathgiant-nav-pill-bg);
color: var(--bathgiant-nav-pill-text);
font-family: var(--bathgiant-font-display);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
padding: 0.55rem 1rem;
border-radius: 999px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-header-tabs__strip-item:hover,
.bathgiant-header-tabs__strip-item:focus-visible {
background: var(--bathgiant-nav-pill-hover-bg);
color: var(--bathgiant-nav-pill-hover-text);
outline: none;
}
.bathgiant-header-tabs__strip-item.is-active {
background: var(--bathgiant-nav-pill-active-bg);
color: var(--bathgiant-nav-pill-active-text);
}
.bathgiant-header-tabs__strip-item--link {
display: inline-flex;
align-items: center;
} .bathgiant-header-tabs__mega {
width: 100%;
background: #fff;
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.28s ease,
opacity 0.18s ease;
} .bathgiant-header-tabs-drop.has-mega-open .bathgiant-header-tabs__panel.is-active .bathgiant-header-tabs__mega {
max-height: 80vh;
opacity: 1;
overflow: hidden;
}
.bathgiant-header-tabs-drop.has-mega-open.is-mega-settled .bathgiant-header-tabs__panel.is-active .bathgiant-header-tabs__mega {
overflow: visible;
} .bathgiant-header-tabs-drop.has-mega-open .bathgiant-header-tabs__panel--no-substrip.is-active .bathgiant-header-tabs__mega {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.bathgiant-header-tabs-drop.has-mega-open.is-mega-settled .bathgiant-header-tabs__panel--no-substrip.is-active .bathgiant-header-tabs__mega {
overflow-x: hidden;
overflow-y: auto;
}
.bathgiant-header-tabs__panel--no-substrip .bathgiant-header-tabs__mega-panel {
padding: 0.65rem 0 1rem;
}
.bathgiant-header-tabs__mega-panel {
display: none;
padding: 1.6rem 0 1.85rem;
opacity: 0;
transform: translateY(0.4rem);
}
.bathgiant-header-tabs__mega-panel.is-active {
display: block;
animation: bathgiant-header-mega-panel-in 0.24s ease both;
}
@keyframes bathgiant-header-mega-panel-in {
from {
opacity: 0;
transform: translateY(0.45rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-header-tabs-drop,
.bathgiant-header-tabs__mega,
.bathgiant-header-tabs__panel.is-active,
.bathgiant-header-tabs__mega-panel.is-active {
transition: none !important;
animation: none !important;
transform: none !important;
}
}
.bathgiant-header-tabs__mega-inner {
box-sizing: border-box;
}
.bathgiant-header-tabs__columns { display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 1.25rem 2rem;
}
.bathgiant-header-tabs__column { flex: 0 1 auto;
min-width: 11.5rem;
max-width: 100%;
box-sizing: border-box;
} .bathgiant-header-tabs__column--headless {
flex: 1 1 100%;
} .bathgiant-header-tabs__column--span-2 {
flex: 1 1 calc(50% - 1rem);
max-width: calc(50% - 1rem);
}
.bathgiant-header-tabs__column--span-3 {
flex: 1 1 calc(75% - 1.5rem);
max-width: calc(75% - 1.5rem);
}
.bathgiant-header-tabs__column--span-4 {
flex: 1 1 100%;
}
.bathgiant-header-tabs__column--span-fill {
flex: 1 1 240px;
} .bathgiant-header-tabs__column--span-2 .bathgiant-header-tabs__column-links,
.bathgiant-header-tabs__column--span-3 .bathgiant-header-tabs__column-links,
.bathgiant-header-tabs__column--span-4 .bathgiant-header-tabs__column-links,
.bathgiant-header-tabs__column--span-fill .bathgiant-header-tabs__column-links {
column-width: 200px;
column-gap: 1.5rem;
column-fill: balance;
}
.bathgiant-header-tabs__column--span-2 .bathgiant-header-tabs__column-links > li,
.bathgiant-header-tabs__column--span-3 .bathgiant-header-tabs__column-links > li,
.bathgiant-header-tabs__column--span-4 .bathgiant-header-tabs__column-links > li,
.bathgiant-header-tabs__column--span-fill .bathgiant-header-tabs__column-links > li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 0.6rem;
} .bathgiant-header-tabs .bg-nav-badge,
.bathgiant-header-tabs-drop .bg-nav-badge,
.bathgiant-store-mega .bg-nav-badge,
.bathgiant-mnav .bg-nav-badge {
display: inline-block;
vertical-align: middle;
margin-left: 0.45rem;
padding: 0.12em 0.55em;
box-sizing: border-box;
border: 1px solid transparent;
background: var(--bathgiant-nav-badge-bg);
color: #fff;
font-size: 0.72em;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.02em;
border-radius: 999px;
text-transform: uppercase;
white-space: nowrap;
}
.bathgiant-header-tabs .bg-nav-badge--sale,
.bathgiant-header-tabs-drop .bg-nav-badge--sale,
.bathgiant-store-mega .bg-nav-badge--sale,
.bathgiant-mnav .bg-nav-badge--sale {
font-family: var(--bathgiant-font-sans);
font-weight: 600;
background: linear-gradient(135deg, #9f1239 0%, #7f1d3c 42%, #65122f 72%, #4a0d22 100%);
color: #fff;
box-shadow: 0 1px 4px rgba(74, 13, 34, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
} body.bathgiant-has-trade-pricing .bathgiant-header-tabs .bg-nav-badge--sale,
body.bathgiant-has-trade-pricing .bathgiant-header-tabs-drop .bg-nav-badge--sale,
body.bathgiant-has-trade-pricing .bathgiant-mnav .bg-nav-badge--sale,
body.bathgiant-has-trade-pricing .bathgiant-mnav--trade .bg-nav-badge--sale {
background: #fff;
color: var(--bathgiant-trade, #c41e1e);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
text-shadow: none;
border: 1px solid rgba(255, 255, 255, 0.9);
}
body.bathgiant-has-trade-pricing .bathgiant-header-tabs__strip-item.is-active .bg-nav-badge--sale {
background: #fff;
color: var(--bathgiant-trade, #c41e1e);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
} body.bathgiant-has-trade-pricing .bathgiant-header-tabs__tab.is-active .bg-nav-badge--sale {
background: linear-gradient(135deg, #9f1239 0%, #7f1d3c 42%, #65122f 72%, #4a0d22 100%);
color: #fff;
box-shadow: 0 1px 4px rgba(74, 13, 34, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
border: 1px solid transparent;
}
.bathgiant-header-tabs__tab.is-active .bg-nav-badge--ghost {
background: var(--bathgiant-nav-badge-bg);
color: #fff;
border-color: transparent;
}
.bathgiant-header-tabs .bg-nav-badge--new,
.bathgiant-header-tabs-drop .bg-nav-badge--new,
.bathgiant-store-mega .bg-nav-badge--new,
.bathgiant-mnav .bg-nav-badge--new {
background: #16a34a;
color: #fff;
}
.bathgiant-header-tabs .bg-nav-badge--hot,
.bathgiant-header-tabs-drop .bg-nav-badge--hot,
.bathgiant-store-mega .bg-nav-badge--hot,
.bathgiant-mnav .bg-nav-badge--hot {
background: #f97316;
color: #fff;
}
.bathgiant-header-tabs .bg-nav-badge--ghost,
.bathgiant-header-tabs-drop .bg-nav-badge--ghost,
.bathgiant-store-mega .bg-nav-badge--ghost,
.bathgiant-mnav .bg-nav-badge--ghost {
background: #fff;
color: var(--bathgiant-nav-badge-ghost-text);
border: 1px solid currentColor;
} .bathgiant-header-tabs__strip-item.is-active .bg-nav-badge {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
} .bathgiant-header-tabs__column-links--solo {
column-width: auto;
column-count: 1;
column-gap: 0;
}
.bathgiant-header-tabs__column-links--solo > li {
margin: 0;
} .bathgiant-header-tabs__column--promo-card {
align-self: stretch;
display: flex;
flex-direction: column;
}
.bathgiant-header-tabs__column--promo-card > .bathgiant-header-tabs__nav-link--card {
flex: 1 1 auto;
width: 100%;
min-height: 220px;
}
.bathgiant-header-tabs__column--image-only,
.bathgiant-header-tabs__column:has(.bathgiant-header-tabs__nav-link--image-only) { align-self: stretch;
display: flex;
flex-direction: column;
overflow: visible;
}
.bathgiant-header-tabs__promo-wrap {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 220px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.bathgiant-header-tabs__promo-wrap:hover,
.bathgiant-header-tabs__promo-wrap:focus-within {
border-color: var(--bathgiant-nav-border-focus);
}
.bathgiant-header-tabs__promo-wrap--has-ribbon .bg-nav-sale-ribbon {
z-index: 6;
}
.bathgiant-header-tabs__promo-wrap .bathgiant-header-tabs__nav-link--image-only {
flex: 1 1 auto;
border: none;
border-radius: 0;
}
.bathgiant-header-tabs__promo-wrap .bathgiant-header-tabs__nav-link--image-only:hover,
.bathgiant-header-tabs__promo-wrap .bathgiant-header-tabs__nav-link--image-only:focus-visible {
border-color: transparent;
}
.bathgiant-header-tabs__column--image-only > .bathgiant-header-tabs__nav-link--image-only { flex: 1 1 auto;
align-self: stretch;
min-height: 220px;
}
.bathgiant-header-tabs__column:has(.bathgiant-header-tabs__nav-link--image-only) .bathgiant-header-tabs__column-links {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.bathgiant-header-tabs__column:has(.bathgiant-header-tabs__nav-link--image-only) .bathgiant-header-tabs__column-links > li {
flex: 1 1 auto;
display: flex;
margin: 0;
}
.bathgiant-header-tabs__nav-link--image-only { display: block;
position: relative;
width: 100%;
min-height: 220px;
padding: 0;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease;
text-decoration: none;
line-height: 0;
}
.bathgiant-header-tabs__nav-link--image-only:hover,
.bathgiant-header-tabs__nav-link--image-only:focus-visible {
border-color: var(--bathgiant-nav-border-focus);
text-decoration: none;
} .bathgiant-header-tabs__nav-link--image-only,
.bathgiant-header-tabs__nav-link--image-only:hover,
.bathgiant-header-tabs__nav-link--image-only:focus-visible,
.bathgiant-header-tabs__nav-link--image-only .bathgiant-header-tabs__nav-link-cta {
text-decoration: none;
}
.bathgiant-header-tabs__nav-link-media--full { position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
background-color: #f1f5f9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
line-height: 1.2;
} .bathgiant-header-tabs__nav-link-media--full img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .bathgiant-header-tabs__nav-link-cta {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 0.6rem 1.1rem;
background: var(--bathgiant-brand-deep, #2f68c4);
color: #fff;
font-family: var(--bathgiant-font-display);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
border-radius: 999px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 6px 18px var(--bathgiant-nav-cta-shadow);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-header-tabs__nav-link--image-only:hover .bathgiant-header-tabs__nav-link-cta,
.bathgiant-header-tabs__nav-link--image-only:focus-visible .bathgiant-header-tabs__nav-link-cta {
background: var(--bathgiant-brand, #3d7dd9);
transform: translateY(-1px);
box-shadow: 0 8px 22px var(--bathgiant-nav-cta-shadow);
} .bathgiant-header-tabs__nav-link--image-only,
.bathgiant-header-tabs__nav-link--card,
.bathgiant-mnav__promo-link--image-only,
.bathgiant-mnav__promo-link--card {
position: relative;
}
.bg-nav-sale-ribbon {
--bg-ribbon-size: 8rem;
--bg-ribbon-bg-opacity: 0.85;
position: absolute;
z-index: 6;
width: var(--bg-ribbon-size);
height: var(--bg-ribbon-size);
pointer-events: none;
background: linear-gradient(
150deg,
rgba(159, 18, 57, var(--bg-ribbon-bg-opacity)) 0%,
rgba(127, 29, 60, var(--bg-ribbon-bg-opacity)) 45%,
rgba(74, 13, 34, var(--bg-ribbon-bg-opacity)) 100%
);
}
.bg-nav-sale-ribbon--top-right {
top: 0;
right: 0;
clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.bg-nav-sale-ribbon--top-left {
top: 0;
left: 0;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bg-nav-sale-ribbon__inner {
position: absolute;
display: block;
width: 8.75rem;
padding: 0;
background: transparent;
color: #fff;
font-family: var(--bathgiant-font-display);
font-size: 0.975rem;
font-weight: 800;
line-height: 1.24;
text-align: center;
letter-spacing: 0.02em;
box-shadow: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.35);
}
.bg-nav-sale-ribbon__inner small {
display: block;
font-size: 0.64em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.2;
opacity: 1;
}
.bg-nav-sale-ribbon__inner strong,
.bg-nav-sale-ribbon__inner b {
font-weight: 900;
} .bg-nav-sale-ribbon--top-right .bg-nav-sale-ribbon__inner {
top: 34%;
left: 67%;
right: auto;
transform: translate(-50%, -50%) rotate(45deg);
transform-origin: center center;
}
.bg-nav-sale-ribbon--top-left .bg-nav-sale-ribbon__inner {
top: 34%;
left: 33%;
right: auto;
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: center center;
}
.bathgiant-mnav .bg-nav-sale-ribbon {
--bg-ribbon-size: 6.5rem;
}
.bathgiant-mnav .bg-nav-sale-ribbon__inner {
width: 7.5rem;
font-size: 0.875rem;
line-height: 1.22;
}
.bathgiant-mnav .bg-nav-sale-ribbon--top-right .bg-nav-sale-ribbon__inner {
top: 34%;
left: 66%;
}
.bathgiant-mnav .bg-nav-sale-ribbon--top-left .bg-nav-sale-ribbon__inner {
top: 34%;
left: 34%;
}
.bathgiant-header-tabs__column--headless .bathgiant-header-tabs__column-links { display: block;
column-width: 240px;
column-gap: 2rem;
column-fill: balance;
}
.bathgiant-header-tabs__column--headless .bathgiant-header-tabs__column-links > li { break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 0.55rem;
} .bathgiant-header-tabs__column--headless .bathgiant-header-tabs__column-links > li:last-child {
margin-bottom: 0;
}
.bathgiant-header-tabs__column-title {
margin: 0 0 0.55rem;
font-family: var(--bathgiant-font-display);
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
color: var(--bathgiant-nav-ink);
}
.bathgiant-header-tabs__column-title a {
color: inherit;
text-decoration: none;
}
.bathgiant-header-tabs__column-title a:hover,
.bathgiant-header-tabs__column-title a:focus-visible {
text-decoration: underline;
}
.bathgiant-header-tabs__column-links {
list-style: none;
margin: 0;
padding: 0;
} .bathgiant-header-tabs__column-group + .bathgiant-header-tabs__column-group {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--bathgiant-nav-divider);
}
.bathgiant-header-tabs__column-links > li {
margin: 0;
} .bathgiant-header-tabs__column-links > li:not(:has(.bathgiant-header-tabs__nav-link--card)):not(:last-child) {
border-bottom: 1px solid var(--bathgiant-nav-divider);
}
.bathgiant-header-tabs__column-links .bathgiant-header-tabs__nav-link--link:not(.bathgiant-header-tabs__nav-link--card):not(.bathgiant-header-tabs__nav-link--image-only) {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 0.42rem 0.5rem;
margin: 0;
border-radius: 5px;
transition:
color 0.16s ease,
background-color 0.16s ease,
box-shadow 0.16s ease;
}
.bathgiant-header-tabs__column-links .bathgiant-header-tabs__nav-link--link:not(.bathgiant-header-tabs__nav-link--card):not(.bathgiant-header-tabs__nav-link--image-only):hover,
.bathgiant-header-tabs__column-links .bathgiant-header-tabs__nav-link--link:not(.bathgiant-header-tabs__nav-link--card):not(.bathgiant-header-tabs__nav-link--image-only):focus-visible {
color: var(--bathgiant-nav-ink);
background-color: var(--bathgiant-nav-link-hover-bg);
box-shadow: inset 3px 0 0 var(--bathgiant-nav-link-hover-accent);
text-decoration: none;
}
.bathgiant-header-tabs__nav-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--bathgiant-nav-link);
font-size: 0.9rem;
line-height: 1.35;
text-decoration: none;
}
.bathgiant-header-tabs__nav-link:hover,
.bathgiant-header-tabs__nav-link:focus-visible {
color: var(--bathgiant-nav-ink);
text-decoration: underline;
} .bathgiant-header-tabs__column-links .bathgiant-header-tabs__nav-link--link:not(.bathgiant-header-tabs__nav-link--card):not(.bathgiant-header-tabs__nav-link--image-only):hover,
.bathgiant-header-tabs__column-links .bathgiant-header-tabs__nav-link--link:not(.bathgiant-header-tabs__nav-link--card):not(.bathgiant-header-tabs__nav-link--image-only):focus-visible {
text-decoration: none;
}
.bathgiant-header-tabs__column-title .bathgiant-header-tabs__nav-link {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.bathgiant-header-tabs__nav-link--has-image {
padding: 0.2rem 0;
} .bathgiant-header-tabs__nav-link-media:not(.bathgiant-header-tabs__nav-link-media--card):not(.bathgiant-header-tabs__nav-link-media--full) {
flex: 0 0 auto;
width: 2.75rem;
height: 3.75rem;
border-radius: 8px;
overflow: hidden;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.bathgiant-header-tabs__nav-link-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-header-tabs__nav-link-label {
min-width: 0;
} .bathgiant-header-tabs__nav-link--card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
padding: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden; transition: background 0.15s ease, border-color 0.15s ease;
text-decoration: none;
}
.bathgiant-header-tabs__nav-link--card:hover,
.bathgiant-header-tabs__nav-link--card:focus-visible {
background: var(--bathgiant-nav-card-hover-bg);
border-color: var(--bathgiant-nav-border-focus);
text-decoration: none;
}
.bathgiant-header-tabs__nav-link-media--card {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: #f1f5f9;
border: 0;
border-radius: 0;
overflow: hidden;
}
.bathgiant-header-tabs__nav-link-media--card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-header-tabs__nav-link--card .bathgiant-header-tabs__nav-link-label {
padding: 0 0.8rem 0.8rem;
font-weight: 700;
color: var(--bathgiant-nav-ink);
font-size: 0.95rem;
} .bathgiant-header-tabs__column-links li:has(.bathgiant-header-tabs__nav-link--card) {
margin: 0 0 0.85rem;
}
.bathgiant-header-tabs__mega-empty {
margin: 0;
color: #5a6d82;
font-size: 0.92rem;
}
.bathgiant-header-tabs__tab--brands {
margin-left: auto;
}
.bathgiant-brand-mega {
display: grid;
gap: 1rem;
padding: 0.15rem 0 0.25rem;
}
.bathgiant-brand-mega__az {
display: flex;
align-items: center;
gap: 0.4rem 0.5rem;
flex-wrap: wrap;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--bathgiant-nav-divider);
}
.bathgiant-brand-mega__az-btn {
appearance: none;
border: 1px solid #d5e0ef;
background: #fff;
color: #3a4f66;
border-radius: 999px;
padding: 0.3rem 0.68rem;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.bathgiant-brand-mega__az-btn:hover,
.bathgiant-brand-mega__az-btn:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand) 45%, #fff);
color: var(--bathgiant-nav-ink);
}
.bathgiant-brand-mega__az-btn.is-active {
border-color: var(--bathgiant-nav-pill-active-bg);
background: var(--bathgiant-nav-pill-active-bg);
color: var(--bathgiant-nav-pill-active-text);
}
.bathgiant-brand-mega__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 0.7rem 0.8rem;
align-content: start;
flex: 1 1 auto;
min-height: 0;
}
.bathgiant-brand-mega__card {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
border: 1px solid #e1e9f4;
border-radius: 10px;
text-decoration: none;
color: var(--bathgiant-nav-ink);
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-brand-mega__card[hidden] {
display: none !important;
}
.bathgiant-brand-mega__card:hover,
.bathgiant-brand-mega__card:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand) 40%, #fff);
background: var(--bathgiant-nav-card-hover-bg);
box-shadow: 0 4px 14px var(--bathgiant-nav-link-hover-bg);
text-decoration: none;
}
.bathgiant-brand-mega__thumb {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 4.25rem;
height: 4.25rem;
overflow: hidden;
border: 0;
border-radius: 0;
background: #fff;
padding: 0.6rem 0.75rem;
box-sizing: border-box;
}
.bathgiant-brand-mega__thumb img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.bathgiant-brand-mega__thumb-fallback {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-family: var(--bathgiant-font-display);
font-size: 1rem;
color: var(--bathgiant-nav-ink);
}
.bathgiant-brand-mega__empty {
margin: 0;
color: #5a6d82;
font-size: 0.9rem;
}
@media (min-width: 1200px) {
.bathgiant-brand-mega__grid {
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 0.75rem 0.9rem;
}
.bathgiant-brand-mega__thumb {
min-height: 4.5rem;
height: 4.5rem;
padding: 0.65rem 0.85rem;
}
}
@media (max-width: 899px) {
.bathgiant-brand-mega__grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 0.6rem 0.65rem;
}
.bathgiant-brand-mega__thumb {
min-height: 3.75rem;
height: 3.75rem;
padding: 0.5rem 0.6rem;
}
}
@media (max-width: 699px) {
.bathgiant-brand-mega__grid {
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 0.55rem;
}
.bathgiant-brand-mega__thumb {
min-height: 3.35rem;
height: 3.35rem;
padding: 0.45rem 0.5rem;
}
}
@media (max-width: 1100px) { .bathgiant-header-tabs__column {
min-width: 9.5rem;
}
}
@media (max-width: 899px) {
.bathgiant-header-tabs__tablist {
padding-top: 0.15rem;
padding-bottom: 0.1rem;
-webkit-overflow-scrolling: touch;
}
.bathgiant-header-tabs__tab {
font-size: 0.9rem;
padding: 0.62rem 0.85rem;
}
.bathgiant-header-tabs__tab--brands {
margin-left: 0;
}
}
@media (max-width: 699px) {
.bathgiant-header-tabs__tab {
padding: 0.62rem 0.85rem;
font-size: 0.88rem;
}
.bathgiant-header-tabs__columns { flex-direction: column;
gap: 1rem 0;
}
.bathgiant-header-tabs__column,
.bathgiant-header-tabs__column--span-2,
.bathgiant-header-tabs__column--span-3,
.bathgiant-header-tabs__column--span-4,
.bathgiant-header-tabs__column--span-fill {
flex: 1 1 100%;
max-width: 100%;
min-width: 0;
}
} .bathgiant-store-mega:not([hidden]) {
display: flex;
flex-direction: column;
position: fixed;
inset: 0;
z-index: 500;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-store-mega__backdrop {
position: absolute;
inset: 0;
background: linear-gradient(
155deg,
rgba(10, 22, 38, 0.72) 0%,
rgba(26, 45, 72, 0.78) 42%,
rgba(47, 90, 148, 0.45) 88%,
rgba(61, 125, 217, 0.2) 100%
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.bathgiant-store-mega__panel {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
margin: 0;
background: linear-gradient(
180deg,
#f5f8fc 0%,
var(--bathgiant-brand-wash) 32%,
#fff 72%
);
box-shadow: 0 -12px 48px rgba(12, 28, 52, 0.22);
animation: bathgiant-store-mega-in 0.28s ease-out;
}
.bathgiant-store-mega__panel::before {
content: "";
pointer-events: none;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 95% 45% at 50% 0%, rgba(61, 125, 217, 0.08) 0%, transparent 62%);
opacity: 1;
z-index: 0;
}
.bathgiant-store-mega__top,
.bathgiant-store-mega__quick,
.bathgiant-store-mega__scroll {
position: relative;
z-index: 1;
}
@keyframes bathgiant-store-mega-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bathgiant-store-mega__top {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 0.15rem 1rem;
padding-top: clamp(1rem, 3vw, 1.5rem);
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--bathgiant-border);
background: rgba(255, 255, 255, 0.65);
}
.bathgiant-store-mega__eyebrow {
grid-column: 1;
margin: 0;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-store-mega__title {
grid-column: 1;
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.35rem, 3.5vw, 1.75rem);
font-weight: 600;
color: var(--bathgiant-ink);
letter-spacing: -0.02em;
line-height: 1.2;
}
.bathgiant-store-mega__close {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-sm);
background: #fff;
color: var(--bathgiant-ink);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
box-shadow: var(--bathgiant-shadow-sm);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-store-mega__close:hover {
background: var(--bathgiant-brand-wash);
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
}
.bathgiant-store-mega__quick {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.65rem;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid rgba(228, 233, 240, 0.9);
background: rgba(255, 255, 255, 0.4);
}
.bathgiant-store-mega__quick-link {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: #fff;
border: 1px solid var(--bathgiant-border);
color: var(--bathgiant-ink);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-store-mega__quick-link:hover {
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
box-shadow: var(--bathgiant-shadow-sm);
}
.bathgiant-store-mega__quick-link--trade {
border-color: rgba(196, 30, 30, 0.35);
color: var(--bathgiant-trade);
background: linear-gradient(180deg, #fff 0%, rgba(255, 245, 245, 0.85) 100%);
}
.bathgiant-store-mega__quick-link--trade:hover {
border-color: var(--bathgiant-trade);
color: var(--bathgiant-trade-hover);
}
.bathgiant-store-mega__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: clamp(0.5rem, 2vw, 1rem);
}
.bathgiant-store-mega__columns {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
padding-top: clamp(0.4rem, 1.4vw, 0.8rem);
}
@media (min-width: 900px) {
.bathgiant-store-mega__columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.9rem 1rem;
align-items: stretch;
}
}
.bathgiant-store-mega__section {
min-width: 0;
border: 1px solid rgba(228, 233, 240, 0.95);
border-radius: var(--bathgiant-radius-md);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--bathgiant-shadow-sm);
display: flex;
flex-direction: column;
}
.bathgiant-store-mega__section-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0.75rem 1rem;
border: none;
border-bottom: 1px solid transparent;
border-radius: var(--bathgiant-radius-md) var(--bathgiant-radius-md) 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 252, 0.65) 100%);
color: var(--bathgiant-header-secondary);
font-family: var(--bathgiant-font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
text-align: left;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease;
}
.bathgiant-store-mega__section-toggle:hover {
background: linear-gradient(180deg, #fff 0%, var(--bathgiant-brand-wash) 100%);
}
.bathgiant-store-mega__section:not(.is-collapsed) .bathgiant-store-mega__section-toggle {
border-bottom-color: rgba(228, 233, 240, 0.9);
}
.bathgiant-store-mega__section-toggle:focus-visible {
outline: 2px solid var(--bathgiant-brand);
outline-offset: 2px;
}
.bathgiant-store-mega__section-toggle-icon {
display: inline-flex;
line-height: 0;
color: var(--bathgiant-brand-deep);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.bathgiant-store-mega__section.is-collapsed .bathgiant-store-mega__section-toggle {
border-bottom-color: transparent;
border-radius: var(--bathgiant-radius-md);
}
.bathgiant-store-mega__section.is-collapsed .bathgiant-store-mega__section-toggle-icon {
transform: rotate(-90deg);
}
.bathgiant-store-mega__section-panel {
padding: 0.55rem 0.65rem 0.75rem;
flex: 1;
min-height: 0;
}
@media (max-width: 899px) {
.bathgiant-store-mega__section-panel:not([hidden]) {
max-height: min(52vh, 440px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (min-width: 900px) {
.bathgiant-store-mega__section {
min-height: 0;
}
.bathgiant-store-mega__scroll {
display: flex;
flex-direction: column;
}
.bathgiant-store-mega__columns {
flex: 1;
min-height: min(72vh, 760px);
}
.bathgiant-store-mega__section-panel:not([hidden]) {
max-height: min(72vh, 760px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.bathgiant-store-mega__empty {
margin: 0;
font-size: 0.9rem;
color: var(--bathgiant-ink-muted);
line-height: 1.5;
}
.bathgiant-store-mega__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
gap: 0.65rem;
list-style: none;
margin: 0;
padding: 0;
}
.bathgiant-store-mega__grid--brands {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.bathgiant-store-mega__card {
display: flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: 0.65rem 0.85rem;
border-radius: var(--bathgiant-radius-md);
background: #fff;
border: 1px solid var(--bathgiant-border);
color: var(--bathgiant-ink);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1.3;
box-shadow: var(--bathgiant-shadow-sm);
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.bathgiant-store-mega__card:hover {
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
transform: translateY(-2px);
box-shadow: var(--bathgiant-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-store-mega__panel {
animation: none;
}
.bathgiant-store-mega__card {
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-store-mega__card:hover {
transform: none;
}
}
body.bathgiant-store-mega-open .bathgiant-site-chrome {
z-index: 450;
} .bathgiant-site-nav {
display: none;
}
.bathgiant-site-nav__inner {
padding-top: 1rem;
padding-bottom: 2rem;
}
.bathgiant-header-search--drawer {
max-width: none;
margin-bottom: 1.25rem;
box-shadow: none;
border: 1px solid var(--bathgiant-border);
}
.bathgiant-site-nav__group {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-site-nav__group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.bathgiant-site-nav__heading {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
margin-bottom: 0.65rem;
}
.bathgiant-site-nav__link {
display: block;
padding: 0.65rem 0;
border-radius: 0;
font-size: 1rem;
font-weight: 600;
color: var(--bathgiant-ink);
text-decoration: none;
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-site-nav__link:last-of-type {
border-bottom: none;
}
.bathgiant-site-nav__link:hover {
color: var(--bathgiant-brand-deep);
}
.bathgiant-site-nav__link--trade {
color: var(--bathgiant-trade);
}
.bathgiant-site-nav__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-site-nav__chip {
display: inline-block;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: var(--bathgiant-light);
border: 1px solid var(--bathgiant-border);
font-size: 0.8125rem;
font-weight: 600;
color: var(--bathgiant-ink);
text-decoration: none;
}
.bathgiant-site-nav__chip:hover {
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
}
@media (max-width: 991px) {
.bathgiant-site-nav {
position: fixed;
left: 0;
right: 0;
top: clamp(5.75rem, 28vw, 8.5rem);
bottom: 0;
padding-top: 1rem;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 12px 40px rgba(15, 20, 25, 0.12);
overflow-y: auto;
z-index: 150;
}
.bathgiant-site-nav.is-open {
display: block;
}
}
@media (min-width: 992px) {
.bathgiant-site-nav {
display: none !important;
}
} .bathgiant-hero {
position: relative;
overflow: hidden;
color: #fff;
padding: clamp(2.75rem, 10vw, 5.5rem) 0 clamp(3rem, 11vw, 6rem);
}
.bathgiant-hero::after {
content: "";
position: absolute;
width: min(120vw, 640px);
height: min(120vw, 640px);
left: -18%;
bottom: -42%;
border-radius: 50%;
border: clamp(28px, 5vw, 48px) solid rgba(61, 125, 217, 0.22);
pointer-events: none;
z-index: 0;
}
.bathgiant-hero__bg {
position: absolute;
inset: 0;
background: linear-gradient(
118deg,
#1a2f4a 0%,
#243d5c 32%,
#2f5490 68%,
#3d7dd9 100%
);
}
.bathgiant-hero__bg::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 95% 75% at 88% 12%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
radial-gradient(ellipse 90% 70% at 85% 0%, rgba(61, 125, 217, 0.45) 0%, transparent 52%);
opacity: 1;
}
.bathgiant-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 12% 88%, rgba(0, 0, 0, 0.2) 0%, transparent 42%),
linear-gradient(180deg, transparent 55%, rgba(15, 25, 40, 0.35) 100%);
}
.bathgiant-hero__grid {
position: absolute;
inset: 0;
opacity: 0.07;
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.bathgiant-hero__content {
position: relative;
z-index: 1;
max-width: min(44rem, 100%);
}
.bathgiant-hero__eyebrow {
margin: 0 0 0.3rem;
font-size: var(--bathgiant-text-eyebrow);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.bathgiant-hero__title {
margin: 0;
font-size: clamp(2rem, 5vw, 3.15rem);
line-height: 1.12;
font-weight: 700;
color: #fff;
}
.bathgiant-hero__lede {
margin: clamp(0.75rem, 1.5vw, 1rem) 0 1.75rem;
font-size: 1.08rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.82);
max-width: 38ch;
} .bathgiant-hero-anim__eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
}
.bathgiant-hero-anim__eyebrow-line {
display: block;
width: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.15) 100%);
flex-shrink: 0;
}
.bathgiant-hero-anim__eyebrow-text {
opacity: 0;
transform: translate3d(0, 0.5rem, 0);
animation: none;
}
.bathgiant-hero-anim__word {
display: inline-block;
overflow: hidden;
margin-right: 0.18em;
vertical-align: bottom;
}
.bathgiant-hero-anim__word-inner {
display: inline-block;
opacity: 0;
transform: translate3d(0, 108%, 0) rotate(2deg);
animation: none;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__word-inner {
opacity: 0;
transform: translate3d(0, 108%, 0) rotate(2deg);
animation: none !important;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-text {
opacity: 0;
transform: translate3d(0, 0.5rem, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.is-slide-active .bathgiant-hero-anim__word-inner {
animation: bg2026-hero-anim-word-rise 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.42s + (var(--bg-hero-word-i, 0) * 0.11s));
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__word-inner {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg);
animation: none !important;
}
.bathgiant-hero-anim__lede {
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
animation: none;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__lede {
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.is-slide-active .bathgiant-hero-anim__eyebrow-line {
animation: bg2026-hero-anim-eyebrow-line 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.is-slide-active .bathgiant-hero-anim__eyebrow-text {
animation: bg2026-hero-anim-eyebrow-text-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__eyebrow-line {
width: clamp(2.25rem, 5vw, 3.75rem);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__eyebrow-text {
opacity: 1;
transform: translate3d(0, 0, 0);
animation: none !important;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-line {
width: 0;
animation: none !important;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__eyebrow-text {
opacity: 0;
transform: translate3d(0, 0.5rem, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__lede,
.is-slide-active .bathgiant-hero-anim__lede {
animation: bg2026-hero-anim-lede-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__lede {
opacity: 1;
transform: translate3d(0, 0, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-banner__content,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-branch-screen__content {
opacity: 0;
transform: translate3d(0, -0.75rem, 0);
transition:
opacity 0.32s cubic-bezier(0.55, 0, 1, 0.45),
transform 0.32s cubic-bezier(0.55, 0, 1, 0.45);
pointer-events: none;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__content,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__content {
opacity: 1;
transform: none;
} .bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__word-inner,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__lede,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__reveal,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-banner__content {
opacity: 1;
transform: none;
}
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__word-inner {
animation: bg2026-hero-anim-word-rise 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.42s + (var(--bg-hero-word-i, 0) * 0.11s));
}
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line {
animation: bg2026-hero-anim-eyebrow-line 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text {
animation: bg2026-hero-anim-eyebrow-text-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__lede {
animation: bg2026-hero-anim-lede-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(1.38s + (var(--bg-hero-reveal-i, 0) * 0.12s));
} .bathgiant-hero-anim__reveal {
opacity: 0;
transform: translate3d(0, 1.15rem, 0);
animation: none;
}
.bathgiant-hero-banner__viewport.owl-loaded .bathgiant-hero-banner__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__reveal {
opacity: 0;
transform: translate3d(0, 1.15rem, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal {
animation-delay: calc(1.1s + (var(--bg-hero-reveal-i, 0) * 0.09s));
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action {
animation-delay: calc(1.38s + (var(--bg-hero-reveal-i, 0) * 0.12s));
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--trust,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--trust {
animation: bg2026-hero-anim-reveal-in 0.88s cubic-bezier(0.22, 1, 0.36, 1) 1.62s forwards;
}
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__reveal {
opacity: 1;
transform: translate3d(0, 0, 0);
animation: none !important;
}
.bathgiant-hero-banner__slide.is-slide-leaving .bathgiant-hero-anim__reveal--trust,
.bathgiant-branch-screen__slide.is-slide-leaving .bathgiant-hero-anim__reveal--trust {
opacity: 0;
transform: translate3d(0, 0.65rem, 0);
transition:
opacity 0.3s cubic-bezier(0.55, 0, 1, 0.45),
transform 0.3s cubic-bezier(0.55, 0, 1, 0.45);
}
@keyframes bg2026-hero-anim-eyebrow-line {
from {
width: 0;
}
to {
width: clamp(2.25rem, 5vw, 3.75rem);
}
}
@keyframes bg2026-hero-anim-eyebrow-text-in {
from {
opacity: 0;
transform: translate3d(0, 0.5rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes bg2026-hero-anim-word-rise {
from {
opacity: 0;
transform: translate3d(0, 108%, 0) rotate(2deg);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
@keyframes bg2026-hero-anim-lede-in {
from {
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes bg2026-hero-anim-reveal-in {
from {
opacity: 0;
transform: translate3d(0, 1.15rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.is-slide-active .bathgiant-hero-anim__word-inner,
.is-slide-active .bathgiant-hero-anim__lede {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.is-slide-leaving .bathgiant-hero-anim__eyebrow-line,
.is-slide-leaving .bathgiant-hero-anim__eyebrow-text,
.is-slide-leaving .bathgiant-hero-anim__word-inner,
.is-slide-leaving .bathgiant-hero-anim__lede,
.is-slide-leaving .bathgiant-hero-banner__content,
.is-slide-leaving .bathgiant-branch-screen__content {
animation: none !important;
opacity: 0 !important;
transition: none !important;
}
.is-slide-active .bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip,
.bathgiant-hero-banner--homepage .bathgiant-hero-anim__reveal--products-heading {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.bathgiant-hero-anim__eyebrow-line {
width: clamp(2.25rem, 5vw, 3.75rem);
}
.bathgiant-hero-anim__word-inner {
opacity: 1;
transform: none;
}
}
.bathgiant-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
}
.bathgiant-hero__admin {
margin: 2rem 0 0;
font-size: 0.875rem;
}
.bathgiant-hero__admin a {
color: rgba(255, 255, 255, 0.65);
text-decoration: underline;
text-underline-offset: 3px;
}
.bathgiant-hero__admin a:hover {
color: #fff;
} .bathgiant-hero-banner {
position: relative;
overflow: hidden;
color: #fff;
outline: none;
}
.bathgiant-hero-banner:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.85);
outline-offset: 4px;
}
.bathgiant-hero-banner::after { }
.bathgiant-hero-banner[data-hero-accent-group="trade"]::after {
border-color: rgba(196, 30, 30, 0.24);
}
@keyframes bg2026-hero-ring-drift {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
opacity: 0.72;
}
25% {
transform: translate3d(2.5%, -2%, 0) rotate(6deg) scale(1.035);
opacity: 0.92;
}
50% {
transform: translate3d(4%, 1.5%, 0) rotate(12deg) scale(1.05);
opacity: 1;
}
75% {
transform: translate3d(1%, 3%, 0) rotate(5deg) scale(1.02);
opacity: 0.85;
}
}
.bathgiant-hero-banner__viewport {
position: relative;
z-index: 1;
--bathgiant-hero-fixed-height: clamp(24rem, 68vh, 40rem);
--bathgiant-hero-toolbar-reserve: 4.5rem;
min-height: var(--bathgiant-hero-fixed-height);
height: var(--bathgiant-hero-fixed-height);
container-type: size;
container-name: bg-hero-viewport;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.bathgiant-hero-banner__viewport.owl-carousel {
touch-action: pan-x pan-y pinch-zoom;
} .bathgiant-hero-banner__viewport.owl-carousel:not(.owl-loaded),
.bathgiant-hero-banner__viewport.owl-carousel.owl-loading {
display: block;
opacity: 1;
}
.bathgiant-hero-banner__viewport .owl-stage-outer {
min-height: 100%;
height: 100%;
overflow: hidden;
}
.bathgiant-hero-banner__viewport .owl-stage {
min-height: 100%;
height: 100%;
}
.bathgiant-hero-banner__viewport .owl-item {
min-height: 100%;
height: 100%;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-stage-outer {
height: 100% !important;
min-height: 100%;
width: 100% !important;
overflow: hidden;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-stage {
transform: none !important;
width: 100% !important;
height: 100%;
min-height: 100%;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
float: none !important;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active {
opacity: 1;
z-index: 2;
pointer-events: auto;
} .bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__word-inner,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__lede,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__content,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item:not(.active) .bathgiant-branch-screen__content {
opacity: 0 !important;
visibility: hidden !important;
animation: none !important;
transform: none !important;
pointer-events: none !important;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__word-inner {
animation: bg2026-hero-anim-word-rise 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.42s + (var(--bg-hero-word-i, 0) * 0.11s));
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line {
animation: bg2026-hero-anim-eyebrow-line 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text {
animation: bg2026-hero-anim-eyebrow-text-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__lede {
animation: bg2026-hero-anim-lede-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal {
animation-delay: calc(1.1s + (var(--bg-hero-reveal-i, 0) * 0.09s));
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action {
animation-delay: calc(1.38s + (var(--bg-hero-reveal-i, 0) * 0.12s));
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--trust,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--trust {
animation: bg2026-hero-anim-reveal-in 0.88s cubic-bezier(0.22, 1, 0.36, 1) 1.62s forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__lede,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__content,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__content {
visibility: visible !important;
}
.bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-banner__content,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active .bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__content {
opacity: 1;
transform: none;
}
.bathgiant-hero-banner__viewport.is-hero-transitioning .owl-item:not(.active) .bathgiant-hero-anim__word-inner,
.bathgiant-hero-banner__viewport.is-hero-transitioning .owl-item:not(.active) .bathgiant-hero-anim__lede,
.bathgiant-hero-banner__viewport.is-hero-transitioning .owl-item:not(.active) .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner__viewport.is-hero-transitioning .owl-item:not(.active) .bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__viewport.is-hero-transitioning .owl-item:not(.active) .bathgiant-hero-banner__content {
opacity: 0 !important;
visibility: hidden !important;
animation: none !important;
}
.bathgiant-hero-banner__slide {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
min-height: 100%;
height: 100%;
padding: clamp(1.75rem, 5vw, 3.25rem) 0 0;
z-index: 0;
box-sizing: border-box;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide:not(:first-child) {
display: none;
} .bathgiant-hero-banner.is-hero-slides-pending .bathgiant-hero-banner__toolbar {
pointer-events: none;
}
.bathgiant-hero-banner.is-hero-slides-pending .bathgiant-hero-banner__dot:not(.is-active) {
opacity: 0.45;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__word-inner {
animation: bg2026-hero-anim-word-rise 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.42s + (var(--bg-hero-word-i, 0) * 0.11s));
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__eyebrow-line {
animation: bg2026-hero-anim-eyebrow-line 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__eyebrow-text {
animation: bg2026-hero-anim-eyebrow-text-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__lede {
animation: bg2026-hero-anim-lede-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__reveal--action {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-anim__reveal--trust {
animation: bg2026-hero-anim-reveal-in 0.88s cubic-bezier(0.22, 1, 0.36, 1) 1.62s forwards;
}
.bathgiant-hero-banner__viewport:not(.owl-loaded) > .bathgiant-hero-banner__slide:first-child .bathgiant-hero-banner__content {
opacity: 1;
transform: none;
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-hero-banner::after {
animation: none !important;
opacity: 0.8;
transform: none;
}
.bathgiant-hero-banner__video {
display: none;
}
.bathgiant-hero-banner__media--animated,
.bathgiant-hero-banner__accent-fx {
animation: none !important;
}
.bathgiant-hero-banner__accent-fx {
animation: none !important;
}
.bathgiant-hero-banner__accent-overlay--animated,
.bathgiant-hero-banner__accent-overlay--blue-flow,
.bathgiant-hero-banner__accent-overlay--mode-flow,
.bathgiant-hero-banner__accent-overlay--mode-glow {
animation: none !important;
background-size: auto;
}
.bathgiant-hero-banner__accent-overlay--blue-flow,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-flow {
background: linear-gradient(105deg, rgba(26, 47, 74, 0.5) 0%, rgba(36, 61, 92, 0.3) 30%, rgba(47, 84, 144, 0.14) 55%, transparent 78%);
}
.bathgiant-hero-banner__accent-overlay--trade-glow,
.bathgiant-hero-banner__accent-overlay--trade-glow::before,
.bathgiant-hero-banner__accent-overlay--mode-glow::before {
animation: none !important;
background-size: auto;
}
.bathgiant-hero-banner__accent-overlay--trade-glow,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-glow {
background: linear-gradient(112deg, rgba(26, 4, 12, 0.72) 0%, rgba(63, 10, 31, 0.5) 24%, rgba(111, 20, 60, 0.22) 44%, transparent 64%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-flow,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 32%, #2f5490 68%, #3d7dd9 100%);
background-size: auto;
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-orbs,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 38%, #3d7dd9 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-glow,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-orbs,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #c41e1e 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-solid,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-flow,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-orbs {
background: linear-gradient(118deg, rgba(26, 47, 74, 0.82) 0%, rgba(36, 61, 92, 0.78) 32%, rgba(47, 84, 144, 0.74) 68%, rgba(61, 125, 217, 0.7) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-depth {
background: linear-gradient(118deg, rgba(15, 25, 40, 0.88) 0%, rgba(26, 47, 74, 0.84) 40%, rgba(36, 61, 92, 0.8) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-solid,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-glow,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-orbs {
background: linear-gradient(118deg, rgba(63, 10, 31, 0.84) 0%, rgba(111, 20, 60, 0.8) 38%, rgba(159, 18, 57, 0.76) 72%, rgba(196, 30, 30, 0.72) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-depth {
background: linear-gradient(118deg, rgba(42, 6, 18, 0.88) 0%, rgba(74, 8, 24, 0.84) 45%, rgba(111, 20, 60, 0.8) 100%);
}
.bathgiant-hero-banner__accent-bubble {
animation: none !important;
opacity: 0.35;
transform: none;
}
}
.bathgiant-hero-banner__media-shell {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
isolation: isolate;
--bathgiant-hero-overlay-opacity: 1;
}
.bathgiant-hero-banner__media-shell .bathgiant-hero-banner__accent-overlay,
.bathgiant-hero-banner__media-shell .bathgiant-hero-banner__accent-fx,
.bathgiant-hero-banner__media-shell .bathgiant-hero-banner__media--gradient {
opacity: var(--bathgiant-hero-overlay-opacity, 1);
}
.bathgiant-hero-banner__palette-fill {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: var(--bathgiant-hero-palette-fill, #ffffff);
opacity: var(--bathgiant-hero-overlay-opacity, 1);
}
.bathgiant-hero-banner__video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
pointer-events: none;
background: transparent;
}
.bathgiant-hero-banner__video::-webkit-media-controls,
.bathgiant-hero-banner__video::-webkit-media-controls-enclosure,
.bathgiant-hero-banner__video::-webkit-media-controls-panel,
.bathgiant-hero-banner__video::-webkit-media-controls-start-playback-button,
.bathgiant-hero-banner__video::-webkit-media-controls-overlay-play-button {
display: none !important;
-webkit-appearance: none;
appearance: none;
opacity: 0;
pointer-events: none;
}
.bathgiant-hero-banner__media {
position: absolute;
inset: 0;
z-index: 1;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
} .bathgiant-hero-banner__media--responsive {
background-image: var(--bathgiant-hero-bg-desktop);
}
@media (max-width: 980px) {
.bathgiant-hero-banner__media--responsive {
background-image: var(--bathgiant-hero-bg-tablet, var(--bathgiant-hero-bg-desktop));
}
}
@media (max-width: 640px) {
.bathgiant-hero-banner__media--responsive {
background-image: var(--bathgiant-hero-bg-mobile, var(--bathgiant-hero-bg-desktop));
}
}
.bathgiant-hero-banner__frame-overlay {
position: absolute;
inset: 0;
z-index: 5;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
}
.bathgiant-hero-banner__frame-overlay--responsive {
background-image: var(--bathgiant-hero-overlay-desktop);
}
@media (max-width: 980px) {
.bathgiant-hero-banner__frame-overlay--responsive {
background-image: var(--bathgiant-hero-overlay-tablet, var(--bathgiant-hero-overlay-desktop));
}
}
@media (max-width: 640px) {
.bathgiant-hero-banner__frame-overlay--responsive {
background-image: var(--bathgiant-hero-overlay-mobile, var(--bathgiant-hero-overlay-desktop));
}
} @media (max-width: 899px) {
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport.bathgiant-hero-banner__viewport--custom-height {
--bathgiant-hero-fixed-height: calc(100vh - var(--bathgiant-sticky-below-header));
--bathgiant-hero-fixed-height: calc(100svh - var(--bathgiant-sticky-below-header));
--bathgiant-hero-toolbar-reserve: 4.75rem; min-height: calc(100vh - var(--bathgiant-sticky-below-header)) !important;
min-height: calc(100svh - var(--bathgiant-sticky-below-header)) !important;
height: calc(100vh - var(--bathgiant-sticky-below-header)) !important;
height: calc(100svh - var(--bathgiant-sticky-below-header)) !important;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport .owl-stage-outer,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport .owl-stage,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport .owl-item {
min-height: 100%;
height: 100%;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__slide {
min-height: 100%;
height: 100%;
padding-top: clamp(1.25rem, 4.5vw, 1.75rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame.bathgiant-wrap {
height: 100%;
min-height: 0;
grid-template-rows: auto auto;
align-content: space-between;
gap: 0.75rem;
padding-bottom: calc(var(--bathgiant-hero-toolbar-reserve, 4.75rem) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left {
grid-template-rows: auto auto auto;
align-content: space-between;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__content {
grid-row: 1;
align-self: start;
margin-bottom: 0;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__trust-anchor {
grid-row: 2;
align-self: end;
justify-content: stretch;
justify-self: stretch;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__content {
grid-row: 1;
align-self: start;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__products {
grid-row: 2;
align-self: start;
margin-top: 0.25rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__trust-anchor {
grid-row: 3;
align-self: end;
}
.bathgiant-hero-banner--homepage .bathgiant-hero__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero__actions .bathgiant-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.bathgiant-hero-banner__trust-anchor {
justify-content: stretch;
}
.bathgiant-hero-banner__trust {
width: 100%;
max-width: 100%;
padding: 0.65rem 0.8rem;
gap: 0.6rem;
}
.bathgiant-hero-banner__trust-icon {
width: 2.45rem;
height: 2.45rem;
}
.bathgiant-hero-banner__trust-title {
font-size: 0.9rem;
}
.bathgiant-hero-banner__trust-text {
font-size: 0.78rem;
}
} @media (max-width: 640px) {
.bathgiant-hero-banner.bathgiant-hero-banner--homepage {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
border-radius: 0;
width: 100%;
max-width: none;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame.bathgiant-wrap {
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
}
.bathgiant-hero-banner--homepage .bathgiant-hero__title {
font-size: clamp(1.65rem, 7vw, 2.15rem);
line-height: 1.15;
}
.bathgiant-hero-banner--homepage .bathgiant-hero__lede {
font-size: clamp(0.95rem, 3.8vw, 1.05rem);
line-height: 1.5;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products {
width: 100%;
max-width: 100%;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__toolbar {
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
border-radius: 0;
}
}
@media (max-width: 980px) and (min-width: 641px) {
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame.bathgiant-wrap {
padding-left: clamp(1rem, 3vw, 1.35rem);
padding-right: clamp(1rem, 3vw, 1.35rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__toolbar {
padding-left: clamp(1rem, 3vw, 1.35rem);
padding-right: clamp(1rem, 3vw, 1.35rem);
}
}
@media (min-width: 981px) {
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame {
grid-template-columns: minmax(0, 1fr) minmax(0, min(22rem, 36vw));
grid-template-rows: minmax(0, 1fr) auto;
column-gap: clamp(1.25rem, 3vw, 2.5rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1 / -1;
max-width: min(44rem, 100%);
margin-bottom: 0;
align-self: center;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__trust-anchor {
grid-column: 2;
grid-row: 2;
align-self: end;
justify-self: end;
padding-bottom: 0.15rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products:not(.bathgiant-hero-banner__frame--products-left) {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(40%, 45%, 50%));
grid-template-rows: minmax(0, 1fr) auto auto;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1 / -1;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products:not(.bathgiant-hero-banner__frame--products-left) .bathgiant-hero-banner__products {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: stretch;
width: 100%;
max-width: 100%;
margin-bottom: 0;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__trust-anchor {
grid-column: 2;
grid-row: 2;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr);
align-content: start;
gap: 1rem;
--bg-home-hero-stacked-products-max: min(44rem, 48vw);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1;
align-self: start;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products {
grid-column: 1;
grid-row: 2;
justify-self: start;
align-self: start;
width: min(var(--bg-home-hero-stacked-products-max), 100%);
max-width: min(var(--bg-home-hero-stacked-products-max), 100%);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__trust-anchor {
grid-column: 1;
grid-row: 3;
justify-self: stretch;
}
}
@keyframes bg2026-hero-gradient-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes bg2026-hero-glow-pulse {
0%,
100% {
opacity: 0.55;
transform: scale(1);
}
50% {
opacity: 0.95;
transform: scale(1.06);
}
}
@keyframes bg2026-hero-trade-glow-flow {
0%,
100% {
background-position: 0% 48%;
}
50% {
background-position: 100% 52%;
}
}
@keyframes bg2026-hero-trade-glow-pulse {
0%,
100% {
opacity: 0.78;
transform: scale(1) translate3d(0, 0, 0);
}
40% {
opacity: 1;
transform: scale(1.1) translate3d(-1.5%, 0.8%, 0);
}
70% {
opacity: 0.9;
transform: scale(1.05) translate3d(0.8%, -0.6%, 0);
}
}
@keyframes bg2026-hero-bubble-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -20px, 0);
}
} .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none:not(.bathgiant-hero-banner__media--over-video) {
background: #0f172a;
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none {
background: transparent;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 32%, #2f5490 68%, #3d7dd9 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, #0f1928 0%, #1a2f4a 36%, #243d5c 68%, #2f5490 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow {
background: linear-gradient(125deg, #1a2f4a 0%, #243d5c 18%, #2f5490 38%, #3d7dd9 58%, #4a7eb8 78%, #243d5c 100%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 32%, #2f5490 68%, #3d7dd9 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow::before {
background:
radial-gradient(ellipse 68% 62% at 24% 44%, rgba(170, 210, 255, 0.38) 0%, rgba(61, 125, 217, 0.16) 38%, transparent 68%),
radial-gradient(ellipse 48% 40% at 10% 78%, rgba(36, 61, 92, 0.24) 0%, transparent 58%);
animation: bg2026-hero-glow-pulse 6s ease-in-out infinite;
transform-origin: 24% 44%;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 38%, #2f5490 72%, #3d7dd9 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, #2a0612 0%, #4a0818 36%, #6f1433 68%, #881337 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow {
background: linear-gradient(125deg, #3f0a1f 0%, #6f1433 18%, #9f1239 38%, #c41e1e 58%, #881337 78%, #6f1433 100%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow::before {
background:
radial-gradient(ellipse 68% 62% at 24% 44%, rgba(255, 170, 175, 0.42) 0%, rgba(196, 30, 30, 0.18) 38%, transparent 68%),
radial-gradient(ellipse 48% 40% at 10% 78%, rgba(136, 19, 55, 0.28) 0%, transparent 58%);
animation: bg2026-hero-trade-glow-pulse 6s ease-in-out infinite;
transform-origin: 24% 44%;
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow,
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, rgba(26, 47, 74, 0.82) 0%, rgba(36, 61, 92, 0.78) 32%, rgba(47, 84, 144, 0.74) 68%, rgba(61, 125, 217, 0.7) 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, rgba(15, 25, 40, 0.88) 0%, rgba(26, 47, 74, 0.84) 36%, rgba(36, 61, 92, 0.8) 68%, rgba(47, 84, 144, 0.76) 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow,
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, rgba(63, 10, 31, 0.84) 0%, rgba(111, 20, 60, 0.8) 38%, rgba(159, 18, 57, 0.76) 72%, rgba(196, 30, 30, 0.72) 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, rgba(42, 6, 18, 0.88) 0%, rgba(74, 8, 24, 0.84) 36%, rgba(111, 20, 60, 0.8) 68%, rgba(136, 19, 55, 0.76) 100%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-solid {
background: linear-gradient(105deg, rgba(26, 47, 74, 0.58) 0%, rgba(36, 61, 92, 0.36) 32%, rgba(47, 84, 144, 0.18) 58%, transparent 80%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-depth {
background: linear-gradient(105deg, rgba(15, 25, 40, 0.64) 0%, rgba(26, 47, 74, 0.4) 34%, rgba(36, 61, 92, 0.2) 60%, transparent 82%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-flow {
background: linear-gradient(125deg, rgba(26, 47, 74, 0.72) 0%, rgba(36, 61, 92, 0.52) 20%, rgba(47, 84, 144, 0.36) 42%, rgba(61, 125, 217, 0.24) 62%, rgba(74, 126, 184, 0.14) 78%, transparent 92%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-glow {
background:
linear-gradient(112deg, rgba(12, 22, 38, 0.72) 0%, rgba(26, 47, 74, 0.52) 22%, rgba(47, 84, 144, 0.32) 42%, rgba(61, 125, 217, 0.14) 56%, transparent 66%);
background-size: 165% 165%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-glow::before {
background:
radial-gradient(ellipse 72% 68% at 22% 46%, rgba(170, 210, 255, 0.48) 0%, rgba(61, 125, 217, 0.24) 32%, rgba(47, 84, 144, 0.1) 52%, transparent 72%),
radial-gradient(ellipse 50% 42% at 8% 82%, rgba(36, 61, 92, 0.28) 0%, transparent 58%);
animation: bg2026-hero-glow-pulse 5.5s ease-in-out infinite;
transform-origin: 22% 46%;
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-overlay--mode-orbs {
background: linear-gradient(105deg, rgba(26, 47, 74, 0.48) 0%, rgba(36, 61, 92, 0.28) 38%, rgba(61, 125, 217, 0.12) 62%, transparent 85%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-solid {
background: linear-gradient(105deg, rgba(63, 10, 31, 0.56) 0%, rgba(111, 20, 60, 0.34) 32%, rgba(159, 18, 57, 0.16) 58%, transparent 80%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-depth {
background: linear-gradient(105deg, rgba(42, 6, 18, 0.62) 0%, rgba(74, 8, 24, 0.38) 34%, rgba(111, 20, 60, 0.18) 60%, transparent 82%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-flow {
background: linear-gradient(125deg, rgba(63, 10, 31, 0.74) 0%, rgba(111, 20, 60, 0.54) 20%, rgba(159, 18, 57, 0.38) 42%, rgba(196, 30, 30, 0.26) 62%, rgba(136, 19, 55, 0.16) 78%, transparent 92%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-glow {
background:
linear-gradient(112deg, rgba(26, 4, 12, 0.82) 0%, rgba(63, 10, 31, 0.62) 22%, rgba(111, 20, 60, 0.38) 42%, rgba(159, 18, 57, 0.14) 56%, transparent 66%);
background-size: 165% 165%;
animation: bg2026-hero-trade-glow-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-glow::before {
background:
radial-gradient(ellipse 72% 68% at 22% 46%, rgba(255, 175, 180, 0.58) 0%, rgba(220, 60, 75, 0.3) 32%, rgba(196, 30, 30, 0.14) 52%, transparent 72%),
radial-gradient(ellipse 50% 42% at 8% 82%, rgba(136, 19, 55, 0.36) 0%, transparent 58%);
animation: bg2026-hero-trade-glow-pulse 5.5s ease-in-out infinite;
transform-origin: 22% 46%;
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-glow::after {
background:
linear-gradient(90deg, rgba(10, 16, 28, 0.5) 0%, rgba(15, 23, 42, 0.22) 38%, transparent 58%),
linear-gradient(180deg, transparent 58%, rgba(15, 25, 40, 0.12) 100%);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-overlay--mode-orbs {
background: linear-gradient(105deg, rgba(63, 10, 31, 0.46) 0%, rgba(111, 20, 60, 0.26) 38%, rgba(196, 30, 30, 0.12) 62%, transparent 85%);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-fx--mode-orbs .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42) 0%, rgba(122, 168, 232, 0.28) 38%, rgba(61, 125, 217, 0.12) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.bathgiant-hero-banner[data-hero-palette="public"] .bathgiant-hero-banner__accent-fx--mode-orbs.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(140, 185, 245, 0.38) 40%, rgba(61, 125, 217, 0.18) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(15, 25, 40, 0.12);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-fx--mode-orbs .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 220, 220, 0.38) 0%, rgba(220, 80, 90, 0.26) 38%, rgba(196, 30, 30, 0.1) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 210, 210, 0.16);
}
.bathgiant-hero-banner[data-hero-palette="trade"] .bathgiant-hero-banner__accent-fx--mode-orbs.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 230, 230, 0.5) 0%, rgba(230, 90, 100, 0.34) 40%, rgba(196, 30, 30, 0.16) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 220, 220, 0.24), 0 8px 24px rgba(40, 8, 16, 0.14);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid {
background: linear-gradient(118deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 35%, #000) 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #000) 32%, var(--bathgiant-hero-palette-accent) 68%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 70%, #fff) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 20%, #000) 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 40%, #000) 36%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 65%, #000) 68%, var(--bathgiant-hero-palette-accent) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow {
background: linear-gradient(125deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 35%, #000) 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #000) 18%, var(--bathgiant-hero-palette-accent) 38%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 70%, #fff) 58%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 80%, #fff) 78%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #000) 100%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow {
background: linear-gradient(118deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 35%, #000) 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #000) 32%, var(--bathgiant-hero-palette-accent) 68%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 70%, #fff) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow::before {
background:
radial-gradient(ellipse 68% 62% at 24% 44%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.38) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.16) 38%, transparent 68%),
radial-gradient(ellipse 48% 40% at 10% 78%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.24) 0%, transparent 58%);
animation: bg2026-hero-glow-pulse 6s ease-in-out infinite;
transform-origin: 24% 44%;
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 35%, #000) 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #000) 38%, var(--bathgiant-hero-palette-accent) 72%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 70%, #fff) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-solid,
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-flow,
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow,
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-orbs {
background: linear-gradient(118deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.72) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.52) 38%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.34) 72%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.18) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-depth {
background: linear-gradient(128deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.78) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.58) 36%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.38) 68%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.2) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-solid {
background: linear-gradient(118deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.72) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.52) 32%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.34) 68%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.16) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-depth {
background: linear-gradient(128deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.78) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.58) 36%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.38) 68%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.18) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-flow {
background: linear-gradient(125deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.72) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.52) 18%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.34) 38%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.2) 58%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.14) 78%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.52) 100%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-glow {
background: linear-gradient(118deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.72) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.52) 32%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.34) 68%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.16) 100%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-glow::before {
background:
radial-gradient(ellipse 68% 62% at 24% 44%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.42) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.18) 38%, transparent 68%),
radial-gradient(ellipse 48% 40% at 10% 78%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.28) 0%, transparent 58%);
animation: bg2026-hero-glow-pulse 6s ease-in-out infinite;
transform-origin: 24% 44%;
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-overlay--mode-orbs {
background: linear-gradient(105deg, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.46) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.26) 38%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.12) 62%, transparent 85%);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-fx--mode-orbs .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.28) 38%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.12) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.bathgiant-hero-banner[data-hero-palette="custom"] .bathgiant-hero-banner__accent-fx--mode-orbs.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.38) 40%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.18) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(15, 25, 40, 0.12);
}
.bathgiant-hero-banner[data-hero-accent-group="custom"] .bathgiant-hero-banner__delivery-icon,
.bathgiant-hero-banner[data-hero-accent-group="custom"] .bathgiant-hero-banner__trust-icon {
color: var(--bathgiant-hero-palette-accent);
} .bathgiant-hero-banner__slide[data-accent="none"] .bathgiant-hero-banner__media--gradient::before,
.bathgiant-hero-banner__slide[data-accent="none"] .bathgiant-hero-banner__media--gradient::after,
.bathgiant-hero-banner[data-hero-accent="none"] .bathgiant-hero-banner__media--gradient::before,
.bathgiant-hero-banner[data-hero-accent="none"] .bathgiant-hero-banner__media--gradient::after {
content: none;
display: none;
}
.bathgiant-hero-banner[data-hero-accent="none"] .bathgiant-hero-banner__toolbar {
background: transparent;
}
.bathgiant-hero-banner__slide[data-accent="none"] .bathgiant-branch-screen__slide-scrim,
.bathgiant-hero-banner[data-hero-accent="none"] .bathgiant-branch-screen__slide-scrim {
background: none;
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none:not(.bathgiant-hero-banner__media--over-video) {
background: linear-gradient(165deg, #0f172a 0%, #152238 42%, #1a2f4a 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none:not(.bathgiant-hero-banner__media--over-video) {
background: linear-gradient(165deg, #1a0610 0%, #2a0818 42%, #3f0a1f 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none:not(.bathgiant-hero-banner__media--over-video) {
background: linear-gradient(165deg, #0f172a 0%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 28%, #0f172a) 52%, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 42%, #000) 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"] .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-none {
background: transparent;
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-branch-screen__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-branch-screen__eyebrow {
color: rgba(147, 197, 253, 0.92);
text-shadow: 0 1px 12px rgba(15, 25, 40, 0.35);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero__title,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-branch-screen__display-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero__title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-branch-screen__display-title {
color: #f0f7ff;
text-shadow: 0 2px 18px rgba(15, 25, 40, 0.4);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero__lede,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-branch-screen__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-branch-screen__lede {
color: rgba(191, 219, 254, 0.9);
text-shadow: 0 1px 14px rgba(15, 25, 40, 0.32);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero-anim__eyebrow-line {
background: linear-gradient(90deg, rgba(147, 197, 253, 0.95) 0%, rgba(61, 125, 217, 0.35) 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-banner__delivery-item,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero-banner__delivery-item {
color: rgba(219, 234, 254, 0.96);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-banner__trust-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero-banner__trust-title {
color: #f0f7ff;
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero-banner__trust-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero-banner__trust-text {
color: rgba(191, 219, 254, 0.9);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="public"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="public"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost {
color: #dbeafe;
border-color: rgba(147, 197, 253, 0.55);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-branch-screen__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-branch-screen__eyebrow {
color: rgba(254, 202, 202, 0.92);
text-shadow: 0 1px 12px rgba(40, 8, 16, 0.35);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero__title,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-branch-screen__display-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero__title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-branch-screen__display-title {
color: #fff1f2;
text-shadow: 0 2px 18px rgba(40, 8, 16, 0.4);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero__lede,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-branch-screen__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-branch-screen__lede {
color: rgba(254, 205, 211, 0.9);
text-shadow: 0 1px 14px rgba(40, 8, 16, 0.32);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero-anim__eyebrow-line {
background: linear-gradient(90deg, rgba(254, 202, 202, 0.95) 0%, rgba(196, 30, 30, 0.35) 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-banner__delivery-item,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero-banner__delivery-item {
color: rgba(255, 228, 230, 0.96);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-banner__trust-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero-banner__trust-title {
color: #fff1f2;
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero-banner__trust-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero-banner__trust-text {
color: rgba(254, 205, 211, 0.9);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="trade"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="trade"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost {
color: #ffe4e6;
border-color: rgba(254, 202, 202, 0.55);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-branch-screen__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-branch-screen__eyebrow {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 42%, #fff);
text-shadow: 0 1px 12px rgba(15, 25, 40, 0.35);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero__title,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-branch-screen__display-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero__title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-branch-screen__display-title {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 16%, #fff);
text-shadow: 0 2px 18px rgba(15, 25, 40, 0.4);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero__lede,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-branch-screen__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero__lede,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-branch-screen__lede {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 32%, #fff);
text-shadow: 0 1px 14px rgba(15, 25, 40, 0.32);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero-anim__eyebrow-line {
background: linear-gradient(90deg, color-mix(in srgb, var(--bathgiant-hero-palette-accent) 55%, #fff) 0%, rgba(var(--bathgiant-hero-palette-accent-rgb), 0.35) 100%);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-banner__delivery-item,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero-banner__delivery-item {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 24%, #fff);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-banner__trust-title,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero-banner__trust-title {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 16%, #fff);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero-banner__trust-text,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero-banner__trust-text {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 32%, #fff);
}
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner__slide[data-accent="none"][data-accent-group="custom"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-accent="none"][data-hero-palette="custom"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost {
color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 28%, #fff);
border-color: color-mix(in srgb, var(--bathgiant-hero-palette-accent) 45%, transparent);
} .bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-branch-screen__eyebrow,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero__eyebrow,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-branch-screen__eyebrow {
color: color-mix(in srgb, var(--bathgiant-hero-text-color) 72%, transparent);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero__title,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-branch-screen__display-title,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero__title,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-branch-screen__display-title {
color: var(--bathgiant-hero-text-color);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero__lede,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-anim__lede,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-branch-screen__lede,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero__lede,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-anim__lede,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-branch-screen__lede {
color: color-mix(in srgb, var(--bathgiant-hero-text-color) 82%, transparent);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-anim__eyebrow-line {
background: linear-gradient(90deg, color-mix(in srgb, var(--bathgiant-hero-text-color) 88%, transparent) 0%, color-mix(in srgb, var(--bathgiant-hero-text-color) 28%, transparent) 100%);
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__delivery-item,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__delivery-item {
color: color-mix(in srgb, var(--bathgiant-hero-text-color) 92%, transparent);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__delivery-icon,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-icon,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__delivery-icon,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-icon {
color: var(--bathgiant-hero-text-color);
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__trust,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__trust {
color: var(--bathgiant-hero-text-color);
background: color-mix(in srgb, var(--bathgiant-hero-text-color) 8%, #fff);
border-color: color-mix(in srgb, var(--bathgiant-hero-text-color) 18%, transparent);
box-shadow: 0 10px 28px color-mix(in srgb, var(--bathgiant-hero-text-color) 12%, transparent);
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-title,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-title {
color: var(--bathgiant-hero-text-color);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-text,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero-banner__trust-text {
color: color-mix(in srgb, var(--bathgiant-hero-text-color) 82%, transparent);
text-shadow: none;
}
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner .bathgiant-hero-banner__slide[data-hero-text-custom="1"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-hero__actions .bathgiant-btn--ghost,
.bathgiant-hero-banner[data-hero-text-custom="1"] .bathgiant-branch-screen__cta-labels .bathgiant-btn--ghost {
color: var(--bathgiant-hero-text-color);
border-color: color-mix(in srgb, var(--bathgiant-hero-text-color) 42%, transparent);
text-shadow: none;
}
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--mode-flow,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--mode-glow,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--mode-glow::before,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--mode-glow::before {
animation-play-state: paused;
} .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-solid {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 32%, #2f5490 68%, #3d7dd9 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-depth {
background: linear-gradient(128deg, #0f1928 0%, #1a2f4a 36%, #243d5c 68%, #2f5490 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-flow {
background: linear-gradient(125deg, #1a2f4a 0%, #243d5c 18%, #2f5490 38%, #3d7dd9 58%, #4a7eb8 78%, #243d5c 100%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-orbs {
background: linear-gradient(118deg, #1a2f4a 0%, #243d5c 38%, #2f5490 72%, #3d7dd9 100%);
} .bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-solid {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-depth {
background: linear-gradient(128deg, #2a0612 0%, #4a0818 36%, #6f1433 68%, #881337 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-glow {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-orbs {
background: linear-gradient(118deg, #3f0a1f 0%, #6f1433 38%, #9f1239 72%, #c41e1e 100%);
}
.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-glow::before {
background:
radial-gradient(ellipse 68% 62% at 24% 44%, rgba(255, 170, 175, 0.42) 0%, rgba(196, 30, 30, 0.18) 38%, transparent 68%),
radial-gradient(ellipse 48% 40% at 10% 78%, rgba(136, 19, 55, 0.28) 0%, transparent 58%);
animation: bg2026-hero-trade-glow-pulse 6s ease-in-out infinite;
transform-origin: 24% 44%;
} .bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-solid,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-flow,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-orbs {
background: linear-gradient(118deg, rgba(26, 47, 74, 0.82) 0%, rgba(36, 61, 92, 0.78) 32%, rgba(47, 84, 144, 0.74) 68%, rgba(61, 125, 217, 0.7) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--blue-depth {
background: linear-gradient(128deg, rgba(15, 25, 40, 0.88) 0%, rgba(26, 47, 74, 0.84) 36%, rgba(36, 61, 92, 0.8) 68%, rgba(47, 84, 144, 0.76) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-solid,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-glow,
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-orbs {
background: linear-gradient(118deg, rgba(63, 10, 31, 0.84) 0%, rgba(111, 20, 60, 0.8) 38%, rgba(159, 18, 57, 0.76) 72%, rgba(196, 30, 30, 0.72) 100%);
}
.bathgiant-hero-banner__media--over-video.bathgiant-hero-banner__media--gradient.bathgiant-hero-banner__media--trade-depth {
background: linear-gradient(128deg, rgba(42, 6, 18, 0.88) 0%, rgba(74, 8, 24, 0.84) 36%, rgba(111, 20, 60, 0.8) 68%, rgba(136, 19, 55, 0.76) 100%);
}
.bathgiant-hero-banner__accent-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.bathgiant-hero-banner__accent-overlay::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 55% at 88% 18%, rgba(255, 255, 255, 0.06) 0%, transparent 58%);
pointer-events: none;
}
.bathgiant-hero-banner__accent-overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 62%, rgba(15, 25, 40, 0.14) 100%);
pointer-events: none;
}
.bathgiant-hero-banner__accent-overlay--blue-solid {
background: linear-gradient(105deg, rgba(26, 47, 74, 0.52) 0%, rgba(36, 61, 92, 0.3) 32%, rgba(47, 84, 144, 0.12) 58%, transparent 80%);
}
.bathgiant-hero-banner__accent-overlay--blue-depth {
background: linear-gradient(105deg, rgba(15, 25, 40, 0.58) 0%, rgba(26, 47, 74, 0.34) 34%, rgba(36, 61, 92, 0.14) 60%, transparent 82%);
}
.bathgiant-hero-banner__accent-overlay--blue-flow {
background: linear-gradient(125deg, rgba(26, 47, 74, 0.5) 0%, rgba(36, 61, 92, 0.28) 20%, rgba(47, 84, 144, 0.14) 42%, rgba(61, 125, 217, 0.1) 62%, rgba(74, 126, 184, 0.06) 78%, transparent 92%);
background-size: 220% 220%;
animation: bg2026-hero-gradient-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner__accent-overlay--blue-orbs {
background: linear-gradient(105deg, rgba(26, 47, 74, 0.42) 0%, rgba(36, 61, 92, 0.22) 38%, rgba(61, 125, 217, 0.08) 62%, transparent 85%);
}
.bathgiant-hero-banner__accent-overlay--trade-solid {
background: linear-gradient(105deg, rgba(63, 10, 31, 0.5) 0%, rgba(111, 20, 60, 0.28) 32%, rgba(159, 18, 57, 0.1) 58%, transparent 80%);
}
.bathgiant-hero-banner__accent-overlay--trade-depth {
background: linear-gradient(105deg, rgba(42, 6, 18, 0.55) 0%, rgba(74, 8, 24, 0.32) 34%, rgba(111, 20, 60, 0.12) 60%, transparent 82%);
}
.bathgiant-hero-banner__accent-overlay--trade-glow {
background:
linear-gradient(112deg, rgba(26, 4, 12, 0.78) 0%, rgba(63, 10, 31, 0.58) 22%, rgba(111, 20, 60, 0.32) 42%, rgba(159, 18, 57, 0.1) 56%, transparent 66%);
background-size: 165% 165%;
animation: bg2026-hero-trade-glow-flow 14s ease-in-out infinite;
}
.bathgiant-hero-banner__accent-overlay--trade-glow::before {
background:
radial-gradient(ellipse 72% 68% at 22% 46%, rgba(255, 175, 180, 0.55) 0%, rgba(220, 60, 75, 0.28) 32%, rgba(196, 30, 30, 0.12) 52%, transparent 72%),
radial-gradient(ellipse 50% 42% at 8% 82%, rgba(136, 19, 55, 0.34) 0%, transparent 58%);
animation: bg2026-hero-trade-glow-pulse 5.5s ease-in-out infinite;
transform-origin: 22% 46%;
}
.bathgiant-hero-banner__accent-overlay--trade-glow::after {
background:
linear-gradient(90deg, rgba(10, 16, 28, 0.5) 0%, rgba(15, 23, 42, 0.22) 38%, transparent 58%),
linear-gradient(180deg, transparent 58%, rgba(15, 25, 40, 0.12) 100%);
}
.bathgiant-hero-banner__accent-overlay--trade-orbs {
background: linear-gradient(105deg, rgba(63, 10, 31, 0.4) 0%, rgba(111, 20, 60, 0.2) 38%, rgba(196, 30, 30, 0.08) 62%, transparent 85%);
} .bathgiant-hero-banner__media-shell:has(.bathgiant-hero-banner__accent-overlay) .bathgiant-hero-banner__media--responsive::after {
background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(15, 25, 40, 0.18) 100%);
}
.bathgiant-hero-banner__accent-fx {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
isolation: isolate;
transform: translateZ(0);
--bg-hero-orb-unit: clamp(2rem, 6.5svh, 8rem);
}
@supports (height: 1cqh) {
.bathgiant-hero-banner__accent-fx {
--bg-hero-orb-unit: clamp(2rem, min(12cqh, 6.5svh), 8.5rem);
}
}
.bathgiant-hero-banner__accent-bubble {
position: absolute;
left: var(--bg-hero-bubble-left, 50%);
top: var(--bg-hero-bubble-top, 50%);
width: calc(var(--bg-hero-orb-unit) * var(--bg-hero-bubble-scale, 1));
height: calc(var(--bg-hero-orb-unit) * var(--bg-hero-bubble-scale, 1));
border-radius: 50%;
opacity: 0.42;
backface-visibility: hidden;
animation: bg2026-hero-bubble-float var(--bg-hero-bubble-duration, 10s) linear infinite;
animation-delay: calc(var(--bg-hero-bubble-i, 0) * -1.7s);
}
.bathgiant-hero-banner__accent-fx--blue-orbs .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42) 0%, rgba(122, 168, 232, 0.28) 38%, rgba(61, 125, 217, 0.12) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.bathgiant-hero-banner__accent-fx--trade-orbs .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 220, 220, 0.38) 0%, rgba(220, 80, 90, 0.26) 38%, rgba(196, 30, 30, 0.1) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 210, 210, 0.16);
}
.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
opacity: 0.58;
}
.bathgiant-hero-banner__accent-fx--blue-orbs.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(140, 185, 245, 0.38) 40%, rgba(61, 125, 217, 0.18) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(15, 25, 40, 0.12);
}
.bathgiant-hero-banner__accent-fx--trade-orbs.bathgiant-hero-banner__accent-fx--over-image .bathgiant-hero-banner__accent-bubble {
background: radial-gradient(circle at 32% 28%, rgba(255, 230, 230, 0.5) 0%, rgba(230, 90, 100, 0.34) 40%, rgba(196, 30, 30, 0.16) 72%, transparent 100%);
box-shadow: inset 0 0 0 1px rgba(255, 220, 220, 0.24), 0 8px 24px rgba(40, 8, 16, 0.14);
}
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__media--animated,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--animated,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--blue-flow,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-bubble,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__media--trade-glow::before,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--trade-glow,
.bathgiant-hero-banner__viewport.owl-loaded .owl-item:not(.active) .bathgiant-hero-banner__accent-overlay--trade-glow::before {
animation-play-state: paused;
}
.bathgiant-hero-banner__media:not(.bathgiant-hero-banner__media--gradient)::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(15, 25, 40, 0.25) 0%, rgba(15, 25, 40, 0.55) 100%);
pointer-events: none;
}
.bathgiant-hero-banner__media--gradient::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 95% 75% at 88% 12%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
radial-gradient(ellipse 90% 70% at 85% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 52%);
opacity: 1;
pointer-events: none;
}
.bathgiant-hero-banner__media--gradient::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 12% 88%, rgba(0, 0, 0, 0.2) 0%, transparent 42%),
linear-gradient(180deg, transparent 55%, rgba(15, 25, 40, 0.35) 100%);
pointer-events: none;
}
.bathgiant-hero-banner__slide .bathgiant-hero__grid {
position: absolute;
inset: 0;
opacity: 0.07;
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
z-index: 0;
}
.bathgiant-hero-banner__frame {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1 1 auto;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__slide {
flex-direction: column;
align-items: stretch;
justify-content: stretch;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: stretch;
height: 100%;
min-height: 0;
padding-bottom: var(--bathgiant-hero-toolbar-reserve, 4.5rem);
box-sizing: border-box;
}
.bathgiant-hero-banner--homepage:not(.bathgiant-hero-banner--single) .bathgiant-hero-banner__frame {
padding-bottom: var(--bathgiant-hero-toolbar-reserve, 4.5rem);
}
.bathgiant-hero-banner__content {
position: relative;
z-index: 1;
width: 100%;
max-width: min(44rem, 100%);
align-self: center;
justify-self: start;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1;
align-self: center;
margin-bottom: 0;
min-width: 0;
}
.bathgiant-hero-banner__trust-anchor {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
margin: 0;
padding: 0;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__trust-anchor {
grid-column: 1;
grid-row: 2;
justify-self: stretch;
align-self: end;
min-width: 0;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products {
position: relative;
z-index: 1;
grid-column: 1;
grid-row: 2;
align-self: end;
min-width: 0;
width: 100%;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products {
grid-template-rows: minmax(0, 1fr) auto auto;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products .bathgiant-hero-banner__trust-anchor {
grid-row: 3;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left {
grid-template-rows: auto auto auto minmax(0, 1fr);
align-content: start;
gap: 1rem;
--bg-home-hero-stacked-products-max: min(44rem, 52vw);
--bg-bs-tile-thumb: clamp(5.25rem, 14vw, 7rem);
--bg-bs-tile-gap: 0.65rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__content {
align-self: start;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products {
grid-row: 2;
justify-self: start;
align-self: start;
width: min(var(--bg-home-hero-stacked-products-max), 100%);
max-width: min(var(--bg-home-hero-stacked-products-max), 100%);
margin-top: 0.25rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products .bathgiant-branch-screen__products--strip,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products .bathgiant-branch-screen__product-rotator,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products .bathgiant-branch-screen__product-grid--row {
width: 100%;
max-width: 100%;
align-items: stretch;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products .bathgiant-product-card--branch-screen-strip {
height: 100%;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products .bathgiant-branch-screen__products--strip {
width: 100%;
max-width: 100%;
overflow: visible;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products .bathgiant-branch-screen__product-rotator {
width: 100%;
max-width: 100%;
overflow: visible;
padding: 0.35rem 0.45rem 0.65rem;
box-sizing: border-box;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--products-left .bathgiant-hero-banner__products .bathgiant-branch-screen__product-rotator {
min-height: calc(var(--bg-bs-tile-thumb) + 4.35rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products .bathgiant-branch-screen__product-grid--row {
width: 100%;
max-width: 100%;
justify-content: stretch;
overflow: visible;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products {
overflow: visible;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products {
overflow: visible;
padding-bottom: 0.35rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products .bathgiant-product-card--branch-screen-strip {
flex: 1 1 0;
width: auto;
max-width: none;
min-width: 0;
box-shadow:
0 1px 2px rgba(8, 12, 22, 0.05),
0 6px 16px rgba(8, 12, 22, 0.09);
border: 1px solid rgba(15, 23, 42, 0.07);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip:has(.bathgiant-sale-badge--overlay),
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip:has(.bathgiant-branch-screen__product-badge) {
overflow: visible;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip.bathgiant-product-card--linked {
cursor: pointer;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__hit {
position: absolute;
inset: 0;
z-index: 12;
border-radius: inherit;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__hit:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 3px;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip.bathgiant-product-card--linked:hover {
box-shadow: 0 14px 28px rgba(8, 12, 22, 0.28);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media {
overflow: hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__footer,
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__title {
background: #fff;
} .bathgiant-hero-banner--homepage {
--bg-bs-tile-size: clamp(5.75rem, 11vw, 7.25rem);
--bg-bs-card-height: auto;
--bg-bs-tile-gap: 0.72rem;
--bg-bs-tile-thumb: clamp(4.75rem, 9vw, 6.25rem);
--bg-bs-image-only-pad: 0.35rem;
--bg-bs-products-visible: 3;
}
.bathgiant-hero-banner--homepage .bathgiant-hero__lede {
max-width: 48ch;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__products .bathgiant-branch-screen__products-heading {
margin: 0 0 0.45rem;
font-size: 0.62rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-hero-anim__reveal--products-heading,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__slide.is-slide-active .bathgiant-product-card--branch-screen-strip,
.bathgiant-hero-banner--homepage.bathgiant-hero-banner--single .bathgiant-hero-banner__viewport:not(.owl-loaded) .bathgiant-hero-banner__slide .bathgiant-product-card--branch-screen-strip,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__viewport--fade.owl-loaded .owl-item.active .bathgiant-hero-banner__slide.is-slide-active .bathgiant-product-card--branch-screen-strip {
animation: bg2026-bs-product-card-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(1.2s + (var(--bg-bs-product-i, 0) * 0.14s));
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__title {
font-size: clamp(0.8rem, 1.15vw, 0.92rem);
line-height: 1.3;
max-height: calc(1.3em * 2 + 0.1em);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__title {
margin: 0.25rem 0.45rem 0.1rem;
font-size: clamp(0.8rem, 0.95vw, 0.88rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__footer {
padding: 0 0.45rem 0.38rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__prices {
font-size: clamp(0.78rem, 0.9vw, 0.88rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-piece--sale,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price--now {
font-size: clamp(0.82rem, 0.95vw, 0.92rem);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__prices {
font-size: clamp(0.82rem, 1.05vw, 0.95rem);
gap: 0.12rem 0.22rem;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price,
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-piece--sale,
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price--now {
font-size: clamp(0.88rem, 1.15vw, 1.02rem);
line-height: 1.2;
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-piece--rrp,
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price--rrp {
font-size: clamp(0.76rem, 0.98vw, 0.9rem);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-label {
font-size: clamp(0.72rem, 0.92vw, 0.84rem);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-price-vat-label {
font-size: clamp(0.7rem, 0.88vw, 0.82rem);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-sale-badge--overlay.bathgiant-sale-badge--branch-screen {
font-size: 0.58rem;
padding: 0.18rem 0.38rem;
box-shadow: 0 1px 3px rgba(74, 13, 34, 0.28);
}
.bathgiant-hero-banner--homepage .bathgiant-product-card--branch-screen-strip .bathgiant-branch-screen__product-badge--overlay {
font-size: 0.58rem;
padding: 0.18rem 0.38rem;
}
@media (min-width: 981px) {
.bathgiant-hero-banner--homepage {
--bg-bs-tile-size: clamp(6.25rem, 8.5vw, 7.75rem);
--bg-bs-tile-thumb: clamp(5rem, 7vw, 6.5rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products {
--bg-bs-tile-thumb: clamp(5.5rem, 10vw, 9rem);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products:not(.bathgiant-hero-banner__frame--products-left) {
--bg-bs-tile-size: calc((100% - (var(--bg-bs-tile-gap) * 2)) / 3);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__frame--with-products.bathgiant-hero-banner__frame--products-left {
--bg-bs-tile-size: calc((100% - (var(--bg-bs-tile-gap) * 2)) / 3);
--bg-bs-tile-thumb: min(8.75rem, max(6rem, calc(var(--bg-bs-tile-size) * 0.55)));
--bg-home-hero-stacked-products-max: min(44rem, 48vw);
}
}
.bathgiant-hero-banner__delivery {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem 1.15rem;
margin: 0 0 clamp(1.1rem, 2.8vw, 1.5rem);
padding: 0;
list-style: none;
}
.bathgiant-hero-banner__delivery-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
min-width: 0;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 10px rgba(8, 18, 32, 0.35);
}
.bathgiant-hero-banner__delivery-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 2px 8px rgba(8, 18, 32, 0.14);
}
.bathgiant-hero-banner[data-hero-accent-group="trade"] .bathgiant-hero-banner__delivery-icon {
color: var(--bathgiant-brand-deep, #9f1239);
}
.bathgiant-hero-banner__delivery-label {
min-width: 0;
}
@media (max-width: 640px) {
.bathgiant-hero-banner__delivery {
gap: 0.45rem 0.75rem;
margin-bottom: clamp(1rem, 4vw, 1.25rem);
}
.bathgiant-hero-banner__delivery-item {
font-size: 0.8125rem;
}
.bathgiant-hero-banner__delivery-icon {
width: 2.1rem;
height: 2.1rem;
}
}
.bathgiant-hero-banner__trust {
position: relative;
left: auto;
bottom: auto;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: fit-content;
max-width: min(22rem, 100%);
margin: 0;
padding: 0.75rem 0.95rem;
border-radius: var(--bathgiant-radius-md, 12px);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 10px 28px rgba(8, 18, 32, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
pointer-events: auto;
}
.bathgiant-hero-banner__trust-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 2px 8px rgba(8, 18, 32, 0.12);
}
.bathgiant-hero-banner[data-hero-accent-group="trade"] .bathgiant-hero-banner__trust-icon {
color: var(--bathgiant-trade, #c41e1e);
}
.bathgiant-hero-banner__trust-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.bathgiant-hero-banner__trust-title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.01em;
color: #fff;
text-shadow: 0 1px 12px rgba(8, 18, 32, 0.35);
}
.bathgiant-hero-banner__trust-text {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.45;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 8px rgba(8, 18, 32, 0.28);
} .bathgiant-hero-banner__content .bathgiant-hero-banner__delivery {
margin-bottom: clamp(1.15rem, 3vw, 1.55rem);
}
.bathgiant-hero-banner__content .bathgiant-hero-banner__delivery + .bathgiant-hero__actions {
margin-top: 0.2rem;
}
@media (min-width: 981px) {
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__trust {
max-width: min(20rem, 34vw);
}
}
.bathgiant-home-hero-trust-fieldset {
margin: 1rem 0 0;
padding: 0.85rem 1rem 0.35rem;
border: 1px solid #dcdcde;
border-radius: 6px;
background: #f6f7f7;
}
.bathgiant-home-hero-trust-fieldset legend {
font-weight: 600;
padding: 0 0.25rem;
}
.bathgiant-hero-slides-repeater {
display: grid;
gap: 1rem;
}
.bathgiant-hero-slide-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.bathgiant-hero-slide-card__head .bathgiant-admin-card__title {
margin: 0;
}
.bathgiant-hero-slide-card__head-actions {
display: flex;
align-items: center;
gap: 0.85rem;
flex-shrink: 0;
}
.bathgiant-hero-slide-enabled {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 13px;
font-weight: 600;
color: #334155;
cursor: pointer;
user-select: none;
}
.bathgiant-hero-slide-enabled__input {
margin: 0;
}
.bathgiant-hero-slide-live-status {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.bathgiant-hero-slide-live-status.is-live {
color: #166534;
background: #dcfce7;
}
.bathgiant-hero-slide-live-status.is-hidden {
color: #9a3412;
background: #ffedd5;
}
.bathgiant-home-hero-slide-card.is-hero-slide-disabled,
.bathgiant-term-archive-hero-slide-card.is-hero-slide-disabled,
.bathgiant-branch-screen-slide-wrap.is-hero-slide-disabled {
opacity: 0.68;
}
.bathgiant-home-hero-slide-card.is-hero-slide-disabled .bathgiant-admin-card__body,
.bathgiant-term-archive-hero-slide-card.is-hero-slide-disabled .bathgiant-admin-card__body,
.bathgiant-branch-screen-slide-wrap.is-hero-slide-disabled .bathgiant-branch-screen-slide-wrap__body {
position: relative;
}
.bathgiant-home-hero-slide-card.is-hero-slide-disabled .bathgiant-admin-card__body::after,
.bathgiant-term-archive-hero-slide-card.is-hero-slide-disabled .bathgiant-admin-card__body::after,
.bathgiant-branch-screen-slide-wrap.is-hero-slide-disabled .bathgiant-branch-screen-slide-wrap__body::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 8px,
rgba(148, 163, 184, 0.06) 8px,
rgba(148, 163, 184, 0.06) 16px
);
pointer-events: none;
}
.bathgiant-hero-slides-repeater__actions {
margin: 0.75rem 0 0;
}
.bathgiant-term-archive-hero-slide-card {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem 1rem;
background: #fff;
}
.bathgiant-hero-banner--taxonomy:not(.bathgiant-hero-banner--single) .bathgiant-hero-banner__frame {
padding-bottom: 3.25rem;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__toolbar {
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
}
.bathgiant-hero-banner__toolbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0.75rem 1rem 1.25rem;
background: linear-gradient(180deg, transparent 0%, rgba(10, 18, 30, 0.55) 100%);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__toolbar,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__toolbar {
justify-content: flex-start;
gap: 0;
padding-top: 0;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
background: none;
pointer-events: none;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__btn,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__btn {
display: none;
}
.bathgiant-hero-banner--single .bathgiant-hero-banner__toolbar,
.bathgiant-hero-banner--single .bathgiant-hero-banner__live {
display: none !important;
}
.bathgiant-hero-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(15, 25, 40, 0.35);
color: #fff;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.bathgiant-hero-banner__btn:hover,
.bathgiant-hero-banner__btn:focus-visible {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.55);
outline: none;
}
.bathgiant-hero-banner__dots {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__dots,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__dots {
pointer-events: auto;
gap: 0.65rem;
padding-block: 0.5rem;
padding-inline: 0.9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bathgiant-public-brand) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--bathgiant-public-brand-deep) 42%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--bathgiant-public-brand-deep) 28%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.bathgiant-hero-banner--homepage[data-hero-palette="trade"] .bathgiant-hero-banner__dots,
.bathgiant-hero-banner--taxonomy[data-hero-palette="trade"] .bathgiant-hero-banner__dots {
background: color-mix(in srgb, var(--bathgiant-trade) 82%, transparent);
border-color: color-mix(in srgb, var(--bathgiant-trade) 38%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--bathgiant-trade-hover) 32%, transparent);
}
.bathgiant-hero-banner--homepage[data-hero-palette="public"] .bathgiant-hero-banner__dots,
.bathgiant-hero-banner--taxonomy[data-hero-palette="public"] .bathgiant-hero-banner__dots {
background: color-mix(in srgb, var(--bathgiant-public-brand) 82%, transparent);
border-color: color-mix(in srgb, var(--bathgiant-public-brand-deep) 42%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--bathgiant-public-brand-deep) 28%, transparent);
}
.bathgiant-hero-banner--homepage[data-hero-palette="custom"] .bathgiant-hero-banner__dots,
.bathgiant-hero-banner--taxonomy[data-hero-palette="custom"] .bathgiant-hero-banner__dots {
background: color-mix(in srgb, var(--bathgiant-hero-palette-accent, var(--bathgiant-public-brand)) 82%, transparent);
border-color: color-mix(in srgb, var(--bathgiant-hero-palette-accent, var(--bathgiant-public-brand-deep)) 42%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--bathgiant-hero-palette-accent, var(--bathgiant-public-brand-deep)) 28%, transparent);
}
.bathgiant-hero-banner__dot {
width: 0.55rem;
height: 0.55rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__dot,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__dot {
width: 0.72rem;
height: 0.72rem;
background: rgba(255, 255, 255, 0.42);
transition: width 0.28s ease, height 0.28s ease, background 0.28s ease, opacity 0.28s ease;
}
.bathgiant-hero-banner__dot:hover,
.bathgiant-hero-banner__dot:focus-visible {
background: rgba(255, 255, 255, 0.65);
outline: none;
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__dot:hover,
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__dot:focus-visible,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__dot:hover,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__dot:focus-visible {
background: rgba(255, 255, 255, 0.68);
outline: none;
}
.bathgiant-hero-banner__dot.is-active {
background: #fff;
transform: scale(1.25);
}
.bathgiant-hero-banner--homepage .bathgiant-hero-banner__dot.is-active,
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__dot.is-active {
width: 2.75rem;
height: 0.72rem;
background: #fff;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-hero-banner__btn,
.bathgiant-hero-banner__dot {
transition: none;
}
} .bathgiant-home-features {
padding: var(--bathgiant-space-section) 0;
border-bottom: 1px solid var(--bathgiant-border);
background: #fff;
}
.bathgiant-home-features__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem 1.5rem;
}
.bathgiant-home-features__item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 1rem;
row-gap: 0.25rem;
align-items: start;
padding: 1.05rem 1.05rem;
border-radius: var(--bathgiant-radius-md);
background: var(--bathgiant-light);
border: 1px solid var(--bathgiant-border);
font-size: 0.92rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-home-features__item strong {
grid-column: 2;
grid-row: 1;
font-family: var(--bathgiant-font-sans);
font-weight: 700;
color: var(--bathgiant-ink);
font-size: 1rem;
}
.bathgiant-home-features__item span:last-child {
grid-column: 2;
grid-row: 2;
}
.bathgiant-home-features__icon {
grid-row: 1 / span 2;
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--bathgiant-brand) 0%, var(--bathgiant-brand-deep) 100%);
opacity: 0.9;
}
.bathgiant-home-features__icon--accent {
background: linear-gradient(135deg, #2563eb 0%, var(--bathgiant-brand) 100%);
}
.bathgiant-home-features__icon--soft {
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
} .bathgiant-home-catalogue {
padding: var(--bathgiant-space-section) 0 calc(var(--bathgiant-space-section) + 0.35rem);
background: linear-gradient(180deg, #fff 0%, var(--bathgiant-brand-wash) 100%); overflow: hidden;
}
.bathgiant-home-catalogue.bathgiant-decor-circle {
overflow: hidden;
}
.bathgiant-home-catalogue > .bathgiant-wrap {
overflow: visible;
}
.bathgiant-home-catalogue__header {
margin-bottom: 1.5rem;
text-align: center;
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 600px) {
.bathgiant-home-catalogue__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
max-width: none;
text-align: left;
margin-left: 0;
margin-right: 0;
}
.bathgiant-home-catalogue__header-text {
max-width: 36rem;
}
}
.bathgiant-home-catalogue__title {
margin: 0 0 0.5rem;
font-size: clamp(1.5rem, 3vw, 2rem);
}
.bathgiant-home-catalogue__desc {
margin: 0;
color: var(--bathgiant-ink-muted);
font-size: 1rem;
}
.bathgiant-home-catalogue__all {
flex-shrink: 0;
font-family: var(--bathgiant-font-sans);
font-weight: 600;
font-size: 0.9375rem;
color: var(--bathgiant-brand-deep);
text-decoration: none;
white-space: nowrap;
}
.bathgiant-home-catalogue__all:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.bathgiant-home-catalogue__section {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.bathgiant-home-catalogue__section:first-child {
padding-top: 0;
} .bathgiant-home-catalogue__section:not(.bathgiant-home-catalogue__section--staff-picks) {
padding-bottom: clamp(1.75rem, 4vw, 2.85rem);
}
.bathgiant-home-catalogue__section + .bathgiant-home-catalogue__section {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid #e2e8f0;
}
.bathgiant-home-catalogue__trust {
margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.bathgiant-home-catalogue__trust .bathgiant-trust-strip {
margin: 0;
padding: 0;
background: transparent;
border-top: 0;
border-bottom: 0;
}
.bathgiant-home-catalogue__section + .bathgiant-home-catalogue__trust,
.bathgiant-home-catalogue__trust + .bathgiant-home-catalogue__section {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
padding-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid var(--bathgiant-border);
}
.bathgiant-home-catalogue__section-title {
margin: 0 0 1.25rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
font-weight: 600;
letter-spacing: -0.01em;
display: flex;
align-items: baseline;
gap: 1rem;
}
.bathgiant-home-catalogue__section-title .bathgiant-home-catalogue__all {
font-size: 0.85rem;
margin-left: auto;
}
.bathgiant-home-catalogue__section--staff-picks {
position: relative;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%); padding-top: clamp(1.75rem, 4vw, 2.85rem);
border: 0;
border-top: 1px solid #eee;
background: transparent;
box-shadow: none;
border-radius: 0; overflow: hidden;
isolation: isolate;
}
.bathgiant-home-catalogue__section--staff-picks.bathgiant-decor-circle {
overflow: hidden;
}
.bathgiant-home-catalogue__section + .bathgiant-home-catalogue__section--staff-picks {
border-top: 0;
margin-top: 0;
} .bathgiant-home-categories__layout,
.bathgiant-home-staff-picks__layout {
position: relative;
z-index: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.25rem, 3vw, 2rem);
align-items: stretch;
box-sizing: border-box;
}
.bathgiant-home-categories__layout {
padding: clamp(2rem, 4vw, 3rem) var(--bathgiant-gutter-x) clamp(0.5rem, 1.25vw, 0.85rem);
padding-right:0;
}
.bathgiant-home-staff-picks__layout { padding: 0 var(--bathgiant-gutter-x) clamp(2rem, 4vw, 3rem);
}
.bathgiant-home-categories + .bathgiant-home-catalogue {
padding-top: 0;
}
.bathgiant-home-staff-picks__intro,
.bathgiant-home-staff-picks__carousel-col {
position: relative;
z-index: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: clamp(0.65rem, 1.5vw, 1.1rem) 0;
}
.bathgiant-home-categories__intro,
.bathgiant-home-categories__carousel-col {
position: relative;
z-index: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(0.65rem, 1.5vw, 1.1rem) 0;
}
.bathgiant-home-staff-picks__intro {
justify-content: center; overflow: hidden;
isolation: isolate;
}
.bathgiant-home-staff-picks__intro > * {
position: relative;
z-index: 1;
} .bathgiant-home-staff-picks__intro::after {
content: unset;
position: absolute;
z-index: 0;
top: var(--bathgiant-staff-picks-ring-top, clamp(-5.5rem, -9vw, -3rem));
right: var(--bathgiant-staff-picks-ring-offset, clamp(-4.5rem, -7vw, -2.25rem));
width: var(--bathgiant-staff-picks-ring-size, clamp(16rem, 26vw, 22rem));
aspect-ratio: 1;
border: 1px solid rgba(47, 104, 196, 0.11);
border-radius: 50%;
box-shadow:
0 0 0 clamp(1.75rem, 3.5vw, 3.25rem) rgba(47, 104, 196, 0.045),
0 0 0 clamp(3.5rem, 7vw, 6.5rem) rgba(7, 29, 59, 0.022);
background: radial-gradient(
circle at 32% 28%,
rgba(47, 104, 196, 0.16) 0%,
rgba(61, 125, 217, 0.07) 40%,
transparent 70%
);
pointer-events: none;
top:0;
}
.bathgiant-home-staff-picks__carousel-col {
justify-content: flex-start;
}
.bathgiant-home-categories__intro::before,
.bathgiant-home-categories__carousel-col::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
width: 30%;
pointer-events: none;
}
.bathgiant-home-categories__intro::before {
left: -15px;
background: linear-gradient(
155deg,
var(--bathgiant-brand-wash) 0%,
color-mix(in srgb, var(--bathgiant-brand-wash) 70%, #fff) 100%
);
} .bathgiant-home-staff-picks__layout::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
width: min(30vw, 22rem);
pointer-events: none;
background:
radial-gradient(circle at 78% 18%, rgba(47, 104, 196, 0.12) 0%, transparent 52%),
radial-gradient(circle at 92% 72%, rgba(61, 125, 217, 0.09) 0%, transparent 48%),
linear-gradient(
168deg,
color-mix(in srgb, var(--bathgiant-brand-wash) 96%, #fff) 0%,
var(--bathgiant-brand-wash) 52%,
color-mix(in srgb, var(--bathgiant-public-brand) 14%, var(--bathgiant-brand-wash)) 100%
);
}
.bathgiant-home-staff-picks__layout::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0; left: 0;
right: 0;
pointer-events: none;
background: linear-gradient(
to right,
#eee 0%,
rgba(238, 238, 238, 0.55) 42%,
rgba(238, 238, 238, 0.15) 72%,
transparent 100%
);
}
@media (min-width: 900px) { .bathgiant-home-staff-picks__layout::after {
left: calc(50% - 50vw);
}
}
.bathgiant-home-staff-picks__head,
.bathgiant-home-categories__head {
margin: 0 0 1rem;
}
.bathgiant-home-staff-picks__eyebrow,
.bathgiant-home-categories__eyebrow,
.bathgiant-news-teasers__eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 0 0 0.3rem;
}
.bathgiant-home-staff-picks__eyebrow-line,
.bathgiant-home-categories__eyebrow-line,
.bathgiant-news-teasers__eyebrow-line {
display: block;
width: 2.5rem;
height: 1px;
flex-shrink: 0;
background: linear-gradient(
90deg,
var(--bathgiant-public-brand-deep, var(--bathgiant-brand-deep, #2f68c4)) 0%,
color-mix(in srgb, var(--bathgiant-public-brand, var(--bathgiant-brand, #4a8ae8)) 35%, transparent) 100%
);
}
.bathgiant-home-staff-picks__eyebrow-text,
.bathgiant-home-categories__eyebrow-text,
.bathgiant-news-teasers__eyebrow-text {
font-family: var(--bathgiant-font-sans);
font-size: var(--bathgiant-text-eyebrow);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-public-brand-deep, var(--bathgiant-brand-deep, #2f68c4));
}
.bathgiant-home-staff-picks__title,
.bathgiant-home-categories__heading,
.bathgiant-news-teasers__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: var(--bathgiant-text-title-section);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
text-wrap: balance;
}
.bathgiant-home-staff-picks__lede,
.bathgiant-home-categories__lede {
margin: clamp(0.75rem, 1.5vw, 1rem) 0 0;
max-width: 38ch;
font-family: var(--bathgiant-font-sans);
font-size: var(--bathgiant-text-lede);
font-weight: var(--bathgiant-text-lede-weight);
line-height: 1.6;
color: var(--bathgiant-ink-muted, #5c6673);
}
.bathgiant-home-staff-picks__lede > :first-child,
.bathgiant-home-categories__lede > :first-child {
margin-top: 0;
}
.bathgiant-home-staff-picks__lede > :last-child,
.bathgiant-home-categories__lede > :last-child {
margin-bottom: 0;
}
.bathgiant-home-staff-picks__lede p + p,
.bathgiant-home-categories__lede p + p {
margin-top: 0.8rem;
}
.bathgiant-trade-cta__lede > :first-child,
.bathgiant-trust-strip__text > :first-child,
.bathgiant-delivery-trust__text > :first-child,
.bathgiant-hero__lede > :first-child {
margin-top: 0;
}
.bathgiant-trade-cta__lede > :last-child,
.bathgiant-trust-strip__text > :last-child,
.bathgiant-delivery-trust__text > :last-child,
.bathgiant-hero__lede > :last-child {
margin-bottom: 0;
}
.bathgiant-trade-cta__lede p + p,
.bathgiant-trust-strip__text p + p,
.bathgiant-delivery-trust__text p + p,
.bathgiant-hero__lede p + p {
margin-top: 0.75rem;
}
@media (min-width: 900px) { .bathgiant-home-categories__layout {
grid-template-areas: "intro carousel";
grid-template-columns: minmax(0, clamp(14rem, 30vw, 21rem)) minmax(0, 1fr);
justify-content: start;
column-gap: clamp(1.5rem, 3vw, 2.75rem);
padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(0.35rem, 1vw, 0.65rem);
padding-right: 0;
max-width: none;
}
.bathgiant-home-categories__intro {
grid-area: intro;
}
.bathgiant-home-categories__carousel-col {
grid-area: carousel;
width: 100%;
min-width: 0;
margin-right: calc(50% - 50vw);
padding-right: 0;
overflow-x: clip;
overflow-y: visible;
}
.bathgiant-home-categories__intro::before {
left: calc(50% - 50vw);
background: linear-gradient(
155deg,
var(--bathgiant-brand-wash) 0%,
color-mix(in srgb, var(--bathgiant-brand-wash) 70%, #fff) 100%
);
}
.bathgiant-home-categories__carousel-col::before {
right: calc(50% - 50vw);
left: auto;
width: 30%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.55) 100%);
}
.bathgiant-home-categories__owl-wrap {
width: 100%;
max-width: 100%;
overflow: hidden;
} .bathgiant-home-staff-picks__layout {
grid-template-areas: "carousel intro";
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(14rem, 30vw, 21rem));
justify-content: start;
column-gap: clamp(1.5rem, 3vw, 2.75rem);
padding: clamp(0.35rem, 1vw, 0.65rem) 0 clamp(2.5rem, 5vw, 3.5rem) 0;
max-width: none;
overflow: visible;
}
.bathgiant-home-staff-picks__intro {
grid-area: intro;
padding-right: clamp(1.25rem, 4vw, 3.5rem);
padding-left: 0;
}
.bathgiant-home-staff-picks__carousel-col {
grid-area: carousel; min-width: 0;
margin-left: calc(50% - 50vw);
padding-left: 0;
padding-right: 0;
overflow: hidden;
align-self: start;
align-items: stretch;
}
.bathgiant-home-staff-picks__layout::before {
right: calc(50% - 50vw);
left: auto;
width: max(30vw, clamp(15rem, 32vw, 24rem));
background:
radial-gradient(circle at 70% 16%, rgba(47, 104, 196, 0.14) 0%, transparent 55%),
radial-gradient(circle at 88% 78%, rgba(61, 125, 217, 0.1) 0%, transparent 50%),
linear-gradient(
168deg,
color-mix(in srgb, var(--bathgiant-brand-wash) 94%, #fff) 0%,
var(--bathgiant-brand-wash) 48%,
color-mix(in srgb, var(--bathgiant-public-brand-deep) 10%, var(--bathgiant-brand-wash)) 100%
);
}
.bathgiant-home-staff-picks__layout::after {
right: max(30vw, clamp(15rem, 32vw, 24rem));
background: linear-gradient(
to right,
#eee 0%,
rgba(238, 238, 238, 0.5) 48%,
rgba(238, 238, 238, 0.12) 78%,
transparent 100%
);
}
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks {
width: 100%;
max-width: none;
margin: 0;
}
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks .bathgiant-owl-wrap {
width: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;
} @media (min-width: 900px) {
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks .bathgiant-owl-wrap {
margin-right: 0; transform: translateX(-0.5rem);
}
.bathgiant-home-staff-picks__carousel-col .bathgiant-owl-carousel.owl-loaded .owl-stage-outer {
overflow: hidden;
}
}
}
@media (min-width: 1200px) {
.bathgiant-home-categories__layout {
grid-template-columns: minmax(0, clamp(14rem, 28vw, 20rem)) minmax(0, 1fr);
column-gap: clamp(1.75rem, 3.5vw, 3rem);
}
.bathgiant-home-staff-picks__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(14rem, 28vw, 20rem));
column-gap: clamp(1.75rem, 3.5vw, 3rem);
}
}
@media (min-width: 1520px) {
.bathgiant-home-categories__layout {
grid-template-columns: minmax(0, clamp(15rem, 26vw, 22rem)) minmax(0, 1fr);
}
.bathgiant-home-staff-picks__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 26vw, 22rem));
}
}
.bathgiant-product-carousel--staff-picks {
margin: 0;
}
.bathgiant-product-carousel--staff-picks .bathgiant-product-card__title {
font-size: clamp(0.95rem, 1.35vw, 1.15rem);
line-height: 1.3;
margin: 0.45rem 0 0.55rem;
}
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks .bathgiant-owl-wrap {
margin: 0;
max-width: none;
overflow: hidden;
}
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-card,
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel__slide {
direction: ltr;
} @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
.bathgiant-main--home .bathgiant-home-section-reveal:not(.is-home-revealed):not(.bathgiant-home-staff-picks__layout):not(.bathgiant-home-categories__layout) {
opacity: 0.9;
}
.bathgiant-main--home .bathgiant-home-section-reveal.is-home-revealed:not(.bathgiant-home-staff-picks__layout):not(.bathgiant-home-categories__layout) {
opacity: 1;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--home-reveal-delay, 0ms);
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal:not(.is-home-revealed) > *,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal:not(.is-home-revealed) > * {
opacity: 0.9;
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal.is-home-revealed > *,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal.is-home-revealed > * {
opacity: 1;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--home-reveal-delay, 0ms);
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal:not(.is-home-revealed)::before {
opacity: 0.9;
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal.is-home-revealed::before {
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--home-reveal-delay, 0ms) + 90ms);
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal:not(.is-home-revealed)::after {
opacity: 0.9;
}
.bathgiant-main--home .bathgiant-home-staff-picks__layout.bathgiant-home-section-reveal.is-home-revealed::after {
opacity: 1;
transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--home-reveal-delay, 0ms) + 45ms);
}
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal:not(.is-home-revealed) .bathgiant-home-categories__intro::before,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal:not(.is-home-revealed) .bathgiant-home-categories__carousel-col::before {
opacity: 0.9;
}
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal.is-home-revealed .bathgiant-home-categories__intro::before,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal.is-home-revealed .bathgiant-home-categories__carousel-col::before {
opacity: 1;
transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--home-reveal-delay, 0ms) + 70ms);
}
} @media (max-width: 899px) {
.bathgiant-main--home .bathgiant-home-section-reveal,
.bathgiant-main--home .bathgiant-home-section-reveal > *,
.bathgiant-main--home .bathgiant-home-section-reveal::before,
.bathgiant-main--home .bathgiant-home-section-reveal::after,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal .bathgiant-home-categories__intro::before,
.bathgiant-main--home .bathgiant-home-categories__layout.bathgiant-home-section-reveal .bathgiant-home-categories__carousel-col::before {
opacity: 1 !important;
transition: none !important;
transform: none !important;
animation: none !important;
}
} .bathgiant-home-categories {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
background: #fff;
overflow: hidden;
isolation: isolate;
}
.bathgiant-home-categories__carousel-col {
min-width: 0;
max-width: 100%;
overflow-x: clip;
}
.bathgiant-home-categories__owl-wrap {
margin: 0;
max-width: 100%; overflow: hidden;
padding: 0;
}
.bathgiant-home-categories__owl.owl-carousel .owl-stage-outer { padding: 0.4rem 0 1.35rem;
margin: -0.4rem 0 -1.35rem;
box-sizing: content-box;
overflow: hidden;
} @media (max-width: 899px) {
.bathgiant-home-categories {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
} .bathgiant-home-categories__intro::before {
left: calc(-1 * var(--bathgiant-gutter-x));
top: calc(-1 * clamp(2rem, 4vw, 3rem));
width: calc(30% + var(--bathgiant-gutter-x));
bottom: calc(-1 * clamp(22rem, 4vw, 3rem));
opacity:0.75;
}
.bathgiant-trade-cta {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
max-width: 100%;
} .bathgiant-home-catalogue__section--staff-picks {
width: auto;
max-width: none;
box-sizing: border-box;
margin-left: calc(-1 * var(--bathgiant-gutter-x));
margin-right: calc(-1 * var(--bathgiant-gutter-x));
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
.bathgiant-home-staff-picks__layout {
padding-left: var(--bathgiant-gutter-x);
padding-right: 0;
}
.bathgiant-home-staff-picks__intro {
padding-right: var(--bathgiant-gutter-x);
}
.bathgiant-home-staff-picks__layout::after {
left: 0;
right: 0;
}
.bathgiant-home-staff-picks__carousel-col,
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks,
.bathgiant-home-staff-picks__carousel-col .bathgiant-product-carousel--staff-picks .bathgiant-owl-wrap {
width: 100%;
max-width: none;
margin: 0;
} .bathgiant-product-card__footer-row:not(:has(.bathgiant-product-card__actions)) .bathgiant-product-card__cta,
.bathgiant-product-card__footer-row:not(:has(.bathgiant-product-card__actions)) .bathgiant-product-card-quick-add {
width: auto;
max-width: calc(100% - (0.5 * var(--bathgiant-gutter-x)));
min-height: 2.75rem;
align-self: flex-start;
}
.bathgiant-package-card__cta.bathgiant-btn,
.bathgiant-package-card .bathgiant-package-card__cta {
width: auto;
max-width: 100%;
min-height: 2.75rem;
}
}
.bathgiant-home-categories__owl .owl-item {
padding: 0 0.45rem;
box-sizing: border-box;
}
.bathgiant-home-categories__slide {
height: 100%;
padding: 0;
box-sizing: border-box;
}
.bathgiant-home-categories__card {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 30, 50, 0.04);
transition: box-shadow 0.22s ease, border-color 0.22s ease;
margin:5px 4px 28px;
}
.bathgiant-home-categories__card:hover,
.bathgiant-home-categories__card:focus-visible {
border-color: var(--bathgiant-border, #e2e8f0);
box-shadow: 0 8px 18px rgba(15, 30, 50, 0.07);
outline: none;
}
.bathgiant-home-categories__card:hover .bathgiant-home-categories__title,
.bathgiant-home-categories__card:focus-visible .bathgiant-home-categories__title {
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-home-categories__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #f4f8ff 0%, #eaeef5 100%);
overflow: hidden;
}
.bathgiant-home-categories__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-home-categories__card {
transition: box-shadow 0.2s ease;
}
}
.bathgiant-home-categories__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bathgiant-font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-home-categories__title {
display: block;
padding: 1rem 1.1rem 1.15rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1rem, 1.35vw, 1.125rem);
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.015em;
text-align: left;
color: var(--bathgiant-ink, #1f2937);
transition: color 0.18s ease;
}
@media (min-width: 900px) {
.bathgiant-home-categories__card {
border-radius: 16px;
box-shadow: 0 2px 8px rgba(15, 30, 50, 0.06);
}
.bathgiant-home-categories__media {
aspect-ratio: 5 / 4;
}
.bathgiant-home-categories__title {
padding: 1.15rem 1.25rem 1.35rem;
font-size: clamp(1.08rem, 1.2vw, 1.22rem);
line-height: 1.24;
letter-spacing: -0.018em;
}
.bathgiant-home-categories__placeholder {
font-size: 3rem;
}
.bathgiant-home-categories__owl.owl-theme.owl-loaded {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
}
}
@media (min-width: 1280px) {
.bathgiant-home-categories__title {
padding: 1.25rem 1.35rem 1.5rem;
font-size: clamp(1.12rem, 1.1vw, 1.3rem);
}
}
.bathgiant-home-categories .owl-nav {
display: none !important;
}
.bathgiant-home-categories .owl-nav button.owl-prev,
.bathgiant-home-categories .owl-nav button.owl-next {
width: 2.35rem;
height: 2.35rem;
border-radius: 999px;
background: #fff !important;
border: 1px solid #dbe3ef !important;
box-shadow: 0 4px 14px rgba(15, 30, 50, 0.08);
}
.bathgiant-home-categories .owl-dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin-top: 1.15rem;
padding: 0.5rem 0.9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bathgiant-public-brand) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--bathgiant-public-brand-deep) 42%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--bathgiant-public-brand-deep) 28%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: fit-content;
}
@media (min-width: 900px) {
.bathgiant-home-categories .owl-dots {
align-self: flex-end;
margin-right: var(--bathgiant-gutter-x);
}
}
.bathgiant-home-categories .owl-dot {
display: inline-flex;
align-items: center;
}
.bathgiant-home-categories .owl-dot span {
display: block;
width: 0.72rem;
height: 0.72rem;
margin: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.42);
transition: width 0.28s ease, height 0.28s ease, background 0.28s ease;
}
.bathgiant-home-categories .owl-dot.active span {
width: 2.75rem;
height: 0.72rem;
background: #fff;
transform: none;
}
.bathgiant-home-categories .owl-dot:hover span {
background: rgba(255, 255, 255, 0.68);
}
.bathgiant-home-categories .owl-dot.active:hover span {
background: #fff;
} .bathgiant-site-footer {
margin-top: auto;
padding: 0;
font-size: var(--bathgiant-ui-link-font-size);
border-top: 1px solid var(--bathgiant-border);
max-width: 100%;
overflow-x: clip;
}
.bathgiant-site-footer__layout {
display: flex;
flex-wrap: wrap;
align-items: stretch;
max-width: 100%;
min-width: 0;
}
.bathgiant-site-footer__brand-panel {
flex: 0 0 auto;
width: min(100%, clamp(20rem, 26vw, 34rem));
color: var(--bathgiant-ink, #1f2937);
background: linear-gradient(
168deg,
var(--bathgiant-brand-wash) 0%,
#fff 38%,
var(--bathgiant-light) 100%
);
position: relative;
isolation: isolate;
}
.bathgiant-site-footer__brand-panel::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
background: linear-gradient(
180deg,
var(--bathgiant-header-band) 0%,
var(--bathgiant-brand) 45%,
var(--bathgiant-brand-deep) 100%
);
pointer-events: none;
}
.bathgiant-site-footer__brand-panel-inner {
position: relative;
z-index: 1; padding: clamp(2rem, 4.5vw, 3.15rem) var(--bathgiant-gutter-x);
max-width: none;
width: 100%;
box-sizing: border-box;
}
.bathgiant-site-footer__nav-panel {
flex: 1 1 22rem;
min-width: 0;
display: flex;
flex-direction: column;
color: rgba(255, 255, 255, 0.78);
background: linear-gradient(
168deg,
var(--bathgiant-header-secondary) 0%,
var(--bathgiant-dark) 52%,
#080b0f 100%
);
padding: clamp(2rem, 4vw, 3.1rem) 0 0;
}
.bathgiant-site-footer__brand-panel .bathgiant-site-footer__tagline {
color: var(--bathgiant-ink-muted, #5c6673);
max-width: none;
font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
line-height: 1.55;
}
.bathgiant-site-footer__brand-panel .bathgiant-site-footer__heading {
color: var(--bathgiant-brand-deep);
font-family: var(--bathgiant-font-display);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.bathgiant-site-footer__brand-panel .bathgiant-site-footer__list a {
color: var(--bathgiant-ink, #1f2937);
font-weight: 600;
}
.bathgiant-site-footer__brand-panel .bathgiant-site-footer__list a:hover,
.bathgiant-site-footer__brand-panel .bathgiant-site-footer__list a:focus-visible {
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-site-footer__brand-company {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.25rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
margin-left: 0;
margin-right: 0;
padding-top: 1.35rem;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
border-top: 1px solid var(--bathgiant-footer-brand-divider);
}
.bathgiant-site-footer__brand-company-links {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
}
.bathgiant-site-footer__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.85rem 1.1rem;
width: 100%;
box-sizing: border-box;
margin: 1.35rem 0 0;
padding: 1.2rem 0 0;
padding-inline: 0;
border-top: 1px solid var(--bathgiant-footer-brand-divider);
}
.bathgiant-site-footer__trustpilot {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0;
padding-inline: 0;
color: var(--bathgiant-ink, #1f2937);
text-decoration: none;
font-weight: 600;
line-height: 1.3;
transition: color 0.15s ease;
}
.bathgiant-site-footer__trustpilot:hover,
.bathgiant-site-footer__trustpilot:focus-visible {
color: #00b67a;
}
.bathgiant-site-footer__trustpilot-star {
display: block;
width: 1.375rem;
height: 1.375rem;
flex-shrink: 0;
}
.bathgiant-site-footer__trustpilot-text {
font-size: inherit;
}
.bathgiant-site-footer__google-reviews {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.7rem;
min-width: 0;
margin: 0;
padding: 0;
padding-inline: 0;
}
.bathgiant-site-footer__google-reviews-heading {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--bathgiant-ink, #1f2937);
font-weight: 600;
line-height: 1.3;
}
.bathgiant-site-footer__google-icon {
display: block;
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
.bathgiant-site-footer__google-reviews-heading-text {
font-size: inherit;
}
.bathgiant-site-footer__google-reviews-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-site-footer__google-reviews-list li {
margin: 0;
}
.bathgiant-site-footer__google-reviews-link {
display: inline-flex;
align-items: center;
color: var(--bathgiant-ink, #1f2937);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.3;
padding: 0.15rem 0.45rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--bathgiant-ink, #1f2937) 14%, transparent);
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.bathgiant-site-footer__google-reviews-link:hover,
.bathgiant-site-footer__google-reviews-link:focus-visible {
color: #1a73e8;
border-color: color-mix(in srgb, #1a73e8 40%, transparent);
background: color-mix(in srgb, #1a73e8 6%, transparent);
}
@media (max-width: 520px) {
.bathgiant-site-footer__google-reviews {
width: 100%;
}
.bathgiant-site-footer__google-reviews-list {
width: 100%;
}
} @keyframes bg2026-ten-years-gradient-sweep {
0% {
background-position: 0% 50%;
}
100% { background-position: 100% 50%;
}
}
.bathgiant-site-footer__ten-years {
display: block;
width: 6.5rem;
height: 6.5rem;
max-width: 100%;
max-height: 104px;
aspect-ratio: 1 / 1;
object-fit: contain;
flex-shrink: 0;
margin-left: auto;
align-self: center;
box-sizing: border-box;
padding: 0.3rem;
border-radius: var(--bathgiant-radius-sm, 8px); background-image: linear-gradient(
125deg,
var(--bathgiant-trade, #c41e1e) 0%,
var(--bathgiant-trade-hover, #a81818) 5%,
#9a1a2e 10%,
#7a1f38 15%,
#5e2740 20%,
#4a2f48 25%,
#3a3554 30%,
#2e3a58 35%,
#2a4568 40%,
#2f5688 45%,
var(--bathgiant-public-brand-deep, #2f68c4) 50%,
var(--bathgiant-public-brand, #3d7dd9) 54%,
#3a72c0 58%,
#2f5688 63%,
#2a4568 68%,
#2e3a58 73%,
#3a3554 78%,
#4a2f48 83%,
#5e2740 87%,
#7a1f38 91%,
#9a1a2e 95%,
var(--bathgiant-trade-hover, #a81818) 98%,
var(--bathgiant-trade, #c41e1e) 100%
); background-size: 700% 700%;
background-position: 0% 50%;
}
@media (prefers-reduced-motion: no-preference) {
.bathgiant-site-footer__ten-years {
animation: bg2026-ten-years-gradient-sweep 28s linear infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-site-footer__ten-years {
animation: none;
background-position: 42% 50%;
}
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__inner {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 100%;
width: 100%;
box-sizing: border-box;
}
@media (min-width: 1200px) {
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__inner.bathgiant-wrap {
padding-left: clamp(1.35rem, 2.8vw, 2.75rem);
padding-right: clamp(1.35rem, 2.8vw, 2.75rem);
}
}
.bathgiant-site-footer__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem clamp(1.75rem, 3.2vw, 3.5rem);
flex: 1 1 auto;
align-content: start;
padding-bottom: 1.85rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bathgiant-site-footer__col--brochures .bathgiant-site-footer__brochure-all {
margin: 0 0 0.85rem;
font-size: inherit;
line-height: 1.45;
} .bathgiant-site-footer__brochure-icons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
max-width: 100%;
min-width: 0;
}
.bathgiant-site-footer__brochure-icon-item {
margin: 0;
padding: 0;
min-width: 0;
max-width: 100%;
}
.bathgiant-site-footer__brochure-link {
position: relative;
display: block;
width: 100%;
text-decoration: none;
line-height: 0;
}
.bathgiant-site-footer__brochure-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 210 / 297;
height: auto;
overflow: hidden;
border-radius: 4px;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); contain: layout;
transform: translateZ(0);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-site-footer__brochure-pdf-badge {
position: absolute;
right: 0.22rem;
bottom: 0.22rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.12rem;
min-height: 1.15rem;
padding: 0.12rem 0.28rem;
border-radius: 4px;
background: rgba(15, 23, 42, 0.88);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.bathgiant-site-footer__brochure-pdf-badge svg {
display: block;
width: 0.72rem;
height: 0.72rem;
flex-shrink: 0;
}
.bathgiant-site-footer__brochure-pdf-badge-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
}
.bathgiant-site-footer__brochure-thumb-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
.bathgiant-site-footer__brochure-link:hover .bathgiant-site-footer__brochure-pdf-badge,
.bathgiant-site-footer__brochure-link:focus-visible .bathgiant-site-footer__brochure-pdf-badge {
background: rgba(185, 28, 28, 0.92);
}
.bathgiant-site-footer__brochure-link:hover .bathgiant-site-footer__brochure-thumb,
.bathgiant-site-footer__brochure-link:focus-visible .bathgiant-site-footer__brochure-thumb {
border-color: rgba(255, 255, 255, 0.32);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.bathgiant-site-footer__brochure-link:hover .bathgiant-tooltip,
.bathgiant-site-footer__brochure-link:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-site-footer__brochure-link:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-site-footer__col--brochures .bathgiant-site-footer__brochure-link .bathgiant-tooltip {
z-index: 20;
width: max-content;
max-width: min(20rem, 72vw);
white-space: normal; contain: layout;
}
@media (max-width: 899px) {
.bathgiant-site-footer__layout {
max-width: 100%;
overflow-x: clip;
}
.bathgiant-site-footer__col--brochures {
min-width: 0;
max-width: 100%;
overflow-x: clip;
} .bathgiant-site-footer__col--brochures .bathgiant-site-footer__brochure-icons {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.bathgiant-site-footer__col--brochures .bathgiant-site-footer__brochure-icons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 981px) {
.bathgiant-site-footer__col--brochures .bathgiant-site-footer__brochure-icons {
max-height: none;
overflow: visible;
}
}
@media (max-width: 720px) {
.bathgiant-site-footer__brand-panel {
width: 100%;
}
.bathgiant-site-footer__brand-panel::before {
right: auto;
left: 0;
top: auto;
width: 100%;
height: 4px;
background: linear-gradient(
90deg,
var(--bathgiant-header-band) 0%,
var(--bathgiant-brand) 50%,
var(--bathgiant-brand-deep) 100%
);
}
.bathgiant-site-footer__brand-panel-inner {
max-width: none;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
} .bathgiant-site-footer__brand-company,
.bathgiant-site-footer__brand-company-links,
.bathgiant-site-footer__trust,
.bathgiant-site-footer__trustpilot,
.bathgiant-site-footer__list,
.bathgiant-site-footer__brochure-icons {
margin-left: 0;
padding-left: 0;
padding-inline-start: 0;
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__inner.bathgiant-wrap {
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
} .bathgiant-site-footer__brand-company {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 0.75rem 1rem;
}
.bathgiant-site-footer__brand-company-links {
min-width: 0;
}
.bathgiant-site-footer__ten-years {
grid-column: 2;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
max-height: none;
aspect-ratio: 1 / 1;
margin: 0;
margin-left: 0;
padding: 0.35rem;
box-sizing: border-box;
justify-self: stretch;
align-self: center;
}
}
@media (max-width: 640px) {
.bathgiant-site-footer__grid {
grid-template-columns: 1fr;
gap: 1.35rem 1.25rem;
}
} @media (min-width: 641px) and (max-width: 1199px) {
.bathgiant-site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}
}
@media (min-width: 1200px) {
.bathgiant-site-footer__grid {
gap: 1.75rem clamp(2.25rem, 4vw, 4rem);
}
}
.bathgiant-site-footer__name {
display: block;
font-family: var(--bathgiant-font-display);
font-weight: 600;
font-size: 1.25rem;
color: #fff;
margin-bottom: 0.5rem;
}
.bathgiant-site-footer__logo {
display: block;
width: 100%;
margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
text-decoration: none;
line-height: 0;
}
.bathgiant-site-footer__logo img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: clamp(3.25rem, 8vw, 4.75rem);
object-fit: contain;
object-position: left center;
}
.bathgiant-site-footer__tagline {
margin: 0;
max-width: 36ch;
line-height: 1.55;
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__heading {
display: block;
font-family: var(--bathgiant-font-display);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
margin-bottom: 0.85rem;
padding-bottom: 0.45rem;
border-bottom: 2px solid var(--bathgiant-footer-heading-rule);
}
.bathgiant-site-footer__heading {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 0.75rem;
padding: 0;
padding-inline: 0;
}
.bathgiant-site-footer__list {
list-style: none;
margin: 0;
padding: 0;
padding-inline-start: 0;
margin-inline-start: 0;
}
.bathgiant-site-footer__list li {
margin: 0 0 0.5rem;
padding: 0;
padding-inline-start: 0;
}
.bathgiant-site-footer__list a {
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
font-size: inherit;
font-weight: 500;
transition: color 0.15s ease;
} .bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a {
position: relative;
display: inline-block;
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
font-size: inherit;
font-weight: 500;
line-height: 1.45;
padding-left: 0.55em;
margin-left: -0.55em;
transition: color 0.2s ease, padding-left 0.25s ease;
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a::before,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 1.5px;
background: var(--bathgiant-brand);
border-radius: 1px;
transform: scaleY(0);
transform-origin: center;
transition: transform 0.25s ease;
pointer-events: none;
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a:hover,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a:focus-visible,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a:hover,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a:focus-visible {
color: #fff;
text-decoration: none;
padding-left: 0.75em;
}
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a:hover::before,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a:focus-visible::before,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a:hover::before,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a:focus-visible::before {
transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__list a::before,
.bathgiant-site-footer__nav-panel .bathgiant-site-footer__brochure-all a::before {
transition: none;
}
}
.bathgiant-site-footer__install-item {
list-style: none;
} .bathgiant-site-footer__install[hidden],
.bathgiant-site-footer__install-hint[hidden] {
display: none !important;
} .bathgiant-site-footer__install-item:not(:has(:not([hidden]))) {
display: none;
} .bathgiant-site-footer__install {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--bathgiant-ink, #1f2937);
font: inherit;
font-size: inherit;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: color 0.15s ease;
}
.bathgiant-site-footer__install-icon {
display: block;
flex-shrink: 0;
width: 0.95em;
height: 0.95em;
}
.bathgiant-site-footer__install-label {
display: inline;
} span.bathgiant-site-footer__install {
cursor: default;
}
.bathgiant-site-footer__install:hover,
.bathgiant-site-footer__install:focus-visible {
color: var(--bathgiant-brand-deep, #2f68c4);
outline: none;
}
.bathgiant-site-footer__install:disabled {
opacity: 0.65;
cursor: wait;
}
.bathgiant-site-footer__install-hint {
margin: 0.45rem 0 0;
max-width: 16rem;
color: var(--bathgiant-ink-muted, #5c6673);
font-size: 0.78rem;
line-height: 1.35;
}
.bathgiant-site-footer__install-plesk {
max-width: 22rem;
} @media (max-width: 899px) {
.bathgiant-site-footer__install-plesk {
display: none !important;
}
}
.bathgiant-site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1.5rem;
flex-shrink: 0;
margin-top: auto;
padding: 1.35rem 0 clamp(1.1rem, 2.5vw, 1.35rem);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
}
.bathgiant-site-footer__copyright {
font-weight: 600;
color: rgba(255, 255, 255, 0.62);
}
.bathgiant-payment-brands {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
}
.bathgiant-payment-brands__heading {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
}
.bathgiant-payment-brands__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-payment-brands__item {
display: flex;
margin: 0;
}
.bathgiant-payment-brands__mark {
display: block;
width: auto;
height: 1.75rem;
max-width: none;
object-fit: contain;
border-radius: 4px;
}
.bathgiant-payment-brands--footer {
flex: 1 1 100%;
margin-bottom: 0.15rem;
}
.bathgiant-payment-brands--checkout {
margin-top: 0.65rem;
}
.bathgiant-payment-brands--checkout .bathgiant-payment-brands__heading {
color: var(--bathgiant-ink-muted, #64748b);
}
.bathgiant-payment-brands--checkout .bathgiant-payment-brands__mark {
height: 2rem;
}
.bathgiant-site-footer__legal,
.bathgiant-site-footer__company-no {
flex: 1 1 100%;
text-align: left;
color: rgba(255, 255, 255, 0.58);
line-height: 1.45;
}
@media (min-width: 640px) {
.bathgiant-site-footer__legal,
.bathgiant-site-footer__company-no {
flex: 1 1 auto;
max-width: 32rem;
text-align: right;
}
} .bathgiant-trade-login {
max-width: 26rem;
}
.bathgiant-trade-login #bg_trade_loginform p {
margin: 0 0 1rem;
}
.bathgiant-trade-login #bg_trade_loginform label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.35rem;
color: var(--bathgiant-ink);
}
.bathgiant-trade-login #bg_trade_loginform input[type="text"],
.bathgiant-trade-login #bg_trade_loginform input[type="password"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.65rem 0.75rem;
border: 1px solid var(--bathgiant-border);
border-radius: 10px;
font-family: var(--bathgiant-font-sans);
font-size: 1rem;
}
.bathgiant-trade-login #bg_trade_loginform input[type="submit"] {
margin-top: 0.25rem;
padding: 0.65rem 1.25rem;
border: none;
border-radius: 999px;
background: var(--bathgiant-brand);
color: #fff;
font-family: var(--bathgiant-font-sans);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
}
.bathgiant-trade-login #bg_trade_loginform input[type="submit"]:hover {
background: var(--bathgiant-brand-deep);
} .bathgiant-site-login {
max-width: 26rem;
}
.bathgiant-site-login__intro,
.bathgiant-site-login__trade-pricing {
font-size: 0.95rem;
color: var(--bathgiant-ink-muted);
margin: 0 0 1rem;
}
.bathgiant-site-login__form p {
margin: 0 0 1rem;
}
.bathgiant-site-login__form label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.35rem;
color: var(--bathgiant-ink);
}
.bathgiant-site-login__form input[type="text"],
.bathgiant-site-login__form input[type="password"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.65rem 0.75rem;
border: 1px solid var(--bathgiant-border);
border-radius: 10px;
font-family: var(--bathgiant-font-sans);
font-size: 1rem;
}
.bathgiant-site-login__message {
margin: 0 0 1rem;
padding: 0.65rem 0.75rem;
border-radius: 10px;
background: #f8fafc;
font-size: 0.92rem;
}
.bathgiant-site-login__message--error {
background: #fef2f2;
color: #991b1b;
}
.bathgiant-site-login__message--success {
background: #ecfdf5;
color: #065f46;
}
.bathgiant-site-login__meta {
margin: 1rem 0 0;
font-size: 0.92rem;
}
.bathgiant-site-login--logged-in .bathgiant-btn {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
} body.bathgiant-page-login .bathgiant-site-footer {
margin-top: 0;
}
.bathgiant-login-page {
padding: 0;
max-width: none;
margin: 0;
}
.bathgiant-login-page__split {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
min-height: calc(100svh - var(--bathgiant-header-offset, 5.5rem));
}
.bathgiant-login-page__visual {
position: relative;
min-height: 16rem;
background-color: #0f172a;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
}
.bathgiant-login-page__visual-scrim {
position: absolute;
inset: 0;
background: linear-gradient(165deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.82) 72%);
pointer-events: none;
}
.bathgiant-login-page__visual-copy {
position: relative;
z-index: 1;
padding: clamp(1.75rem, 4vw, 3rem);
max-width: 34rem;
color: #fff;
}
.bathgiant-login-page__badge {
display: block;
width: 4.5rem;
height: auto;
margin-bottom: 1.25rem;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.bathgiant-login-page__eyebrow {
margin: 0 0 0.65rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-login-page__headline {
margin: 0 0 0.75rem;
font-family: var(--bathgiant-font-display, var(--bathgiant-font-sans));
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
line-height: 1.15;
font-weight: 700;
color: #fff;
}
.bathgiant-login-page__lede {
margin: 0;
font-size: 1.05rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.bathgiant-login-page__panel {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 4vw, 3rem);
background: #fff5f5;
}
body.bathgiant-page-login .bathgiant-login-page__panel-inner.bathgiant-site-login {
--bathgiant-brand: #9f1239;
}
body.bathgiant-page-login .bathgiant-login-page__submit.bathgiant-btn {
background: #9f1239;
border-color: #9f1239;
color: #fff;
}
body.bathgiant-page-login .bathgiant-login-page__submit.bathgiant-btn:hover,
body.bathgiant-page-login .bathgiant-login-page__submit.bathgiant-btn:focus {
background: #881337;
border-color: #881337;
color: #fff;
}
body.bathgiant-page-login .bathgiant-site-login__meta a,
body.bathgiant-page-login .bathgiant-login-page__retail a {
color: #9f1239;
}
.bathgiant-account-quotes-ref__branch-link {
margin-top: 0.35rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.bathgiant-account-quotes-location {
display: block;
font-size: 0.88rem;
color: #64748b;
margin-top: 0.15rem;
}
.bathgiant-account-quotes-table__th-customer {
min-width: 8rem;
}
.bathgiant-login-page__panel-inner {
width: 100%;
max-width: 26rem;
}
.bathgiant-login-page__panel-inner.bathgiant-site-login {
max-width: 26rem;
}
.bathgiant-login-page__form-header {
margin-bottom: 1.25rem;
}
.bathgiant-login-page__form-title {
margin: 0 0 0.35rem;
font-size: 1.65rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-login-page__panel .bathgiant-site-login__intro {
margin: 0;
}
.bathgiant-login-page__submit {
width: 100%;
justify-content: center;
}
.bathgiant-login-page__retail {
margin: 1.25rem 0 0;
font-size: 0.92rem;
}
.bathgiant-login-page__retail a {
color: var(--bathgiant-brand);
font-weight: 600;
text-decoration: none;
}
.bathgiant-login-page__retail a:hover {
text-decoration: underline;
}
.bathgiant-login-page__signed-in {
margin: 0 0 1rem;
font-size: 1rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-login-page__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin: 0;
}
.bathgiant-site-login__remember {
margin: 0 0 1rem;
}
@media (max-width: 900px) {
.bathgiant-login-page__split {
grid-template-columns: 1fr;
min-height: auto;
}
.bathgiant-login-page__visual {
min-height: 14rem;
}
.bathgiant-login-page__panel {
min-height: auto;
}
} .bathgiant-user-switch-dock {
--bathgiant-switch-dock-bar-h: 3.75rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: auto;
max-width: 100%;
box-sizing: border-box;
z-index: 100002;
font-family: var(--bathgiant-font-sans);
font-size: 0.9rem;
color: #fff;
background: linear-gradient(180deg, #243d5c 0%, #1a2f47 100%);
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.35);
} @media (max-width: 899px) {
body.bathgiant-user-switch-staff-no-mobile .bathgiant-user-switch-dock {
display: none !important;
}
body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active,
body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active.admin-bar,
body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-collapsed,
body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded {
padding-bottom: 0 !important;
}
body.bathgiant-user-switch-staff-no-mobile [data-bathgiant-view-as-choice],
body.bathgiant-user-switch-staff-no-mobile .bathgiant-branch-customers-table__view-as {
display: none !important;
}
}
html.bathgiant-display-standalone body.bathgiant-user-switch-staff-no-mobile .bathgiant-user-switch-dock,
html.bathgiant-user-switch-staff-mobile-blocked body.bathgiant-user-switch-staff-no-mobile .bathgiant-user-switch-dock {
display: none !important;
}
html.bathgiant-display-standalone body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active,
html.bathgiant-user-switch-staff-mobile-blocked body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active,
html.bathgiant-display-standalone body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active.admin-bar,
html.bathgiant-user-switch-staff-mobile-blocked body.bathgiant-user-switch-staff-no-mobile.bathgiant-user-switch-dock-active.admin-bar {
padding-bottom: 0 !important;
}
html.bathgiant-display-standalone body.bathgiant-user-switch-staff-no-mobile [data-bathgiant-view-as-choice],
html.bathgiant-user-switch-staff-mobile-blocked body.bathgiant-user-switch-staff-no-mobile [data-bathgiant-view-as-choice],
html.bathgiant-display-standalone body.bathgiant-user-switch-staff-no-mobile .bathgiant-branch-customers-table__view-as,
html.bathgiant-user-switch-staff-mobile-blocked body.bathgiant-user-switch-staff-no-mobile .bathgiant-branch-customers-table__view-as {
display: none !important;
}
.bathgiant-user-switch-view-as--staff-mobile-hidden {
display: none !important;
} body.bathgiant-user-switch-active .bathgiant-user-switch-dock {
z-index: 100080;
pointer-events: auto;
}
.bathgiant-user-switch-dock--collapsed {
left: auto;
right: max(0.75rem, env(safe-area-inset-right, 0px));
bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
width: auto;
max-width: calc(100vw - 1.5rem);
border-top: none;
border-radius: 999px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.45);
}
.bathgiant-user-switch-dock--collapsed .bathgiant-user-switch-dock__inner {
padding: 0;
min-height: 0;
}
.bathgiant-user-switch-dock--collapsed .bathgiant-user-switch-dock__panel {
display: none !important;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__inner {
padding: 0.75rem clamp(0.85rem, 2.5vw, 1.5rem) 0.85rem;
min-height: var(--bathgiant-switch-dock-bar-h);
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__panel {
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
padding-right: 2rem;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__title {
width: 100%;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__controls {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0.55rem;
}
.bathgiant-user-switch-dock__toolbar {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.65rem;
width: 100%;
min-width: 0;
}
.bathgiant-user-switch-dock__toolbar .bathgiant-user-switch-dock__tabs {
flex: 0 0 auto;
}
.bathgiant-user-switch-dock__toolbar .bathgiant-user-switch-dock__search-wrap {
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: none;
}
.bathgiant-user-switch-dock__list-wrap {
width: 100%;
min-width: 0;
}
.bathgiant-user-switch-dock__list-wrap.is-open {
flex: 1 1 auto;
min-height: 12rem;
max-height: min(45vh, 22rem);
}
.bathgiant-user-switch-dock__select--list,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select {
display: block;
width: 100%;
height: auto;
min-height: 12rem;
max-height: min(45vh, 22rem);
padding: 0.35rem 0.45rem;
overflow-y: auto;
overflow-x: hidden;
cursor: default;
line-height: 1.45;
}
.bathgiant-user-switch-dock__select--list option,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select option {
padding: 0.45rem 0.55rem;
border-radius: 4px;
}
.bathgiant-user-switch-dock__select--list optgroup,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select optgroup {
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
padding: 0.55rem 0.35rem 0.15rem;
margin: 0;
background: #f8fafc;
border-top: 1px solid rgba(15, 23, 42, 0.1);
}
.bathgiant-user-switch-dock__select--list optgroup:first-of-type,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select optgroup:first-of-type {
border-top: none;
padding-top: 0.25rem;
background: transparent;
}
.bathgiant-user-switch-dock__select--list .bathgiant-user-switch-dock__option--master,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select .bathgiant-user-switch-dock__option--master {
font-weight: 600;
color: var(--bathgiant-ink, #1f2937);
}
.bathgiant-user-switch-dock__select--list .bathgiant-user-switch-dock__option--staff,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select .bathgiant-user-switch-dock__option--staff {
color: #64748b;
padding-left: 1.1rem;
}
.bathgiant-user-switch-dock__select--list option:checked,
.bathgiant-user-switch-dock__list-wrap.is-open .bathgiant-user-switch-dock__select option:checked {
background: linear-gradient(0deg, rgba(61, 125, 217, 0.18), rgba(61, 125, 217, 0.18));
color: var(--bathgiant-ink, #1f2937);
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded {
--bathgiant-switch-dock-bar-h: 17.5rem;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded.bathgiant-user-switch-dock-list-open {
--bathgiant-switch-dock-bar-h: 22rem;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded.admin-bar {
padding-bottom: calc(var(--bathgiant-switch-dock-bar-h, 22rem) + 32px);
}
.bathgiant-user-switch-dock--has-tabs.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__panel {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 0.55rem;
}
.bathgiant-user-switch-dock--has-tabs .bathgiant-user-switch-dock__search-wrap {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__toggle {
display: none;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__panel {
display: flex !important;
}
.bathgiant-user-switch-dock--expanded {
left: 0;
right: 0;
bottom: 0;
width: auto;
border-radius: 0;
}
.bathgiant-user-switch-dock__toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0;
padding: 0.5rem;
border: none;
border-radius: 999px;
background: transparent;
color: #fff;
cursor: pointer;
line-height: 0;
}
.bathgiant-user-switch-dock__toggle:hover,
.bathgiant-user-switch-dock__toggle:focus-visible {
background: rgba(255, 255, 255, 0.12);
outline: none;
}
.bathgiant-user-switch-dock__toggle-badge {
position: absolute;
top: 0.35rem;
right: 0.35rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--bathgiant-trade, #c41e1e);
border: 2px solid #1a2f47;
}
.bathgiant-user-switch-dock__panel {
display: flex;
flex: 1 1 auto;
flex-wrap: nowrap;
align-items: center;
gap: 0.65rem 0.85rem;
min-width: 0;
position: relative;
padding-right: 1.75rem;
}
.bathgiant-user-switch-dock__close {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
}
.bathgiant-user-switch-dock__close:hover,
.bathgiant-user-switch-dock__close:focus-visible {
background: rgba(255, 255, 255, 0.2);
outline: none;
}
.bathgiant-user-switch-dock__inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.65rem 0.85rem;
max-width: 100%;
margin: 0 auto;
padding: 0.65rem clamp(0.85rem, 2.5vw, 1.5rem);
min-height: var(--bathgiant-switch-dock-bar-h);
box-sizing: border-box;
}
.bathgiant-user-switch-dock__title {
display: flex;
align-items: center;
gap: 0.45rem;
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
letter-spacing: 0.01em;
}
.bathgiant-user-switch-dock__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
flex-shrink: 0;
}
.bathgiant-user-switch-dock__title-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-user-switch-dock__tabs {
display: inline-flex;
flex-shrink: 0;
gap: 0.25rem;
padding: 0;
}
.bathgiant-user-switch-dock__tab {
flex: 0 0 auto;
min-height: 1.85rem;
padding: 0.2rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.82);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.bathgiant-user-switch-dock__tab:hover,
.bathgiant-user-switch-dock__tab:focus-visible {
background: rgba(255, 255, 255, 0.16);
color: #fff;
outline: none;
}
.bathgiant-user-switch-dock__tab.is-active {
background: #fff;
color: var(--bathgiant-header-secondary, #243d5c);
border-color: #fff;
}
.bathgiant-user-switch-dock__badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: var(--bathgiant-trade, #c41e1e);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.bathgiant-user-switch-dock__controls {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.bathgiant-user-switch-dock__search-wrap {
position: relative;
flex: 0 0 9.5rem;
min-width: 7rem;
}
.bathgiant-user-switch-dock__search {
display: block;
width: 100%;
height: 2.35rem;
padding: 0.4rem 2rem 0.4rem 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--bathgiant-radius-sm, 8px);
background: #fff;
color: var(--bathgiant-ink, #1f2937);
font: inherit;
line-height: 1.35;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
box-sizing: border-box;
}
.bathgiant-user-switch-dock__search::placeholder {
color: #94a3b8;
}
.bathgiant-user-switch-dock__search:focus {
outline: none;
border-color: var(--bathgiant-brand, #3d7dd9);
box-shadow: 0 0 0 3px rgba(61, 125, 217, 0.35);
}
.bathgiant-user-switch-dock__clear {
position: absolute;
top: 50%;
right: 0.3rem;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: none;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.bathgiant-user-switch-dock__clear:hover {
background: #cbd5e1;
color: #0f172a;
}
.bathgiant-user-switch-dock__select {
flex: 1 1 auto;
min-width: 0;
height: 2.35rem;
max-width: none;
padding: 0.35rem 2rem 0.35rem 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--bathgiant-radius-sm, 8px);
background: #fff;
color: var(--bathgiant-ink, #1f2937);
font: inherit;
line-height: 1.35;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
box-sizing: border-box;
cursor: pointer;
appearance: auto;
}
.bathgiant-user-switch-dock__select:focus {
outline: none;
border-color: var(--bathgiant-brand, #3d7dd9);
box-shadow: 0 0 0 3px rgba(61, 125, 217, 0.35);
}
.bathgiant-user-switch-dock__select:disabled {
opacity: 0.75;
cursor: not-allowed;
}
.bathgiant-user-switch-dock__actions {
display: flex;
align-items: center;
flex-shrink: 0;
}
.bathgiant-user-switch-dock__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.15rem;
padding: 0.35rem 0.85rem;
border-radius: var(--bathgiant-radius-sm, 8px);
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bathgiant-user-switch-dock__btn--ghost {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.45);
}
.bathgiant-user-switch-dock__btn--ghost:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
body.bathgiant-user-switch-dock-active {
padding-bottom: var(--bathgiant-switch-dock-bar-h, 3.75rem);
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-collapsed {
padding-bottom: 0;
}
body.bathgiant-user-switch-dock-active.admin-bar.bathgiant-user-switch-dock-collapsed {
padding-bottom: 0;
}
body.bathgiant-user-switch-dock-active.admin-bar {
padding-bottom: calc(var(--bathgiant-switch-dock-bar-h, 3.75rem) + 32px);
}
body.bathgiant-user-switch-dock-overlay-open.bathgiant-user-switch-dock-active {
padding-bottom: 0 !important;
}
body.bathgiant-user-switch-dock-overlay-open.bathgiant-user-switch-dock-active.admin-bar {
padding-bottom: 32px !important;
}
body.bathgiant-user-switch-dock-overlay-open .bathgiant-user-switch-dock {
display: none !important;
}
@media (max-width: 782px) {
.bathgiant-user-switch-dock--expanded {
--bathgiant-switch-dock-bar-h: 4.25rem;
}
.bathgiant-user-switch-dock--collapsed {
right: 0.75rem;
bottom: 0.75rem;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__inner {
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__panel {
flex-wrap: wrap;
padding-right: 0;
padding-bottom: 1.75rem;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__title {
flex: 1 1 auto;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__controls {
flex: 1 1 100%;
order: 3;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__toolbar {
flex-wrap: wrap;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__toolbar .bathgiant-user-switch-dock__search-wrap {
flex: 1 1 12rem;
min-width: 0;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__actions {
margin-left: auto;
}
.bathgiant-user-switch-dock--expanded .bathgiant-user-switch-dock__close {
top: auto;
bottom: 0;
right: 0;
transform: none;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded {
--bathgiant-switch-dock-bar-h: 6.5rem;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded.admin-bar {
padding-bottom: calc(var(--bathgiant-switch-dock-bar-h) + 46px);
}
}
.bathgiant-trade-login__meta,
.bathgiant-trade-login__retail {
margin: 1rem 0 0;
font-size: 0.92rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-trade-login__meta a,
.bathgiant-trade-login__retail a {
color: var(--bathgiant-brand);
font-weight: 600;
text-decoration: none;
}
.bathgiant-trade-login__meta a:hover,
.bathgiant-trade-login__retail a:hover {
text-decoration: underline;
}
.bathgiant-trade-dashboard__actions {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.bathgiant-trade-dashboard__welcome {
margin: 0 0 0.5rem;
font-size: 1.05rem;
} .bathgiant-grid,
.bathgiant-product-grid {
--bathgiant-grid-card-min: 17rem;
display: grid;
width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
grid-auto-rows: auto;
align-items: stretch;
}
.bathgiant-grid {
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.bathgiant-product-grid {
gap: var(--bathgiant-space-block);
}
@media (min-width: 700px) {
.bathgiant-grid,
.bathgiant-product-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bathgiant-grid-card-min)), 1fr));
} .bathgiant-archive-products .bathgiant-grid,
.bathgiant-archive-products .bathgiant-store-main .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-store-main .bathgiant-grid {
--bg-archive-grid-cols: 2;
--bg-archive-gap: clamp(0.75rem, 2vw, 1.25rem);
--bg-archive-card-pad-x: 1rem; --bg-archive-track: calc(
(100cqw - (var(--bg-archive-grid-cols) - 1) * var(--bg-archive-gap))
/ var(--bg-archive-grid-cols)
); --bg-archive-media-size: calc(
var(--bg-archive-track) - 2 * var(--bg-archive-card-pad-x) - 2px
);
grid-template-columns: repeat(var(--bg-archive-grid-cols), minmax(0, 1fr));
grid-auto-flow: dense;
gap: var(--bg-archive-gap);
align-items: start;
container-type: inline-size;
container-name: bg-archive-grid;
}
}
@media (min-width: 1040px) {
.bathgiant-archive-products .bathgiant-grid,
.bathgiant-archive-products .bathgiant-store-main .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-store-main .bathgiant-grid {
--bg-archive-grid-cols: 3;
}
}
@media (min-width: 1380px) {
.bathgiant-archive-products .bathgiant-grid,
.bathgiant-archive-products .bathgiant-store-main .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-store-main .bathgiant-grid {
--bg-archive-grid-cols: 4;
}
} @media (min-width: 1680px) {
.bathgiant-archive-products .bathgiant-grid,
.bathgiant-archive-products .bathgiant-store-main .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-store-main .bathgiant-grid {
--bg-archive-grid-cols: 5;
}
}
@media (min-width: 1920px) {
.bathgiant-archive-products .bathgiant-grid,
.bathgiant-archive-products .bathgiant-store-main .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-grid,
.bathgiant-tax-archive .bathgiant-store-main .bathgiant-grid {
--bg-archive-grid-cols: 6;
}
}
.bathgiant-card {
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-md);
padding: 1rem;
background: #fff;
box-shadow: 0 1px 0 rgba(15, 20, 25, 0.03);
}
.bathgiant-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.58rem 1.15rem;
border-radius: 999px;
border: none;
background: var(--bathgiant-brand);
color: #fff;
cursor: pointer;
text-decoration: none;
font-family: var(--bathgiant-font-sans);
font-weight: var(--bathgiant-btn-font-weight);
font-size: var(--bathgiant-btn-font-size);
line-height: var(--bathgiant-btn-line-height);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.bathgiant-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
}
.bathgiant-cta-icon[hidden] {
display: none !important;
}
.bathgiant-cta-icon svg {
display: block;
}
.bathgiant-btn.is-added .bathgiant-cta-icon--state-default,
.bathgiant-ajax-cart-btn.is-added .bathgiant-cta-icon--state-default,
.bathgiant-extra-add-btn.is-added .bathgiant-cta-icon--state-default {
display: none;
}
.bathgiant-btn.is-added .bathgiant-cta-icon--state-added,
.bathgiant-ajax-cart-btn.is-added .bathgiant-cta-icon--state-added,
.bathgiant-extra-add-btn.is-added .bathgiant-cta-icon--state-added {
display: inline-flex;
}
.bathgiant-btn:hover {
background: var(--bathgiant-brand-deep);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 18px var(--bathgiant-btn-shadow-hover);
}
.bathgiant-btn--lg {
padding: 0.75rem 1.35rem;
font-size: var(--bathgiant-btn-font-size-lg);
}
.bathgiant-btn--ghost {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.45);
box-shadow: none;
}
.bathgiant-btn--ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.75);
color: #fff;
box-shadow: none;
} .bathgiant-btn--outline {
box-sizing: border-box;
background: transparent;
color: var(--bathgiant-brand-deep);
border: 2px solid var(--bathgiant-brand);
box-shadow: none;
}
.bathgiant-btn--outline:hover,
.bathgiant-btn--outline:focus-visible {
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
border-color: var(--bathgiant-brand-deep);
box-shadow: none;
transform: translateY(-1px);
}
.bathgiant-btn-secondary {
background: var(--bathgiant-color-primary);
box-shadow: 0 2px 10px var(--bathgiant-btn-shadow);
}
.bathgiant-btn-secondary:hover {
background: var(--bathgiant-color-primary-dark);
box-shadow: 0 4px 16px var(--bathgiant-btn-shadow-hover);
} .bathgiant-cart-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.95rem;
}
.bathgiant-cart-table th,
.bathgiant-cart-table td {
border: 1px solid var(--bathgiant-border);
padding: 0.65rem 0.75rem;
vertical-align: top;
text-align: left;
}
.bathgiant-cart-table thead th {
background: var(--bathgiant-light);
} h3.bathgiant-cart-category-heading:not(.bathgiant-heading-rule),
.bathgiant-cart-update-form > h3,
.bathgiant-checkout-review__body > h3 {
margin: 1.35rem 0 0.4rem;
padding: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: normal;
text-transform: capitalize;
color: var(--bathgiant-store-ink);
line-height: 1.35;
background: none;
border: none;
border-radius: 0;
}
.bathgiant-cart-update-form > h3:first-of-type,
.bathgiant-checkout-review__body > h3:first-of-type {
margin-top: 0;
}
h3.bathgiant-cart-category-heading.bathgiant-heading-rule {
margin: 1.15rem 0 0.5rem;
} h3.bathgiant-cart-category-heading.bathgiant-heading-rule::before {
display: none;
}
h3.bathgiant-cart-category-heading.bathgiant-heading-rule .bathgiant-heading-rule__text {
font-family: var(--bathgiant-font-sans);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
text-transform: capitalize;
letter-spacing: normal;
text-align: left;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-line-details {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--bathgiant-border);
font-size: 0.88rem;
line-height: 1.45;
color: #374151;
}
.bathgiant-cart-line-details p {
margin: 0.35rem 0;
}
.bathgiant-cart-line-label {
font-weight: 600;
color: #111827;
}
.bathgiant-cart-line-flag {
color: #92400e;
background: #fffbeb;
padding: 0.35rem 0.5rem;
border-radius: 4px;
}
.bathgiant-cart-line-branches {
margin-top: 0.35rem;
}
.bathgiant-cart-line-branch-card {
display: grid;
gap: 0.2rem;
padding: 0.55rem 0.65rem;
border: 1px solid var(--bathgiant-info-surface-border);
border-radius: 10px;
background: linear-gradient(180deg, var(--bathgiant-info-surface) 0%, #fff 100%);
box-shadow: inset 3px 0 0 var(--bathgiant-brand-deep);
}
.bathgiant-cart-line-branch-card__label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bathgiant-brand-deep);
}
.bathgiant-cart-line-branch-card__name {
font-size: 0.95rem;
color: var(--bathgiant-info-surface-text);
}
.bathgiant-cart-line-branch-card__meta {
font-size: 0.82rem;
line-height: 1.4;
color: #475569;
}
.bathgiant-cart-line-branch-card__meta.is-ok {
color: #166534;
font-weight: 600;
}
.bathgiant-cart-line-branch-card__meta.is-lead {
color: #92400e;
}
.bathgiant-cart-line-branch-card__alt {
margin: 0.25rem 0 0;
padding: 0.4rem 0.5rem;
border-radius: 8px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #166534;
font-size: 0.8rem;
line-height: 1.4;
}
.bathgiant-cart-line-branches__collect-now {
margin: 0 0 0.45rem;
padding: 0.45rem 0.55rem;
border-radius: 8px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
font-size: 0.84rem;
line-height: 1.4;
color: #166534;
}
.bathgiant-cart-line-branches__collect-label {
font-weight: 700;
}
.bathgiant-cart-line-branches__disclosure {
margin-top: 0.45rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.bathgiant-cart-line-branches--trade .bathgiant-cart-line-branches__disclosure {
margin-top: 0.5rem;
}
.bathgiant-cart-line-branches__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.65rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--bathgiant-brand, #2f68c4);
cursor: pointer;
list-style: none;
}
.bathgiant-cart-line-branches__summary::-webkit-details-marker {
display: none;
}
.bathgiant-cart-line-branches__summary::after {
content: "";
flex: 0 0 auto;
width: 0.4rem;
height: 0.4rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.15s ease;
}
.bathgiant-cart-line-branches__disclosure[open] .bathgiant-cart-line-branches__summary {
background: #f8fafc;
}
.bathgiant-cart-line-branches__disclosure[open] .bathgiant-cart-line-branches__summary::after {
transform: rotate(-135deg);
}
.bathgiant-cart-line-branches--public .bathgiant-cart-line-branches__summary {
color: #166534;
}
.bathgiant-cart-line-branches--public .bathgiant-cart-line-branches__disclosure[open] .bathgiant-cart-line-branches__summary {
background: #ecfdf5;
}
.bathgiant-cart-line-branches__list {
margin: 0;
padding: 0.45rem 0.65rem 0.6rem;
list-style: none;
display: grid;
gap: 0.35rem;
}
.bathgiant-cart-line-branches__list li {
margin: 0;
padding: 0.45rem 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
font-size: 0.82rem;
line-height: 1.4;
}
.bathgiant-cart-line-branches__list li.bathgiant-stock-ok {
border-color: #bbf7d0;
background: #f0fdf4;
}
.bathgiant-cart-line-branches__list li.bathgiant-stock-low {
border-color: #fde68a;
background: #fffbeb;
}
.bathgiant-cart-line-branches__list .bathgiant-branch-name {
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-line-branches ul {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
}
.bathgiant-cart-line-branches li::marker {
color: #c7ced8;
}
.bathgiant-stock-ok .bathgiant-branch-meta {
color: #15803d;
}
.bathgiant-stock-low .bathgiant-branch-meta {
color: #a16207;
}
.bathgiant-cart-line-total {
display: block;
margin-top: 0.35rem;
font-size: 0.85rem;
color: #6b7280;
}
.bathgiant-cart-line-total__label {
margin-right: 0.25rem;
}
.bathgiant-cart-cell-price .bathgiant-cart-price-line {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.1rem;
}
.bathgiant-cart-price-line__list {
text-decoration: line-through;
color: var(--bathgiant-ink-muted, #6b7280);
font-weight: 500;
}
.bathgiant-cart-price-line__trade,
.bathgiant-cart-price-line__now {
font-weight: 700;
color: #166534;
}
.bathgiant-cart-line-total .bathgiant-cart-price-line__trade,
.bathgiant-cart-line-total .bathgiant-cart-price-line__now {
color: #166534;
} .bathgiant-cart-page {
margin: 0 0 calc(var(--bathgiant-space-section) + 0.5rem);
}
.bathgiant-cart-page .bathgiant-quote-saved-notice--banner {
margin: 0 0 1.25rem;
padding: 0.9rem 1.05rem;
border: 1px solid #86efac;
border-radius: 12px;
background: #ecfdf3;
box-shadow: 0 8px 22px rgba(22, 101, 52, 0.08);
}
.bathgiant-cart-page .bathgiant-quote-saved-notice--banner .bathgiant-quote-saved-notice__text {
margin: 0;
color: #166534;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
.bathgiant-cart-page .bathgiant-quote-saved-notice--banner .bathgiant-quote-saved-notice__link {
margin: 0.75rem 0 0;
}
.bathgiant-cart-page .bathgiant-quote-saved-notice--banner .bathgiant-quote-share-panel {
margin-top: 0.85rem;
}
.bathgiant-cart-page--quote-saved .bathgiant-cart-page__after-quote-save {
margin: 0 0 1.25rem;
color: #3a4f66;
font-size: 0.95rem;
line-height: 1.5;
} .bathgiant-cart-page--empty {
margin-top: 0;
overflow-x: clip;
max-width: 100%;
}
.bathgiant-cart-empty {
margin: 0 0 var(--bathgiant-space-section);
max-width: 100%;
overflow-x: clip;
}
.bathgiant-cart-empty__split {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
min-height: min(28rem, 70vh);
border-radius: 16px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.bathgiant-cart-empty__visual {
position: relative;
min-height: 14rem;
background-color: #0f172a;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
}
.bathgiant-cart-empty__visual-scrim {
position: absolute;
inset: 0;
background: linear-gradient(165deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.85) 72%);
pointer-events: none;
}
.bathgiant-cart-empty__visual-copy {
position: relative;
z-index: 1;
padding: clamp(1.5rem, 3.5vw, 2.5rem);
max-width: 30rem;
color: #fff;
}
.bathgiant-cart-empty__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-cart-empty__visual-title {
margin: 0 0 0.65rem;
font-family: var(--bathgiant-font-display, var(--bathgiant-font-sans));
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
line-height: 1.15;
font-weight: 700;
color: #fff;
}
.bathgiant-cart-empty__visual-lede {
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.bathgiant-cart-empty__panel {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 4vw, 2.75rem);
background: var(--bathgiant-surface, #fff);
}
.bathgiant-cart-empty__panel-inner {
width: 100%;
max-width: 22rem;
text-align: center;
}
.bathgiant-cart-empty__icon {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
margin: 0.35rem auto 1rem;
border-radius: 999px;
background: #f1f5f9;
color: var(--bathgiant-brand-deep, #0f4c5c);
}
.bathgiant-cart-empty__title {
margin: 0 0 0.65rem;
font-size: clamp(1.45rem, 2.5vw, 1.85rem);
font-weight: 700;
line-height: 1.2;
color: var(--bathgiant-ink);
}
.bathgiant-cart-empty__message {
margin: 0 0 1.35rem;
font-size: 1rem;
line-height: 1.55;
color: #64748b;
}
.bathgiant-cart-empty__actions {
margin: 0;
}
.bathgiant-cart-empty__actions .bathgiant-btn {
width: 100%;
justify-content: center;
}
.bathgiant-cart-empty__featured {
margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.bathgiant-cart-empty__featured-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 1rem;
}
.bathgiant-cart-empty__featured-title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-cart-empty__featured-all {
font-size: 0.92rem;
font-weight: 600;
color: var(--bathgiant-brand-deep, #0f4c5c);
text-decoration: none;
}
.bathgiant-cart-empty__featured-all:hover,
.bathgiant-cart-empty__featured-all:focus-visible {
text-decoration: underline;
}
.bathgiant-cart-empty__product-carousel {
margin-top: 0;
}
.bathgiant-checkout--empty .bathgiant-cart-empty {
margin-top: 0;
}
@media (max-width: 900px) {
.bathgiant-cart-empty {
margin-bottom: 1rem;
} .bathgiant-cart-empty__split {
display: block;
min-height: 0;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.bathgiant-cart-empty__visual {
display: none;
}
.bathgiant-cart-empty__panel {
min-height: 0;
align-items: stretch;
justify-content: flex-start;
padding: 1.15rem 0 0.85rem;
border: 0;
background: transparent;
}
.bathgiant-cart-empty__panel-inner {
flex: 0 0 auto;
max-width: 24rem;
margin: 0 auto;
padding: 0.35rem 0 0.15rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-cart-empty__icon {
width: 2.75rem;
height: 2.75rem;
margin: 0 auto 0.65rem;
background: #eef4fb;
}
.bathgiant-cart-empty__icon svg {
width: 1.4rem;
height: 1.4rem;
}
.bathgiant-cart-empty__title {
margin: 0 0 0.35rem;
font-size: 1.35rem;
}
.bathgiant-cart-empty__message {
margin: 0 auto 0.95rem;
max-width: 20rem;
font-size: 0.95rem;
line-height: 1.45;
color: #4b5c70;
}
.bathgiant-cart-empty__actions {
width: 100%;
max-width: none;
margin: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.bathgiant-cart-empty__actions .bathgiant-btn {
width: 100%;
min-height: 2.85rem;
}
.bathgiant-cart-empty__featured {
margin-top: 1.35rem;
}
.bathgiant-checkout--empty .bathgiant-cart-empty__split {
border-radius: 0;
}
} @media (max-width: 900px) {
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-cart-page--empty),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-checkout--empty) {
padding-top: 0.75rem;
}
.bathgiant-cart-page--empty,
.bathgiant-checkout--empty {
margin-top: 0;
}
} @media (max-width: 720px) {
.bathgiant-cart-page--empty,
.bathgiant-checkout--empty {
margin-left: 0;
margin-right: 0;
}
.bathgiant-cart-empty__panel {
padding-top: 0.55rem;
}
.bathgiant-cart-empty__panel-inner {
padding: 0;
}
.bathgiant-cart-empty__title {
font-size: 1.28rem;
}
.bathgiant-cart-empty__message {
font-size: 0.93rem;
margin-bottom: 0.85rem;
}
}
.bathgiant-account-quotes-table,
.bathgiant-account-orders-table {
margin-top: 0.75rem;
}
.bathgiant-account-quotes-table-wrap,
.bathgiant-account-data-table-wrap {
margin-top: 0.75rem;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table,
.bathgiant-account-data-table-wrap .bathgiant-intact-table {
margin: 0;
border: none;
font-size: 0.92rem;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table {
min-width: 46rem;
}
.bathgiant-account-quotes-table th.bathgiant-cart-th-product,
.bathgiant-account-orders-table th.bathgiant-cart-th-product {
width: 12rem;
min-width: 12rem;
}
.bathgiant-account-quotes-table td.bathgiant-cart-cell-product,
.bathgiant-account-orders-table td.bathgiant-cart-cell-product {
width: 12rem;
min-width: 12rem;
vertical-align: middle;
}
.bathgiant-branch-orders-table-wrap .bathgiant-branch-orders-table {
min-width: 58rem;
}
.bathgiant-account-data-table-wrap .bathgiant-intact-table--docs {
min-width: 52rem;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table thead th,
.bathgiant-account-data-table-wrap .bathgiant-intact-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.7rem 0.85rem;
border-color: #e2e8f0;
white-space: nowrap;
} .bathgiant-account-th-sort {
padding: 0;
vertical-align: top;
}
.bathgiant-account-th-sort__stack {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.45rem 0.55rem 0.5rem;
min-width: 5.5rem;
}
.bathgiant-account-th-filter__input {
width: 100%;
min-width: 0;
margin: 0;
padding: 0.3rem 0.42rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #fff;
color: #0f172a;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 400;
line-height: 1.3;
letter-spacing: normal;
text-transform: none;
}
.bathgiant-account-th-filter__input::placeholder {
color: #94a3b8;
opacity: 1;
}
.bathgiant-account-th-filter__input:focus-visible {
outline: 2px solid #94a3b8;
outline-offset: 1px;
border-color: #94a3b8;
}
.bathgiant-account-table-filter-empty {
text-align: center;
padding: 1rem 0.85rem !important;
color: #64748b;
font-size: 0.88rem;
font-style: italic;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
background: #f8fafc !important;
}
.bathgiant-account-th-sort__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: left;
cursor: pointer;
line-height: 1.3;
}
.bathgiant-account-th-sort__btn:hover,
.bathgiant-account-th-sort__btn:focus-visible {
color: #0f172a;
outline: none;
}
.bathgiant-account-th-sort__btn:focus-visible {
box-shadow: inset 0 0 0 2px #94a3b8;
border-radius: 4px;
}
.bathgiant-account-th-sort__icon {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
opacity: 0.35;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.bathgiant-account-th-sort[aria-sort="ascending"] .bathgiant-account-th-sort__icon,
.bathgiant-account-th-sort[aria-sort="descending"] .bathgiant-account-th-sort__icon {
opacity: 1;
}
.bathgiant-account-th-sort[aria-sort="ascending"] .bathgiant-account-th-sort__icon {
transform: rotate(-135deg) translateY(1px);
}
.bathgiant-account-th-sort[aria-sort="descending"] .bathgiant-account-th-sort__icon {
transform: rotate(45deg) translateY(-1px);
}
.bathgiant-account-table-sort-bar {
display: none;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.65rem;
padding: 0.55rem 0.65rem;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.bathgiant-account-table-sort-bar__label {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-account-table-sort-bar__select {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
font-size: 0.88rem;
padding: 0.4rem 0.55rem;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
}
.bathgiant-account-table-sort-bar__dir {
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
color: #334155;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.bathgiant-account-table-sort-bar__dir[aria-pressed="true"] {
background: #e2e8f0;
}
.bathgiant-account-table-sort-bar__filter-input {
flex: 1 1 100%;
width: 100%;
min-width: 0;
margin: 0;
padding: 0.45rem 0.55rem;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
font-size: 0.88rem;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table td,
.bathgiant-account-data-table-wrap .bathgiant-intact-table td {
padding: 0.75rem 0.85rem;
border-color: #eef2f7;
vertical-align: middle;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table tbody tr:hover td,
.bathgiant-account-data-table-wrap .bathgiant-intact-table tbody tr:hover td {
background: #fafbfc;
}
.bathgiant-account-data-table-wrap .bathgiant-intact-table--docs .bathgiant-intact-table__status {
min-width: 5.5rem;
white-space: nowrap;
text-align: center;
}
.bathgiant-intact-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.02em;
white-space: nowrap;
border: 1px solid transparent;
vertical-align: middle;
}
.bathgiant-intact-status--active,
.bathgiant-intact-status--open {
color: #166534;
background: #dcfce7;
border-color: #bbf7d0;
}
.bathgiant-intact-status--shipped,
.bathgiant-intact-status--dispatched,
.bathgiant-intact-status--delivered {
color: var(--bathgiant-info-surface-text);
background: var(--bathgiant-info-surface);
border-color: var(--bathgiant-info-surface-border);
}
.bathgiant-intact-status--ordered,
.bathgiant-intact-status--processing,
.bathgiant-intact-status--pending {
color: #9a3412;
background: #ffedd5;
border-color: #fed7aa;
}
.bathgiant-intact-status--written-off,
.bathgiant-intact-status--cancelled,
.bathgiant-intact-status--canceled,
.bathgiant-intact-status--void {
color: #64748b;
background: #f1f5f9;
border-color: #e2e8f0;
}
.bathgiant-intact-status--paid,
.bathgiant-intact-status--complete,
.bathgiant-intact-status--completed,
.bathgiant-intact-status--invoiced {
color: #0f766e;
background: #ccfbf1;
border-color: #99f6e4;
}
.bathgiant-intact-status--draft,
.bathgiant-intact-status--unknown {
color: #475569;
background: #f8fafc;
border-color: #e2e8f0;
}
.bathgiant-account-data-table-wrap .bathgiant-intact-table--docs .bathgiant-intact-table__action {
width: 1%;
}
.bathgiant-account-quote-subtotal-cell {
min-width: 10rem;
max-width: 14rem;
}
.bathgiant-account-quote-subtotal-cell__stack {
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: flex-start;
}
.bathgiant-account-quote-subtotal-cell__label {
display: block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
line-height: 1.2;
}
.bathgiant-account-quote-subtotal-cell__amount {
font-weight: 700;
font-size: 1rem;
color: #0f172a;
letter-spacing: -0.02em;
line-height: 1.2;
}
.bathgiant-account-quote-subtotal-cell__note-label {
font-weight: 600;
color: #475569;
}
.bathgiant-account-quote-subtotal-cell__note {
display: block;
margin: 0;
font-size: 0.8rem;
color: #64748b;
line-height: 1.35;
}
.bathgiant-account-quote-subtotal-cell--trade {
background: #fff1f2;
}
.bathgiant-account-quote-subtotal-cell--customer {
background: var(--bathgiant-info-surface);
}
body.bathgiant-has-trade-pricing .bathgiant-account-quote-subtotal-cell--trade {
background: var(--bathgiant-brand-wash, #fff1f2);
}
.bathgiant-quote-pricing--trade.bathgiant-quote-pricing--label,
.bathgiant-account-quote-subtotal-cell__note-label.bathgiant-quote-pricing--trade {
color: #881337;
}
.bathgiant-quote-pricing--trade.bathgiant-quote-pricing--amount,
.bathgiant-account-quote-subtotal-cell__note-amount.bathgiant-quote-pricing--trade {
color: #9f1239;
font-weight: 700;
}
.bathgiant-quote-pricing--customer.bathgiant-quote-pricing--label,
.bathgiant-account-quote-subtotal-cell__note-label.bathgiant-quote-pricing--customer {
color: var(--bathgiant-brand-deep);
}
.bathgiant-quote-pricing--customer.bathgiant-quote-pricing--amount,
.bathgiant-account-quote-subtotal-cell__note-amount.bathgiant-quote-pricing--customer {
color: var(--bathgiant-info-surface-text);
font-weight: 700;
}
.bathgiant-account-quote-subtotal-cell__note.bathgiant-quote-pricing--trade,
.bathgiant-account-quote-subtotal-cell__note.bathgiant-quote-pricing--customer {
margin-top: 0.1rem;
padding-top: 0.3rem;
border-top: 1px solid #e2e8f0;
}
body.bathgiant-has-trade-pricing .bathgiant-quote-pricing--trade.bathgiant-quote-pricing--amount,
body.bathgiant-has-trade-pricing .bathgiant-account-quote-subtotal-cell__note-amount.bathgiant-quote-pricing--trade {
color: var(--bathgiant-brand, #9f1239);
}
body.bathgiant-has-trade-pricing .bathgiant-quote-pricing--trade.bathgiant-quote-pricing--label,
body.bathgiant-has-trade-pricing .bathgiant-account-quote-subtotal-cell__note-label.bathgiant-quote-pricing--trade {
color: var(--bathgiant-brand-deep, #881337);
}
.bathgiant-quote-live-trade-inline {
margin-top: 0.35rem;
padding-top: 0.5rem;
border-top: 1px solid #f1f5f9;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: flex-start;
}
.bathgiant-quote-live-trade-inline__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.38rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #334155;
cursor: pointer;
font-family: inherit;
line-height: 1.25;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-quote-live-trade-inline__trigger:hover:not(:disabled) {
background: #fff;
border-color: #94a3b8;
color: #0f172a;
}
.bathgiant-quote-live-trade-inline__trigger:disabled {
opacity: 0.7;
cursor: wait;
}
.bathgiant-quote-live-trade-inline__result {
display: block;
margin: 0 !important;
font-size: 0.8rem;
font-weight: 600;
color: #0f766e;
line-height: 1.4;
}
.bathgiant-quote-live-trade-inline__result.is-error {
color: #b91c1c;
font-weight: 500;
}
.bathgiant-account-quotes-ref {
font-family: var(--bathgiant-font-sans);
font-size: 0.86em;
font-weight: 600;
color: #334155;
letter-spacing: -0.01em;
}
.bathgiant-account-quotes-table__th-received {
width: 7.5rem;
white-space: nowrap;
}
.bathgiant-account-quotes-table__cell-received {
white-space: nowrap;
}
.bathgiant-account-quote-received--list time {
display: flex;
flex-direction: column;
gap: 0.1rem;
line-height: 1.25;
}
.bathgiant-account-quote-received__date {
font-weight: 600;
color: #0f172a;
font-size: 0.88rem;
}
.bathgiant-account-quote-received__time {
font-size: 0.8rem;
font-weight: 500;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.bathgiant-account-quote-received--detail time {
font-weight: 500;
color: #334155;
}
.bathgiant-account-quote-received--empty {
color: #94a3b8;
}
.bathgiant-account-quotes-actions {
min-width: 9.5rem;
}
.bathgiant-account-quotes-actions__inner {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: stretch;
}
.bathgiant-account-quotes-actions__primary {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0.4rem;
align-items: stretch;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link,
.bathgiant-account-quotes-actions__primary > .bathgiant-trade-quote-builder-launcher {
flex: 1 1 100%;
min-width: 0;
width: auto;
}
.bathgiant-account-quotes-actions__primary:has(> .bathgiant-account-quotes-actions__edit--compact),
.bathgiant-account-quotes-actions__primary:has(> .bathgiant-trade-quote-builder-launcher .bathgiant-account-quotes-actions__edit--compact) {
flex-direction: row;
flex-wrap: nowrap;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link:only-child {
flex: 1 1 100%;
}
.bathgiant-account-orders-table th.bathgiant-account-quotes-actions,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions {
width: 8.75rem;
min-width: 8.75rem;
max-width: 8.75rem;
vertical-align: middle;
overflow: visible;
}
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner {
gap: 0.35rem;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link {
padding: 0.45rem 0.7rem;
line-height: var(--bathgiant-btn-line-height);
min-height: 2rem;
gap: 0.3rem;
box-shadow: none;
transform: none;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link:hover,
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link:focus-visible {
transform: none;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link.bathgiant-btn-secondary {
box-shadow: none;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link.bathgiant-btn-secondary:hover,
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link.bathgiant-btn-secondary:focus-visible {
box-shadow: none;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__archive.bathgiant-btn {
box-shadow: none;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__archive.bathgiant-btn:hover,
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__archive.bathgiant-btn:focus-visible {
box-shadow: none;
outline: 2px solid color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 35%, transparent);
outline-offset: 0;
}
.bathgiant-account-orders-table .bathgiant-account-quotes-actions__link .bathgiant-cta-icon svg {
width: 14px;
height: 14px;
}
.bathgiant-account-quotes-actions__primary .bathgiant-trade-quote-builder-launcher {
display: flex;
margin: 0;
}
.bathgiant-account-quotes-actions__primary .bathgiant-trade-quote-builder-launcher .bathgiant-btn {
flex: 1;
width: 100%;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__edit--compact,
.bathgiant-account-quotes-actions__primary > .bathgiant-trade-quote-builder-launcher:has(.bathgiant-account-quotes-actions__edit--compact) {
flex: 0 0 2.4rem;
width: 2.4rem;
min-width: 2.4rem;
max-width: 2.4rem;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link.bathgiant-account-quotes-actions__edit--compact {
flex: 0 0 2.4rem;
width: 2.4rem;
min-width: 2.4rem;
max-width: 2.4rem;
padding: 0.45rem;
justify-content: center;
gap: 0;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-trade-quote-builder-launcher:has(.bathgiant-account-quotes-actions__edit--compact) .bathgiant-btn {
flex: 0 0 2.4rem;
width: 2.4rem;
min-width: 2.4rem;
max-width: 2.4rem;
padding: 0.45rem;
justify-content: center;
gap: 0;
}
.bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__edit--compact + .bathgiant-account-quotes-actions__link,
.bathgiant-account-quotes-actions__primary > .bathgiant-trade-quote-builder-launcher:has(.bathgiant-account-quotes-actions__edit--compact) + .bathgiant-account-quotes-actions__link {
flex: 1 1 0;
min-width: 0;
width: auto;
}
.bathgiant-account-quotes-actions__edit.bathgiant-btn {
background: #fff;
color: var(--bathgiant-nav-ink, #17365d);
border: 1px solid color-mix(in srgb, var(--bathgiant-nav-ink, #17365d) 32%, #cbd5e1);
box-shadow: none;
}
.bathgiant-account-quotes-actions__edit.bathgiant-btn:hover,
.bathgiant-account-quotes-actions__edit.bathgiant-btn:focus-visible {
background: #f8fafc;
color: var(--bathgiant-brand-deep, #2f68c4);
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 18%, transparent);
transform: none;
}
.bathgiant-account-quotes-actions__archive.bathgiant-btn {
background: #fff;
color: var(--bathgiant-color-primary);
border: 1px solid #cbd5e1;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.bathgiant-account-quotes-actions__archive.bathgiant-btn:hover {
background: #f8fafc;
color: var(--bathgiant-color-primary-dark);
border-color: #94a3b8;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
transform: none;
}
.bathgiant-account-quotes-actions__link,
.bathgiant-account-quotes-actions__trade-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
container-type: inline-size;
font-size: var(--bathgiant-btn-font-size);
line-height: var(--bathgiant-btn-line-height);
font-weight: var(--bathgiant-btn-font-weight);
}
.bathgiant-account-action-label__short {
display: none;
}
@container (max-width: 7.25rem) {
.bathgiant-account-action-label__full {
display: none;
}
.bathgiant-account-action-label__short {
display: inline;
}
}
.bathgiant-account-quotes-actions__link .bathgiant-cta-icon,
.bathgiant-account-quotes-actions__delete .bathgiant-btn .bathgiant-cta-icon {
flex-shrink: 0;
}
.bathgiant-account-quotes-actions__link .bathgiant-cta-icon svg,
.bathgiant-account-quotes-actions__delete .bathgiant-btn .bathgiant-cta-icon svg {
display: block;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions .bathgiant-btn,
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__delete .bathgiant-btn {
font-size: var(--bathgiant-btn-font-size);
line-height: var(--bathgiant-btn-line-height);
font-weight: var(--bathgiant-btn-font-weight);
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__link:not(.bathgiant-account-quotes-actions__edit--compact),
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__archive.bathgiant-btn,
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__delete .bathgiant-btn {
padding: 0.48rem 0.85rem;
min-height: 2.125rem;
gap: 0.35rem;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__link .bathgiant-cta-icon svg,
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-actions__delete .bathgiant-btn .bathgiant-cta-icon svg {
width: 14px;
height: 14px;
}
.bathgiant-account-quotes-actions__trade {
display: flex;
flex-direction: column;
gap: 0.3rem;
align-items: stretch;
}
.bathgiant-account-quotes-actions__trade-result {
display: block;
margin: 0;
font-size: 0.78rem;
font-weight: 600;
color: #0f766e;
line-height: 1.35;
text-align: center;
}
.bathgiant-account-quotes-actions__trade-result.is-error {
color: #b91c1c;
font-weight: 500;
}
.bathgiant-branch-quote-create {
margin-bottom: 1.5rem;
}
.bathgiant-branch-quote-create__title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
}
.bathgiant-branch-quote-create__lede {
margin: 0 0 1rem;
}
.bathgiant-branch-quote-create__levels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin: 0 0 1rem;
padding: 0;
border: 0;
}
.bathgiant-branch-quote-create__level {
display: flex;
gap: 0.55rem;
align-items: flex-start;
margin: 0;
padding: 0.85rem 0.9rem;
border: 1px solid #dbe3ee;
border-radius: 0.65rem;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-branch-quote-create__level:has(input:checked) {
border-color: #7c9fd4;
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
background: #f8fbff;
}
.bathgiant-branch-quote-create__level input {
margin-top: 0.2rem;
flex-shrink: 0;
}
.bathgiant-branch-quote-create__level .description {
display: block;
margin-top: 0.2rem;
font-size: 0.82rem;
line-height: 1.35;
}
.bathgiant-branch-quote-create__trade-code {
margin: 0 0 1rem;
max-width: 18rem;
}
.bathgiant-branch-quote-create__trade-code input {
width: 100%;
}
.bathgiant-branch-quote-create__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin: 0;
}
.bathgiant-branch-quote-level {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #475569;
}
.bathgiant-branch-quote-level--public {
color: #0f766e;
}
.bathgiant-branch-quote-level--trade {
color: #1d4ed8;
}
.bathgiant-branch-quote-level--trade_customer {
color: #7c3aed;
}
.bathgiant-branch-quote-customer-name {
font-family: var(--bathgiant-font-sans);
font-weight: 600;
color: #0f172a;
}
.bathgiant-quote-form__branch-create-notice {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
}
@media (max-width: 900px) {
.bathgiant-branch-quote-create__levels {
grid-template-columns: 1fr;
}
}
.bathgiant-account-quote-delete-form {
margin: 0;
padding-top: 0.15rem;
text-align: center;
}
.bathgiant-account-quote-delete {
padding: 0;
border: 0;
background: none;
color: #94a3b8;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.bathgiant-account-quote-delete:hover {
color: #b91c1c;
}
.bathgiant-account-quote-detail-lines {
margin-top: 1rem;
}
.bathgiant-account-quote-detail-table {
margin-top: 0;
}
.bathgiant-account-quote-detail-table--dual-pricing {
--bathgiant-quote-trade-bg: #fff1f2;
--bathgiant-quote-trade-border: #fecdd3;
--bathgiant-quote-trade-text: #9f1239;
--bathgiant-quote-trade-heading: #881337;
--bathgiant-quote-customer-bg: var(--bathgiant-info-surface);
--bathgiant-quote-customer-border: var(--bathgiant-info-surface-border);
--bathgiant-quote-customer-text: var(--bathgiant-info-surface-text);
--bathgiant-quote-customer-heading: var(--bathgiant-brand-deep);
}
body.bathgiant-has-trade-pricing .bathgiant-account-quote-detail-table--dual-pricing {
--bathgiant-quote-trade-bg: var(--bathgiant-brand-wash, #fff1f2);
--bathgiant-quote-trade-text: var(--bathgiant-brand, #9f1239);
--bathgiant-quote-trade-heading: var(--bathgiant-brand-deep, #881337);
--bathgiant-quote-customer-bg: var(--bathgiant-info-surface);
--bathgiant-quote-customer-border: var(--bathgiant-info-surface-border);
--bathgiant-quote-customer-text: var(--bathgiant-info-surface-text);
--bathgiant-quote-customer-heading: var(--bathgiant-brand-deep);
}
.bathgiant-account-quote-detail-table--dual-pricing th.bathgiant-quote-pricing-col--trade,
.bathgiant-account-quote-detail-table--dual-pricing td.bathgiant-quote-pricing-col--trade {
background: var(--bathgiant-quote-trade-bg);
color: var(--bathgiant-quote-trade-text);
font-weight: 600;
}
.bathgiant-account-quote-detail-table--dual-pricing th.bathgiant-quote-pricing-col--trade {
color: var(--bathgiant-quote-trade-heading);
}
.bathgiant-account-quote-detail-table--dual-pricing .bathgiant-quote-pricing-col--trade.bathgiant-quote-pricing-col--group-start {
border-left: 3px solid var(--bathgiant-quote-trade-border);
}
.bathgiant-account-quote-detail-table--dual-pricing th.bathgiant-quote-pricing-col--customer,
.bathgiant-account-quote-detail-table--dual-pricing td.bathgiant-quote-pricing-col--customer {
background: var(--bathgiant-quote-customer-bg);
color: var(--bathgiant-quote-customer-text);
font-weight: 600;
}
.bathgiant-account-quote-detail-table--dual-pricing th.bathgiant-quote-pricing-col--customer {
color: var(--bathgiant-quote-customer-heading);
}
.bathgiant-account-quote-detail-table--dual-pricing .bathgiant-quote-pricing-col--customer.bathgiant-quote-pricing-col--group-start {
border-left: 3px solid var(--bathgiant-quote-customer-border);
}
.bathgiant-account-quote-detail-total {
margin: 0.65rem 0 0;
font-size: 1rem;
}
.bathgiant-account-quote-detail-total--trade {
display: inline-block;
margin-top: 0.75rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: var(--bathgiant-quote-trade-bg, #fff1f2);
border-left: 3px solid var(--bathgiant-quote-trade-border, #fecdd3);
color: var(--bathgiant-quote-trade-text, #9f1239);
}
.bathgiant-account-quote-detail-total--trade strong {
color: var(--bathgiant-quote-trade-heading, #881337);
}
.bathgiant-account-quote-detail-total--customer {
display: inline-block;
margin-top: 0.5rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: var(--bathgiant-quote-customer-bg, #eff6ff);
border-left: 3px solid var(--bathgiant-quote-customer-border, #bfdbfe);
color: var(--bathgiant-quote-customer-text, #1d4ed8);
}
.bathgiant-account-quote-detail-total--customer strong {
color: var(--bathgiant-quote-customer-heading, #1e40af);
}
.bathgiant-account-quote-detail-total + .bathgiant-account-quote-detail-total {
margin-top: 0.35rem;
}
.bathgiant-account-quote-detail-note {
margin-top: 0;
}
.bathgiant-account-quote-detail-lines .bathgiant-quote-live-trade-inline {
margin-top: 0.75rem;
}
.bathgiant-account-quote-detail-actions {
margin: 1rem 0 0;
}
.bathgiant-account-quote-detail-actions--delete {
margin-top: 0.5rem;
}
.bathgiant-cart-page .bathgiant-cart-update-form {
margin: 0;
}
.bathgiant-cart-page .bathgiant-cart-table {
border-collapse: separate;
border-spacing: 0;
margin: 0.6rem 0 0;
border: 1px solid var(--bathgiant-store-border);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
table-layout: fixed;
}
.bathgiant-cart-page .bathgiant-cart-col-product {
width: auto;
}
.bathgiant-cart-page .bathgiant-cart-col-qty {
width: 6.5rem;
}
.bathgiant-cart-page .bathgiant-cart-col-price {
width: 11rem;
}
.bathgiant-cart-page .bathgiant-cart-col-action {
width: 9.25rem;
}
.bathgiant-cart-page .bathgiant-cart-table thead th.bathgiant-cart-th-qty,
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-qty {
text-align: center;
}
.bathgiant-cart-page .bathgiant-cart-table thead th.bathgiant-cart-th-price,
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-price {
text-align: right;
}
.bathgiant-cart-page .bathgiant-cart-table thead th.bathgiant-cart-th-action,
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-action {
text-align: right;
}
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-qty,
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-price,
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-action {
vertical-align: top;
}
.bathgiant-cart-cell-qty__inner,
.bathgiant-cart-cell-action__inner,
.bathgiant-cart-cell-price__inner {
display: flex;
align-items: center;
min-height: 3rem;
}
.bathgiant-cart-cell-qty__inner {
justify-content: center;
}
.bathgiant-cart-cell-action__inner,
.bathgiant-cart-cell-price__inner {
justify-content: flex-end;
}
.bathgiant-cart-cell-price__inner {
box-sizing: border-box;
width: 100%;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-cart-page .bathgiant-cart-table thead th {
background: var(--bathgiant-store-table-head-bg);
color: var(--bathgiant-store-ink);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bathgiant-cart-page .bathgiant-cart-table thead th.bathgiant-cart-th-product {
color: var(--bathgiant-store-label);
font-weight: 600;
letter-spacing: 0.05em;
}
.bathgiant-cart-page .bathgiant-cart-table th,
.bathgiant-cart-page .bathgiant-cart-table td {
border-width: 0 0 1px;
border-color: var(--bathgiant-store-border-soft);
padding: 0.9rem 0.95rem;
vertical-align: middle;
}
.bathgiant-cart-page .bathgiant-cart-table td.bathgiant-cart-cell-product {
vertical-align: top;
}
.bathgiant-cart-page .bathgiant-cart-update-form > h3,
.bathgiant-cart-page h3.bathgiant-cart-category-heading:not(.bathgiant-heading-rule) {
margin: 1.15rem 0 0.5rem;
padding: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: normal;
text-transform: capitalize;
color: var(--bathgiant-store-ink);
line-height: 1.35;
background: none;
border: none;
border-radius: 0;
}
.bathgiant-cart-page h3.bathgiant-cart-category-heading.bathgiant-heading-rule {
margin: 1.15rem 0 0.5rem;
padding-left: 0.95rem; }
.bathgiant-cart-page h3.bathgiant-cart-category-heading.bathgiant-heading-rule::before {
display: none;
}
.bathgiant-cart-page h3.bathgiant-cart-category-heading.bathgiant-heading-rule .bathgiant-heading-rule__text {
text-align: left;
}
.bathgiant-cart-page .bathgiant-cart-update-form > h3:first-of-type {
margin-top: 0;
}
.bathgiant-cart-page .bathgiant-cart-table tbody tr:last-child td {
border-bottom: 0;
} @media (max-width: 640px) {
.bathgiant-cart-page .bathgiant-cart-table,
.bathgiant-checkout-page .bathgiant-cart-table,
.bathgiant-cart-table--extras,
.bathgiant-branch-order-collection-table,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table):not(.bathgiant-account-orders-table):not(.bathgiant-trade-customers-table):not(.bathgiant-account-quote-detail-table):not(.bathgiant-customer-dashboard__table):not(.bathgiant-trade-quote-builder__table) {
display: block;
width: 100%;
border: 0;
border-radius: 14px;
background: transparent;
box-shadow: none;
margin: 0.5rem 0 0;
}
.bathgiant-cart-page .bathgiant-cart-table thead,
.bathgiant-checkout-page .bathgiant-cart-table thead,
.bathgiant-cart-table--extras thead,
.bathgiant-branch-order-collection-table thead,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table):not(.bathgiant-account-orders-table):not(.bathgiant-trade-customers-table):not(.bathgiant-account-quote-detail-table):not(.bathgiant-customer-dashboard__table):not(.bathgiant-trade-quote-builder__table) thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
.bathgiant-cart-page .bathgiant-cart-table tbody,
.bathgiant-checkout-page .bathgiant-cart-table tbody,
.bathgiant-cart-table--extras tbody,
.bathgiant-branch-order-collection-table tbody,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table):not(.bathgiant-account-orders-table):not(.bathgiant-trade-customers-table):not(.bathgiant-account-quote-detail-table):not(.bathgiant-customer-dashboard__table):not(.bathgiant-trade-quote-builder__table) tbody {
display: block;
}
.bathgiant-cart-page .bathgiant-cart-table tr,
.bathgiant-cart-page .bathgiant-cart-table tr.bathgiant-cart-row,
.bathgiant-cart-page .bathgiant-cart-table tbody tr,
.bathgiant-checkout-page .bathgiant-cart-table tbody tr,
.bathgiant-cart-table--extras tbody tr,
.bathgiant-branch-order-collection-table tbody tr,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table):not(.bathgiant-account-orders-table):not(.bathgiant-trade-customers-table):not(.bathgiant-account-quote-detail-table):not(.bathgiant-customer-dashboard__table):not(.bathgiant-trade-quote-builder__table) tbody tr {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 0.85rem;
row-gap: 0.55rem;
padding: 0.95rem 0.95rem 1rem;
margin: 0 0 0.75rem;
background: #fff;
border: 1px solid #e4ebf3;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.bathgiant-branch-order-collection-table tbody tr.bathgiant-branch-collection-line--complete,
.bathgiant-branch-order-collection-table tbody tr.bathgiant-branch-collection-line--partial,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table) tbody tr.bathgiant-branch-collection-line--complete,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table) tbody tr.bathgiant-branch-collection-line--partial {
background: #fff;
}
.bathgiant-branch-order-collection-table tbody tr.bathgiant-branch-collection-line--complete .bathgiant-cart-cell-product,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table) tbody tr.bathgiant-branch-collection-line--complete .bathgiant-cart-cell-product {
box-shadow: inset 3px 0 0 #22c55e;
}
.bathgiant-branch-order-collection-table tbody tr.bathgiant-branch-collection-line--partial .bathgiant-cart-cell-product,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table) tbody tr.bathgiant-branch-collection-line--partial .bathgiant-cart-cell-product {
box-shadow: inset 3px 0 0 #f59e0b;
}
.bathgiant-cart-page .bathgiant-cart-table td,
.bathgiant-cart-page .bathgiant-cart-table tbody td,
.bathgiant-checkout-page .bathgiant-cart-table tbody td,
.bathgiant-cart-table--extras tbody td,
.bathgiant-branch-order-collection-table tbody td,
.bathgiant-cart-table:not(.bathgiant-account-quotes-table):not(.bathgiant-account-orders-table):not(.bathgiant-trade-customers-table):not(.bathgiant-account-quote-detail-table):not(.bathgiant-customer-dashboard__table):not(.bathgiant-trade-quote-builder__table) tbody td {
display: block;
border: 0 !important;
padding: 0;
vertical-align: top;
}
.bathgiant-cart-cell-product {
grid-column: 1 / -1;
padding-bottom: 0.55rem !important;
border-bottom: 1px solid #eef2f7 !important;
margin-bottom: 0.1rem;
}
.bathgiant-cart-cell-qty {
grid-column: 1;
align-self: center;
font-size: 0.92rem;
color: #475569;
}
.bathgiant-cart-cell-qty::before {
content: "Qty: ";
display: inline-block;
margin-right: 0.4rem;
font-weight: 700;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--bathgiant-store-label);
}
.bathgiant-cart-cell-qty input[name^="bg_cart_qty"] {
margin-left: 0.1rem;
width: 4.5rem;
max-width: 100%;
vertical-align: middle;
}
.bathgiant-cart-cell-price {
grid-column: 2;
text-align: right;
align-self: center;
font-size: 1rem;
font-weight: 600;
color: var(--bathgiant-store-ink-strong);
}
.bathgiant-cart-cell-price::before {
content: "Price: ";
display: inline-block;
margin-right: 0.35rem;
font-weight: 700;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--bathgiant-store-label);
vertical-align: middle;
}
.bathgiant-cart-cell-price .bathgiant-cart-line-total {
display: block;
margin-top: 0.25rem;
text-align: right;
}
.bathgiant-cart-cell-line-total {
grid-column: 1 / -1;
text-align: right;
align-self: center;
padding-top: 0.45rem !important;
margin-top: 0.1rem;
border-top: 1px solid #eef2f7 !important;
font-size: 1rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
}
.bathgiant-cart-cell-line-total::before {
content: "Line total: ";
display: inline-block;
margin-right: 0.35rem;
font-weight: 700;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--bathgiant-store-label);
}
.bathgiant-cart-cell-action {
grid-column: 1 / -1;
display: flex !important;
justify-content: flex-end;
padding-top: 0.45rem !important;
border-top: 1px solid #eef2f7 !important;
margin-top: 0.1rem;
}
.bathgiant-cart-page .bathgiant-btn[name="bg_remove_item"] {
flex: 0 0 auto;
padding: 0.45rem 1rem;
font-size: 0.85rem;
}
.bathgiant-cart-line-product {
display: flex;
align-items: flex-start;
gap: 0.7rem;
}
.bathgiant-cart-line-product__body {
min-width: 0;
word-break: break-word;
}
.bathgiant-cart-page .bathgiant-cart-title,
.bathgiant-cart-table .bathgiant-cart-title {
white-space: normal;
line-height: 1.3;
}
.bathgiant-cart-table .bathgiant-cart-line-product .bathgiant-pkg-line__thumb {
flex-shrink: 0;
width: 4rem;
height: 4rem;
}
.bathgiant-cart-page h3.bathgiant-cart-category-heading {
margin-top: 1.2rem;
margin-bottom: 0.4rem;
font-size: 0.92rem;
}
.bathgiant-cart-footer {
margin-top: 1rem;
}
.bathgiant-cart-page .bathgiant-cart-subtotal {
padding: 0.7rem 0.85rem;
text-align: center;
}
.bathgiant-cart-footer__actions {
flex-direction: column;
align-items: stretch;
}
.bathgiant-cart-footer__actions .bathgiant-btn {
width: 100%;
justify-content: center;
}
.bathgiant-cart-line-details {
margin-top: 0.45rem;
padding-top: 0.45rem;
font-size: 0.84rem;
}
.bathgiant-cart-line-details p {
margin: 0.25rem 0;
}
.bathgiant-cart-line-ship {
margin-bottom: 0.15rem;
}
.bathgiant-cart-line-branch-card {
padding: 0.5rem 0.6rem;
}
.bathgiant-cart-line-branch-card__name {
font-size: 0.92rem;
}
.bathgiant-cart-line-branches__list li {
padding: 0.4rem 0.45rem;
font-size: 0.8rem;
}
.bathgiant-cart-cell-qty,
.bathgiant-cart-cell-price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.bathgiant-cart-cell-qty::before,
.bathgiant-cart-cell-price::before {
flex: 0 0 auto;
margin-right: 0;
}
.bathgiant-cart-cell-price {
justify-content: flex-end;
text-align: right;
}
.bathgiant-cart-cell-price .bathgiant-cart-price-line {
align-items: flex-end;
width: 100%;
}
.bathgiant-cart-cell-action {
justify-content: stretch;
}
.bathgiant-cart-cell-qty__inner,
.bathgiant-cart-cell-action__inner,
.bathgiant-cart-cell-price__inner {
min-height: 0;
}
.bathgiant-cart-cell-action__inner {
width: 100%;
justify-content: stretch;
}
.bathgiant-cart-page .bathgiant-btn[name="bg_remove_item"] {
width: 100%;
justify-content: center;
min-height: 2.5rem;
}
}
.bathgiant-cart-line-product {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.bathgiant-cart-line-product__body {
flex: 1 1 0%;
min-width: 0;
}
.bathgiant-cart-table .bathgiant-cart-line-product .bathgiant-pkg-line__thumb {
margin-top: 0.05rem;
}
.bathgiant-quote-items-preview {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
.bathgiant-quote-items-preview .bathgiant-pkg-line__thumb {
flex: 0 0 auto;
width: 2.35rem;
height: 2.35rem;
}
.bathgiant-quote-items-preview__more {
flex: 0 0 auto;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
padding: 0 0.15rem;
white-space: nowrap;
}
.bathgiant-quote-items-preview__empty {
color: #94a3b8;
}
.bathgiant-cart-table .bathgiant-cart-title {
display: inline-block;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
text-decoration: none;
margin-bottom: 0.15rem;
}
.bathgiant-cart-table .bathgiant-cart-title:hover {
color: var(--bathgiant-brand-deep);
text-decoration: underline;
}
.bathgiant-cart-page .bathgiant-cart-title {
display: inline-block;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
text-decoration: none;
margin-bottom: 0.15rem;
}
.bathgiant-cart-page .bathgiant-cart-title:hover {
color: var(--bathgiant-brand-deep);
text-decoration: underline;
}
.bathgiant-cart-page .bathgiant-cart-line-details {
margin-top: 0.55rem;
}
.bathgiant-cart-page input[name^="bg_cart_qty"] {
width: 5.25rem;
max-width: 100%;
border: 1px solid var(--bathgiant-store-border-input);
border-radius: 8px;
padding: 0.45rem 0.5rem;
font: inherit;
background: #fff;
}
.bathgiant-cart-page input[name^="bg_cart_qty"]:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-cart-page .bathgiant-btn[name="bg_remove_item"] {
padding: 0.42rem 0.82rem;
font-size: 0.86rem;
border-radius: 9px;
background: transparent;
border: 1px solid var(--bathgiant-store-border-input, #c8d6e7);
color: var(--bathgiant-store-label, #6a7f99);
box-shadow: none;
transform: none;
}
.bathgiant-cart-page .bathgiant-btn[name="bg_remove_item"]:hover,
.bathgiant-cart-page .bathgiant-btn[name="bg_remove_item"]:focus-visible {
background: #f8fafc;
border-color: #94a3b8;
color: var(--bathgiant-ink-muted, #5c6673);
box-shadow: none;
transform: none;
}
.bathgiant-cart-footer {
margin-top: 1rem;
}
.bathgiant-cart-page .bathgiant-cart-subtotal {
margin: 0 0 0.75rem;
padding: 0.75rem 0.95rem;
border: 1px solid var(--bathgiant-store-surface-border);
border-radius: 10px;
background: var(--bathgiant-store-surface-bg);
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-summary-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 0 0.85rem;
padding: 0.72rem 0.95rem;
border: 1px solid #d9e8dc;
border-radius: 10px;
background: #f7fcf8;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-summary-bar__left {
display: flex;
align-items: center;
min-width: 0;
}
.bathgiant-cart-summary-bar .bathgiant-cart-subtotal {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
white-space: nowrap;
text-align: right;
}
.bathgiant-cart-savings-summary {
margin: 0 0 0.85rem;
padding: 0.72rem 0.95rem;
border: 1px solid #d9e8dc;
border-radius: 10px;
background: #f7fcf8;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-savings-summary__line,
.bathgiant-cart-savings-summary__saved {
margin: 0;
}
.bathgiant-cart-savings-summary__line {
font-size: 0.93rem;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.bathgiant-cart-savings-summary__rrp {
color: #5a6d82;
margin-right: 0.45rem;
}
.bathgiant-cart-savings-summary__saved {
color: #166534;
}
.bathgiant-cart-footer__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.bathgiant-cart-trade-price-slot {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 1.5em;
overflow: hidden;
}
.bathgiant-cart-trade-price-slot__prices {
width: 100%;
text-align: right;
}
.bathgiant-cart-trade-price-slot.is-updating .bathgiant-cart-trade-price-slot__prices {
opacity: 0.28;
filter: blur(0.4px);
pointer-events: none;
user-select: none;
}
.bathgiant-cart-trade-price-overlay {
position: absolute;
inset: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
max-height: 100%;
display: none;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.35rem 0.5rem;
border-radius: 8px;
background: color-mix(in srgb, #fff 82%, var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e)) 18%);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e)) 28%, #e5e7eb);
color: var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e));
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
text-align: center;
pointer-events: none;
overflow: hidden;
}
.bathgiant-cart-trade-price-slot.is-updating .bathgiant-cart-trade-price-overlay {
display: flex;
}
.bathgiant-cart-trade-price-overlay__label {
min-width: 0;
white-space: nowrap;
}
.bathgiant-cart-trade-price-overlay__spinner,
.bathgiant-cart-trade-auto-status__spinner {
display: inline-block;
width: 0.95rem;
height: 0.95rem;
flex-shrink: 0;
border: 2px solid color-mix(in srgb, var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e)) 22%, transparent);
border-top-color: var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e));
border-radius: 50%;
animation: bg2026-cart-trade-spin 0.75s linear infinite;
}
.bathgiant-cart-trade-auto-status {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.75rem;
padding: 0.9rem 1.15rem;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e)) 24%, #e5e7eb);
background: color-mix(in srgb, #fff 88%, var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e)) 12%);
color: var(--bathgiant-brand, var(--bathgiant-trade, #c41e1e));
font-size: 0.88rem;
font-weight: 600;
}
.bathgiant-cart-trade-auto-status.is-hidden,
.bathgiant-cart-trade-auto-status[hidden] {
display: none;
}
.bathgiant-cart-trade-auto-status.is-error {
border-color: color-mix(in srgb, var(--bathgiant-trade, #c41e1e) 35%, #e5e7eb);
background: #fff7f7;
color: var(--bathgiant-trade-hover, #a81818);
font-weight: 500;
}
.bathgiant-cart-row--trade-price-pending .bathgiant-cart-cell-price {
position: relative;
}
@keyframes bg2026-cart-trade-spin {
to {
transform: rotate(360deg);
}
}
.bathgiant-cart-page .bathgiant-cart-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
.bathgiant-cart-page .bathgiant-cart-main,
.bathgiant-cart-page .bathgiant-cart-side {
min-width: 0;
}
.bathgiant-cart-page .bathgiant-cart-journey {
margin: 0 !important;
}
.bathgiant-cart-page .bathgiant-cart-journey fieldset {
margin: 0;
padding: 1rem 1.05rem;
border: 1px solid var(--bathgiant-store-panel-border) !important;
border-radius: 14px;
background: var(--bathgiant-store-panel-bg);
}
.bathgiant-cart-page .bathgiant-cart-journey legend {
padding: 0 0.35rem;
color: var(--bathgiant-store-ink);
font-size: 1rem;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
}
.bathgiant-cart-page .bathgiant-cart-journey p {
margin: 0.75rem 0;
}
.bathgiant-fulfillment-toggle {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin: 0.75rem 0;
}
.bathgiant-fulfillment-toggle__primary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.bathgiant-fulfillment-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-fulfillment-option {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.8rem;
padding: 0.65rem 0.8rem;
border: 1px solid var(--bathgiant-store-border-input);
border-radius: 10px;
background: #fff;
color: #334155;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-fulfillment-option__text {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.bathgiant-fulfillment-option:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #fff);
color: var(--bathgiant-store-ink);
}
.bathgiant-fulfillment-option.is-selected,
.bathgiant-fulfillment-option:has(.bathgiant-fulfillment-radio:checked) {
border-color: var(--bathgiant-brand);
background: linear-gradient(180deg, var(--bathgiant-brand-wash) 0%, #fff 100%);
color: var(--bathgiant-nav-ink);
box-shadow: 0 0 0 2px var(--bathgiant-brand-focus-ring);
}
.bathgiant-fulfillment-option:focus-within:has(.bathgiant-fulfillment-radio:focus-visible) {
outline: 2px solid var(--bathgiant-brand);
outline-offset: 2px;
}
.bathgiant-cart-page #bathgiant-cart-delivery-postcode,
.bathgiant-cart-page #bathgiant-cart-collection-branch,
.bathgiant-cart-page #bathgiant-quote-delivery-postcode,
.bathgiant-cart-page #bathgiant-quote-collection-branch,
.bathgiant-cart-page .bathgiant-cart-fulfillment__postcode,
.bathgiant-cart-page .bathgiant-cart-fulfillment__branch-select {
box-sizing: border-box;
min-width: 0;
border: 1px solid var(--bathgiant-store-border-input);
border-radius: 8px;
padding: 0.52rem 0.6rem;
font: inherit;
background: #fff;
max-width: 100%;
width: 100%;
}
.bathgiant-cart-page .bathgiant-cart-fulfillment__postcode,
.bathgiant-cart-page #bathgiant-cart-delivery-postcode,
.bathgiant-cart-page #bathgiant-quote-delivery-postcode {
width: min(100%, 12rem);
max-width: 100%;
}
.bathgiant-cart-page #bathgiant-cart-delivery-postcode:focus,
.bathgiant-cart-page #bathgiant-cart-collection-branch:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-cart-fulfillment__collection-hint {
margin: 0.5rem 0 0;
padding: 0.65rem 0.8rem;
border-radius: 10px;
font-size: 0.9rem;
line-height: 1.4;
color: var(--bathgiant-store-ink);
background: var(--bathgiant-brand-wash);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 24%, transparent);
}
.bathgiant-cart-page .bathgiant-cart-branch-helper {
margin: -0.2rem 0 0.65rem;
font-size: 0.9rem;
color: var(--bathgiant-store-muted);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-result {
margin: 0.7rem 0 0.9rem;
padding: 0.8rem 0.9rem;
border: 1px solid var(--bathgiant-store-check-border);
border-radius: 10px;
background: var(--bathgiant-store-check-bg);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-result:empty {
display: none;
}
.bathgiant-cart-fulfillment__postcode-status {
margin: 0.45rem 0 0.75rem;
}
.bathgiant-cart-fulfillment__postcode-status:empty {
display: none;
}
.bathgiant-cart-fulfillment__postcode-status p {
margin: 0;
padding: 0.65rem 0.8rem;
border-radius: 10px;
font-size: 0.9rem;
line-height: 1.4;
}
.bathgiant-cart-fulfillment__postcode-status--ok {
color: #166534;
background: #ecfdf3;
border: 1px solid #bbf7d0;
}
.bathgiant-cart-fulfillment__postcode-status--blocked {
color: #9f1239;
background: #fff1f2;
border: 1px solid #fecdd3;
}
.bathgiant-cart-fulfillment__postcode-action {
margin: 0.55rem 0 0;
}
.bathgiant-cart-fulfillment__postcode-action .bathgiant-btn {
width: 100%;
}
.bathgiant-cart-fulfillment__mix-notices {
display: grid;
gap: 0.65rem;
margin: 0 0 1rem;
}
.bathgiant-cart-fulfillment__mix-notice {
margin: 0;
padding: 0.75rem 0.85rem;
border-radius: 8px;
border: 1px solid #dbe3ec;
background: #f8fafc;
font-size: 0.8rem;
line-height: 1.45;
}
.bathgiant-cart-fulfillment__mix-notice--warning {
border-color: #fcd34d;
background: #fffbeb;
color: #92400e;
}
.bathgiant-cart-fulfillment__mix-notice--info {
border-color: #bfdbfe;
background: #eff6ff;
color: #1e40af;
}
.bathgiant-cart-fulfillment__mix-notice-text {
margin: 0;
}
.bathgiant-cart-fulfillment__mix-notice-items {
margin-top: 0.5rem;
font-size: 0.85rem;
}
.bathgiant-cart-fulfillment__mix-notice-items summary {
cursor: pointer;
font-weight: 600;
}
.bathgiant-cart-fulfillment__mix-notice-items ul {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
}
.bathgiant-checkout-choices .bathgiant-cart-collect-availability {
margin: 0.85rem 0 0;
}
.bathgiant-checkout-payment-choice {
margin: 0 0 1rem;
padding: 1rem;
border: 1px solid var(--bathgiant-store-border-input);
border-radius: 14px;
background: color-mix(in srgb, var(--bathgiant-brand-wash) 58%, #fff);
}
.bathgiant-checkout-payment-choice__lead {
margin: 0 0 0.25rem;
font-size: 1.05rem;
}
.bathgiant-checkout-payment-choice__hint {
margin: 0 0 0.9rem;
}
.bathgiant-checkout-payment__card-detail[hidden],
.bathgiant-checkout-terms-panel[hidden] {
display: none !important;
}
.bathgiant-checkout-payment-choice + .bathgiant-checkout-payment__selected-detail {
margin-top: -0.35rem;
padding: 0.85rem 1rem;
border: 1px solid var(--bathgiant-store-border-input);
border-left: 4px solid var(--bathgiant-brand);
border-radius: 0 10px 10px 0;
background: #fff;
}
.bathgiant-checkout-payment__selected-detail > :first-child {
margin-top: 0;
}
.bathgiant-checkout-payment__selected-detail > :last-child {
margin-bottom: 0;
}
.bathgiant-checkout-terms-panel__body {
margin: 0 0 0.75rem;
}
.bathgiant-checkout-terms-panel__body p:last-child {
margin-bottom: 0;
}
.bathgiant-checkout-terms-panel__accept {
margin: 0;
}
.bathgiant-cart-page .bathgiant-cart-journey .bathgiant-cart-side__pay-later-hint {
margin: 0.75rem 0 0;
padding: 0.55rem 0.7rem 0.55rem 0.8rem;
border-radius: 8px;
border: 1px solid var(--bathgiant-info-surface-border);
border-left: 3px solid color-mix(in srgb, var(--bathgiant-store-ink) 32%, var(--bathgiant-info-surface-border));
background: var(--bathgiant-info-surface);
color: var(--bathgiant-info-surface-text);
font-family: var(--bathgiant-font-sans);
font-size: 0.84rem;
font-weight: 400;
line-height: 1.45;
}
.bathgiant-payment-choice-toggle {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
.bathgiant-payment-choice-radio {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.bathgiant-payment-choice-option {
position: relative;
display: grid;
grid-template-columns: 1.25rem auto minmax(0, 1fr);
gap: 0.7rem;
align-items: start;
margin: 0;
padding: 1rem;
border: 2px solid var(--bathgiant-store-border-input);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bathgiant-payment-choice-option:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand) 55%, #fff);
transform: translateY(-1px);
}
.bathgiant-payment-choice-option:focus-within {
outline: 3px solid var(--bathgiant-brand-focus-ring-strong);
outline-offset: 2px;
}
.bathgiant-payment-choice-option.is-selected,
.bathgiant-payment-choice-option:has(.bathgiant-payment-choice-radio:checked) {
border-color: var(--bathgiant-brand);
background: linear-gradient(180deg, var(--bathgiant-brand-wash) 0%, #fff 100%);
box-shadow: 0 5px 16px var(--bathgiant-brand-focus-ring);
}
.bathgiant-payment-choice-option__marker {
position: relative;
display: block;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.12rem;
border: 2px solid #94a3b8;
border-radius: 50%;
background: #fff;
box-sizing: border-box;
}
.bathgiant-payment-choice-option.is-selected .bathgiant-payment-choice-option__marker,
.bathgiant-payment-choice-option:has(.bathgiant-payment-choice-radio:checked) .bathgiant-payment-choice-option__marker {
border-color: var(--bathgiant-brand);
}
.bathgiant-payment-choice-option.is-selected .bathgiant-payment-choice-option__marker::after,
.bathgiant-payment-choice-option:has(.bathgiant-payment-choice-radio:checked) .bathgiant-payment-choice-option__marker::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--bathgiant-brand);
}
.bathgiant-payment-choice-option__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-top: -0.25rem;
border-radius: 8px;
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand);
}
.bathgiant-payment-choice-option__icon .bathgiant-cta-icon {
display: inline-flex;
}
.bathgiant-payment-choice-option__marker + .bathgiant-payment-choice-option__body {
grid-column: 2 / -1;
}
.bathgiant-payment-choice-option__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.bathgiant-payment-choice-option__title {
font-size: 1.02rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-payment-choice-option__action {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.35;
color: var(--bathgiant-brand);
}
.bathgiant-payment-choice-option__text {
font-size: 0.88rem;
line-height: 1.45;
color: #475569;
}
@media (min-width: 640px) {
.bathgiant-payment-choice-toggle {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.bathgiant-branch-status-badge--pay-on-collection,
.bathgiant-branch-status-badge--pay-later {
background: #fff7ed;
color: #9a3412;
border-color: #fdba74;
}
.bathgiant-branch-status-badge--branch-delivery-unpaid {
background: #fef3c7;
color: #92400e;
border-color: #fcd34d;
}
.bathgiant-branch-status-badge--branch-delivery-paid {
background: #ecfdf3;
color: #166534;
border-color: #bbf7d0;
}
.bathgiant-branch-order-detail__payment-actions {
margin: 0 0 1rem;
}
.bathgiant-branch-order-detail__payment-actions .bathgiant-branch-order-payment__mark {
padding:1.9rem 0;
}
.bathgiant-cart-collect-availability__summary {
margin: 0 0 0.65rem;
padding: 0.65rem 0.8rem;
border-radius: 10px;
font-size: 0.92rem;
line-height: 1.45;
scroll-margin-top: 5.5rem;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.bathgiant-cart-collect-availability__summary.is-branch-highlight {
animation: bathgiant-cart-branch-summary-flash 2.2s ease;
}
.bathgiant-cart-collect-availability__summary--all {
color: #166534;
background: #ecfdf3;
border: 1px solid #bbf7d0;
}
.bathgiant-cart-collect-availability__summary--partial {
color: #92400e;
background: #fffbeb;
border: 1px solid #fde68a;
}
.bathgiant-cart-collect-availability__summary--lead {
color: #1e3a5f;
background: var(--bathgiant-brand-wash);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 24%, transparent);
}
.bathgiant-cart-collect-availability__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.45rem;
}
.bathgiant-cart-collect-availability__item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.45rem 0.75rem;
padding: 0.65rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
}
.bathgiant-cart-collect-availability__item.is-ready {
border-color: #bbf7d0;
background: #f0fdf4;
}
.bathgiant-cart-collect-availability__item.is-lead {
border-color: #fde68a;
background: #fffbeb;
}
.bathgiant-cart-collect-availability__item-main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.6rem;
min-width: 0;
flex: 1 1 12rem;
}
.bathgiant-cart-collect-availability__title {
font-weight: 600;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-collect-availability__qty {
color: var(--bathgiant-store-muted);
font-size: 0.9rem;
}
.bathgiant-cart-collect-availability__badge {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.bathgiant-cart-collect-availability__item.is-ready .bathgiant-cart-collect-availability__badge {
background: #dcfce7;
color: #166534;
}
.bathgiant-cart-collect-availability__item.is-lead .bathgiant-cart-collect-availability__badge {
background: #fef3c7;
color: #92400e;
}
.bathgiant-cart-collect-availability__note {
margin: 0.65rem 0 0;
}
.bathgiant-cart-fulfillment__collect-lines {
margin-top: 0.75rem;
}
.bathgiant-checkout-choices .bathgiant-cart-fulfillment__mix-notices {
margin-top: 0.85rem;
}
.bathgiant-cart-fulfillment__postcode-status--pending {
color: var(--bathgiant-store-muted);
background: var(--bathgiant-store-check-bg);
border: 1px solid var(--bathgiant-store-check-border);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-title {
margin: 0;
color: var(--bathgiant-store-ink);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-note {
margin: 0.35rem 0 0;
font-size: 0.86rem;
color: var(--bathgiant-store-muted);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-list {
list-style: none;
margin: 0.65rem 0 0;
padding: 0;
display: grid;
gap: 0.45rem;
}
.bathgiant-cart-page .bathgiant-cart-branch-check-list li {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
padding: 0.5rem 0.6rem;
border: 1px solid #e0e9f4;
border-radius: 8px;
background: #fff;
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item.is-ok {
border-color: #bbf7d0;
background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item.is-partial {
border-color: #bfdbfe;
background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item.is-lead {
border-color: #fde68a;
background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item.is-home-branch {
box-shadow: inset 3px 0 0 var(--bathgiant-brand-deep);
padding-left: 0.75rem;
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item.is-selected {
border-color: var(--bathgiant-brand-deep);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand-deep) 22%, transparent), inset 3px 0 0 var(--bathgiant-brand-deep);
}
.bathgiant-cart-page .bathgiant-cart-branch-pick.is-selected {
background: var(--bathgiant-brand-deep);
border-color: var(--bathgiant-brand-deep);
color: #fff;
}
.bathgiant-cart-page .bathgiant-cart-branch-pick.is-selected::after {
content: ' ✓';
}
.bathgiant-cart-fulfillment__collection-panel {
margin-top: 0.15rem;
padding: 0.85rem 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
scroll-margin-top: 5.5rem;
}
.bathgiant-cart-fulfillment__collection-panel .bathgiant-cart-collection-branch {
margin: 0;
}
@keyframes bathgiant-cart-branch-summary-flash {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--bathgiant-brand-deep) 35%, transparent);
}
18% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bathgiant-brand-deep) 24%, transparent);
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.bathgiant-cart-page .bathgiant-cart-branch-check-item__main {
display: grid;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-cart-page .bathgiant-cart-branch-home-tag {
display: inline-block;
margin-left: 0.25rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--bathgiant-store-muted);
text-transform: lowercase;
}
.bathgiant-cart-page .bathgiant-cart-branch-stock {
display: block;
font-size: 0.84rem;
line-height: 1.35;
}
.bathgiant-cart-page .bathgiant-cart-branch-stock__line {
display: block;
}
.bathgiant-cart-collect-availability__summary-line {
display: block;
}
.bathgiant-cart-page .bathgiant-cart-branch-stock--all {
color: #166534;
font-weight: 600;
}
.bathgiant-cart-page .bathgiant-cart-branch-stock--partial {
color: #1d4ed8;
font-weight: 600;
}
.bathgiant-cart-page .bathgiant-cart-branch-stock--lead {
color: #92400e;
}
.bathgiant-cart-page .bathgiant-cart-branch-distance {
color: var(--bathgiant-store-muted);
font-size: 0.9em;
}
.bathgiant-cart-page .bathgiant-cart-branch-pick {
box-shadow: none;
transform: none;
padding: 0.35rem 0.7rem;
font-size: 0.8rem;
border-radius: 8px;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout {
margin-bottom: 1rem;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout .bathgiant-cart-journey {
display: flex;
flex-direction: column;
gap: 0;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout[hidden] {
display: none !important;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout-submit {
margin: 0.65rem 0 0;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout-submit .bathgiant-btn:disabled,
.bathgiant-cart-page .bathgiant-cart-side__checkout-submit .bathgiant-btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.bathgiant-cart-page .bathgiant-cart-side .bathgiant-quote-panel {
margin-top: 0;
}
.bathgiant-cart-page .bathgiant-cart-side--quote-open .bathgiant-quote-panel--cart {
margin-top: 0;
}
.bathgiant-cart-page .bathgiant-cart-side .bathgiant-quote-panel--cart {
margin-top: 1.15rem;
}
.bathgiant-quote-panel--cart.bathgiant-checkout-quote-card {
padding: 0;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__details {
border: 0;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.1rem;
cursor: pointer;
list-style: none;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__summary::-webkit-details-marker {
display: none;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__summary-title {
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
color: var(--bathgiant-store-ink);
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__summary-hint {
flex-shrink: 0;
font-size: 0.85rem;
color: var(--bathgiant-store-muted);
white-space: nowrap;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__summary-hint--hide {
display: none;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__details[open] .bathgiant-quote-panel__summary-hint--show {
display: none;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__details[open] .bathgiant-quote-panel__summary-hint--hide {
display: inline;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__body {
padding: 0 1.1rem 1.1rem;
border-top: 1px solid #e8edf3;
min-width: 0;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__body .bathgiant-checkout-quote-card__lead {
margin-top: 0.85rem;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__back-row {
margin: 0 0 0.85rem;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__back-checkout {
width: 100%;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__fulfillment {
margin: 0 0 1rem;
padding: 0.85rem 0.95rem;
border: 1px solid var(--bathgiant-store-panel-border);
border-radius: 12px;
background: var(--bathgiant-store-panel-bg);
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__fulfillment .bathgiant-cart-fulfillment {
min-width: 0;
max-width: 100%;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__fulfillment .bathgiant-cart-fulfillment > p {
min-width: 0;
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__fulfillment legend {
padding: 0 0.25rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-quote-panel--cart .bathgiant-quote-panel__fulfillment .bathgiant-cart-fulfillment > p {
margin: 0.65rem 0;
}
.bathgiant-cart-side--quote-open .bathgiant-quote-panel__details[open] {
scroll-margin-top: 1rem;
}
.bathgiant-quote-edit-banner {
margin: 0 0 1.15rem;
padding: 1rem 1.1rem;
border: 1px solid var(--bathgiant-store-banner-border);
border-radius: 10px;
background: var(--bathgiant-store-banner-bg);
}
.bathgiant-quote-edit-banner__title {
margin: 0 0 0.35rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-quote-edit-banner__text {
margin: 0 0 0.5rem;
color: #475569;
font-size: 0.95rem;
line-height: 1.45;
}
.bathgiant-quote-edit-banner__cancel {
margin: 0;
font-size: 0.9rem;
}
.bathgiant-quote-edit-panel {
margin-top: 0;
}
.bathgiant-quote-edit-panel .bathgiant-quote-edit-form {
margin: 0;
}
.bathgiant-quote-edit-workspace {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bathgiant-quote-edit-quick-add {
margin: 0;
}
.bathgiant-quote-edit-quick-add__header {
margin: 0 0 0.85rem;
}
.bathgiant-quote-edit-quick-add__title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-quote-edit-quick-add__lead {
margin: 0;
color: #475569;
font-size: 0.93rem;
line-height: 1.45;
}
.bathgiant-quote-edit-quick-add__search {
margin: 0;
}
.bathgiant-quote-edit-quick-add__input {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.62rem 0.85rem;
border: 1px solid #cbd5e1;
border-radius: 10px;
font: inherit;
color: var(--bathgiant-store-ink);
background: #fff;
}
.bathgiant-quote-edit-quick-add__input:focus {
outline: 2px solid var(--bathgiant-brand, #7f1d3a);
outline-offset: 1px;
border-color: #94a3b8;
}
.bathgiant-quote-edit-quick-add__results {
margin-top: 0.75rem;
}
.bathgiant-quote-edit-quick-add__message {
margin: 0;
padding: 0.65rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
color: #475569;
font-size: 0.92rem;
}
.bathgiant-quote-edit-quick-add__list {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.bathgiant-quote-edit-quick-add__item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem 1rem;
padding: 0.7rem 0.85rem;
border-top: 1px solid #eef2f7;
}
.bathgiant-quote-edit-quick-add__item:first-child {
border-top: 0;
}
.bathgiant-quote-edit-quick-add__thumb {
flex: 0 0 48px;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 6px;
background: #f1f5f9;
}
.bathgiant-quote-edit-quick-add__thumb--empty {
display: block;
}
.bathgiant-quote-edit-quick-add__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.65rem 1.25rem;
align-items: center;
min-width: 0;
}
.bathgiant-quote-edit-quick-add__copy,
.bathgiant-quote-edit-quick-add__meta {
min-width: 0;
}
.bathgiant-quote-edit-quick-add__title {
display: -webkit-box;
font-weight: 600;
color: var(--bathgiant-store-ink);
line-height: 1.35;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.bathgiant-quote-edit-quick-add__details {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.65rem;
margin-top: 0.15rem;
font-size: 0.86rem;
color: #64748b;
}
.bathgiant-quote-edit-quick-add__sku {
display: block;
margin-top: 0.18rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.76rem;
color: #64748b;
word-break: break-word;
}
.bathgiant-quote-edit-quick-add__price-wrap {
justify-self: end;
text-align: right;
}
.bathgiant-quote-edit-quick-add__price {
font-weight: 700;
color: #334155;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.bathgiant-quote-edit-quick-add__add {
flex: 0 0 auto;
white-space: nowrap;
}
.bathgiant-quote-edit-quick-add__add.is-adding {
opacity: 0.75;
}
.bathgiant-quote-edit-quick-add__browse {
margin: 0.85rem 0 0;
}
.bathgiant-quote-edit-actions__lead,
.bathgiant-quote-edit-actions__hint {
margin: 0 0 0.5rem;
}
.bathgiant-quote-edit-actions__submit {
margin: 0.85rem 0 0;
}
.bathgiant-cart-page--quote-edit-branch .bathgiant-cart-layout {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-footer {
margin-top: 0;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-summary-bar {
margin-bottom: 0.75rem;
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-footer__actions {
margin-top: 0;
}
.bathgiant-cart-page--quote-edit .bathgiant-quote-edit-panel {
margin-top: 0;
}
@media (max-width: 720px) {
.bathgiant-quote-edit-workspace {
gap: 1rem;
min-width: 0;
}
.bathgiant-quote-edit-banner {
padding: 0.85rem 0.9rem;
}
.bathgiant-quote-edit-quick-add.bathgiant-card,
.bathgiant-quote-edit-panel.bathgiant-card {
padding: 0.95rem 0.9rem;
min-width: 0;
}
.bathgiant-quote-edit-quick-add__item {
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 0.65rem 0.75rem;
}
.bathgiant-quote-edit-quick-add__body {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.bathgiant-quote-edit-quick-add__price-wrap {
justify-self: start;
text-align: left;
}
.bathgiant-quote-edit-quick-add__add {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
text-align: center;
white-space: normal;
}
.bathgiant-quote-edit-quick-add__browse .bathgiant-btn,
.bathgiant-quote-edit-actions__submit .bathgiant-btn,
.bathgiant-cart-page--quote-edit .bathgiant-quote-edit-panel .bathgiant-btn {
width: 100%;
box-sizing: border-box;
justify-content: center;
white-space: normal;
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-footer__actions {
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-footer__actions .bathgiant-btn {
width: 100%;
justify-content: center;
}
.bathgiant-cart-page--quote-edit .bathgiant-cart-summary-bar {
flex-wrap: wrap;
gap: 0.5rem;
}
}
@media (min-width: 1100px) {
.bathgiant-cart-page .bathgiant-cart-layout {
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
gap: 1.25rem;
}
.bathgiant-cart-page .bathgiant-cart-side {
align-self: start;
display: flex;
flex-direction: column;
gap: 0;
}
.bathgiant-cart-page .bathgiant-cart-side__checkout-submit {
position: sticky;
bottom: 1rem; z-index: 10;
margin: 0.5rem 0 0;
padding: 0.85rem 0 0.35rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bathgiant-store-panel-bg) 0%, transparent) 0%,
var(--bathgiant-store-panel-bg) 32%
);
}
.bathgiant-cart-page .bathgiant-cart-side__checkout-submit .bathgiant-btn {
width: 100%;
box-sizing: border-box;
}
}
.bathgiant-cart-extras {
margin-top: 1.25rem;
padding: 1.25rem 0 0;
border-top: 1px solid #e2e8f0;
}
.bathgiant-cart-extras__heading {
display: flex;
align-items: center;
gap: 0.6rem;
}
.bathgiant-cart-extras__badge {
display: inline-block;
font-family: var(--bathgiant-font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.2em 0.55em;
border-radius: 4px;
background: var(--bathgiant-info-surface-border);
color: var(--bathgiant-info-surface-text);
vertical-align: middle;
}
.bathgiant-cart-table--extras .bathgiant-cart-row--extra {
background: #f8fafc;
}
.bathgiant-cart-page .bathgiant-cart-table--extras .bathgiant-cart-col-price,
.bathgiant-cart-table--extras .bathgiant-cart-col-price {
width: 12.5rem;
}
.bathgiant-cart-page .bathgiant-cart-table--extras .bathgiant-cart-col-action,
.bathgiant-cart-table--extras .bathgiant-cart-col-action {
width: 9.5rem;
}
.bathgiant-cart-table--extras td.bathgiant-cart-cell-price,
.bathgiant-cart-table--extras .bathgiant-cart-extras__price-stack {
font-variant-numeric: tabular-nums;
}
.bathgiant-cart-extras__price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.12rem;
width: 100%;
text-align: right;
}
.bathgiant-cart-extras__price-stack .bathgiant-cart-price-line {
align-items: flex-end;
}
.bathgiant-cart-extras__price-stack .bathgiant-cart-line-total {
display: block;
}
.bathgiant-storefront-line-price-saved,
.bathgiant-cart-extras__price-stack .bathgiant-storefront-line-price-saved {
display: block;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.3;
color: #166534;
white-space: nowrap;
}
.bathgiant-cart-extras__price-stack .bathgiant-price-vat-label {
display: inline;
font-size: 0.72rem;
line-height: 1.3;
}
.bathgiant-cart-extras__sku {
color: #64748b;
font-size: 0.78rem;
}
@media (max-width: 640px) {
.bathgiant-cart-table--extras .bathgiant-cart-cell-price::before {
align-self: flex-start;
margin-top: 0.15rem;
}
.bathgiant-cart-table--extras .bathgiant-cart-extras__price-stack {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-cart-table--extras .bathgiant-cart-cell-action .bathgiant-extra-add-btn {
width: 100%;
justify-content: center;
min-height: 2.5rem;
}
}
.bathgiant-extra-add-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 5.5rem;
transition: background 0.2s, opacity 0.2s;
}
.bathgiant-extra-add-btn__spinner {
display: none;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: bg-spin 0.6s linear infinite;
}
.bathgiant-extra-add-btn.is-adding {
pointer-events: none;
opacity: 0.8;
}
.bathgiant-extra-add-btn.is-adding .bathgiant-extra-add-btn__label {
opacity: 0.6;
}
.bathgiant-extra-add-btn.is-adding .bathgiant-extra-add-btn__spinner {
display: inline-block;
}
.bathgiant-extra-add-btn.is-added {
background: #16a34a;
pointer-events: none;
}
.bathgiant-cart-row--extra.is-added-row {
opacity: 0.5;
transition: opacity 0.4s;
}
.bathgiant-btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.75rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
color: #fff;
background: var(--bathgiant-color-primary, #1e3a5f);
border: none;
border-radius: var(--bathgiant-radius-sm, 4px);
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
}
.bathgiant-btn-sm:hover {
background: var(--bathgiant-color-primary-dark, #162d4a);
} .bathgiant-pkg-line__add-btn {
position: relative;
min-width: 5.5rem;
gap: 0.35rem;
transition: background 0.2s, color 0.2s, transform 0.15s;
}
.bathgiant-pkg-line__add-spinner,
.bathgiant-pkg-add-all__spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: bg-spin 0.6s linear infinite;
}
@keyframes bg-spin {
to { transform: rotate(360deg); }
}
.bathgiant-pkg-line__add-btn.is-adding .bathgiant-pkg-line__add-label,
.bathgiant-pkg-add-all.is-adding .bathgiant-pkg-add-all__label {
opacity: 0.6;
}
.bathgiant-pkg-line__add-btn.is-adding .bathgiant-pkg-line__add-spinner,
.bathgiant-pkg-add-all.is-adding .bathgiant-pkg-add-all__spinner {
display: inline-block;
}
.bathgiant-pkg-line__add-btn.is-adding,
.bathgiant-pkg-add-all.is-adding {
pointer-events: none;
opacity: 0.85;
}
.bathgiant-pkg-line__add-btn.is-in-cart {
background: #16a34a;
pointer-events: none;
}
.bathgiant-pkg-line__add-btn.is-in-cart .bathgiant-pkg-line__add-label::before {
content: none;
}
.bathgiant-pkg-add-all {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
font-size: 1rem;
}
.bathgiant-pkg-add-all.is-in-cart {
background: #16a34a;
cursor: pointer;
}
.bathgiant-pkg-add-all.is-in-cart:hover {
background: #15803d;
}
.bathgiant-pkg-add-all.is-in-cart .bathgiant-pkg-add-all__label::before {
content: "\2713\00a0";
}
@media (max-width: 760px) {
.bathgiant-cart-page .bathgiant-cart-branch-check-list li {
flex-direction: column;
align-items: flex-start;
}
} .bathgiant-checkout,
.bathgiant-checkout-page {
margin: var(--bathgiant-space-section) 0 calc(var(--bathgiant-space-section) + 0.5rem);
}
.bathgiant-checkout-main__title {
margin: 0 0 1rem;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.2;
color: var(--bathgiant-store-ink);
}
.bathgiant-checkout .description {
color: var(--bathgiant-store-muted);
}
.bathgiant-checkout-page .bathgiant-checkout-summary {
margin: 0;
padding: 1rem 1.05rem 0.9rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-checkout:not(.bathgiant-checkout-page) .bathgiant-checkout-summary {
padding: 1rem 1.05rem;
border: 1px solid #dce7f4;
border-radius: 14px;
background: var(--bathgiant-store-panel-bg-alt);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.bathgiant-checkout-summary__total {
margin: 0;
font-size: 1.05rem;
color: var(--bathgiant-store-ink);
line-height: 1.4;
}
.bathgiant-checkout-summary__amount {
display: block;
margin-top: 0.2rem;
font-size: clamp(1.35rem, 2.5vw, 1.65rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.bathgiant-checkout-summary__note {
margin: 0.55rem 0 0 !important;
font-size: 0.88rem;
line-height: 1.45;
}
.bathgiant-checkout-page .bathgiant-checkout-basket-cta {
margin: 0;
padding: 0.85rem 1.05rem 0;
background: #fff;
border-top: 1px solid #e2e8f0;
}
.bathgiant-checkout-basket-cta__heading {
margin: 0 0 0.2rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-checkout-basket-cta__meta {
margin: 0 0 0.65rem !important;
font-size: 0.88rem;
line-height: 1.45;
}
.bathgiant-checkout-basket-cta .bathgiant-checkout-side__cart-link {
padding: 0 0 1rem;
border-top: 0;
background: transparent;
}
.bathgiant-checkout-page .bathgiant-checkout-review {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: none;
}
.bathgiant-checkout:not(.bathgiant-checkout-page) .bathgiant-checkout-review {
margin: 0;
padding: 0.95rem;
border: 1px solid #dce6f2;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.bathgiant-checkout-page .bathgiant-checkout-review__summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.8rem;
padding: 0.85rem 1.05rem;
cursor: pointer;
list-style: none;
border-bottom: 1px solid transparent;
}
.bathgiant-checkout-page .bathgiant-checkout-review[open] .bathgiant-checkout-review__summary {
border-bottom-color: #e8edf3;
}
.bathgiant-checkout .bathgiant-checkout-review__summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.8rem;
cursor: pointer;
list-style: none;
}
.bathgiant-checkout .bathgiant-checkout-review__summary::-webkit-details-marker {
display: none;
}
.bathgiant-checkout .bathgiant-checkout-review__summary-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
}
.bathgiant-checkout .bathgiant-checkout-review__summary-hint {
font-size: 0.85rem;
color: var(--bathgiant-store-muted);
}
.bathgiant-checkout-page .bathgiant-checkout-review__body {
margin-top: 0;
padding: 0.65rem 1.05rem 1rem;
max-height: min(42vh, 380px);
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bathgiant-checkout .bathgiant-checkout-review__body {
margin-top: 0.7rem;
}
.bathgiant-checkout .bathgiant-checkout-review__body > h3 {
margin: 1rem 0 0.4rem;
padding: 0;
font-size: 0.92rem;
font-weight: 700;
color: var(--bathgiant-store-ink);
background: none;
border: none;
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset {
margin: 0 0 1rem !important;
padding: 1rem 1.05rem !important;
border: 1px solid var(--bathgiant-store-panel-border) !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%) !important;
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.035);
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset:last-of-type {
margin-bottom: 0.7rem !important;
}
.bathgiant-checkout .bathgiant-checkout-form legend {
padding: 0 0.35rem;
color: var(--bathgiant-store-ink);
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset > p {
margin: 0.75rem 0;
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset > p:first-of-type {
margin-top: 0.45rem;
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset > p:last-of-type {
margin-bottom: 0;
}
.bathgiant-checkout .bathgiant-checkout-form label {
font-weight: 600;
color: #1f2f46;
}
.bathgiant-checkout .bathgiant-checkout-form input[type="text"],
.bathgiant-checkout .bathgiant-checkout-form input[type="email"],
.bathgiant-checkout .bathgiant-checkout-form input[type="tel"],
.bathgiant-checkout .bathgiant-checkout-form input[type="search"],
.bathgiant-checkout .bathgiant-checkout-form select {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid var(--bathgiant-store-border-input);
border-radius: 8px;
padding: 0.56rem 0.62rem;
font: inherit;
color: var(--bathgiant-ink);
background: #fff;
}
.bathgiant-checkout .bathgiant-checkout-form input[type="text"]:focus,
.bathgiant-checkout .bathgiant-checkout-form input[type="email"]:focus,
.bathgiant-checkout .bathgiant-checkout-form input[type="tel"]:focus,
.bathgiant-checkout .bathgiant-checkout-form input[type="search"]:focus,
.bathgiant-checkout .bathgiant-checkout-form select:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-checkout .bathgiant-checkout-payment {
border-color: var(--bathgiant-store-panel-border) !important;
border-radius: 14px !important;
background: var(--bathgiant-store-panel-bg) !important;
}
.bathgiant-checkout .bathgiant-checkout-policy-strip {
margin-top: 0.65rem;
}
.bathgiant-checkout .bathgiant-checkout-form > p:last-of-type {
margin: 0.7rem 0 0;
}
.bathgiant-checkout .bathgiant-checkout-form > p:last-of-type .bathgiant-btn {
min-width: min(100%, 18rem);
}
@media (min-width: 920px) {
.bathgiant-checkout .bathgiant-checkout-form__billing {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1rem;
}
.bathgiant-checkout .bathgiant-checkout-form__billing > legend,
.bathgiant-checkout .bathgiant-checkout-form__billing > p.description,
.bathgiant-checkout .bathgiant-checkout-form__billing > .bathgiant-checkout-form__address-step,
.bathgiant-checkout .bathgiant-checkout-form__billing > .bathgiant-checkout-form__address-fields {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.bathgiant-checkout .bathgiant-checkout-review,
.bathgiant-checkout .bathgiant-checkout-summary,
.bathgiant-checkout .bathgiant-checkout-form > fieldset {
border-radius: 12px !important;
}
.bathgiant-checkout .bathgiant-checkout-form > fieldset {
padding: 0.85rem !important;
}
} .bathgiant-checkout-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
.bathgiant-checkout-side,
.bathgiant-checkout-main {
min-width: 0;
align-self: start;
}
.bathgiant-checkout-side__stack {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid var(--bathgiant-store-panel-border);
border-radius: 14px;
background: var(--bathgiant-store-panel-bg);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.bathgiant-checkout-side__cart-link {
margin: 0;
padding: 0.85rem 1.05rem 1rem;
background: #fff;
border-top: 1px solid #e2e8f0;
}
.bathgiant-checkout-side__cart-link .bathgiant-btn {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 35px);
max-width: calc(100% - 35px);
box-sizing: border-box;
margin: 0 auto;
}
.bathgiant-checkout-side__cart-link .bathgiant-btn-secondary {
background: #fff;
color: var(--bathgiant-store-ink);
border: 1px solid var(--bathgiant-store-border-input);
box-shadow: none;
transform: none;
}
.bathgiant-checkout-side__cart-link .bathgiant-btn-secondary:hover {
background: #f8fafc;
color: var(--bathgiant-nav-ink);
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #fff);
box-shadow: none;
transform: none;
}
.bathgiant-checkout-page .bathgiant-checkout-review__body .bathgiant-cart-table {
font-size: 0.88rem;
width: 100%;
}
.bathgiant-checkout-page .bathgiant-checkout-review__body .bathgiant-cart-table th,
.bathgiant-checkout-page .bathgiant-checkout-review__body .bathgiant-cart-table td {
padding: 0.5rem 0.45rem;
}
.bathgiant-checkout-form__postcode {
max-width: 12rem;
}
.bathgiant-checkout-form__country {
max-width: 5rem;
text-transform: uppercase;
}
.bathgiant-checkout-payment__lead {
margin: 0 0 0.35rem;
}
.bathgiant-checkout-payment__notice {
margin: 0;
padding: 0.85rem 1rem;
background: #fff8e5;
border-left: 4px solid #dba617;
border-radius: 4px;
}
@media (min-width: 1100px) {
.bathgiant-checkout-layout {
grid-template-columns: minmax(300px, 380px) minmax(0, 1.6fr);
gap: 1.25rem;
}
.bathgiant-checkout-side {
position: sticky;
top: var(--bathgiant-sticky-below-header);
z-index: 2;
max-height: calc(100dvh - var(--bathgiant-sticky-below-header) - 1.25rem);
display: flex;
flex-direction: column;
}
.bathgiant-checkout-side__stack {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
}
@media (max-width: 1099px) {
.bathgiant-checkout-main__title {
margin-top: 0.25rem;
}
.bathgiant-checkout-side__stack {
gap: 0;
}
.bathgiant-checkout-page .bathgiant-checkout-review__body {
max-height: none;
}
}
.bathgiant-checkout-quote-card {
min-width: 0;
max-width: 100%;
padding: 1.1rem 1.15rem;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.bathgiant-quote-form {
min-width: 0;
max-width: 100%;
}
.bathgiant-quote-form fieldset {
min-width: 0;
}
.bathgiant-checkout-quote-card__title {
margin: 0 0 0.45rem;
font-size: 1.05rem;
line-height: 1.35;
}
.bathgiant-checkout-quote-card__lead {
margin: 0 0 1rem;
}
.bathgiant-checkout-quote-card__notice {
margin: 0 0 1rem;
padding: 0.65rem 0.75rem;
border-radius: 8px;
font-size: 0.92rem;
}
.bathgiant-checkout-quote-card__notice--success {
background: #ecfdf3;
border: 1px solid #86efac;
color: #166534;
}
.bathgiant-checkout-quote-card__notice--error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.bathgiant-quote-form > p {
margin: 0 0 0.75rem;
min-width: 0;
}
.bathgiant-quote-form label {
display: inline-block;
margin-bottom: 0.25rem;
font-size: 0.92rem;
}
.bathgiant-quote-form input[type="text"],
.bathgiant-quote-form input[type="email"],
.bathgiant-quote-form input[type="tel"],
.bathgiant-quote-form select {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0.5rem 0.65rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font: inherit;
}
.bathgiant-quote-form input:focus,
.bathgiant-quote-form select:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-quote-approval-panel {
margin: 0.85rem 0 1rem;
padding: 0.85rem 1rem;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.bathgiant-quote-approval-panel--pending {
border-color: #fcd34d;
background: #fffbeb;
}
.bathgiant-quote-approval-panel--approved {
border-color: #86efac;
background: #f0fdf4;
}
.bathgiant-quote-approval-panel__lead {
margin: 0 0 0.35rem;
}
.bathgiant-quote-approval-panel__form {
margin: 0.65rem 0 0;
}
.bathgiant-quote-share-panel {
margin: 0.85rem 0 1rem;
padding: 1rem 1.1rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.bathgiant-quote-share-panel__head {
margin-bottom: 0.75rem;
}
.bathgiant-quote-share-panel__title {
margin: 0 0 0.25rem;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-quote-share-panel__lead {
margin: 0;
font-size: 0.88rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-quote-share-panel__toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.bathgiant-quote-share-panel__copy {
white-space: nowrap;
}
.bathgiant-quote-share-panel__whatsapp {
background: #25d366;
border-color: #25d366;
color: #fff;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__payment-mode {
margin-bottom: 0;
}
.bathgiant-quote-detail > .bathgiant-quote-payment-panel,
.bathgiant-quote-detail-layout__aside .bathgiant-quote-payment-panel {
margin: 0;
}
.bathgiant-quote-detail-layout {
display: grid;
gap: 1.25rem;
margin-top: 0.85rem;
}
.bathgiant-quote-detail-layout--with-payment {
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
align-items: start;
}
.bathgiant-quote-detail-layout__aside {
position: sticky;
top: 1rem;
}
.bathgiant-quote-detail-layout__main {
min-width: 0;
}
.bathgiant-quote-detail-tabs__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 0.75rem;
margin: 0 0 1rem;
padding: 0.25rem;
border-radius: 10px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.bathgiant-quote-detail-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.bathgiant-quote-detail-tabs__share {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
margin-left: auto;
}
.bathgiant-quote-detail-share-action,
.bathgiant-quote-detail-share-action-form {
margin: 0;
}
.bathgiant-quote-detail-share-action {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #334155;
font: inherit;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.2;
padding: 0.45rem 0.7rem;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-quote-detail-share-action .bathgiant-cta-icon {
display: inline-flex;
flex-shrink: 0;
}
.bathgiant-quote-detail-share-action:hover,
.bathgiant-quote-detail-share-action:focus {
background: #f8fafc;
border-color: #94a3b8;
color: #0f172a;
}
.bathgiant-quote-detail-share-action--whatsapp:hover,
.bathgiant-quote-detail-share-action--whatsapp:focus {
background: #ecfdf5;
border-color: #6ee7b7;
color: #047857;
}
.bathgiant-quote-detail-share-action--email:hover,
.bathgiant-quote-detail-share-action--email:focus {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8;
}
.bathgiant-quote-detail-share-action--print:hover,
.bathgiant-quote-detail-share-action--print:focus {
background: #fef2f2;
border-color: #fca5a5;
color: #b91c1c;
}
@media (max-width: 640px) {
.bathgiant-quote-detail-tabs__share {
width: 100%;
margin-left: 0;
justify-content: flex-start;
}
}
.bathgiant-quote-detail-tabs__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-quote-detail-tabs__tab {
display: inline-flex;
align-items: center;
border: 0;
background: transparent;
color: #475569;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
padding: 0.55rem 0.9rem;
border-radius: 8px;
cursor: pointer;
}
.bathgiant-quote-detail-tabs__tab-label {
gap: 0.35rem;
}
.bathgiant-quote-detail-tab-panel {
display: none;
}
.bathgiant-quote-detail-tabs__input:first-of-type:checked ~ .bathgiant-quote-detail-tabs__bar .bathgiant-quote-detail-tabs__tab:first-child,
.bathgiant-quote-detail-tabs__input[id$="-overview"]:checked ~ .bathgiant-quote-detail-tabs__bar .bathgiant-quote-detail-tabs__tab[for$="-overview"],
.bathgiant-quote-detail-tabs__input[id$="-locations"]:checked ~ .bathgiant-quote-detail-tabs__bar .bathgiant-quote-detail-tabs__tab[for$="-locations"] {
background: #fff;
color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.bathgiant-quote-detail-tabs__input:first-of-type:checked ~ .bathgiant-quote-detail-tabs__panels [data-bathgiant-quote-detail-panel="line-items"],
.bathgiant-quote-detail-tabs__input[id$="-overview"]:checked ~ .bathgiant-quote-detail-tabs__panels [data-bathgiant-quote-detail-panel="overview"],
.bathgiant-quote-detail-tabs__input[id$="-locations"]:checked ~ .bathgiant-quote-detail-tabs__panels [data-bathgiant-quote-detail-panel="locations"] {
display: block;
}
.bathgiant-quote-detail-tab-panel .bathgiant-quote-detail__meta {
margin-top: 0;
}
.bathgiant-quote-detail-addresses {
display: grid;
gap: 0.85rem;
margin: 1rem 0;
}
.bathgiant-quote-detail-address {
padding: 0.85rem 1rem;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.bathgiant-quote-detail-address__title {
margin: 0 0 0.35rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-quote-detail-address__name {
margin: 0 0 0.2rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-quote-detail-address__lines {
margin: 0;
color: #334155;
line-height: 1.45;
}
.bathgiant-quote-detail-map {
margin: 1rem 0;
}
.bathgiant-quote-detail-map--panel {
margin: 0;
}
.bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map,
.bathgiant-customer-dashboard-map--quote-locations {
min-height: 420px;
}
.bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map-wrap {
min-height: 420px;
}
.bathgiant-quote-detail-tab-panel[data-bathgiant-quote-detail-panel="locations"] .bathgiant-quote-detail-addresses {
margin-top: 0;
margin-bottom: 1rem;
}
.bathgiant-quote-detail-tab-panel[data-bathgiant-quote-detail-panel="locations"] .bathgiant-quote-detail-map--panel {
margin-top: 0;
}
.bathgiant-quote-detail-map__empty {
margin: 0;
color: #64748b;
}
.bathgiant-quote-detail-toolbar {
justify-content: flex-end;
}
.bathgiant-quote-detail-toolbar .bathgiant-quote-detail-tabs__share {
margin-left: 0;
}
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-addresses {
margin-top: 0;
margin-bottom: 0;
}
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-map--panel {
margin-top: 0;
}
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map,
.bathgiant-account-order-detail-layout__aside .bathgiant-customer-dashboard-map--quote-locations {
min-height: 320px;
}
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map-wrap {
min-height: 320px;
}
@media (min-width: 960px) {
.bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map,
.bathgiant-customer-dashboard-map--quote-locations {
min-height: 600px;
}
.bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map-wrap {
min-height: 600px;
}
}
@media (min-width: 1100px) {
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map,
.bathgiant-account-order-detail-layout__aside .bathgiant-customer-dashboard-map--quote-locations {
min-height: 420px;
}
.bathgiant-account-order-detail-layout__aside .bathgiant-quote-detail-map--panel .bathgiant-customer-dashboard-map-wrap {
min-height: 420px;
}
}
.bathgiant-quote-detail-map__title {
margin: 0 0 0.6rem;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-quote-detail-map:not(.bathgiant-quote-detail-map--panel) .bathgiant-customer-dashboard-map {
min-height: 260px;
}
@media (max-width: 960px) {
.bathgiant-quote-detail-layout--with-payment {
grid-template-columns: 1fr;
}
.bathgiant-quote-detail-layout__aside {
position: static;
}
}
.bathgiant-quote-share-panel--admin {
margin-top: 0;
}
.bathgiant-quote-payment-panel {
margin: 0.85rem 0 1rem;
padding: 1rem 1.1rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.bathgiant-quote-payment-panel__head {
margin-bottom: 0.75rem;
}
.bathgiant-quote-payment-panel__title {
margin: 0 0 0.25rem;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-quote-payment-panel__lead {
margin: 0;
font-size: 0.88rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-quote-payment-panel__options {
margin: 0;
padding: 0;
border: 0;
display: grid;
gap: 0.55rem;
}
.bathgiant-quote-payment-panel__option {
display: flex;
gap: 0.65rem;
align-items: flex-start;
padding: 0.7rem 0.8rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
cursor: pointer;
}
.bathgiant-quote-payment-panel__option:has(input:checked) {
border-color: var(--bathgiant-brand, #0f766e);
background: #f0fdfa;
}
.bathgiant-quote-payment-panel__option input {
margin-top: 0.2rem;
flex-shrink: 0;
}
.bathgiant-quote-payment-panel__option-copy {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.88rem;
line-height: 1.4;
}
.bathgiant-quote-payment-panel__option-copy .description {
color: #64748b;
font-size: 0.84rem;
}
.bathgiant-quote-payment-panel__trade-approval {
margin-top: 1rem;
padding: 0.85rem 0.95rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
}
.bathgiant-quote-payment-panel__trade-approval-lede {
margin: 0 0 0.75rem;
font-weight: 700;
color: #0f172a;
font-size: 0.95rem;
}
.bathgiant-quote-payment-panel__trade-approval-modes {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.bathgiant-quote-payment-panel__actions {
margin-top: 0.75rem;
} .is-payment-coming-soon {
position: relative;
opacity: 0.6;
cursor: not-allowed;
}
.is-payment-coming-soon input[type="radio"] {
cursor: not-allowed;
}
.bathgiant-quote-payment-coming-soon {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: 0.15rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__mode.is-payment-coming-soon {
gap: 0.35rem;
flex-wrap: wrap;
}
.bathgiant-quote-share-panel__whatsapp:hover,
.bathgiant-quote-share-panel__whatsapp:focus {
background: #1ebe57;
border-color: #1ebe57;
color: #fff;
}
.bathgiant-quote-share-panel__hint {
margin: 0.65rem 0 0;
font-size: 0.82rem;
line-height: 1.4;
color: #64748b;
}
.bathgiant-quote-share-panel--banner {
margin-top: 0.85rem;
background: #fff;
border-color: #bbf7d0;
}
.bathgiant-quote-share-panel__toolbar--compact {
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.5rem;
}
.bathgiant-account-quotes-actions .bathgiant-quote-share-panel__toolbar--compact {
justify-content: flex-start;
}
.bathgiant-quote-share-panel--account,
.bathgiant-quote-share-panel--cart {
margin-top: 0;
}
.bathgiant-quote-panel .bathgiant-quote-share-panel,
.bathgiant-quote-saved-notice .bathgiant-quote-share-panel {
margin-top: 0.75rem;
}
.bathgiant-quote-view-log {
margin: 1.5rem 0 0;
padding: 0;
}
.bathgiant-quote-view-log--account {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-quote-view-log__title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bathgiant-quote-view-log__lead {
margin: 0 0 0.75rem;
font-size: 0.88rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-quote-view-log__empty {
margin: 0;
padding: 0.85rem 1rem;
font-size: 0.88rem;
color: #64748b;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 10px;
}
.bathgiant-quote-view-log__legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin: 0 0 0.75rem;
}
.bathgiant-quote-view-log__legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 600;
color: #475569;
}
.bathgiant-quote-view-log__legend-item::before {
content: "";
display: inline-block;
width: 0.65rem;
height: 0.65rem;
border-radius: 3px;
}
.bathgiant-quote-view-log__legend-item--trade::before {
background: #3b82f6;
}
.bathgiant-quote-view-log__legend-item--public::before {
background: #f59e0b;
}
.bathgiant-quote-view-log__table-wrap {
overflow-x: auto;
overflow-y: auto; max-height: 27rem;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.bathgiant-quote-view-log__table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.bathgiant-quote-view-log__table th,
.bathgiant-quote-view-log__table td {
padding: 0.6rem 0.85rem;
text-align: left;
vertical-align: middle;
}
.bathgiant-quote-view-log__table th {
position: sticky;
top: 0;
z-index: 1;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-quote-view-log__table tbody tr {
border-bottom: 1px solid #f1f5f9;
}
.bathgiant-quote-view-log__table tbody tr:last-child {
border-bottom: 0;
}
.bathgiant-quote-view-log__row--trade {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 12%, #fff 12%);
}
.bathgiant-quote-view-log__row--trade td:first-child {
box-shadow: inset 3px 0 0 #3b82f6;
}
.bathgiant-quote-view-log__row--public {
background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 12%, #fff 12%);
}
.bathgiant-quote-view-log__row--public td:first-child {
box-shadow: inset 3px 0 0 #f59e0b;
}
.bathgiant-quote-view-log__when {
color: #334155;
white-space: nowrap;
}
.bathgiant-quote-view-log__where {
color: #64748b;
font-size: 0.85rem;
}
.bathgiant-quote-view-log__badge {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.bathgiant-quote-view-log__badge--trade {
background: var(--bathgiant-info-surface);
color: var(--bathgiant-brand-deep);
border: 1px solid var(--bathgiant-info-surface-border);
}
.bathgiant-quote-view-log__badge--public {
background: #fef3c7;
color: #b45309;
border: 1px solid #fcd34d;
}
.bathgiant-quote-view-log__badge--customer {
background: #fef3c7;
color: #b45309;
border: 1px solid #fcd34d;
}
.bathgiant-quote-approval-badge {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
}
.bathgiant-quote-approval-badge--pending {
color: #b45309;
}
.bathgiant-quote-approval-badge--approved {
color: #166534;
}
.bathgiant-quote-approval-panel--paid .bathgiant-quote-approval-panel__lead {
color: #166534;
}
.bathgiant-quote-line-paid-badge {
display: inline-block;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #166534;
background: #dcfce7;
}
.bathgiant-quote-conversion-badge {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
}
.bathgiant-quote-conversion-badge--in_cart {
color: #1d4ed8;
}
.bathgiant-quote-conversion-badge--ordered {
color: #b45309;
}
.bathgiant-quote-conversion-badge--paid {
color: #166534;
}
.bathgiant-quote-conversion-link {
display: inline-block;
margin-top: 0.2rem;
font-size: 0.78rem;
font-weight: 600;
}
.bathgiant-account-quote-detail-actions--checkout {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.65rem;
align-items: center;
justify-content: flex-end;
margin-top: 0;
padding-top: 0;
border-top: none;
}
.bathgiant-quote-detail-footer {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-quote-detail-footer__summary {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
margin-bottom: 1.15rem;
}
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total--trade,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total--customer {
margin-top: 0;
}
.bathgiant-quote-detail-footer__summary .bathgiant-quote-legal-footer,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-vat-note {
margin: 0;
max-width: 24rem;
text-align: right;
}
.bathgiant-quote-detail-footer__summary .bathgiant-quote-magic-review__public-price-note {
margin: 0;
max-width: 24rem;
text-align: right;
font-size: 0.88rem;
}
.bathgiant-quote-detail-footer__summary .bathgiant-quote-live-trade-inline {
align-self: flex-end;
margin-top: 0.35rem;
}
.bathgiant-quote-detail-footer__tools {
display: flex;
flex-direction: column;
gap: 1.15rem;
padding: 1.15rem 1.25rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
}
.bathgiant-quote-detail-section-heading {
margin: 0 0 0.65rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #64748b;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.bathgiant-quote-ui-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 0;
}
.bathgiant-quote-ui-label__icon {
display: inline-flex;
flex: 0 0 auto;
line-height: 0;
}
.bathgiant-quote-ui-label__text {
min-width: 0;
}
.bathgiant-quote-detail-edit,
.bathgiant-quote-detail-checkout {
margin: 0;
}
.bathgiant-quote-detail-footer__tools .bathgiant-quote-detail-checkout + .bathgiant-account-quote-detail-actions--delete,
.bathgiant-quote-detail-footer__tools .bathgiant-account-quote-detail-actions--builder + .bathgiant-quote-detail-checkout {
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-quote-detail-checkout .bathgiant-account-quote-detail-actions__hint--checkout {
margin: 0 0 0.75rem;
max-width: none;
text-align: left;
}
.bathgiant-account-quote-detail-actions--delete {
margin: 0;
padding-top: 0.85rem;
border-top: 1px solid #e2e8f0;
text-align: left;
}
.bathgiant-account-quote-detail-actions--delete .bathgiant-btn-link,
.bathgiant-account-quote-detail-actions--delete button {
font-size: 0.88rem;
}
.bathgiant-account-quote-detail-actions--checkout .bathgiant-btn {
margin: 0;
}
.bathgiant-account-quote-detail-actions--checkout .bathgiant-btn--pay {
font-weight: 700;
min-width: 9.5rem;
text-align: center;
}
.bathgiant-account-quote-detail-actions__hint--checkout {
margin-top: 0.55rem;
text-align: right;
max-width: 36rem;
margin-left: auto;
}
.bathgiant-quote-detail-checkout .bathgiant-account-quote-detail-actions__hint--checkout {
margin-top: 0;
margin-left: 0;
text-align: left;
}
.bathgiant-quote-magic-review {
max-width: 52rem;
margin: 1.25rem auto 2rem;
}
.bathgiant-quote-magic-review.bathgiant-card {
padding: 1.25rem 1.35rem 1.35rem;
}
.bathgiant-quote-magic-review__detail {
margin: 0;
}
.bathgiant-quote-magic-review__title {
margin: 0 0 0.5rem;
font-size: 1.35rem;
}
.bathgiant-quote-magic-review__greeting {
margin: 0 0 0.75rem;
color: #475569;
}
.bathgiant-account-quote-source-badge {
display: inline-flex;
align-items: center;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
vertical-align: middle;
}
.bathgiant-account-quote-source-badge--web {
color: #1e3a8a;
background: #dbeafe;
border: 1px solid #bfdbfe;
}
.bathgiant-account-quotes-ref__meta,
.bathgiant-intact-table__ref-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
margin-top: 0.35rem;
}
.bathgiant-account-quotes-ref__branch-link {
font-size: 0.78rem;
font-weight: 600;
}
.bathgiant-intact-table__row--web-quote td {
background: #f8fbff;
}
.bathgiant-intact-doc-link--web-quote {
font-weight: 700;
}
.bathgiant-intact-table__action .bathgiant-btn--ghost {
margin-top: 0.35rem;
}
.bathgiant-quote-customer-review__table-lead {
margin: 0 0 0.85rem;
color: #475569;
font-size: 0.92rem;
text-align: left;
}
.bathgiant-account-quote-detail-table--customer-trade-savings thead th,
.bathgiant-account-quote-detail-table--customer-trade-savings tbody td,
.bathgiant-account-quote-detail-table--customer-rrp-savings thead th,
.bathgiant-account-quote-detail-table--customer-rrp-savings tbody td {
text-align: left;
white-space: normal;
}
.bathgiant-account-quote-detail-table--customer-trade-savings thead th.bathgiant-quote-customer-review__th-qty,
.bathgiant-account-quote-detail-table--customer-trade-savings tbody td.bathgiant-quote-customer-review__qty-cell,
.bathgiant-account-quote-detail-table--customer-trade-savings thead th.bathgiant-quote-customer-review__th-total,
.bathgiant-account-quote-detail-table--customer-trade-savings tbody td.bathgiant-quote-customer-review__line-total-cell,
.bathgiant-account-quote-detail-table--customer-rrp-savings thead th.bathgiant-quote-customer-review__th-qty,
.bathgiant-account-quote-detail-table--customer-rrp-savings tbody td.bathgiant-quote-customer-review__qty-cell,
.bathgiant-account-quote-detail-table--customer-rrp-savings thead th.bathgiant-quote-customer-review__th-total,
.bathgiant-account-quote-detail-table--customer-rrp-savings tbody td.bathgiant-quote-customer-review__line-total-cell {
width: 5.5rem;
text-align: left;
font-variant-numeric: tabular-nums;
}
.bathgiant-account-quote-detail-table--customer-trade-savings tbody td.bathgiant-cart-cell-product,
.bathgiant-account-quote-detail-table--customer-rrp-savings tbody td.bathgiant-cart-cell-product {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
}
.bathgiant-quote-customer-review__product-pricing {
margin-top: 0.65rem;
padding-top: 0.65rem;
border-top: 1px solid #e8eef4;
}
.bathgiant-quote-customer-review__price-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.28rem;
max-width: 18rem;
}
.bathgiant-quote-customer-review__price-row {
display: grid;
grid-template-columns: 5.25rem minmax(0, 1fr);
align-items: baseline;
gap: 0.45rem;
width: 100%;
font-size: 0.84rem;
line-height: 1.35;
}
.bathgiant-quote-customer-review__price-label {
color: #64748b;
font-weight: 600;
}
.bathgiant-quote-customer-review__price-value--special,
.bathgiant-quote-customer-review__line-total-amount {
color: #166534;
}
.bathgiant-quote-customer-review__price-saved {
margin: 0.15rem 0 0;
font-size: 0.78rem;
font-weight: 700;
color: #166534;
}
.bathgiant-quote-customer-review__summary {
margin: 0 0 0.85rem;
width: 100%;
text-align: left;
}
.bathgiant-quote-customer-review__summary-lead {
margin: 0 0 0.65rem;
color: #475569;
font-size: 0.92rem;
text-align: left;
}
.bathgiant-quote-customer-review__summary-prices {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
padding: 0.9rem 1rem;
border-radius: 0.65rem;
background: #f0fdf4;
font-size: 0.9rem;
text-align: right;
}
.bathgiant-quote-customer-review__summary-heading {
margin: 0 0 0.15rem;
width: 100%;
color: #166534;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
text-align: right;
text-transform: uppercase;
}
.bathgiant-quote-customer-review__summary-piece,
.bathgiant-quote-customer-review__summary-saved {
display: block;
width: 100%;
text-align: right;
}
.bathgiant-quote-customer-review__summary-piece--special {
font-size: 1.05rem;
}
.bathgiant-quote-customer-review__summary-piece--special strong,
.bathgiant-quote-customer-review__summary-saved {
color: #166534;
}
.bathgiant-quote-customer-review__summary-saved {
font-size: 1rem;
}
.bathgiant-quote-customer-review__summary-label {
color: #64748b;
font-weight: 600;
}
.bathgiant-quote-detail-footer__summary:has(.bathgiant-quote-customer-review__summary) {
align-items: flex-start;
}
.bathgiant-quote-detail-footer__summary:has(.bathgiant-quote-customer-review__summary) .bathgiant-quote-magic-review__public-price-note,
.bathgiant-quote-detail-footer__summary:has(.bathgiant-quote-customer-review__summary) .bathgiant-quote-legal-footer {
max-width: none;
margin-left: 0;
text-align: left;
}
.bathgiant-quote-detail-footer__summary:has(.bathgiant-quote-customer-review__summary) .bathgiant-quote-legal-footer {
max-width: none;
margin-left: 0;
text-align: left;
}
.bathgiant-quote-magic-review__footer {
margin-top: 1.5rem;
padding-top: 0;
border-top: none;
}
.bathgiant-quote-magic-review__footer .bathgiant-quote-detail-footer__summary {
margin-bottom: 1.15rem;
align-items: flex-start;
}
.bathgiant-quote-magic-review__checkout {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bathgiant-quote-magic-review__checkout .bathgiant-account-quote-detail-actions__hint--checkout {
margin: 0;
max-width: none;
text-align: left;
}
.bathgiant-quote-magic-review__actions {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.55rem 0.75rem;
align-items: center;
justify-content: flex-start;
}
.bathgiant-quote-magic-review__footer .bathgiant-quote-magic-review__account {
margin: 0;
padding-top: 0.85rem;
border-top: 1px solid #e2e8f0;
font-size: 0.9rem;
}
.bathgiant-quote-magic-review__secure {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
font-size: 0.9rem;
}
.bathgiant-quote-form__trade-customer {
margin: 0.5rem 0 0.75rem;
padding: 0;
border: none;
}
.bathgiant-quote-form__trade-customer-lead {
margin: 0 0 0.65rem;
}
.bathgiant-quote-form__trade-customer-mode {
margin: 0 0 0.75rem;
}
.bathgiant-quote-form__trade-customer-mode label {
display: inline-block;
margin: 0.2rem 0;
}
.bathgiant-quote-form__trade-existing,
.bathgiant-quote-form__trade-new {
margin-top: 0.35rem;
}
.bathgiant-quote-form__trade-new .bathgiant-trade-customers-form__subhead {
margin: 0.85rem 0 0.5rem;
}
.bathgiant-quote-form__copy-row--trade-postcode {
margin-top: -0.25rem;
}
.bathgiant-quote-form__installer {
margin: 0 0 0.75rem;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 10px;
min-width: 0;
box-sizing: border-box;
}
.bathgiant-quote-form__installer > p {
min-width: 0;
}
.bathgiant-quote-form__installer legend {
padding: 0 0.25rem;
}
.bathgiant-quote-form__installer-fields[hidden] {
display: none !important;
}
.bathgiant-quote-form__installer-fields {
min-width: 0;
}
.bathgiant-quote-form__installer-intro {
margin: 0 0 0.85rem;
font-size: 0.92rem;
line-height: 1.45;
color: var(--bathgiant-ink-muted, #64748b);
}
.bathgiant-quote-form__installer-sharing-note {
margin: 0 0 0.85rem;
padding: 0.65rem 0.8rem;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, #e5e7eb);
border-left: 3px solid var(--bathgiant-brand);
background: color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 70%, #fff);
color: var(--bathgiant-ink, #111827);
font-size: 0.86rem;
line-height: 1.4;
} .bathgiant-installer-choice {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 0.85rem;
}
.bathgiant-installer-choice__option {
display: block;
margin: 0;
cursor: pointer;
}
.bathgiant-installer-choice__radio {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.bathgiant-installer-choice__card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: start;
min-height: 100%;
box-sizing: border-box;
padding: 0.85rem 0.85rem 0.9rem;
border: 1.5px solid var(--bathgiant-border, #e2e8f0);
border-radius: 14px;
background: #fff;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bathgiant-installer-choice__option:hover .bathgiant-installer-choice__card {
border-color: color-mix(in srgb, var(--bathgiant-brand) 45%, #fff);
}
.bathgiant-installer-choice__option:focus-within .bathgiant-installer-choice__card {
outline: 3px solid var(--bathgiant-brand-focus-ring, color-mix(in srgb, var(--bathgiant-brand) 24%, transparent));
outline-offset: 2px;
}
.bathgiant-installer-choice__option:has(.bathgiant-installer-choice__radio:checked) .bathgiant-installer-choice__card {
border-color: var(--bathgiant-brand);
background: linear-gradient(180deg, var(--bathgiant-brand-wash, #eef4fc) 0%, #fff 72%);
box-shadow: none;
}
.bathgiant-installer-choice__option:has(.bathgiant-installer-choice__radio:checked):hover .bathgiant-installer-choice__card {
border-color: var(--bathgiant-brand);
}
.bathgiant-installer-choice__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border-radius: 10px;
background: var(--bathgiant-light, #f8fafc);
color: var(--bathgiant-brand-deep, #2f68c4);
flex-shrink: 0;
}
.bathgiant-installer-choice__option:has(.bathgiant-installer-choice__radio:checked) .bathgiant-installer-choice__icon {
background: color-mix(in srgb, var(--bathgiant-brand) 14%, #fff);
color: var(--bathgiant-brand);
}
.bathgiant-installer-choice__copy {
display: grid;
gap: 0.18rem;
min-width: 0;
}
.bathgiant-installer-choice__title {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
color: var(--bathgiant-ink);
}
.bathgiant-installer-choice__text {
font-size: 0.8rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted, #64748b);
}
.bathgiant-installer-choice__marker {
position: relative;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.15rem;
border: 2px solid #94a3b8;
border-radius: 50%;
background: #fff;
box-sizing: border-box;
flex-shrink: 0;
}
.bathgiant-installer-choice__option:has(.bathgiant-installer-choice__radio:checked) .bathgiant-installer-choice__marker {
border-color: var(--bathgiant-brand);
}
.bathgiant-installer-choice__option:has(.bathgiant-installer-choice__radio:checked) .bathgiant-installer-choice__marker::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--bathgiant-brand);
}
.bathgiant-showroom-booking__installer {
margin-bottom: 0.85rem;
padding: 0.95rem 0 0.15rem;
border-top: 1px solid var(--bathgiant-border);
}
.bathgiant-showroom-booking__installer-intro {
margin: 0 0 0.85rem;
font-size: 0.92rem;
line-height: 1.45;
color: var(--bathgiant-ink-muted, #64748b);
}
.bathgiant-showroom-booking__installer-sharing-note {
margin: 0 0 0.85rem;
padding: 0.65rem 0.8rem;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, var(--bathgiant-border));
border-left: 3px solid var(--bathgiant-brand);
background: color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 70%, #fff);
color: var(--bathgiant-ink);
font-size: 0.86rem;
line-height: 1.4;
}
.bathgiant-showroom-booking__installer-fields[hidden] {
display: none !important;
}
.bathgiant-showroom-booking__row select {
width: 100%;
max-width: none;
box-sizing: border-box;
padding: 0.58rem 0.72rem;
border: 1px solid var(--bathgiant-store-border-input, #cbd5e1);
border-radius: var(--bathgiant-radius-sm);
font: inherit;
color: var(--bathgiant-ink);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-showroom-booking__row select:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring, color-mix(in srgb, var(--bathgiant-brand) 24%, transparent));
}
@media (max-width: 560px) {
.bathgiant-installer-choice {
grid-template-columns: 1fr;
}
}
.bathgiant-quote-form__hint-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
margin-left: 0.35rem;
border-radius: 999px;
background: var(--bathgiant-brand-wash, #eef4fc);
color: var(--bathgiant-brand-deep, #2f68c4);
font-size: 0.75rem;
font-weight: 700;
cursor: help;
vertical-align: middle;
}
.bathgiant-quote-form .bathgiant-btn-secondary {
background: #f3f4f6;
color: #111827;
border: 1px solid #d1d5db;
}
.bathgiant-quote-form .bathgiant-btn-secondary:hover {
background: #e5e7eb;
}
.bathgiant-quote-form__copy-row .bathgiant-btn,
.bathgiant-quote-form__submit-row .bathgiant-quote-form__submit,
.bathgiant-quote-form > p > button.bathgiant-btn[type="submit"] {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
white-space: normal;
line-height: 1.35;
text-align: center;
}
.bathgiant-quote-form__submit-row {
margin: 1rem 0 0;
padding-top: 0.25rem;
border-top: 1px solid #e5e7eb;
} .bathgiant-archive-products,
.bathgiant-tax-archive,
.bathgiant-tax-index,
.bathgiant-archive {
padding-top: 0.5rem;
padding-bottom: 5.5rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 14rem);
} .bathgiant-product-single {
padding-top: 0.5rem;
padding-bottom: 3rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 14rem);
} body.bg-breadcrumbs-off .bathgiant-breadcrumb-region,
body.bg-breadcrumbs-off nav.bathgiant-breadcrumb {
display: none !important;
} body.bg-breadcrumbs-off #main-content.bathgiant-wrap:not(.bathgiant-tax-archive--with-hero) {
padding-top: clamp(1.25rem, 2.8vw, 1.75rem);
} body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-account-dashboard-page),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-trade-customers-panel),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-cart-page) {
padding-top: clamp(0.4rem, 1vw, 0.55rem);
} body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-archive-products,
body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-archive-packages,
body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-tax-archive:not(.bathgiant-tax-archive--with-hero) {
padding-top: clamp(0.4rem, 1vw, 0.55rem);
} .bathgiant-breadcrumb-region {
margin: 0 0 1rem;
} .bathgiant-breadcrumb {
font-size: 0.9rem;
color: #6b7280;
margin: 0 0 0.5rem;
} .bathgiant-tax-archive--with-hero > .bathgiant-breadcrumb {
margin-top: 0;
margin-bottom: 0.85rem;
}
.bathgiant-tax-archive--with-hero {
padding-top: 0;
}
.bathgiant-tax-archive--with-hero > .bathgiant-hero-banner--taxonomy {
margin-top: 0;
}
.bathgiant-tax-archive--with-hero .bathgiant-archive-header--with-hero {
margin-top: 0;
padding-top: 0;
border-bottom: none;
} .bathgiant-wrap > nav.bathgiant-breadcrumb:first-child,
.bathgiant-product-single > nav.bathgiant-breadcrumb:first-child {
margin: 0 0 1rem;
}
.bathgiant-breadcrumb a {
color: var(--bathgiant-accent);
text-decoration: none;
}
.bathgiant-breadcrumb a:hover {
text-decoration: underline;
}
.bathgiant-breadcrumb__sep {
margin: 0 0.35rem;
color: #9ca3af;
}
.bathgiant-breadcrumb__muted {
color: #6b7280;
}
.bathgiant-archive-header {
margin-bottom: 1.25rem;
padding-bottom: 1rem; } .bathgiant-archive-products > .bathgiant-archive-header,
.bathgiant-archive-packages > .bathgiant-archive-header,
.bathgiant-tax-archive:not(.bathgiant-tax-archive--with-hero) > .bathgiant-archive-header {
margin-bottom: 0.65rem;
padding-bottom: 0.35rem;
} @media (min-width: 992px) {
.bathgiant-store-layout > .bathgiant-store-sidebar {
top: var(--bathgiant-store-sidebar-sticky-top);
}
.bathgiant-store-layout > .bathgiant-store-sidebar:has(.bathgiant-store-sidebar__panel[open]) {
max-height: calc(100dvh - var(--bathgiant-store-sidebar-sticky-top) - 1.25rem);
}
.bathgiant-store-layout > .bathgiant-store-sidebar .bathgiant-store-sidebar__panel[open] {
max-height: calc(100dvh - var(--bathgiant-store-sidebar-sticky-top) - 1.25rem);
}
}
.bathgiant-taxonomy-hero {
width: 100%;
margin: 0 0 1rem;
border-radius: var(--bathgiant-radius-md);
overflow: hidden;
border: 1px solid var(--bathgiant-border);
background: #f8fafc;
box-shadow: var(--bathgiant-shadow-sm);
}
.bathgiant-taxonomy-hero__img {
display: block;
width: 100%;
height: auto;
max-height: clamp(160px, 28vw, 340px);
object-fit: cover;
object-position: center;
}
.bathgiant-archive-title {
margin: 0 0 0.5rem;
font-size: 1.75rem;
}
.bathgiant-archive-sync-images {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
border: 1px solid #c3d4e8;
border-radius: 8px;
background: #f6faff;
}
.bathgiant-archive-admin-tools {
padding: 0;
overflow: hidden;
}
.bathgiant-archive-admin-tools__panel {
display: block;
}
.bathgiant-archive-admin-tools__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0;
padding: 0.8rem 1rem;
list-style: none;
cursor: pointer;
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-nav-ink);
user-select: none;
}
.bathgiant-archive-admin-tools__summary::-webkit-details-marker {
display: none;
}
.bathgiant-archive-admin-tools__summary::after {
content: "";
flex-shrink: 0;
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.18s ease;
opacity: 0.72;
}
.bathgiant-archive-admin-tools__panel[open] > .bathgiant-archive-admin-tools__summary::after {
transform: rotate(-135deg);
translate: 0 0.12rem;
}
.bathgiant-archive-admin-tools__summary:hover,
.bathgiant-archive-admin-tools__summary:focus-visible {
color: var(--bathgiant-brand-deep);
outline: none;
}
.bathgiant-archive-admin-tools__body {
padding: 0 1rem 0.9rem;
border-top: 1px solid #c3d4e8;
}
.bathgiant-archive-admin-tools__body .bathgiant-archive-sync-images__inner {
padding-top: 0.85rem;
}
.bathgiant-archive-sync-images--below-cross {
margin: 1.5rem 0 0;
}
.bathgiant-archive-sync-images__title {
margin: 0 0 0.35rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--bathgiant-nav-ink);
}
.bathgiant-archive-sync-images__desc {
margin: 0 0 0.65rem;
font-size: 0.85rem;
color: #5a6d82;
line-height: 1.45;
}
.bathgiant-archive-sync-images__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
}
.bathgiant-archive-sync-images__opt {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: #3a4f66;
cursor: pointer;
}
.bathgiant-archive-sync-images__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 1.25rem;
align-items: start;
}
.bathgiant-archive-sync-block {
min-width: 0;
}
.bathgiant-archive-sync-block + .bathgiant-archive-sync-block {
margin-top: 0;
padding-top: 0;
border-top: none;
border-left: 1px solid #d8e3ef;
padding-left: 1.25rem;
}
@media (max-width: 1100px) {
.bathgiant-archive-sync-images__inner {
grid-template-columns: 1fr;
gap: 0;
}
.bathgiant-archive-sync-block + .bathgiant-archive-sync-block {
margin-top: 1rem;
padding-top: 1rem;
padding-left: 0;
border-left: none;
border-top: 1px solid #d8e3ef;
}
}
.bathgiant-archive-sync-block--intact .bathgiant-archive-sync-images__title {
color: #1a4d3a;
}
.bathgiant-archive-sync-block--datasheet .bathgiant-archive-sync-images__title {
color: #5c3d1a;
}
.bathgiant-archive-sync-btn--reset {
border-color: #c9a227;
color: #6b4f0a;
background: #fff9eb;
}
.bathgiant-archive-sync-images__reset-note {
margin: 0.5rem 0 0.65rem;
font-size: 0.8rem;
color: #6b5a3a;
line-height: 1.4;
}
.bathgiant-archive-sync-images__actions--secondary {
margin-top: 0.5rem;
}
.bathgiant-archive-sync-images__criteria {
margin: 0 0 0.5rem;
font-size: 0.8rem;
color: #5a6d82;
}
.bathgiant-archive-sync-images__log {
margin: 0.75rem 0 0;
padding: 0.65rem 0.75rem;
max-height: 10rem;
overflow: auto;
font-size: 0.78rem;
line-height: 1.4;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
white-space: pre-wrap;
}
.bathgiant-archive-desc {
max-width: 65ch;
color: #374151;
line-height: 1.5;
}
.bathgiant-results-count {
margin: 0 0 1rem;
font-size: 0.95rem;
color: #6b7280;
}
.bathgiant-archive-products .bathgiant-product-card,
.bathgiant-tax-archive .bathgiant-product-card {
border-radius: 12px;
border-color: #e2e8f0;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); height: auto;
} .bathgiant-archive-products .bathgiant-product-card__media,
.bathgiant-tax-archive .bathgiant-product-card__media {
aspect-ratio: 1 / 1;
width: 100%;
background: #fff;
}
.bathgiant-archive-products .bathgiant-product-card__media img,
.bathgiant-archive-products .bathgiant-product-card__img,
.bathgiant-tax-archive .bathgiant-product-card__media img,
.bathgiant-tax-archive .bathgiant-product-card__img {
object-fit: contain;
object-position: center;
box-sizing: border-box;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
} .bathgiant-archive-products .bathgiant-product-card__prices--inline.bathgiant-product-card__prices--stacked,
.bathgiant-tax-archive .bathgiant-product-card__prices--inline.bathgiant-product-card__prices--stacked {
gap: 0.08rem;
}
.bathgiant-archive-products .bathgiant-product-card__prices--stacked .bathgiant-product-card__price-piece--sale .bathgiant-product-card__price--now,
.bathgiant-tax-archive .bathgiant-product-card__prices--stacked .bathgiant-product-card__price-piece--sale .bathgiant-product-card__price--now {
font-size: 1.125rem;
font-weight: 800;
line-height: 1.2;
}
.bathgiant-archive-products .bathgiant-product-card__prices--stacked .bathgiant-product-card__price--rrp,
.bathgiant-tax-archive .bathgiant-product-card__prices--stacked .bathgiant-product-card__price--rrp {
font-size: 0.78rem;
}
.bathgiant-archive-products .bathgiant-product-card__prices--stacked .bathgiant-product-card__price-label,
.bathgiant-tax-archive .bathgiant-product-card__prices--stacked .bathgiant-product-card__price-label {
font-size: 0.62rem;
}
.bathgiant-archive-products .bathgiant-product-card__prices--stacked .bathgiant-price-vat-label,
.bathgiant-tax-archive .bathgiant-product-card__prices--stacked .bathgiant-price-vat-label {
font-size: 0.6rem;
} .bathgiant-archive-products .bathgiant-product-card__footer-trade-prices,
.bathgiant-tax-archive .bathgiant-product-card__footer-trade-prices {
gap: 0.3rem;
}
.bathgiant-archive-products .bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--sale,
.bathgiant-tax-archive .bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--sale {
flex-wrap: nowrap;
gap: 0.05rem 0.15rem;
white-space: nowrap;
} @media (min-width: 700px) {
.bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: stretch; padding: 1rem 1.05rem;
border-color: #c7d7ec;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
} .bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase.bathgiant-product-card--featured,
.bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase.bathgiant-product-card--staff-pick,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase.bathgiant-product-card--featured,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase.bathgiant-product-card--staff-pick {
background: #fff;
border-color: color-mix(in srgb, var(--bathgiant-brand) 42%, #e2e8f0);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 14%, transparent),
0 10px 24px color-mix(in srgb, var(--bathgiant-brand-deep) 11%, transparent);
}
@media (min-width: 1040px) { .bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase {
grid-column: span 2;
}
}
.bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__media,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__media { width: 100%;
max-width: none;
align-self: stretch;
margin: 0;
aspect-ratio: auto; height: var(--bg-archive-media-size);
min-height: var(--bg-archive-media-size);
max-height: var(--bg-archive-media-size);
flex-shrink: 0;
display: block;
position: relative;
overflow: hidden;
border-radius: 0; background: #fff;
} .bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) > .bathgiant-product-card__img,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) > .bathgiant-product-card__img {
position: absolute;
inset: 0;
object-fit: contain;
object-position: center;
padding: clamp(0.35rem, 1.5cqw, 0.8rem);
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
}
.bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__img--fallback,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__img--fallback {
object-fit: contain;
background-color: #1a6fb5;
} .bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__footer,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__footer {
margin-left: -1.05rem;
margin-right: -1.05rem;
width: calc(100% + 2.1rem);
padding-left: 1.05rem;
padding-right: 1.05rem;
}
} .bathgiant-article-single {
padding-top: 0.5rem;
padding-bottom: 3rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 14rem);
}
.bathgiant-article-single__article {
margin: 0 0 2rem;
}
.bathgiant-article-single__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
align-items: start;
}
.bathgiant-article-single__media {
order: -1;
}
@media (min-width: 900px) {
.bathgiant-article-single__grid {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(1.5rem, 4vw, 2.75rem);
}
.bathgiant-article-single__media {
order: 0;
position: sticky;
top: var(--bathgiant-sticky-below-header, 5.5rem);
align-self: start;
}
}
.bathgiant-article-single__header,
.bathgiant-article-single__content,
.bathgiant-article-single__figure {
min-width: 0;
padding: clamp(1rem, 2.2vw, 1.35rem);
border: 1px solid #dce6f2;
box-shadow: 0 8px 24px rgba(25, 44, 71, 0.06);
}
.bathgiant-article-single__header {
margin: 0 0 1rem;
}
.bathgiant-article-single__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.65rem, 3.8vw, 2.35rem);
line-height: 1.12;
color: var(--bathgiant-ink, #1f3552);
}
.bathgiant-article-single__meta {
margin: 0.65rem 0 0;
color: #64748b;
font-size: 0.92rem;
display: flex;
gap: 0.45rem;
align-items: center;
flex-wrap: wrap;
}
.bathgiant-article-single__meta a {
color: var(--bathgiant-accent);
text-decoration: none;
}
.bathgiant-article-single__meta a:hover {
text-decoration: underline;
}
.bathgiant-article-single__meta-sep {
color: #94a3b8;
}
.bathgiant-article-single__figure {
margin: 0;
overflow: hidden;
}
.bathgiant-article-single__img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.bathgiant-article-single__content {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: var(--bathgiant-ink, #1f3552);
}
.bathgiant-article-single__content > :first-child {
margin-top: 0;
}
.bathgiant-article-single__content > :last-child {
margin-bottom: 0;
}
.bathgiant-article-single__content h2,
.bathgiant-article-single__content h3,
.bathgiant-article-single__content h4 {
font-family: var(--bathgiant-font-display);
line-height: 1.25;
margin: 1.35rem 0 0.65rem;
}
.bathgiant-article-single__content p,
.bathgiant-article-single__content ul,
.bathgiant-article-single__content ol {
margin: 0 0 1rem;
}
.bathgiant-article-single__content img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.bathgiant-article-single__products {
margin: 0 0 2rem;
}
.bathgiant-product-carousel__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 0.85rem;
}
.bathgiant-product-carousel__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
text-wrap: balance;
}
.bathgiant-product-carousel__all {
font-size: 0.9rem;
font-weight: 600;
color: var(--bathgiant-brand-deep, #17365d);
text-decoration: none;
white-space: nowrap;
}
.bathgiant-product-carousel__all:hover {
text-decoration: underline;
} .bathgiant-owl-wrap {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.bathgiant-owl-carousel.owl-carousel {
width: 100%;
max-width: 100%;
}
.bathgiant-owl-carousel.owl-carousel .owl-stage-outer {
overflow: hidden;
touch-action: pan-y pinch-zoom;
max-width: 100%;
} .bathgiant-owl-wrap:has(.bathgiant-product-carousel__slide) {
padding: 0.4rem 0.4rem 0.55rem;
box-sizing: border-box;
}
.bathgiant-owl-carousel.owl-carousel:has(.bathgiant-product-carousel__slide) .owl-stage-outer {
padding: 0.4rem 0.4rem 0.55rem;
margin: -0.4rem -0.4rem -0.55rem;
box-sizing: content-box;
overflow: hidden;
} .bathgiant-owl-carousel.owl-carousel:has(.bathgiant-product-carousel__slide) .owl-stage {
display: flex;
align-items: stretch;
}
.bathgiant-owl-carousel.owl-carousel:has(.bathgiant-product-carousel__slide) .owl-stage:after {
display: none;
}
.bathgiant-owl-carousel.owl-carousel:has(.bathgiant-product-carousel__slide) .owl-item {
float: none;
display: flex;
height: auto;
align-items: stretch;
}
.bathgiant-product-carousel__slide {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
flex: 1 1 auto;
}
.bathgiant-product-carousel__slide .bathgiant-product-card,
.bathgiant-owl-carousel .bathgiant-product-card {
display: flex;
flex-direction: column;
height: 100%;
flex: 1 1 auto;
width: 100%;
margin: 0;
}
.bathgiant-owl-carousel .bathgiant-product-card__title { flex: 1 1 auto;
}
.bathgiant-owl-wrap .owl-theme .owl-nav {
margin-top: 0;
}
.bathgiant-owl-wrap .owl-nav {
position: absolute;
top: 38%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.15rem;
pointer-events: none;
z-index: 2;
transform: translateY(-50%);
}
.bathgiant-owl-wrap .owl-nav button {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border: 1px solid #dbe3ec;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--bathgiant-brand-deep, #881337);
font-size: 1.35rem;
line-height: 1;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bathgiant-owl-wrap .owl-nav button:hover,
.bathgiant-owl-wrap .owl-nav button:focus-visible {
background: var(--bathgiant-brand-deep, #881337);
border-color: var(--bathgiant-brand-deep, #881337);
color: #fff;
outline: none;
}
.bathgiant-owl-wrap .owl-nav button.disabled {
opacity: 0.35;
pointer-events: none;
}
.bathgiant-owl-wrap .owl-dots {
display: flex;
justify-content: center;
gap: 0.35rem;
margin-top: 0.65rem;
}
.bathgiant-owl-wrap .owl-dot span {
display: block;
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: #cbd5e1;
transition: background 0.15s ease, transform 0.15s ease;
}
.bathgiant-owl-wrap .owl-dot.active span,
.bathgiant-owl-wrap .owl-dot:hover span {
background: var(--bathgiant-brand-deep, #881337);
transform: scale(1.15);
}
.bathgiant-home-catalogue__carousel {
margin-top: 0;
}
.bathgiant-home-catalogue__carousel + .bathgiant-home-catalogue__section,
.bathgiant-home-catalogue__section + .bathgiant-home-catalogue__carousel {
margin-top: 1.75rem;
}
.bathgiant-article-single__related {
margin: 0;
}
.bathgiant-article-single__related-title {
margin: 0 0 1rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
text-wrap: balance;
}
.bathgiant-article-card {
display: flex;
flex-direction: column;
}
.bathgiant-article-card__media {
display: block;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
background: #f3f4f6;
}
.bathgiant-article-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bathgiant-article-card__placeholder {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 0.9rem;
}
.bathgiant-article-card__title {
margin: 0.75rem 0 0.4rem;
font-size: 1.15rem;
line-height: 1.3;
}
.bathgiant-article-card__title a {
color: inherit;
text-decoration: none;
}
.bathgiant-article-card__title a:hover {
text-decoration: underline;
}
.bathgiant-article-card__meta {
margin: 0 0 0.5rem;
font-size: 0.86rem;
color: #6b7280;
}
.bathgiant-article-card__excerpt {
margin: 0 0 0.9rem;
color: #374151;
}
.bathgiant-article-card__cta {
margin-top: auto;
align-self: flex-start;
}
.bathgiant-product-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
} .bathgiant-product-card--featured,
.bathgiant-product-card--staff-pick {
border-color: color-mix(in srgb, var(--bathgiant-brand) 38%, var(--bathgiant-border));
background:
linear-gradient(
165deg,
color-mix(in srgb, var(--bathgiant-brand) 7%, #fff) 0%,
#fff 42%,
#fff 100%
);
box-shadow:
0 1px 0 rgba(15, 20, 25, 0.03),
0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 12%, transparent),
0 8px 22px color-mix(in srgb, var(--bathgiant-brand-deep) 10%, transparent);
}
.bathgiant-archive-products .bathgiant-product-card--featured,
.bathgiant-archive-products .bathgiant-product-card--staff-pick,
.bathgiant-tax-archive .bathgiant-product-card--featured,
.bathgiant-tax-archive .bathgiant-product-card--staff-pick {
border-color: color-mix(in srgb, var(--bathgiant-brand) 42%, #e2e8f0);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 14%, transparent),
0 10px 24px color-mix(in srgb, var(--bathgiant-brand-deep) 11%, transparent);
}
.bathgiant-product-card--featured .bathgiant-product-card__media,
.bathgiant-product-card--staff-pick .bathgiant-product-card__media {
background: color-mix(in srgb, var(--bathgiant-brand) 4%, var(--bathgiant-light));
} .bathgiant-archive-products .bathgiant-product-card--showcase.bathgiant-product-card--featured .bathgiant-product-card__media,
.bathgiant-archive-products .bathgiant-product-card--showcase.bathgiant-product-card--staff-pick .bathgiant-product-card__media,
.bathgiant-tax-archive .bathgiant-product-card--showcase.bathgiant-product-card--featured .bathgiant-product-card__media,
.bathgiant-tax-archive .bathgiant-product-card--showcase.bathgiant-product-card--staff-pick .bathgiant-product-card__media {
background: #fff;
} .bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) img,
.bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) > .bathgiant-product-card__img,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) img,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__media:not(.bathgiant-product-card__media--carousel) > .bathgiant-product-card__img {
padding: clamp(0.35rem, 1.5cqw, 0.8rem);
object-fit: contain;
} .bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__carousel-slide .bathgiant-product-card__img,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__carousel-slide .bathgiant-product-card__img {
padding: 0;
max-width: none;
max-height: none;
width: 100%;
height: 100%;
box-sizing: border-box;
object-position: center;
}
.bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__img--primary,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__img--primary {
object-fit: contain;
background: #fff;
}
.bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__img--gallery,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__media--carousel .bathgiant-product-card__img--gallery {
object-fit: cover;
background: transparent;
}
.bathgiant-archive-products .bathgiant-product-card--showcase .bathgiant-product-card__img--fallback,
.bathgiant-tax-archive .bathgiant-product-card--showcase .bathgiant-product-card__img--fallback {
object-fit: contain;
background-color: #1a6fb5;
} @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
[data-product-reveal] > .bathgiant-product-card.bathgiant-product-card--reveal:not(.is-revealed) {
opacity: 0.9;
}
[data-product-reveal] > .bathgiant-product-card.bathgiant-product-card--reveal.is-revealed {
opacity: 1;
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
}
@media (max-width: 899px) {
[data-product-reveal] > .bathgiant-product-card.bathgiant-product-card--reveal {
opacity: 1 !important;
transition: none !important;
transform: none !important;
}
}
.bathgiant-product-card__title {
position: relative;
font-size: 1.2rem;
line-height: 1.4rem; min-height: 2lh; flex-shrink: 0; margin: 1.8rem 0 clamp(0.3rem, 1vw, 0.45rem); overflow: visible;
}
.bathgiant-product-card__title > a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.bathgiant-product-card__title .bathgiant-tooltip {
z-index: 40;
max-width: min(22rem, 85vw);
}
.bathgiant-product-card__title:hover .bathgiant-tooltip,
.bathgiant-product-card__title:focus-within .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-product-card__title:focus-within .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
} .bathgiant-archive-products .bathgiant-product-card:has(.bathgiant-product-card__title:hover),
.bathgiant-archive-products .bathgiant-product-card:has(.bathgiant-product-card__title:focus-within),
.bathgiant-tax-archive .bathgiant-product-card:has(.bathgiant-product-card__title:hover),
.bathgiant-tax-archive .bathgiant-product-card:has(.bathgiant-product-card__title:focus-within) {
position: relative;
z-index: 6;
} .bathgiant-archive-products .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__title,
.bathgiant-tax-archive .bathgiant-grid > .bathgiant-product-card--showcase .bathgiant-product-card__title {
max-width: 50%;
margin-right: auto;
margin-left: 0;
} .bathgiant-product-card__traits + .bathgiant-product-card__title {
margin-top: clamp(0.65rem, 2vw, 0.9rem);
}
.bathgiant-product-card__traits {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.5rem 0.75rem;
margin: 0.5rem 0 0;
padding: 0.4rem 0.55rem;
min-height: 2.35rem;
box-sizing: border-box;
flex-shrink: 0;
background: #f8fafc;
border: 1px solid #e8eef4;
border-radius: 8px;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand {
margin: 0 0 0 auto;
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
line-height: 1;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand.bathgiant-card__brand-logos {
margin: 0;
}
.bathgiant-product-card__traits a.bathgiant-product-card__brand-link {
display: inline-flex;
align-items: center;
justify-content: flex-end;
line-height: 0;
}
.bathgiant-product-card__traits .bathgiant-brand-logo {
max-height: 22px;
max-width: 96px;
width: auto;
height: auto;
object-fit: contain;
object-position: right center;
}
.bathgiant-product-card__traits .bathgiant-product-card__colours {
margin: 0;
flex: 0 1 auto;
min-width: 0;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
padding: 0;
font-size: 0.78rem;
line-height: 1.3;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.bathgiant-product-card__traits .bathgiant-product-card__colours + .bathgiant-product-card__brand {
flex: 0 0 auto;
margin-left: auto;
padding-left: 0.65rem;
border-left: 1px solid #cbd5e1;
border-radius: 0;
}
.bathgiant-product-card__traits .bathgiant-swatch--card {
width: 1.1rem;
height: 1.1rem;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
flex-shrink: 0;
}
.bathgiant-product-card__colour.bathgiant-has-tooltip {
position: relative;
display: inline-flex;
align-items: center;
line-height: 0;
}
.bathgiant-product-card__colour:hover .bathgiant-tooltip,
.bathgiant-product-card__colour:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-product-card__colour:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
line-height: 0;
overflow: visible;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip {
left: auto;
right: -0.35rem;
bottom: calc(100% + 0.6rem);
transform: translateY(4px);
display: flex;
align-items: center;
justify-content: center;
width: clamp(8.5rem, 42vw, 12rem);
min-height: 4.25rem;
padding: 0.75rem 1rem;
box-sizing: border-box;
contain: layout;
border: 1px solid #dbe3ec;
background: #fff;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip::after {
left: auto;
right: 0.85rem;
transform: none;
border-top-color: #fff;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip-logo {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 3.25rem;
object-fit: contain;
}
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip-trigger:hover .bathgiant-product-card__brand-tooltip,
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip-trigger:focus-visible .bathgiant-product-card__brand-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-product-card__traits .bathgiant-product-card__brand-tooltip-trigger:focus-visible .bathgiant-product-card__brand-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.bathgiant-product-card__title a {
color: inherit;
text-decoration: none;
}
.bathgiant-product-card__title a:hover {
text-decoration: underline;
}
.bathgiant-product-card__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border-radius: 4px;
overflow: hidden;
background: var(--bathgiant-light);
}
.bathgiant-product-card__media--has-secondary .bathgiant-product-card__img {
position: absolute;
inset: 0;
transition: opacity 0.34s ease, transform 0.5s ease;
}
.bathgiant-product-card__media--has-secondary .bathgiant-product-card__img--primary {
opacity: 1;
transform: scale(1);
}
.bathgiant-product-card__media--has-secondary .bathgiant-product-card__img--secondary {
opacity: 0;
transform: scale(1.03);
}
.bathgiant-product-card__media--has-secondary:hover .bathgiant-product-card__img--primary,
.bathgiant-product-card__media--has-secondary:focus-visible .bathgiant-product-card__img--primary {
opacity: 0;
transform: scale(1.03);
}
.bathgiant-product-card__media--has-secondary:hover .bathgiant-product-card__img--secondary,
.bathgiant-product-card__media--has-secondary:focus-visible .bathgiant-product-card__img--secondary {
opacity: 1;
transform: scale(1);
}
.bathgiant-product-card__media--carousel {
display: block;
position: relative;
background: #fff;
}
.bathgiant-product-card__carousel-link {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
color: inherit;
}
.bathgiant-product-card__carousel-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.bathgiant-product-card__carousel-slide {
display: flex;
flex: 0 0 100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: #fff;
}
.bathgiant-product-card__media--carousel .bathgiant-product-card__carousel-slide .bathgiant-product-card__img {
position: static;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
object-position: center;
}
.bathgiant-product-card__media--carousel .bathgiant-product-card__carousel-slide .bathgiant-product-card__img--primary {
padding: 0;
object-fit: contain;
background: #fff;
}
.bathgiant-product-card__media--carousel .bathgiant-product-card__carousel-slide .bathgiant-product-card__img--gallery {
padding: 0;
object-fit: cover;
background: transparent;
}
.bathgiant-product-card__carousel-dot:focus-visible,
.bathgiant-product-card__carousel-link:focus-visible {
outline: 2px solid var(--bathgiant-brand);
outline-offset: 2px;
}
.bathgiant-product-card__carousel-dots {
position: absolute;
z-index: 3;
bottom: 0.55rem;
left: auto;
right: 0.55rem;
display: flex;
align-items: center;
gap: 0.34rem;
padding: 0.34rem 0.4rem;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
}
.bathgiant-product-card__carousel-dot {
display: block;
width: 0.42rem;
height: 0.42rem;
padding: 0;
border: 0;
border-radius: 999px;
background: #94a3b8;
cursor: pointer;
transition: width 0.18s ease, background 0.18s ease;
}
.bathgiant-product-card__carousel-dot.is-active {
width: 0.9rem;
background: var(--bathgiant-brand);
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-product-card__carousel-track,
.bathgiant-product-card__carousel-dot {
transition: none;
}
} .bathgiant-sale-badge {
--bathgiant-sale-badge-bg: linear-gradient(150deg, #9f1239 0%, #7f1d3c 40%, #65122f 70%, #4a0d22 100%);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.38rem 0.72rem;
border-radius: var(--bathgiant-header-pill);
font-family: var(--bathgiant-font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.2;
text-transform: uppercase;
color: #fff;
background: var(--bathgiant-sale-badge-bg);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
box-shadow: 0 2px 8px rgba(127, 29, 29, 0.28);
pointer-events: none;
}
.bathgiant-sale-badge--overlay {
position: absolute;
top: 0.65rem;
left: 0.65rem;
z-index: 2;
} .bathgiant-staff-pick-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.62rem;
border-radius: var(--bathgiant-header-pill);
font-family: var(--bathgiant-font-display);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
color: var(--bathgiant-brand-deep);
background: color-mix(in srgb, #fff 88%, var(--bathgiant-brand-wash));
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 28%, transparent);
box-shadow: 0 1px 4px rgba(15, 20, 25, 0.08);
pointer-events: none;
}
.bathgiant-staff-pick-badge--overlay {
position: absolute;
top: 0.65rem;
right: 0.65rem;
left: auto;
z-index: 2;
} .bathgiant-product-card__media:has(.bathgiant-sale-badge--overlay):has(.bathgiant-staff-pick-badge--overlay) .bathgiant-staff-pick-badge--overlay {
max-width: calc(50% - 0.4rem);
text-align: center;
}
.bathgiant-sale-badge--rrp,
.bathgiant-sale-badge--trade {
background: var(--bathgiant-sale-badge-bg);
}
body.bathgiant-has-trade-pricing .bathgiant-sale-badge--trade {
background: var(--bathgiant-sale-badge-bg);
}
.bathgiant-sale-badge--inline {
position: static;
margin: 0.5rem 0 0;
box-shadow: none;
}
.bathgiant-product-single__hero {
position: relative;
}
.bathgiant-product-single__hero .bathgiant-sale-badge--overlay {
top: 0.85rem;
left: 0.85rem;
} [data-bathgiant-pdp-pricing][data-bathgiant-price-view="list"] .bathgiant-sale-badge--pdp-view-trade {
display: none;
}
[data-bathgiant-pdp-pricing][data-bathgiant-price-view="trade"] .bathgiant-sale-badge--pdp-view-list {
display: none;
} [data-bathgiant-card-pricing][data-bathgiant-price-view="list"] .bathgiant-sale-badge--card-view-trade {
display: none;
}
[data-bathgiant-card-pricing][data-bathgiant-price-view="trade"] .bathgiant-sale-badge--card-view-list {
display: none;
}
.bathgiant-pkg-header__sale-badge {
margin-top: 0.35rem;
}
.bathgiant-product-card__media img,
.bathgiant-product-card__img {
display: block;
width: 100%;
height: 100%; object-fit: cover;
object-position: center;
} .bathgiant-product-card__img--fallback,
.bathgiant-package-card__img--fallback,
.bathgiant-branch-showroom-row__img--fallback,
.bathgiant-pkg-split__img--fallback,
.bathgiant-pkg-line__thumb-img--fallback,
.bathgiant-product-single__placeholder-img {
object-fit: contain;
object-position: center;
background-color: #1a6fb5;
}
.bathgiant-product-single__placeholder--image {
padding: 0;
border: none;
background: #1a6fb5;
overflow: hidden;
}
.bathgiant-product-single__placeholder--image .bathgiant-product-single__placeholder-img {
display: block;
width: 100%;
height: 100%;
max-height: none;
margin: 0;
}
.bathgiant-product-card__brand {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
}
a.bathgiant-product-card__brand-link {
color: inherit;
text-decoration: none;
}
a.bathgiant-product-card__brand-link:hover,
a.bathgiant-product-card__brand-link:focus-visible {
color: var(--bathgiant-brand, #1e3a5f);
text-decoration: underline;
text-underline-offset: 2px;
}
.bathgiant-card__brand-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.bathgiant-product-card__brand.bathgiant-card__brand-logos,
.bathgiant-package-card__brands.bathgiant-card__brand-logos,
.bathgiant-branch-showroom-row__brands.bathgiant-card__brand-logos {
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.bathgiant-brand-logo {
display: block;
max-height: 28px;
max-width: 120px;
width: auto;
height: auto;
object-fit: contain;
} .bathgiant-brand-name {
display: none;
}
.bathgiant-branch-showroom-row__brands .bathgiant-brand-logo {
max-height: 32px;
max-width: 140px;
}
a.bathgiant-product-card__brand-link .bathgiant-brand-logo {
text-decoration: none;
}
.bathgiant-product-card__colours {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
line-height: 1.35;
}
a.bathgiant-product-card__colour {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--bathgiant-ink-muted);
max-width: 100%;
}
a.bathgiant-product-card__colour:hover,
a.bathgiant-product-card__colour:focus-visible {
color: var(--bathgiant-ink-muted);
}
span.bathgiant-product-card__colour {
display: inline-flex;
align-items: center;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 0.5rem 0.65rem;
background: linear-gradient(135deg, #e8eaee 0%, #f4f5f7 100%);
border: 1px dashed #cbd5e1;
box-sizing: border-box;
}
.bathgiant-product-card__placeholder-hint {
margin: 0;
font-size: 0.65rem;
line-height: 1.4;
font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
color: #64748b;
text-align: center;
word-break: break-word;
max-height: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.bathgiant-product-card__price {
margin: 0;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.25;
}
.bathgiant-product-card__prices {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.6rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
}
.bathgiant-product-card__prices--inline {
flex-wrap: nowrap;
gap: 0.3rem 0.45rem;
font-size: 0.9375rem;
line-height: 1.3;
max-width: 100%;
overflow: hidden;
} .bathgiant-product-card__prices--inline.bathgiant-product-card__prices--stacked {
flex-direction: column;
align-items: flex-start; justify-content: flex-end;
flex-wrap: nowrap;
gap: 0.08rem;
overflow: visible;
white-space: normal; min-height: calc(2.2lh + 0.08rem);
}
.bathgiant-product-card__price-piece--rrp {
display: inline-flex;
align-items: baseline;
gap: 0.2rem;
flex-shrink: 0;
white-space: nowrap;
}
.bathgiant-product-card__price-piece--rrp[hidden] {
display: none !important;
}
.bathgiant-product-card__prices--stacked .bathgiant-product-card__price-piece--sale {
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0.05rem 0.2rem;
min-width: 0;
max-width: 100%;
width: auto;
flex-shrink: 1;
white-space: nowrap;
}
.bathgiant-product-card__prices--stacked .bathgiant-product-card__price-piece--sale .bathgiant-product-card__price--now {
flex-shrink: 0;
}
.bathgiant-product-card__prices--stacked .bathgiant-product-card__price-piece--sale .bathgiant-price-vat-label {
margin-left: 0.15rem;
flex-shrink: 0;
}
.bathgiant-product-card__price-label {
font-weight: 600;
font-size: 0.8125rem;
color: #94a3b8;
text-decoration: none;
}
.bathgiant-product-card__prices--inline .bathgiant-product-card__price--now {
flex-shrink: 0;
white-space: nowrap;
}
.bathgiant-product-card__prices--inline .bathgiant-price-vat-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--bathgiant-ink-muted, #64748b);
white-space: nowrap;
flex-shrink: 0;
}
.bathgiant-product-card__price-sep {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #cbd5e1;
vertical-align: middle;
}
.bathgiant-product-card__price-part--list {
color: #64748b;
font-weight: inherit;
}
.bathgiant-product-card__price-part--trade {
color: #166534;
font-weight: inherit;
}
.bathgiant-product-card__meta {
margin: 0.55rem 0 0;
font-size: 0.85rem;
color: #6b7280;
}
.bathgiant-product-card__footer {
margin-top: auto; margin-left: -1rem;
margin-right: -1rem;
margin-bottom: -1rem; padding: 0.5rem 1rem 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.125rem; width: calc(100% + 2rem);
max-width: none;
box-sizing: border-box;
flex-shrink: 0; background: linear-gradient(
to top,
var(--bathgiant-product-card-footer-wash) 0%,
color-mix(in srgb, var(--bathgiant-product-card-footer-wash) 45%, transparent) 42%,
transparent 100%
);
border-radius: 0 0 var(--bathgiant-radius-md) var(--bathgiant-radius-md);
box-shadow: none;
}
.bathgiant-product-card__footer .bathgiant-product-card__price,
.bathgiant-product-card__footer .bathgiant-product-card__prices {
margin: 0; }
.bathgiant-product-card__footer-row {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
} .bathgiant-product-card__footer--price-cta-row {
gap: 0.45rem;
}
.bathgiant-product-card__footer-trade {
display: flex;
flex-direction: column;
gap: 1.075rem;
width: 100%;
}
.bathgiant-product-card__footer-trade-prices {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
min-width: 0;
width: 100%;
} .bathgiant-product-card__footer-trade-prices > .bathgiant-product-card__prices--inline.bathgiant-product-card__prices--stacked {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: 100%;
margin: 0;
padding: 0;
gap: 0.08rem;
overflow: visible;
}
.bathgiant-product-card__footer-trade-prices > .bathgiant-product-card__prices--inline:not(.bathgiant-product-card__prices--stacked) {
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: 100%;
margin: 0;
font-size: 0.85rem;
font-weight: 700;
line-height: 1.2;
gap: 0.2rem 0.35rem;
overflow: visible;
white-space: nowrap;
align-self: center;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--rrp {
flex-shrink: 0;
min-width: 0;
overflow: visible;
white-space: nowrap;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--sale {
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0.05rem 0.2rem;
min-width: 0;
max-width: 100%;
width: auto;
flex-shrink: 1;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--rrp[hidden] {
display: none !important;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--sale .bathgiant-product-card__price--now {
flex-shrink: 0;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-piece--sale .bathgiant-price-vat-label {
margin-left: 0.15rem;
flex-shrink: 0;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-label {
font-size: 0.68rem;
font-weight: 600;
text-decoration: none;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price--rrp {
font-size: 0.9em;
text-decoration: line-through;
color: #94a3b8;
font-weight: 600;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-price-vat-label {
font-size: 0.65rem;
font-weight: 500;
}
.bathgiant-product-card__footer-trade-prices__controls {
display: flex;
align-items: center;
flex: 0 0 auto;
flex-shrink: 0;
min-height: 2.15rem;
overflow: visible;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-toggle {
display: inline-grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
flex-shrink: 0;
width: 6.75rem;
min-width: 6.75rem;
max-width: 6.75rem;
min-height: 2.15rem;
height: 2.15rem;
border-radius: 999px;
overflow: visible;
}
.bathgiant-product-card__footer-trade--fetch .bathgiant-product-card__price-toggle,
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__fetch-trade-wrap + .bathgiant-product-card__price-toggle {
min-width: 0;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__price-toggle-btn {
position: relative;
flex: 0 0 auto;
min-width: 2.5rem;
min-height: 2.15rem;
height: 2.15rem;
margin: 0;
padding: 0 0.45rem;
font-size: 0.65rem;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
box-sizing: border-box;
overflow: visible;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__fetch-trade {
position: relative;
overflow: visible;
}
.bathgiant-product-card__price-toggle-btn:hover .bathgiant-tooltip,
.bathgiant-product-card__price-toggle-btn:focus-visible .bathgiant-tooltip,
.bathgiant-product-card__fetch-trade:hover .bathgiant-tooltip,
.bathgiant-product-card__fetch-trade:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-product-card__price-toggle-btn:focus-visible .bathgiant-tooltip,
.bathgiant-product-card__fetch-trade:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__fetch-trade-wrap {
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-product-card__fetch-trade {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.25rem;
min-height: 2.15rem;
height: 2.15rem;
margin: 0;
padding: 0 0.5rem;
font-size: 0.65rem;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
border-radius: 999px;
box-sizing: border-box;
}
.bathgiant-product-card__footer-trade-prices .bathgiant-fetch-trade-msg[hidden] {
display: none !important;
}
.bathgiant-product-card__footer-trade-actions {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.35rem;
width: 100%;
min-width: 0;
align-items: stretch;
container-type: inline-size;
container-name: product-card-actions;
}
.bathgiant-product-card__footer-trade-actions .bathgiant-has-tooltip {
position: relative;
overflow: visible;
}
.bathgiant-product-card__footer-trade-actions .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-product-card__footer-trade-actions .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-product-card__footer-trade-actions .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta,
.bathgiant-product-card__footer-trade-actions .bathgiant-product-card-quick-add,
.bathgiant-product-card__footer-trade .bathgiant-product-card__cta,
.bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
max-width: 100%;
flex: none;
align-self: stretch;
min-height: 2.15rem;
height: 2.15rem;
padding: 0 0.45rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
gap: 0.3rem;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
.bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta--icon-only,
.bathgiant-product-card__footer-trade .bathgiant-product-card__cta--icon-only {
width: 2.15rem;
min-width: 2.15rem;
max-width: 2.15rem;
padding: 0;
flex: 0 0 auto;
overflow: visible;
}
.bathgiant-product-card__footer-trade .bathgiant-product-card__cta,
.bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add,
.bathgiant-product-card__footer-row .bathgiant-product-card__footer-trade .bathgiant-product-card__cta,
.bathgiant-product-card__footer-row .bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add {
min-height: 2.15rem !important;
height: 2.15rem !important;
max-height: 2.15rem;
padding: 0 0.45rem !important;
line-height: 1.2 !important;
}
.bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta--icon-only,
.bathgiant-product-card__footer-trade .bathgiant-product-card__cta--icon-only,
.bathgiant-product-card__footer-row .bathgiant-product-card__footer-trade .bathgiant-product-card__cta--icon-only {
width: 2.15rem !important;
min-width: 2.15rem !important;
max-width: 2.15rem !important;
padding: 0 !important;
}
.bathgiant-product-card__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
margin-left: auto;
flex-shrink: 0;
min-width: 5.75rem;
}
.bathgiant-product-card__price-toggle {
display: inline-grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-self: flex-end;
width: 6.75rem;
min-width: 6.75rem;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: 999px;
overflow: visible;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06);
}
.bathgiant-product-card__price-toggle-btn:first-child {
border-radius: 999px 0 0 999px;
}
.bathgiant-product-card__price-toggle-btn:last-child {
border-radius: 0 999px 999px 0;
}
.bathgiant-product-card__price-toggle-btn:only-child {
border-radius: 999px;
}
.bathgiant-product-card__price-toggle-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 1.85rem;
overflow: visible;
padding: 0.38rem 0.25rem;
text-align: center;
border: 0;
background: transparent;
color: var(--bathgiant-ink-muted, #5c6673);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-product-card__price-toggle-btn + .bathgiant-product-card__price-toggle-btn {
border-left: 1px solid var(--bathgiant-border, #e4e9f0);
}
.bathgiant-product-card__price-toggle-btn:hover,
.bathgiant-product-card__price-toggle-btn:focus-visible {
color: var(--bathgiant-brand-deep);
background: var(--bathgiant-brand-wash);
outline: none;
}
.bathgiant-product-card__price-toggle-btn.is-active {
background: var(--bathgiant-brand-deep);
color: #fff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand-deep) 85%, #000);
}
.bathgiant-product-card__price-toggle-btn.is-active:hover,
.bathgiant-product-card__price-toggle-btn.is-active:focus-visible {
background: var(--bathgiant-brand);
color: #fff;
}
.bathgiant-product-card__price-toggle-icon {
display: block;
flex-shrink: 0;
}
.bathgiant-product-card__fetch-trade-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 0.15rem;
align-self: flex-end;
width: 100%;
min-height: 2.5rem;
box-sizing: border-box;
}
.bathgiant-product-card__fetch-trade {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 1.85rem;
padding: 0.28rem 0.5rem;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: 999px;
background: #fff;
color: var(--bathgiant-brand-deep, #881337);
overflow: visible;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
font-family: inherit;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-product-card__fetch-trade:hover:not(:disabled),
.bathgiant-product-card__fetch-trade:focus-visible:not(:disabled) {
border-color: color-mix(in srgb, var(--bathgiant-brand, #9f1239) 28%, #e4e9f0);
background: var(--bathgiant-brand-wash, #f5f7fa);
color: var(--bathgiant-brand-deep, #881337);
outline: none;
}
.bathgiant-product-card__fetch-trade:disabled {
opacity: 0.7;
cursor: wait;
}
.bathgiant-product-card__fetch-trade-wrap .bathgiant-fetch-trade-msg {
margin: 0;
font-size: 0.65rem;
line-height: 1.25;
text-align: center;
color: #64748b;
min-height: 0.85rem;
}
.bathgiant-product-card__footer--price-cta-row .bathgiant-product-card__fetch-trade-wrap .bathgiant-fetch-trade-msg:not([hidden]) {
flex: 0 0 auto;
}
.bathgiant-product-card__fetch-trade-wrap .bathgiant-fetch-trade-msg.is-error {
color: #b91c1c;
}
.bathgiant-product-card__footer-row .bathgiant-product-card__cta,
.bathgiant-product-card__footer-row .bathgiant-product-card-quick-add {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-height: 2.5rem;
min-width: 0;
max-width: 100%;
padding: 0.5rem 0.85rem;
font-size: 0.875rem;
line-height: 1.25;
white-space: nowrap;
gap: 0.3rem;
box-sizing: border-box;
overflow: hidden;
}
.bathgiant-product-card-quick-add {
width: 100%;
flex-shrink: 0;
justify-content: center;
background: var(--bathgiant-brand-deep);
box-shadow: 0 4px 12px var(--bathgiant-btn-shadow);
}
.bathgiant-product-card-quick-add:hover,
.bathgiant-product-card-quick-add:focus-visible {
background: var(--bathgiant-brand);
box-shadow: 0 6px 16px var(--bathgiant-btn-shadow-hover);
}
.bathgiant-product-card-quick-add.is-added {
cursor: pointer;
}
.bathgiant-product-card__cta {
display: inline-flex;
align-items: center;
line-height: 1.25;
flex: 0 0 auto;
white-space: nowrap;
min-width: 0;
max-width: 100%;
gap: 0.3rem;
overflow: hidden;
}
.bathgiant-product-card-quick-add .bathgiant-ajax-cart-btn__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-product-card__footer-trade-actions .bathgiant-product-card-quick-add {
overflow: visible;
}
.bathgiant-product-card .bathgiant-cta-icon {
flex-shrink: 0;
}
.bathgiant-product-card .bathgiant-cta-icon svg {
width: 14px;
height: 14px;
}
.bathgiant-product-card__footer-row:not(:has(.bathgiant-product-card__actions)) .bathgiant-product-card__cta {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
}
.bathgiant-product-card__footer-row:has(.bathgiant-product-card__actions) .bathgiant-product-card__cta {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
} .bathgiant-product-card .bathgiant-btn:hover,
.bathgiant-product-card .bathgiant-btn:focus-visible {
transform: none;
box-shadow: 0 6px 16px var(--bathgiant-btn-shadow-hover);
} body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card-quick-add,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card__cta,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta {
box-shadow: 0 4px 12px color-mix(in srgb, var(--bathgiant-trade) 22%, transparent);
}
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add:hover,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card-quick-add:focus-visible,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card-quick-add:hover,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card-quick-add:focus-visible,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card__cta:hover,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade .bathgiant-product-card__cta:focus-visible,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta:hover,
body.bathgiant-has-trade-pricing .bathgiant-product-card__footer-trade-actions .bathgiant-product-card__cta:focus-visible {
box-shadow: 0 6px 16px color-mix(in srgb, var(--bathgiant-trade) 30%, transparent);
}
@media (max-width: 680px) {
.bathgiant-product-card__footer {
gap: 0.6rem;
}
.bathgiant-product-card__cta {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
} .bathgiant-package-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid #e2e8f0;
border-radius: var(--bathgiant-radius-lg);
background: #fff;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bathgiant-package-card:hover {
border-color: #cbd5e1;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.bathgiant-package-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e2e8f0;
}
.bathgiant-package-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-package-card__img--fallback {
object-fit: contain;
background-color: #1a6fb5;
}
.bathgiant-package-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
color: #64748b;
font-size: 0.85rem;
}
.bathgiant-package-card__brands {
margin: 0;
padding: 1rem 1.15rem 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bathgiant-brand-deep);
}
.bathgiant-package-card__title {
margin: 0.35rem 0 0;
padding: 0 1.15rem;
font-family: var(--bathgiant-font-display);
font-size: 1.08rem;
font-weight: 700;
line-height: 1.3;
}
.bathgiant-package-card__title a {
color: #0f172a;
text-decoration: none;
transition: color 0.15s ease;
}
.bathgiant-package-card__title a:hover {
color: var(--bathgiant-brand-deep);
}
.bathgiant-package-card__excerpt {
margin: 0.4rem 0 0;
padding: 0 1.15rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.875rem;
line-height: 1.5;
color: #475569;
}
.bathgiant-package-card__showrooms {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0 1.15rem 0.5rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 500;
color: #64748b;
line-height: 1.3;
}
.bathgiant-package-card__showrooms svg {
flex-shrink: 0;
color: #94a3b8;
}
.bathgiant-package-card__footer {
margin-top: auto;
padding: 1rem 1.15rem 1.15rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
flex-shrink: 0;
}
.bathgiant-package-card__meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
width: 100%;
}
.bathgiant-package-card__price {
font-family: var(--bathgiant-font-display);
font-size: 0.8rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-package-card__count {
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
color: #64748b;
}
.bathgiant-package-card__cta {
flex-shrink: 0;
align-self: flex-start;
}
.bathgiant-package-card .bathgiant-btn:hover,
.bathgiant-package-card .bathgiant-btn:focus-visible {
transform: none;
box-shadow: 0 6px 16px rgba(47, 136, 239, 0.28);
} .bathgiant-archive-desc {
max-width: 48rem;
margin: 0.25rem 0 0;
font-family: var(--bathgiant-font-sans);
font-size: 1rem;
line-height: 1.6;
color: #475569;
} .bathgiant-package-single__taxonomies {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 1.5rem;
}
.bathgiant-package-single__tax-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.bathgiant-package-single__tax-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #475569;
margin-right: 0.25rem;
}
.bathgiant-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 500;
color: #334155;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
a.bathgiant-tag:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: var(--bathgiant-brand-deep);
}
.bathgiant-package-single__count {
margin: 0.25rem 0 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.875rem;
color: #64748b;
} .bathgiant-pkg-contents {
margin-top: 1.25rem;
border: 1px solid #e2e8f0;
border-radius: var(--bathgiant-radius-sm, 6px);
overflow: hidden;
background: #fff;
}
.bathgiant-pkg-category {
margin: 0;
padding: 0.45rem 0.85rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-pkg-contents > .bathgiant-pkg-category:first-child {
border-top: none;
}
.bathgiant-pkg-category__title {
margin: 0;
padding: 0;
border-bottom: none;
font-family: var(--bathgiant-font-display);
font-size: 0.7rem;
font-weight: 700;
color: var(--bathgiant-brand-deep, #1e3a5f);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bathgiant-pkg-line {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid #f1f5f9;
}
.bathgiant-pkg-line:last-child {
border-bottom: none;
}
.bathgiant-pkg-line__main {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bathgiant-pkg-line__thumb {
flex-shrink: 0;
display: block;
width: 3rem;
height: 3rem;
border-radius: 6px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #f8fafc;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-pkg-line__thumb:hover,
.bathgiant-pkg-line__thumb:focus-visible {
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
outline: none;
}
.bathgiant-pkg-line__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.bathgiant-pkg-line__thumb-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8eaee 0%, #f4f5f7 100%);
}
.bathgiant-pkg-line__info {
flex: 1 1 0%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.bathgiant-pkg-line__name {
font-family: var(--bathgiant-font-display);
font-size: 0.84rem;
font-weight: 600;
line-height: 1.35;
color: #0f172a;
text-decoration: none;
transition: color 0.15s ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-pkg-line__name:hover {
color: var(--bathgiant-brand-deep);
}
.bathgiant-pkg-line__sku {
font-family: var(--bathgiant-font-sans);
font-size: 0.68rem;
font-weight: 500;
color: #94a3b8;
letter-spacing: 0.02em;
margin: 0;
}
.bathgiant-pkg-line__right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.bathgiant-pkg-line__prices {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
flex-shrink: 0;
}
.bathgiant-pkg-line__price {
font-family: var(--bathgiant-font-display);
font-size: 0.84rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
line-height: 1.25;
}
.bathgiant-pkg-line__price--list {
font-size: 0.72rem;
font-weight: 400;
color: #94a3b8;
text-decoration: line-through;
}
.bathgiant-pkg-line__price--trade {
color: #16a34a;
}
.bathgiant-pkg-line__cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.32rem 0.7rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 600;
line-height: 1.3;
color: var(--bathgiant-brand-deep, #1e3a5f);
background: transparent;
border: 1.5px solid var(--bathgiant-brand-deep, #1e3a5f);
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.bathgiant-pkg-line__cart-btn:hover {
background: var(--bathgiant-brand-deep, #1e3a5f);
color: #fff;
}
.bathgiant-pkg-line__cart-btn.is-adding {
pointer-events: none;
opacity: 0.6;
}
.bathgiant-pkg-line__cart-btn.is-in-cart {
background: #16a34a;
border-color: #16a34a;
color: #fff;
pointer-events: none;
}
.bathgiant-pkg-line__cart-form {
margin: 0;
padding: 0;
}
@media (max-width: 480px) {
.bathgiant-pkg-line__main {
flex-wrap: wrap;
}
.bathgiant-pkg-line__info {
flex: 1 1 100%;
}
.bathgiant-pkg-line__right {
margin-left: auto;
}
.bathgiant-pkg-line__name {
white-space: normal;
}
} .bathgiant-pkg-header {
padding: 2.5rem var(--bathgiant-gutter-x, 1.25rem) 2rem;
background: #f1f3f5;
color: #1a1a1a;
text-align: center;
margin: 0 calc(-1 * var(--bathgiant-gutter-x, 1.25rem)) 0;
border-bottom: 1px solid #e0e2e5;
}
.bathgiant-pkg-header__label {
display: inline-block;
font-family: var(--bathgiant-font-sans);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #6b7280;
margin-bottom: 0.4rem;
}
.bathgiant-pkg-header__title {
margin: 0 0 1rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.6rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
color: #1a1a1a;
}
.bathgiant-pkg-header__prices {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-bottom: 0.75rem;
}
.bathgiant-pkg-header__price {
display: flex;
flex-direction: column;
}
.bathgiant-pkg-header__price-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}
.bathgiant-pkg-header__price-value {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
}
.bathgiant-pkg-header__price--trade .bathgiant-pkg-header__price-value {
color: #16a34a;
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}
.bathgiant-pkg-header__price--trade .bathgiant-pkg-header__price-label {
color: #15803d;
}
.bathgiant-pkg-header__saving {
align-self: center;
font-family: var(--bathgiant-font-sans);
font-size: 0.78rem;
font-weight: 700;
color: #b45309;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(180, 83, 9, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 999px;
}
.bathgiant-pkg-header__count {
display: inline-block;
font-family: var(--bathgiant-font-sans);
font-size: 0.78rem;
font-weight: 500;
color: #6b7280;
} .single-bg_bathroom_package {
--bathgiant-pkg-stack-gap: 1.5rem;
} .bathgiant-pkg-blocks {
margin: var(--bathgiant-pkg-stack-gap, 1.5rem) 0;
}
.bathgiant-pkg-blocks__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--bathgiant-pkg-stack-gap, 1.5rem);
}
.bathgiant-pkg-block {
grid-column: span 12;
} .bathgiant-pkg-block--full {
position: relative;
overflow: hidden;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__media {
width: 100%;
height: 35vh;
min-height: 260px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2.5rem 2rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
color: #fff;
} .bathgiant-pkg-block--full .bathgiant-pkg-block__overlay--below,
.bathgiant-pkg-block--full.bathgiant-pkg-block--has-video .bathgiant-pkg-block__overlay {
position: static;
inset: auto;
background: #f8fafc;
color: #0f172a;
padding: 1.5rem 2rem;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay--below .bathgiant-pkg-block__cta,
.bathgiant-pkg-block--full.bathgiant-pkg-block--has-video .bathgiant-pkg-block__cta {
color: #fff;
background: var(--bathgiant-brand-deep, #1e3a5f);
border: 1.5px solid var(--bathgiant-brand-deep, #1e3a5f);
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay--below .bathgiant-pkg-block__cta:hover,
.bathgiant-pkg-block--full.bathgiant-pkg-block--has-video .bathgiant-pkg-block__cta:hover {
background: var(--bathgiant-color-primary-dark, #162d4a);
border-color: var(--bathgiant-color-primary-dark, #162d4a);
}
.bathgiant-pkg-block--full.bathgiant-pkg-block--has-video .bathgiant-pkg-block__heading,
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay--below .bathgiant-pkg-block__heading {
color: #0f172a;
}
.bathgiant-pkg-block--full.bathgiant-pkg-block--has-video .bathgiant-pkg-block__text,
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay--below .bathgiant-pkg-block__text {
color: #475569;
opacity: 1;
}
.bathgiant-pkg-block__media--video {
position: relative;
width: 100%;
background: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.bathgiant-pkg-block__media--video iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
.bathgiant-pkg-block__media--video video {
display: block;
width: 100%;
max-width: 100%;
object-fit: cover;
border: 0;
} .bathgiant-pkg-block--split {
display: flex;
align-items: stretch;
min-height: 320px;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__media {
flex: 0 0 55%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 320px;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5rem 2rem;
background: #f8fafc;
}
.bathgiant-pkg-block--image-right {
flex-direction: row-reverse;
}
.bathgiant-pkg-block--image-right .bathgiant-pkg-block__content {
text-align: right;
align-items: flex-end;
} @media (min-width: 992px) {
.bathgiant-pkg-block--split {
overflow: visible;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__content {
overflow: visible;
}
.bathgiant-pkg-block--image-left
.bathgiant-pkg-block__content:has(.bathgiant-pkg-block__heading):has(.bathgiant-pkg-block__text)
.bathgiant-pkg-block__heading {
position: relative;
z-index: 2;
margin-left: -32%;
max-width: 132%;
font-size:2.4rem;
margin-bottom:1.8rem;
}
.bathgiant-pkg-block--image-right
.bathgiant-pkg-block__content:has(.bathgiant-pkg-block__heading):has(.bathgiant-pkg-block__text)
.bathgiant-pkg-block__heading {
position: relative;
z-index: 2;
align-self: stretch;
margin-right: -42%;
margin-left: 0;
max-width: none;
width: calc(100% + 42%);
}
}
@media (max-width: 991px) {
.bathgiant-pkg-block--split
.bathgiant-pkg-block__content:has(.bathgiant-pkg-block__heading):has(.bathgiant-pkg-block__text)
.bathgiant-pkg-block__heading {
margin-left: 0;
margin-right: 0;
max-width: none;
width: auto;
align-self: auto;
}
} .bathgiant-pkg-block--text {
padding: 3rem 2rem;
text-align: center;
background: #fff;
} .bathgiant-pkg-block__heading {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.6rem;
color: inherit;
}
.bathgiant-pkg-block--text .bathgiant-pkg-block__heading,
.bathgiant-pkg-block--split .bathgiant-pkg-block__heading {
color: #0f172a;
}
.bathgiant-pkg-block__text {
font-family: var(--bathgiant-font-sans);
font-size: 0.92rem;
line-height: 1.6;
margin: 0 0 1rem;
opacity: 0.9;
}
.bathgiant-pkg-block--text .bathgiant-pkg-block__text,
.bathgiant-pkg-block--split .bathgiant-pkg-block__text {
color: #475569;
opacity: 1;
}
.bathgiant-pkg-block__cta {
display: inline-block;
padding: 0.55rem 1.4rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
border-radius: 999px;
transition: all 0.2s ease;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__cta {
color: #fff;
background: rgba(255, 255, 255, 0.18);
border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__cta:hover {
background: rgba(255, 255, 255, 0.35);
border-color: #fff;
color: #fff;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__cta,
.bathgiant-pkg-block--text .bathgiant-pkg-block__cta {
color: #fff;
background: var(--bathgiant-brand-deep, #1e3a5f);
border: 1.5px solid var(--bathgiant-brand-deep, #1e3a5f);
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__cta:hover,
.bathgiant-pkg-block--text .bathgiant-pkg-block__cta:hover {
background: var(--bathgiant-color-primary-dark, #162d4a);
border-color: var(--bathgiant-color-primary-dark, #162d4a);
} @media (max-width: 767px) {
.bathgiant-pkg-blocks__grid {
grid-template-columns: repeat(12, 1fr);
}
.bathgiant-pkg-block {
grid-column: span 12 !important;
}
.bathgiant-pkg-block--split {
flex-direction: column !important;
min-height: auto;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__media {
flex: none;
min-height: 220px;
height: auto !important;
aspect-ratio: 4 / 3;
}
.bathgiant-pkg-block--split .bathgiant-pkg-block__content {
padding: 1.5rem 1.25rem;
text-align: left;
align-items: flex-start;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__media {
min-height: 200px;
height: 50vh !important;
}
.bathgiant-pkg-block--full .bathgiant-pkg-block__overlay {
padding: 1.5rem 1.25rem;
}
} .bathgiant-pkg-availability {
margin: var(--bathgiant-pkg-stack-gap, 1.5rem) 0 0;
padding: 1.15rem 0.85rem 1.2rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: var(--bathgiant-radius-sm, 6px);
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.bathgiant-pkg-availability__title {
font-family: var(--bathgiant-font-display);
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 0.35rem;
}
.bathgiant-pkg-availability__desc {
font-family: var(--bathgiant-font-sans);
font-size: 0.85rem;
color: #64748b;
margin: 0 0 1.25rem;
} .bathgiant-pkg-display-at {
text-align: center;
padding: 0;
margin: 0 0 var(--bathgiant-pkg-stack-gap, 1.5rem);
}
.bathgiant-pkg-display-at__header {
margin: 0 0 clamp(0.65rem, 1.5vw, 1rem);
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__header {
text-align: left;
margin: 0;
}
.bathgiant-pkg-display-at__title.bathgiant-heading-rule {
margin-bottom: 0.35rem;
}
.bathgiant-branch-single {
padding-top: clamp(1.15rem, 3vw, 1.75rem);
padding-bottom: clamp(1.6rem, 4vw, 2.5rem);
}
.bathgiant-branch-single .bathgiant-breadcrumb-region {
margin-bottom: clamp(0.85rem, 2vw, 1.25rem);
}
.bathgiant-branch-single .bathgiant-pkg-display-at {
margin-bottom: 1.25rem;
}
.bathgiant-branch-single .bathgiant-showroom-booking {
margin-top: clamp(2rem, 5vw, 3rem);
}
.bathgiant-branch-single .bathgiant-pkg-display-at__header {
margin-top: 0.15rem;
}
.bathgiant-pkg-display-at__showroom-heading {
margin: 0 0 1rem;
padding: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bathgiant-store-ink);
}
.bathgiant-branch-single .bathgiant-pkg-display-at__showroom-heading {
font-size: clamp(1.25rem, 2.6vw, 1.65rem);
margin-bottom: 0rem;
} .bathgiant-branch-showroom-packages {
margin: 0 0 2rem;
}
.bathgiant-branch-showroom-packages__header {
margin-bottom: 1.35rem;
text-align: center;
}
.bathgiant-branch-showroom-packages__intro {
margin: 0.65rem auto 0;
max-width: 42rem;
font-size: 1.05rem;
line-height: 1.55;
color: var(--bathgiant-muted, #5c6570);
}
.bathgiant-branch-showroom-packages__list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bathgiant-branch-showroom-row {
display: flex;
align-items: stretch;
min-height: 280px;
background: #fff;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: var(--bathgiant-radius-lg, 16px);
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06), 0 10px 28px rgba(15, 20, 25, 0.05);
}
@media (min-width: 992px) {
.bathgiant-branch-showroom-packages__list {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.25rem;
align-items: stretch;
}
.bathgiant-branch-showroom-row {
grid-column: span 6;
min-height: 260px;
} .bathgiant-branch-showroom-row--media-left {
grid-column: 7 / span 6;
}
}
.bathgiant-branch-showroom-row__media {
position: relative;
flex: 0 0 50%;
display: block;
min-height: 240px;
background: #eef2f7;
overflow: hidden;
}
.bathgiant-branch-showroom-row__img {
display: block;
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
transition: transform 0.35s ease;
}
.bathgiant-branch-showroom-row__img--fallback {
object-fit: contain;
background-color: #1a6fb5;
}
.bathgiant-branch-showroom-row:hover .bathgiant-branch-showroom-row__img:not(.bathgiant-branch-showroom-row__img--fallback) {
transform: scale(1.03);
}
.bathgiant-branch-showroom-row__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 240px;
background: linear-gradient(135deg, #e8edf4 0%, #f4f7fb 100%);
color: var(--bathgiant-muted, #5c6570);
font-size: 0.9rem;
}
.bathgiant-branch-showroom-row__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.65rem;
padding: clamp(1.25rem, 3vw, 2rem);
min-width: 0;
}
.bathgiant-branch-showroom-row--media-right {
flex-direction: row-reverse;
}
@media (min-width: 992px) {
.bathgiant-branch-showroom-row__content {
padding: clamp(1rem, 1.5vw, 1.35rem);
}
.bathgiant-branch-showroom-row__title {
font-size: clamp(1.05rem, 1.35vw, 1.28rem);
}
.bathgiant-branch-showroom-row__excerpt {
font-size: 0.9rem;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.bathgiant-branch-showroom-row__price {
font-size: 1.05rem;
}
}
.bathgiant-branch-showroom-row__brands {
margin: 0;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bathgiant-muted, #5c6570);
}
.bathgiant-branch-showroom-row__title {
margin: 0;
font-size: clamp(1.25rem, 2.5vw, 1.65rem);
line-height: 1.2;
font-weight: 700;
}
.bathgiant-branch-showroom-row__title a {
color: inherit;
text-decoration: none;
}
.bathgiant-branch-showroom-row__title a:hover {
color: var(--bathgiant-accent, #0b6e4f);
}
.bathgiant-branch-showroom-row__excerpt {
margin: 0;
font-size: 0.98rem;
line-height: 1.55;
color: var(--bathgiant-muted, #5c6570);
}
.bathgiant-branch-showroom-row__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1rem;
margin-top: 0.15rem;
}
.bathgiant-branch-showroom-row__price {
font-size: 1.2rem;
font-weight: 700;
color: var(--bathgiant-text, #0f1419);
}
.bathgiant-branch-showroom-row__price--rrp {
font-size: 0.9rem;
font-weight: 500;
color: var(--bathgiant-muted, #5c6570);
text-decoration: line-through;
}
.bathgiant-branch-showroom-row__price--now {
color: var(--bathgiant-accent, #0b6e4f);
}
.bathgiant-branch-showroom-row__count {
font-size: 0.88rem;
color: var(--bathgiant-muted, #5c6570);
}
.bathgiant-branch-showroom-row__cta {
align-self: flex-start;
margin-top: 0.35rem;
}
@media (max-width: 991px) {
.bathgiant-branch-showroom-packages__list {
display: flex;
flex-direction: column;
}
.bathgiant-branch-showroom-row,
.bathgiant-branch-showroom-row--media-right {
grid-column: auto;
flex-direction: column;
min-height: 0;
}
.bathgiant-branch-showroom-row__media {
flex: none;
width: 100%;
}
.bathgiant-branch-showroom-row__img,
.bathgiant-branch-showroom-row__placeholder {
min-height: 220px;
}
.bathgiant-branch-showroom-row__excerpt {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
}
.bathgiant-branch-single__editorial {
margin-top: 0;
}
.bathgiant-pkg-display-at__title--page.bathgiant-heading-rule .bathgiant-heading-rule__text {
font-size: clamp(1.35rem, 3vw, 1.9rem);
font-weight: 700;
}
.bathgiant-pkg-display-at__shell {
background: #fff;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: var(--bathgiant-radius-lg, 16px);
padding: clamp(1.1rem, 2.5vw, 1.65rem) clamp(1rem, 2.5vw, 1.75rem) clamp(1.2rem, 2.5vw, 1.75rem);
box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06), 0 12px 32px rgba(15, 20, 25, 0.06);
}
.bathgiant-pkg-display-at--compact {
text-align: left;
padding: 0;
margin: 1rem 0 0;
border-top: 0;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__shell {
padding: clamp(0.95rem, 2.2vw, 1.25rem);
border-color: #dce6f2;
box-shadow: 0 8px 24px rgba(25, 44, 71, 0.06);
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__title--sidebar {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0 0 0.85rem;
font-size: 1.05rem;
line-height: 1.35;
font-weight: 700;
color: #0f172a;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__title-icon {
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__title-icon svg {
display: block;
}
.bathgiant-product-single__summary .bathgiant-pkg-display-at--compact {
margin-top: 1rem;
}
.bathgiant-pkg-display-at__eyebrow {
font-family: var(--bathgiant-font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #64748b;
margin: 0 0 0.65rem;
}
.bathgiant-pkg-display-at__content-col .bathgiant-pkg-display-at__eyebrow {
text-align: left;
}
.bathgiant-pkg-display-at__intro {
margin: 0;
text-align: left;
}
.bathgiant-pkg-display-at__photo {
margin: 0;
min-width: 0;
max-width: 100%;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e8ecf1;
box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06);
line-height: 0;
}
.bathgiant-pkg-display-at__photo .bathgiant-pkg-display-at__photo-img {
width: 100%;
height: auto;
display: block;
}
.bathgiant-pkg-display-at__list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__list {
justify-content: center;
}
.bathgiant-pkg-display-at__badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 600;
color: var(--bathgiant-brand-deep, #2f68c4);
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 999px;
box-shadow: none;
}
.bathgiant-pkg-display-at__badge svg {
flex-shrink: 0;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-pkg-display-at__appointment {
margin: 0;
max-width: none;
text-align: left;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__appointment {
margin-bottom: 0;
}
.bathgiant-pkg-display-at__badge--link {
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: min(22rem, 100%);
box-sizing: border-box;
padding: 0.62rem 1.2rem;
font-size: 0.875rem;
font-weight: 600;
border: none;
border-radius: 10px;
color: #fff;
background: linear-gradient(180deg, var(--bathgiant-brand, #3d7dd9) 0%, var(--bathgiant-brand-deep, #2f68c4) 100%);
box-shadow: 0 2px 8px var(--bathgiant-btn-shadow);
transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.15s ease;
}
.bathgiant-pkg-display-at__badge--link:hover,
.bathgiant-pkg-display-at__badge--link:focus-visible {
filter: brightness(1.05);
box-shadow: 0 4px 16px var(--bathgiant-btn-shadow-hover);
outline: none;
transform: translateY(-1px);
}
.bathgiant-pkg-display-at__badge--link svg {
color: #fff;
}
.bathgiant-pkg-display-at__badge--select {
cursor: pointer;
font: inherit;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bathgiant-pkg-display-at__badge--select:hover,
.bathgiant-pkg-display-at__badge--select:focus-visible {
border-color: var(--bathgiant-brand-deep, #2f68c4);
outline: none;
}
.bathgiant-pkg-display-at__badge--select.is-active {
color: #fff;
background: var(--bathgiant-brand-deep, #2f68c4);
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 2px 12px var(--bathgiant-btn-shadow);
}
.bathgiant-pkg-display-at__badge--select.is-active svg {
color: #fff;
}
.bathgiant-pkg-display-at__panels {
margin-top: 1.25rem;
}
.bathgiant-pkg-display-at--single-branch .bathgiant-pkg-display-at__panels {
margin-top: 0;
}
.bathgiant-pkg-display-at__split {
display: grid;
grid-template-columns: 1fr;
gap: 1.35rem;
align-items: stretch;
text-align: left;
}
@media (min-width: 768px) {
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__split:not(.bathgiant-pkg-display-at__split--no-map) {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 1.5rem clamp(1.35rem, 3.5vw, 2.5rem);
align-items: stretch;
}
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__split:not(.bathgiant-pkg-display-at__split--no-map) .bathgiant-pkg-display-at__map-col {
min-height: 0;
align-self: stretch;
height: 100%;
}
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__split:not(.bathgiant-pkg-display-at__split--no-map) .bathgiant-pkg-display-at__map {
flex: 1 1 auto;
min-height: 280px;
aspect-ratio: auto;
}
}
.bathgiant-pkg-display-at__split--no-map {
grid-template-columns: 1fr;
}
.bathgiant-pkg-display-at__map-col {
min-width: 0;
display: flex;
flex-direction: column;
}
.bathgiant-pkg-display-at__content-col {
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.bathgiant-pkg-display-at__content-inner {
display: flex;
flex-direction: column;
gap: 1.1rem;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__content-inner {
gap: 1rem;
}
@media (min-width: 768px) {
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__split:not(.bathgiant-pkg-display-at__split--no-map) .bathgiant-pkg-display-at__content-inner {
padding: 1rem 1.1rem 1.1rem;
background: linear-gradient(165deg, #fafbfc 0%, #f4f6f9 55%, #f1f4f8 100%);
border: 1px solid #e8ecf1;
border-radius: var(--bathgiant-radius-md, 12px);
gap: 1.1rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
}
@media (max-width: 767px) {
.bathgiant-pkg-display-at:not(.bathgiant-pkg-display-at--compact) .bathgiant-pkg-display-at__split:not(.bathgiant-pkg-display-at__split--no-map) .bathgiant-pkg-display-at__content-inner {
padding: 0.85rem 0.95rem 1rem;
margin-top: 0.25rem;
background: #fafbfc;
border: 1px solid #eceff4;
border-radius: var(--bathgiant-radius-md, 12px);
}
}
.bathgiant-pkg-display-at__map {
position: relative;
width: 100%;
max-width: none;
margin: 0;
flex: 1;
min-height: 220px;
aspect-ratio: 16 / 10;
border-radius: var(--bathgiant-radius-md, 12px);
overflow: hidden;
border: 1px solid var(--bathgiant-border, #e4e9f0);
box-shadow: 0 4px 20px rgba(15, 20, 25, 0.08);
background: #e2e8f0;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__map {
min-height: 168px;
aspect-ratio: 16 / 9;
border-radius: 10px;
box-shadow: none;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__split {
gap: 0.85rem;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__list {
margin-bottom: 0.15rem;
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__panels {
margin-top: 0.75rem;
}
.bathgiant-pkg-display-at--compact.bathgiant-pkg-display-at--single-branch .bathgiant-pkg-display-at__panels {
margin-top: 0;
}
.bathgiant-pkg-display-at__map iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}
.bathgiant-pkg-display-at__visit {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-width: 0;
max-width: 100%;
}
.bathgiant-pkg-display-at__address-wrap {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.bathgiant-pkg-display-at__address-pin {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.12rem;
color: var(--bathgiant-brand-deep, #2f68c4);
opacity: 0.85;
}
.bathgiant-pkg-display-at__address-pin svg {
display: block;
width: 100%;
height: 100%;
}
.bathgiant-pkg-display-at__address {
margin: 0;
flex: 1;
min-width: 0;
max-width: 100%;
font-family: var(--bathgiant-font-sans);
font-size: 0.9rem;
line-height: 1.45;
font-weight: 500;
font-style: normal;
color: var(--bathgiant-ink, #1f2937);
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__address {
font-size: 0.875rem;
}
.bathgiant-pkg-display-at__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0.55rem 0.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
}
.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__actions {
justify-content: flex-start;
}
.bathgiant-pkg-display-at__cta {
text-align: center;
flex: 0 1 auto;
min-width: 0;
box-sizing: border-box;
border-radius: 8px;
padding: 0.45rem 1rem;
font-size: 0.8125rem;
font-weight: 600;
background: #fff !important;
color: var(--bathgiant-ink, #1f2937) !important;
border: 1px solid #cbd5e1 !important;
box-shadow: none !important;
}
.bathgiant-pkg-display-at__cta:hover,
.bathgiant-pkg-display-at__cta:focus-visible {
background: #f8fafc !important;
border-color: #94a3b8 !important;
color: var(--bathgiant-ink, #1f2937) !important;
}
.bathgiant-pkg-display-at__cta--google {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.bathgiant-pkg-display-at__google-icon {
display: block;
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.bathgiant-pkg-display-at__actions .bathgiant-pkg-display-at__phone {
margin-left: auto;
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 0.1rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 0.2rem 0 0.2rem 0.85rem;
border-left: 1px solid #e2e8f0;
text-decoration: none;
}
@media (max-width: 520px) {
.bathgiant-pkg-display-at__actions .bathgiant-pkg-display-at__phone {
margin-left: 0;
width: 100%;
align-items: flex-start;
border-left: 0;
border-top: 1px solid #e2e8f0;
padding: 0.5rem 0 0;
}
}
.bathgiant-pkg-display-at__phone-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
}
.bathgiant-pkg-display-at__phone-num {
font-family: var(--bathgiant-font-sans);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-pkg-display-at__phone:hover .bathgiant-pkg-display-at__phone-num,
.bathgiant-pkg-display-at__phone:focus-visible .bathgiant-pkg-display-at__phone-num {
text-decoration: underline;
}
.bathgiant-pkg-display-at__branch-link {
margin: 0.15rem 0 0;
padding-top: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.8125rem;
text-align: left;
}
.bathgiant-pkg-display-at__branch-link a {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #64748b;
font-weight: 600;
text-decoration: none;
border-bottom: none;
padding-bottom: 0;
transition: color 0.2s ease;
}
.bathgiant-pkg-display-at__branch-link a::after {
content: "";
display: inline-block;
width: 0.3em;
height: 0.3em;
margin-left: 0.05em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg) translateY(-0.06em);
opacity: 0.7;
} .bathgiant-pkg-display-at--links {
margin: 1rem 0 0;
padding: 0;
}
.bathgiant-pkg-display-at--links .bathgiant-pkg-display-at__title {
margin-bottom: 0.65rem;
}
.bathgiant-pkg-display-at--links.bathgiant-pkg-display-at--compact .bathgiant-pkg-display-at__title--sidebar {
margin-bottom: 0.75rem;
}
.bathgiant-pkg-display-at__branch-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-pkg-display-at__branch-links-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.85rem;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: 999px;
background: #fff;
color: var(--bathgiant-text, #0f1419);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bathgiant-pkg-display-at__branch-links-item svg {
flex-shrink: 0;
color: var(--bathgiant-accent, #0b6e4f);
}
.bathgiant-pkg-display-at__branch-links-item:hover,
.bathgiant-pkg-display-at__branch-links-item:focus-visible {
border-color: var(--bathgiant-accent, #0b6e4f);
color: var(--bathgiant-accent, #0b6e4f);
background: #f4fbf8;
}
.bathgiant-product-single__summary .bathgiant-pkg-display-at--links {
margin-top: 1.15rem;
}
.bathgiant-pkg-display-at__branch-link a:hover,
.bathgiant-pkg-display-at__branch-link a:focus-visible {
color: var(--bathgiant-brand-deep, #2f68c4);
outline: none;
} .bathgiant-pkg-products-col {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 1.5rem;
width: 100%;
}
.bathgiant-pkg-products-col > * {
grid-column: 1 / -1;
min-width: 0;
}
@media (min-width: 1200px) {
.bathgiant-pkg-brochure .bathgiant-pkg-products-col > * {
grid-column: 3 / 11;
}
} .bathgiant-pkg-products-heading {
text-align: center;
padding: var(--bathgiant-pkg-stack-gap, 1.5rem) 1rem 1.25rem;
border-top: 1px solid #e2e8f0;
margin-top: 0;
}
.bathgiant-pkg-products-heading__title.bathgiant-heading-rule {
margin-bottom: 0.35rem;
}
.bathgiant-pkg-products-heading__count {
font-family: var(--bathgiant-font-sans);
font-size: 0.85rem;
color: #64748b;
margin: 0;
} .bathgiant-pkg-intro {
max-width: 48rem;
margin: 0 auto var(--bathgiant-pkg-stack-gap, 1.5rem);
text-align: center;
}
.bathgiant-pkg-intro__title {
margin: 0 0 0.5rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
font-weight: 700;
color: #0f172a;
}
.bathgiant-pkg-intro__body {
font-size: 0.95rem;
line-height: 1.65;
color: #475569;
margin-bottom: 0.75rem;
}
.bathgiant-pkg-intro__count {
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0.25rem 0 1.5rem;
}
.bathgiant-pkg-intro__availability {
text-align: left;
max-width: 36rem;
margin: 0 auto;
} .bathgiant-pkg-divider {
display: flex;
align-items: center;
gap: 1.25rem;
margin: 3rem 0 1rem;
}
.bathgiant-pkg-divider::before,
.bathgiant-pkg-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--bathgiant-border, #e2e8f0);
}
.bathgiant-pkg-divider__text {
font-family: var(--bathgiant-font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #64748b;
white-space: nowrap;
} .bathgiant-pkg-editorial {
padding-bottom: 5rem;
}
.bathgiant-pkg-split {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin-bottom: var(--bathgiant-pkg-stack-gap, 1.5rem);
}
@media (min-width: 768px) {
.bathgiant-pkg-split {
grid-template-columns: 55fr 45fr;
align-items: stretch;
margin-bottom: var(--bathgiant-pkg-stack-gap, 1.5rem);
}
.bathgiant-pkg-split--reversed {
grid-template-columns: 45fr 55fr;
}
.bathgiant-pkg-split--reversed .bathgiant-pkg-split__media {
order: 2;
}
.bathgiant-pkg-split--reversed .bathgiant-pkg-split__content {
order: 1;
}
}
.bathgiant-pkg-split__media {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--bathgiant-light, #f8fafc);
min-height: 280px;
}
@media (min-width: 768px) {
.bathgiant-pkg-split__media {
min-height: 0;
}
}
.bathgiant-pkg-split__img-link {
display: block;
width: 100%;
height: 100%;
}
.bathgiant-pkg-split__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.bathgiant-pkg-split__img--fallback {
object-fit: contain;
background-color: #1a6fb5;
}
.bathgiant-pkg-split__img-link:hover .bathgiant-pkg-split__img:not(.bathgiant-pkg-split__img--fallback) {
transform: scale(1.03);
}
.bathgiant-pkg-split__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 280px;
text-decoration: none;
color: #94a3b8;
font-size: 0.85rem;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-pkg-split__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.bathgiant-pkg-split__content {
margin-left: -40px;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
justify-content: center;
}
.bathgiant-pkg-split--reversed .bathgiant-pkg-split__content {
margin-left: 0;
margin-right: -40px;
}
}
.bathgiant-pkg-split__card {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
padding: clamp(1.25rem, 3vw, 2rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 768px) {
.bathgiant-pkg-split__card {
background: rgba(255, 255, 255, 0.88);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.bathgiant-pkg-split__specs {
background: rgba(255, 255, 255, 0.55);
}
}
.bathgiant-pkg-split__category {
display: inline-block;
align-self: flex-start;
font-family: var(--bathgiant-font-sans);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bathgiant-brand-deep, #1e3a5f);
background: rgba(30, 58, 95, 0.06);
padding: 0.2rem 0.55rem;
border-radius: 3px;
}
.bathgiant-pkg-split__brand {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bathgiant-pkg-split__brand a {
color: inherit;
text-decoration: none;
}
.bathgiant-pkg-split__brand a:hover {
color: var(--bathgiant-brand-deep, #1e3a5f);
}
.bathgiant-pkg-split__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
color: #0f172a;
}
.bathgiant-pkg-split__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.bathgiant-pkg-split__title a:hover {
color: var(--bathgiant-brand-deep, #1e3a5f);
}
.bathgiant-pkg-split__sku {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
color: #94a3b8;
}
.bathgiant-pkg-split__sku-label {
font-weight: 600;
color: #64748b;
}
.bathgiant-pkg-split__colours {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-pkg-split__colour {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
color: #475569;
}
.bathgiant-swatch--sm {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.bathgiant-pkg-split__desc {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.85rem;
line-height: 1.55;
color: #475569;
}
.bathgiant-pkg-split__specs {
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
color: #475569;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 8px;
padding: 0;
margin-top: 0.25rem;
}
.bathgiant-pkg-split__specs summary {
cursor: pointer;
font-weight: 600;
color: #1e293b;
padding: 0.5rem 0.75rem;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.bathgiant-pkg-split__specs summary::after {
content: "+";
font-size: 1rem;
color: #94a3b8;
transition: transform 0.2s ease;
}
.bathgiant-pkg-split__specs[open] summary::after {
content: "\2212";
}
.bathgiant-pkg-split__specs ul {
margin: 0;
padding: 0 0.75rem 0.6rem;
list-style: none;
}
.bathgiant-pkg-split__specs li {
padding: 0.25rem 0;
border-top: 1px solid #f1f5f9;
font-size: 0.78rem;
line-height: 1.4;
}
.bathgiant-pkg-split__specs li strong {
color: #1e293b;
} .bathgiant-pkg-split__cart-bar {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--bathgiant-border, #e2e8f0);
}
.bathgiant-pkg-split__pricing {
padding: 0;
}
.bathgiant-pkg-split__price-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
}
.bathgiant-pkg-split__price-pill {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.bathgiant-pkg-split__price-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-pkg-split__price-value {
font-family: var(--bathgiant-font-display);
font-size: 1.35rem;
font-weight: 700;
color: #0f172a;
line-height: 1.1;
}
.bathgiant-pkg-split__price-pill--list .bathgiant-pkg-split__price-value {
font-size: 0.95rem;
color: #94a3b8;
text-decoration: line-through;
}
.bathgiant-pkg-split__price-pill--trade .bathgiant-pkg-split__price-value {
color: #16a34a;
font-size: 1.35rem;
}
.bathgiant-pkg-split__price-pill--trade .bathgiant-pkg-split__price-label {
color: #16a34a;
}
.bathgiant-pkg-split__avail {
font-size: 0.78rem;
}
.bathgiant-pkg-split__add-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
font-weight: 700;
border-radius: 10px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bathgiant-pkg-split__add-btn.is-in-cart {
background: transparent;
color: #16a34a;
border: 2px solid #16a34a;
}
.bathgiant-pkg-split__add-btn.is-in-cart:hover {
background: rgba(22, 163, 74, 0.06);
}
.bathgiant-pkg-split__add-btn.is-adding {
pointer-events: none;
opacity: 0.7;
}
.bathgiant-pkg-split__add-btn.is-adding .bathgiant-pkg-line__add-spinner {
display: inline-block;
} .bathgiant-pkg-sticky-bar {
position: sticky;
bottom: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--bathgiant-border, #e2e8f0);
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
}
.bathgiant-pkg-sticky-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: var(--bathgiant-max-width, 1200px);
margin: 0 auto;
padding: 1.25rem var(--bathgiant-gutter-x, 1.5rem);
}
.bathgiant-pkg-sticky-bar__total {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.bathgiant-pkg-sticky-bar__total-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-pkg-sticky-bar__total-value {
font-family: var(--bathgiant-font-display);
font-size: 1.3rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-pkg-sticky-bar__btn {
flex-shrink: 0;
padding: 0.7rem 2rem;
font-size: 0.85rem;
font-weight: 700;
border-radius: 10px;
}
@media (max-width: 600px) {
.bathgiant-pkg-sticky-bar__inner {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.bathgiant-pkg-sticky-bar__btn {
width: 100%;
}
} .bathgiant-pkg-related {
background: #f8fafc;
border-top: 1px solid #e5e7eb;
padding: 3rem 0 3.5rem;
}
.bathgiant-pkg-related__inner {
max-width: var(--bathgiant-max-width, 1200px);
margin: 0 auto;
padding: 0 var(--bathgiant-gutter-x, 1.25rem);
}
.bathgiant-pkg-related__title {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
margin: 0 0 0.3rem;
text-align: center;
text-wrap: balance;
}
.bathgiant-pkg-related__desc {
font-family: var(--bathgiant-font-sans);
font-size: 0.88rem;
color: #64748b;
text-align: center;
margin: 0 0 2rem;
}
.bathgiant-pkg-related__grid {
margin-bottom: 1.5rem;
}
.bathgiant-pkg-related__browse {
text-align: center;
} .bathgiant-pkg-tile-calc {
margin: 0.4rem 0 0.25rem;
padding: 0.75rem 0.85rem;
background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
border: 1px solid #c7d8ed;
border-radius: 10px;
font-size: 0.82rem;
}
.bathgiant-pkg-tile-calc__title {
margin: 0 0 0.5rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 700;
color: #1e3a5f;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.bathgiant-pkg-tile-calc__title small {
font-weight: 500;
color: #64748b;
font-size: 0.72rem;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall {
display: flex;
align-items: flex-end;
gap: 0.4rem;
margin-bottom: 0.3rem;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__fields {
display: flex;
gap: 0.35rem;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__label {
display: flex;
flex-direction: column;
font-size: 0.68rem;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__label input {
width: 4.5rem;
padding: 0.3rem 0.35rem;
margin-top: 0.15rem;
border: 1px solid #cbd5e1;
border-radius: 5px;
font-size: 0.8rem;
background: #fff;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__label input:focus {
outline: none;
border-color: #4a90d9;
box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.15);
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__remove {
padding: 0.2rem 0.4rem;
font-size: 0.68rem;
border: none;
background: none;
color: #94a3b8;
cursor: pointer;
}
.bathgiant-pkg-tile-calc .bathgiant-tile-wall__remove:hover {
color: #dc2626;
}
.bathgiant-pkg-tile-calc__controls {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0.5rem 0;
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.bathgiant-pkg-tile-calc__wastage-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
font-weight: 600;
color: #475569;
width: 100%;
}
.bathgiant-pkg-tile-calc__wastage-label input[type="range"] {
flex: 1;
min-width: 0;
accent-color: #1e3a5f;
}
.bathgiant-pkg-tile-calc__summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1rem;
margin: 0.4rem 0 0.3rem;
padding: 0.45rem 0.6rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 6px;
font-size: 0.78rem;
color: #334155;
min-height: 1.8em;
}
.bathgiant-pkg-tile-calc__summary:empty {
display: none;
}
.bathgiant-pkg-tile-calc__stat {
white-space: nowrap;
}
.bathgiant-pkg-tile-calc__stat strong {
color: #1e3a5f;
}
.bathgiant-pkg-tile-calc__footer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.3rem;
}
.bathgiant-pkg-tile-calc [data-tile-apply] {
font-size: 0.75rem;
}
.bathgiant-pkg-tile-calc [data-tile-apply]:disabled {
opacity: 0.6;
pointer-events: none;
}
.bathgiant-pkg-tile-calc__results {
display: none;
}
.bathgiant-pkg-contents__total-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0.7rem 0.85rem;
border-top: 1px solid #e2e8f0;
background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
color: #fff;
}
.bathgiant-pkg-contents__total-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bathgiant-pkg-contents__total-value {
font-family: var(--bathgiant-font-display);
font-size: 1.15rem;
font-weight: 700;
}
.bathgiant-pkg-line__avail {
display: block;
margin-top: 0.1rem;
min-height: 0;
font-size: 0.68rem;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-pkg-line__avail:empty {
display: none;
}
.bathgiant-pkg-avail-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
}
.bathgiant-pkg-avail-badge--ok {
background: #ecfdf5;
color: #047857;
}
.bathgiant-pkg-avail-badge--warn {
background: #fef3c7;
color: #92400e;
} .bathgiant-product-single__article {
margin: 0 0 2rem;
}
.bathgiant-product-single__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 900px) {
.bathgiant-product-single__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
}
.bathgiant-product-single__gallery {
position: static;
top: auto;
}
@media (min-width: 900px) {
.bathgiant-product-single__gallery {
--bathgiant-pdp-gallery-pad: 1.25rem;
--bathgiant-pdp-thumb-row: 4.75rem;
position: sticky;
top: var(--bathgiant-sticky-below-header);
align-self: start;
display: flex;
flex-direction: column;
max-height: calc(100dvh - var(--bathgiant-sticky-below-header) - var(--bathgiant-pdp-gallery-pad));
}
.bathgiant-product-single__gallery:not(:has(.bathgiant-product-single__thumbs)) {
--bathgiant-pdp-thumb-row: 0rem;
}
.bathgiant-product-single__hero {
flex: 0 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.bathgiant-product-single__placeholder {
flex: 0 1 auto;
aspect-ratio: 4 / 3;
min-height: 0;
max-height: calc(100dvh - var(--bathgiant-sticky-below-header) - var(--bathgiant-pdp-thumb-row) - 2rem);
}
.bathgiant-product-single__thumbs {
flex-shrink: 0;
}
}
.bathgiant-hero-banner:not(.bathgiant-hero-banner--homepage):not(.bathgiant-hero-banner--taxonomy):not(.bathgiant-hero-banner--branch-screen) {
position: relative;
margin: 0 calc(-1 * var(--bathgiant-gutter-x)) 2.5rem;
min-height: 360px;
background-color: #0f172a;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.bathgiant-hero-banner--taxonomy {
--bathgiant-archive-hero-height: 20vh;
position: relative;
width: auto;
margin: 0 calc(-1 * var(--bathgiant-gutter-x)) clamp(1rem, 2.5vw, 1.5rem);
overflow: hidden;
color: #fff;
outline: none;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__frame.bathgiant-wrap {
width: 100%;
max-width: var(--bathgiant-content-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
box-sizing: border-box;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__viewport--archive {
position: relative;
z-index: 1;
min-height: max(9rem, var(--bathgiant-archive-hero-height));
height: max(9rem, var(--bathgiant-archive-hero-height));
container-type: size;
container-name: bg-hero-viewport;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__slide {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
width: 100%;
min-height: 100%;
height: 100%;
padding: clamp(0.85rem, 2.5vw, 1.35rem) 0 0;
box-sizing: border-box;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__frame {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: stretch;
flex: 1 1 auto;
width: 100%;
min-height: 0;
padding-bottom: clamp(0.85rem, 2.2vw, 1.25rem);
box-sizing: border-box;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1;
align-self: end;
margin-bottom: 0;
min-width: 0;
max-width: min(44rem, 100%);
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero__title {
margin-bottom: 0.55rem;
font-size: clamp(1.35rem, 3.2vw, 2.15rem);
line-height: 1.14;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero__eyebrow {
margin-bottom: 0.45rem;
font-size: 0.6875rem;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero__lede {
margin-bottom: 0.85rem;
font-size: clamp(0.875rem, 1.8vw, 1rem);
line-height: 1.5;
max-width: 52ch;
color: rgba(255, 255, 255, 0.86);
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__delivery {
margin-bottom: 0;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__trust-anchor {
grid-column: 1;
grid-row: 2;
justify-self: end;
align-self: end;
min-width: 0;
max-width: min(20rem, 100%);
}
@media (min-width: 900px) {
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__frame {
grid-template-columns: minmax(0, 1fr) minmax(0, min(18rem, 34vw));
grid-template-rows: minmax(0, 1fr) auto;
column-gap: clamp(1rem, 2.5vw, 1.75rem);
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__content {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
}
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__trust-anchor {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 640px) {
.bathgiant-hero-banner--taxonomy .bathgiant-hero-banner__trust-anchor {
justify-self: stretch;
max-width: none;
}
}
@media (min-width: 900px) {
.bathgiant-hero-banner:not(.bathgiant-hero-banner--homepage):not(.bathgiant-hero-banner--taxonomy):not(.bathgiant-hero-banner--branch-screen) {
min-height: 480px;
}
}
.bathgiant-hero-banner__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
background: linear-gradient(
to top,
rgba(2, 6, 23, 0.95) 0%,
rgba(15, 23, 42, 0.7) 35%,
rgba(15, 23, 42, 0.25) 65%,
transparent 100%
);
padding: clamp(2rem, 5vw, 3.5rem);
}
.bathgiant-hero-banner__content {
max-width: 44rem;
}
.bathgiant-hero-banner__brand {
display: inline-block;
font-family: var(--bathgiant-font-sans);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 0.6rem;
padding: 0.25rem 0.7rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 3px;
}
.bathgiant-hero-banner__brand--logo {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.96);
border: none;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.bathgiant-hero-banner__brand-logo {
display: block;
max-height: 34px;
max-width: 150px;
width: auto;
height: auto;
object-fit: contain;
}
a.bathgiant-hero-banner__brand-link {
display: inline-flex;
text-decoration: none;
}
.bathgiant-hero-banner__title {
margin: 0 0 1rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.6rem, 4.5vw, 2.8rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.bathgiant-hero-banner__prices {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.5rem;
margin-bottom: 0.75rem;
}
.bathgiant-hero-banner__price {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.bathgiant-hero-banner__price-label {
font-family: var(--bathgiant-font-sans);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
}
.bathgiant-hero-banner__price-value {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.bathgiant-hero-banner__price--trade .bathgiant-hero-banner__price-value {
color: #4ade80;
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}
.bathgiant-hero-banner__price--trade .bathgiant-hero-banner__price-label {
color: #86efac;
}
.bathgiant-hero-banner__saving {
align-self: flex-end;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 700;
color: #fbbf24;
padding: 0.3rem 0.75rem;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.25);
border-radius: 4px;
white-space: nowrap;
}
.bathgiant-hero-banner__sku {
display: inline-block;
font-family: var(--bathgiant-font-sans);
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.02em;
margin-top: 0.25rem;
}
.bathgiant-product-single__hero {
margin: 0;
border-radius: 16px; overflow: visible;
background: var(--bathgiant-light);
border: 1px solid var(--bathgiant-border);
box-shadow: 0 8px 32px rgba(15, 20, 25, 0.06);
}
.bathgiant-product-single__hero-media,
.bathgiant-product-single__hero > .bathgiant-product-single__main-img,
.bathgiant-product-single__hero > .bathgiant-product-single__video-player {
border-radius: inherit;
overflow: hidden;
}
.bathgiant-product-single__hero-media {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.bathgiant-product-single__zoom-lens {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.bathgiant-product-single__hero-media,
.bathgiant-product-single__main-img {
cursor: zoom-in;
}
.bathgiant-product-single__zoom-lens {
position: absolute;
z-index: 5;
display: block;
width: clamp(9rem, 16vw, 11.5rem);
aspect-ratio: 1;
box-sizing: border-box;
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 50%;
background-color: #fff;
background-repeat: no-repeat;
box-shadow:
0 0 0 1px rgba(15, 20, 25, 0.18),
0 14px 36px rgba(15, 20, 25, 0.25);
opacity: 0;
visibility: hidden;
transform: scale(0.94);
pointer-events: none;
will-change: left, top, background-position;
transition: opacity 0.14s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.bathgiant-product-single__zoom-lens.is-visible {
opacity: 1;
visibility: visible;
transform: scale(1);
transition-delay: 0s;
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
.bathgiant-product-single__zoom-lens,
.bathgiant-product-single__zoom-lens.is-visible {
transition: none;
}
} .bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip,
.bathgiant-product-single__media-demo-notice {
position: absolute;
left: auto;
right: 0.65rem;
bottom: 0.65rem;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
padding: 0;
border: none;
border-radius: 50%;
overflow: visible;
background: rgba(255, 255, 255, 0.72);
color: #b8bcc4;
cursor: help;
box-shadow: 0 1px 4px rgba(15, 20, 25, 0.08);
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-product-single__media-demo-notice:hover,
.bathgiant-product-single__media-demo-notice:focus,
.bathgiant-product-single__media-demo-notice:focus-visible,
.bathgiant-product-single__media-demo-notice[aria-expanded="true"] {
color: #9ca3af;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 8px rgba(15, 20, 25, 0.1);
outline: none;
}
.bathgiant-product-single__media-demo-notice:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(156, 163, 175, 0.55);
}
.bathgiant-product-single__media-demo-notice-icon {
display: block;
} .bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip .bathgiant-tooltip {
left: auto;
right: 0;
bottom: calc(100% + 0.45rem);
transform: translateY(4px);
max-width: min(14rem, 72vw);
font-weight: 500;
z-index: 7;
}
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip .bathgiant-tooltip::after {
left: auto;
right: 0.4rem;
transform: none;
}
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip:focus .bathgiant-tooltip,
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip[aria-expanded="true"] .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip:focus .bathgiant-tooltip,
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-product-single__hero .bathgiant-product-single__media-demo-notice.bathgiant-has-tooltip[aria-expanded="true"] .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
@media (min-width: 900px) {
.bathgiant-product-single__hero-media {
background-size: contain;
background-position: center center;
aspect-ratio: 4 / 3;
flex: 0 1 auto;
min-height: 0;
max-height: calc(100dvh - var(--bathgiant-sticky-below-header) - var(--bathgiant-pdp-thumb-row, 4.75rem) - 2rem);
}
.bathgiant-product-single__video-player {
flex: 0 1 auto;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
max-height: calc(100dvh - var(--bathgiant-sticky-below-header) - var(--bathgiant-pdp-thumb-row, 4.75rem) - 2rem);
object-fit: contain;
background: #000;
}
}
.bathgiant-product-single__main-img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
object-fit: contain;
max-height: min(85vh, 720px);
margin: 0 auto;
background: #fff;
}
.bathgiant-product-single__placeholder {
aspect-ratio: 4 / 5;
border-radius: 16px;
background: linear-gradient(145deg, var(--bathgiant-light) 0%, #e8ecf2 100%);
border: 1px dashed var(--bathgiant-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: clamp(1rem, 3vw, 1.5rem);
text-align: center;
}
.bathgiant-product-single__placeholder-label {
font-size: 0.9rem;
color: var(--bathgiant-ink-muted);
font-weight: 600;
}
.bathgiant-product-single__placeholder-path {
font-size: 0.8125rem;
line-height: 1.45;
color: #64748b;
font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
word-break: break-word;
max-width: 100%;
}
.bathgiant-product-single__thumbs {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-product-single__thumb {
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: #fff;
line-height: 0;
opacity: 0.82;
transition: border-color 0.15s ease, opacity 0.15s ease;
}
.bathgiant-product-single__thumb:hover,
.bathgiant-product-single__thumb.is-active {
border-color: var(--bathgiant-brand);
opacity: 1;
}
.bathgiant-product-single__thumb img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
object-position: center;
background: #fff;
}
.bathgiant-product-single__thumb--video {
position: relative;
}
.bathgiant-product-single__thumb--video::after {
content: "";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
pointer-events: none;
}
.bathgiant-product-single__thumb-video-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
font-size: 1.5rem;
color: #fff;
background: var(--bathgiant-brand-deep, #1e3a5f);
}
.bathgiant-product-single__video-player {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 0;
background: #000;
}
.bathgiant-product-single__traits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin: 0 0 0.75rem;
}
.bathgiant-product-single__traits .bathgiant-product-single__colours,
.bathgiant-product-single__traits .bathgiant-product-single__colour-options {
margin: 0;
flex: 1 1 100%;
min-width: 0;
max-width: 100%;
}
.bathgiant-product-single__colour-current-inline {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
margin: 0;
}
.bathgiant-product-single__traits:has(.bathgiant-product-single__colour-options) {
align-items: flex-start;
}
.bathgiant-product-single__traits:has(.bathgiant-product-single__colour-options) .bathgiant-product-single__brand {
margin-left: auto;
align-self: flex-start;
}
.bathgiant-product-single__colour-options {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--bathgiant-border, #e5e7eb);
border-radius: 8px;
background: #f9fafb;
}
.bathgiant-product-single__colour-options--picker {
margin: 0 0 0.9rem;
}
.bathgiant-product-single__colour-options-label,
.bathgiant-product-single__colour-options-selected {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin: 0;
font-size: 0.9rem;
line-height: 1.35;
}
.bathgiant-product-single__colour-options-selected-swatch {
margin: 0;
flex-shrink: 0;
}
.bathgiant-product-single__colour-options-key {
font-weight: 600;
color: #5a6d82;
}
.bathgiant-product-single__colour-options-current {
font-weight: 700;
color: var(--bathgiant-text, #1f2937);
text-decoration: none;
}
a.bathgiant-product-single__colour-options-current:hover,
a.bathgiant-product-single__colour-options-current:focus-visible {
color: var(--bathgiant-accent, #c4a35a);
text-decoration: underline;
text-underline-offset: 3px;
}
.bathgiant-product-single__colour-options-picker {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bathgiant-product-single__also-available {
gap: 0.85rem;
}
.bathgiant-product-single__also-available-group--sizes {
padding-top: 0.75rem;
border-top: 1px solid var(--bathgiant-border, #e5e7eb);
}
.bathgiant-product-single__also-available-group--sizes:first-child {
padding-top: 0;
border-top: 0;
} .bathgiant-product-single__also-available--dual {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
.bathgiant-product-single__also-available--dual .bathgiant-product-single__also-available-group--colours,
.bathgiant-product-single__also-available--dual .bathgiant-product-single__also-available-group--sizes {
flex: none;
width: 100%;
min-width: 0;
padding-left: 0;
padding-right: 0;
border-left: 0;
}
.bathgiant-product-single__also-available--dual .bathgiant-product-single__also-available-group--sizes {
padding-top: 0.75rem;
border-top: 1px solid var(--bathgiant-border, #e5e7eb);
}
.bathgiant-product-single__colour-options-sub {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
}
.bathgiant-product-single__colour-options-solo {
display: inline-block;
margin-top: 0.15rem;
}
.bathgiant-product-single__colour-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.bathgiant-product-single__colour-chip-item {
margin: 0;
padding: 0;
}
a.bathgiant-product-single__colour-chip,
span.bathgiant-product-single__colour-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.3rem;
min-width: 4.25rem;
max-width: 6.5rem;
padding: 0.4rem 0.35rem 0.45rem;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
color: var(--bathgiant-ink, #1f2937);
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
a.bathgiant-product-single__colour-chip {
text-decoration: none;
}
a.bathgiant-product-single__colour-chip:hover,
a.bathgiant-product-single__colour-chip:focus-visible {
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 1px var(--bathgiant-brand-deep, #2f68c4);
color: var(--bathgiant-brand-deep, #2f68c4);
}
span.bathgiant-product-single__colour-chip.is-current {
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 1px var(--bathgiant-brand-deep, #2f68c4);
color: var(--bathgiant-brand-deep, #2f68c4);
cursor: default;
}
a.bathgiant-product-single__colour-chip--size,
span.bathgiant-product-single__colour-chip--size {
justify-content: center;
min-width: 3.75rem;
max-width: 7.5rem;
width: auto;
padding: 0.45rem 0.6rem;
}
span.bathgiant-product-single__colour-chip--size {
display: inline-flex;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--bathgiant-brand-deep, #2f68c4);
border-radius: inherit;
background: #fff;
color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 1px var(--bathgiant-brand-deep, #2f68c4);
cursor: default;
}
span.bathgiant-product-single__colour-chip--size.is-unavailable {
border-color: #d1d5db;
color: #9ca3af;
background: #f3f4f6;
box-shadow: none;
opacity: 0.72;
cursor: not-allowed;
}
span.bathgiant-product-single__colour-chip--size.is-unavailable .bathgiant-product-single__colour-chip-name {
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: #9ca3af;
}
a.bathgiant-product-single__colour-chip--size .bathgiant-product-single__colour-chip-name,
span.bathgiant-product-single__colour-chip--size .bathgiant-product-single__colour-chip-name {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.bathgiant-product-single__size-axes {
display: flex;
flex-direction: column;
gap: 0.55rem;
width: 100%;
}
.bathgiant-product-single__size-axis {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.28rem;
min-width: 0;
}
.bathgiant-product-single__size-axis-label {
color: var(--bathgiant-muted, #6b7280);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.2;
text-transform: uppercase;
}
.bathgiant-product-single__size-axis-chips {
margin: 0;
}
.bathgiant-product-single__colour-chip-swatch {
margin: 0;
flex-shrink: 0;
}
.bathgiant-product-single__colour-chip-name {
display: block;
width: 100%;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
hyphens: auto;
overflow-wrap: anywhere;
}
.bathgiant-product-single__traits .bathgiant-product-single__brand {
margin: 0 0 0 auto;
flex: 0 0 auto;
text-align: right;
}
.bathgiant-product-single__traits .bathgiant-product-single__brand.bathgiant-card__brand-logos {
display: flex;
justify-content: flex-end;
}
.bathgiant-product-single__traits .bathgiant-product-single__brand-logo {
object-position: right center;
}
.bathgiant-product-single__brand {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-product-single__brand.bathgiant-card__brand-logos {
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.bathgiant-product-single__brand-logo {
display: block;
max-height: 38px;
max-width: 170px;
width: auto;
height: auto;
object-fit: contain;
}
a.bathgiant-product-single__brand-link {
color: inherit;
text-decoration: none;
}
a.bathgiant-product-single__brand-link:hover,
a.bathgiant-product-single__brand-link:focus-visible {
color: var(--bathgiant-accent, #c4a35a);
text-decoration: underline;
text-underline-offset: 3px;
}
.bathgiant-product-single__colours {
margin: 0 0 0.75rem;
}
.bathgiant-product-single__colour-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.bathgiant-product-single__colour-item {
margin: 0;
padding: 0;
}
a.bathgiant-product-single__colour-link {
display: inline-flex;
align-items: center;
gap: 0;
text-decoration: none;
color: var(--bathgiant-ink);
font-weight: 600;
font-size: 0.95rem;
}
a.bathgiant-product-single__colour-link:hover,
a.bathgiant-product-single__colour-link:focus-visible {
color: var(--bathgiant-brand-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.bathgiant-product-single__title {
margin: 0 0 1rem;
font-size: clamp(1.65rem, 3.5vw, 2.25rem);
line-height: 1.15;
}
.bathgiant-product-share {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.35rem;
margin: -0.65rem 0 0.75rem;
font-size: 0.8125rem;
line-height: 1.4;
}
.bathgiant-product-share__label {
font-weight: 600;
color: #64748b;
}
.bathgiant-product-share__sep {
color: #cbd5e1;
font-weight: 400;
user-select: none;
}
.bathgiant-product-share__link {
padding: 0;
border: 0;
background: none;
color: var(--bathgiant-brand-deep, #0f4c5c);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.bathgiant-product-share__link:hover,
.bathgiant-product-share__link:focus-visible {
color: var(--bathgiant-ink, #0f172a);
}
.bathgiant-product-share__link--whatsapp {
color: #128c7e;
}
.bathgiant-product-share__link--facebook {
color: #1877f2;
}
.bathgiant-product-single__price-row-wrap {
margin: 0 0 1rem;
}
.bathgiant-product-single__price-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: stretch;
} .bathgiant-product-single__price-row--single {
justify-content: flex-start;
}
.bathgiant-product-single__price-row--single > .bathgiant-product-single__price-pill {
flex: 1 1 10rem;
max-width: calc(50% - 0.325rem);
}
@media (max-width: 22rem) {
.bathgiant-product-single__price-row--single > .bathgiant-product-single__price-pill {
max-width: 100%;
}
}
.bathgiant-product-single__price-pill {
flex: 1 1 10rem;
padding: 0.75rem 1rem;
border-radius: 12px;
border: 1px solid var(--bathgiant-border);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.bathgiant-product-single__price-pill--list {
background: #f8fafc;
}
.bathgiant-product-single__price-pill--trade {
background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
border-color: rgba(22, 101, 52, 0.25);
}
.bathgiant-product-single__price-pill-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__price-pill-value {
font-size: 1.45rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-product-single__price-pill--trade .bathgiant-product-single__price-pill-value {
color: #166534;
}
.bathgiant-product-single__price-pill--was {
background: #f8fafc;
border-color: #e2e8f0;
}
.bathgiant-product-single__price-pill--was .bathgiant-product-single__price-pill-value {
text-decoration: line-through;
color: #94a3b8;
}
.bathgiant-product-single__price-pill--was .bathgiant-product-single__price-pill-label {
color: #94a3b8;
}
.bathgiant-product-single__price-pill--now {
background: #fff;
border-color: #d1d5db;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.bathgiant-product-single__price-pill--now .bathgiant-product-single__price-pill-value {
color: #111827;
}
.bathgiant-product-card__price--rrp {
text-decoration: line-through;
color: #94a3b8;
font-weight: 600;
}
.bathgiant-product-card__price--now {
font-weight: 700;
color: var(--bathgiant-ink);
} @keyframes bg2026-showcase-price-gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.bathgiant-product-card--showcase .bathgiant-product-card__price--now,
.bathgiant-product-card--staff-pick .bathgiant-product-card__price--now {
color: var(--bathgiant-trade, #c41e1e);
background-image: linear-gradient(
135deg,
#6f1433 0%,
var(--bathgiant-trade-hover, #a81818) 42%,
var(--bathgiant-trade, #c41e1e) 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.bathgiant-product-card--showcase .bathgiant-product-card__price--now,
.bathgiant-product-card--staff-pick .bathgiant-product-card__price--now {
background-size: 200% 200%;
animation: bg2026-showcase-price-gradient-shift 12s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-product-card--showcase .bathgiant-product-card__price--now,
.bathgiant-product-card--staff-pick .bathgiant-product-card__price--now {
animation: none;
}
}
.bathgiant-package-card__price--rrp {
text-decoration: line-through;
color: #94a3b8;
font-weight: 600;
}
.bathgiant-package-card__price--now {
font-weight: 700;
font-size:1.4rem
}
.bathgiant-pkg-line__price--rrp {
text-decoration: line-through;
color: #94a3b8;
} .bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-product-single__price-pill--trade,
.bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-product-single__price-code-hint,
.bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-hero-banner__price--trade,
.bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-hero-banner__saving,
.bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-pkg-header__price--trade,
.bathgiant-product-single[data-bathgiant-price-view="list"] .bathgiant-pkg-header__saving {
display: none !important;
}
.bathgiant-product-single[data-bathgiant-price-view="trade"] .bathgiant-product-single__price-pill--list,
.bathgiant-product-single[data-bathgiant-price-view="trade"] .bathgiant-hero-banner__price--list {
display: none !important;
}
.bathgiant-hero-banner__price--rrp .bathgiant-hero-banner__price-value {
text-decoration: line-through;
color: #94a3b8;
}
.bathgiant-product-single__price-code-hint {
margin: 0.5rem 0 0;
font-size: 0.82rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__price-note {
width: 100%;
margin: 0.5rem 0 0;
font-size: 0.875rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__datasheet {
margin: 1.25rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--bathgiant-border, #e5e7eb);
}
.bathgiant-product-single__datasheet-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.bathgiant-product-single__datasheet--bundle .bathgiant-product-single__subhead {
margin-bottom: 0.75rem;
}
.bathgiant-product-single__datasheet-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.bathgiant-product-single__datasheet-item {
margin: 0;
padding: 0;
}
.bathgiant-product-single__sku {
margin: 0 0 1.25rem;
font-size: 0.9rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__sku-label {
font-weight: 600;
color: var(--bathgiant-ink);
margin-right: 0.35rem;
}
.bathgiant-product-single__cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin: 0 0 1.75rem;
padding: 1.25rem 0;
border-top: 1px solid var(--bathgiant-border);
border-bottom: 1px solid var(--bathgiant-border);
} .bathgiant-product-pdp-support__availability .bathgiant-product-single__cart {
margin: 1rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid #e8eef5;
border-bottom: 0;
} .bathgiant-product-pdp-support__availability {
position: relative;
}
.bathgiant-product-pdp-support__stock-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: auto;
max-width: 100%;
padding: 0.2rem 0.55rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
}
.bathgiant-product-pdp-support__stock-badge[hidden] {
display: none !important;
}
.bathgiant-product-pdp-support__stock-badge[data-state="checking"] {
border-color: #c7daf5;
background: #eef5ff;
color: var(--bathgiant-brand-deep);
}
.bathgiant-product-pdp-support__stock-badge[data-state="checking"]::before {
width: 0.7rem;
height: 0.7rem;
border: 2px solid #c7daf5;
border-top-color: var(--bathgiant-brand);
border-radius: 50%;
animation: bg2026-stock-spin 0.7s linear infinite;
content: "";
flex: 0 0 auto;
}
.bathgiant-product-pdp-support__stock-badge[data-state="checked"] {
border-color: #b9dec8;
background: #edf8f1;
color: #16653a;
}
.bathgiant-product-pdp-support__stock-badge[data-state="checked"]::before {
content: "✓";
}
.bathgiant-product-pdp-support__stock-badge[data-state="cached"] {
border-color: #ead8a8;
background: #fff8e8;
color: #6b5430;
}
.bathgiant-product-pdp-support__stock-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 3.25rem 1rem 1rem;
background: rgba(246, 248, 251, 0.72);
backdrop-filter: blur(1px);
pointer-events: none;
}
.bathgiant-product-pdp-support__stock-overlay[hidden] {
display: none !important;
}
.bathgiant-product-pdp-support__availability.is-checking-stock .bathgiant-product-pdp-support__trust {
opacity: 0.45;
}
.bathgiant-product-pdp-support__stock-overlay-label {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: #fff;
border: 1px solid var(--bathgiant-border);
box-shadow: var(--bathgiant-shadow-sm);
font-size: 0.85rem;
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-product-pdp-support__stock-spinner {
width: 0.9rem;
height: 0.9rem;
border: 2px solid #d7e3f4;
border-top-color: var(--bathgiant-brand);
border-radius: 50%;
animation: bg2026-stock-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes bg2026-stock-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-product-pdp-support__stock-spinner {
animation: none;
border-top-color: #d7e3f4;
opacity: 0.7;
}
}
.bathgiant-product-single__qty-group {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
}
.bathgiant-product-single__qty {
font-weight: 600;
font-size: 0.9rem;
}
.bathgiant-product-single__qty-input {
width: 4.5rem;
padding: 0.5rem 0.5rem;
border: 1px solid var(--bathgiant-border);
border-radius: 8px;
font-size: 1rem;
} .bathgiant-product-single__add {
margin-left: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.bathgiant-product-single__cart:has(.bathgiant-product-single__fetch-trade-wrap) .bathgiant-product-single__fetch-trade-wrap {
margin-left: auto;
}
.bathgiant-product-single__cart:has(.bathgiant-product-single__fetch-trade-wrap) .bathgiant-product-single__add {
margin-left: 0;
} .bathgiant-ajax-cart-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 0.25s, transform 0.15s;
}
.bathgiant-ajax-cart-btn__spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: bg-spin 0.6s linear infinite;
}
.bathgiant-ajax-cart-btn.is-adding {
pointer-events: none;
opacity: 0.85;
}
.bathgiant-ajax-cart-btn.is-adding .bathgiant-ajax-cart-btn__label {
opacity: 0.6;
}
.bathgiant-ajax-cart-btn.is-adding .bathgiant-ajax-cart-btn__spinner {
display: inline-block;
}
.bathgiant-ajax-cart-btn.is-added {
background: #16a34a;
}
.bathgiant-ajax-cart-btn.is-added:hover {
background: #15803d;
}
.bathgiant-ajax-cart-btn.is-added .bathgiant-ajax-cart-btn__label::before {
content: none;
}
.bathgiant-ajax-cart-btn--pdp-price .bathgiant-ajax-cart-btn__label {
flex: 0 1 auto;
min-width: 0;
}
.bathgiant-ajax-cart-btn__price-sep {
flex: 0 0 auto;
opacity: 0.8;
font-weight: 400;
}
.bathgiant-ajax-cart-btn__price {
flex: 0 0 auto;
font-weight: 600;
white-space: nowrap;
}
.bathgiant-ajax-cart-btn__price-vat {
flex: 0 0 auto;
font-size: 0.82em;
font-weight: 400;
color: inherit;
opacity: 0.92;
white-space: nowrap;
margin-left: -4px;
margin-bottom: -3px;
}
.bathgiant-ajax-cart-btn.is-added .bathgiant-ajax-cart-btn__price-sep,
.bathgiant-ajax-cart-btn.is-added .bathgiant-ajax-cart-btn__price,
.bathgiant-ajax-cart-btn.is-added .bathgiant-ajax-cart-btn__price-vat {
display: none;
}
.bathgiant-ajax-cart-btn.is-adding .bathgiant-ajax-cart-btn__price-sep,
.bathgiant-ajax-cart-btn.is-adding .bathgiant-ajax-cart-btn__price,
.bathgiant-ajax-cart-btn.is-adding .bathgiant-ajax-cart-btn__price-vat {
opacity: 0.6;
} @media (max-width: 640px) {
.bathgiant-product-single__cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 0.75rem;
}
.bathgiant-product-single__qty-group {
min-width: 0;
}
.bathgiant-product-single__qty-input {
flex: 0 0 auto;
}
.bathgiant-product-single__add.bathgiant-ajax-cart-btn {
margin-left: auto;
min-width: 0;
justify-content: center;
padding-left: 0.85rem;
padding-right: 0.85rem;
} .bathgiant-product-single__cart:has(.bathgiant-product-single__fetch-trade-wrap) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
}
.bathgiant-product-single__cart:has(.bathgiant-product-single__fetch-trade-wrap) .bathgiant-product-single__qty-group {
grid-column: 1 / -1;
}
.bathgiant-product-single__fetch-trade-wrap {
grid-column: 1;
display: flex;
min-width: 0;
margin-left: 0;
}
.bathgiant-product-single__cart:has(.bathgiant-product-single__fetch-trade-wrap) .bathgiant-product-single__add.bathgiant-ajax-cart-btn {
grid-column: 2;
margin-left: 0;
width: 100%;
}
.bathgiant-product-single__fetch-trade-wrap .bathgiant-btn {
width: 100%;
min-width: 0;
justify-content: center;
padding-left: 0.65rem;
padding-right: 0.65rem;
white-space: normal;
text-align: center;
line-height: 1.25;
}
.bathgiant-ajax-cart-btn__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-ajax-cart-btn--pdp-price {
font-size: clamp(0.78rem, 2.8vw, 0.95rem);
gap: 0.35rem;
padding-left: 0.65rem;
padding-right: 0.65rem;
}
} @media (max-width: 380px) {
.bathgiant-product-single__cart:not(:has(.bathgiant-product-single__fetch-trade-wrap)) .bathgiant-product-single__qty-group {
flex: 1 1 100%;
}
.bathgiant-product-single__cart:not(:has(.bathgiant-product-single__fetch-trade-wrap)) .bathgiant-product-single__add.bathgiant-ajax-cart-btn {
margin-left: 0;
width: 100%;
}
}
.bathgiant-product-single__subhead {
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
margin: 0 0 0.75rem;
text-wrap: balance;
}
.bathgiant-product-single__bundle {
margin-bottom: 1.5rem;
padding: 1rem 1.1rem 1.15rem;
background: linear-gradient(180deg, #fdf9fb 0%, #fbf4f7 100%);
border-radius: 12px;
border: 1px solid rgba(169, 20, 79, 0.1);
}
.bathgiant-product-single__bundle-description {
margin: -0.35rem 0 0.85rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--bathgiant-ink-muted, #64748b);
} .bathgiant-product-pdp-support__availability--stack-join {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.bathgiant-product-pdp-support__availability--stack-join .bathgiant-product-single__postcode-checker {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
.bathgiant-product-single__bundle--stack-join {
margin-top: 0;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.bathgiant-product-single__bundle-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.bathgiant-product-single__bundle-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem 1rem;
padding: 0.7rem 0.85rem;
border-top: 1px solid #eef2f7;
}
.bathgiant-product-single__bundle-item:first-child {
border-top: 0;
}
.bathgiant-product-single__bundle-item-main {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-product-single__bundle-item-thumb {
display: block;
flex: 0 0 3.25rem;
width: 3.25rem;
height: 3.25rem;
border-radius: 8px;
overflow: hidden;
background: #f8fafc;
border: 1px solid #eef2f7;
position: relative;
}
.bathgiant-product-single__bundle-item-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #f8fafc;
}
.bathgiant-product-single__bundle-item-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.bathgiant-product-single__bundle-item-copy {
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-product-single__bundle-item-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.55rem;
}
.bathgiant-product-single__bundle-item-qty-badge {
position: absolute;
right: 0.12rem;
bottom: 0.12rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
padding: 0.1rem 0.35rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #fff;
background: var(--bathgiant-brand, #a9144f);
border: 1.5px solid #fff;
box-shadow: 0 1px 4px rgba(15, 20, 25, 0.18);
pointer-events: none;
z-index: 1;
}
.bathgiant-product-single__bundle-item-qty-label {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--bathgiant-brand, #a9144f);
white-space: nowrap;
}
.bathgiant-product-single__bundle-item-title {
margin: 0;
font-size: 0.95rem;
line-height: 1.35;
font-weight: 600;
color: #1f2937;
text-decoration: none;
}
a.bathgiant-product-single__bundle-item-title:hover,
a.bathgiant-product-single__bundle-item-title:focus-visible {
color: var(--bathgiant-brand, #a9144f);
text-decoration: underline;
}
.bathgiant-product-single__bundle-item-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.55rem;
margin-top: 0.2rem;
}
.bathgiant-product-single__bundle-item-qty,
.bathgiant-product-single__bundle-item-sku {
font-size: 0.78rem;
color: var(--bathgiant-ink-muted, #6b7280);
}
.bathgiant-product-single__bundle-item-prices {
margin: 0;
font-size: 0.82rem;
line-height: 1.35;
color: #374151;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.bathgiant-product-single__bundle-item-price-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
min-width: 0;
}
.bathgiant-product-single__bundle-item-price-part--now,
.bathgiant-product-single__bundle-item-price-part--trade {
font-weight: 700;
color: #166534;
}
.bathgiant-product-single__bundle-item-price-saved {
margin: 0;
}
.bathgiant-product-single__bundle-item-price-saved .bathgiant-storefront-line-price-saved {
font-size: 0.74rem;
white-space: normal;
}
.bathgiant-product-single__bundle-item-unit-price {
margin: 0.1rem 0 0;
font-size: 0.74rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted, #6b7280);
}
.bathgiant-product-single__bundle-item-price-part--rrp {
text-decoration: line-through;
color: var(--bathgiant-ink-muted, #6b7280);
}
.bathgiant-product-single__bundle-item-price-part--trade {
font-weight: 700;
}
.bathgiant-product-single__bundle-item-price-sep {
color: #cbd5e1;
}
.bathgiant-product-single__bundle-item-actions {
flex: 0 0 auto;
}
.bathgiant-product-single__bundle-item-actions .bathgiant-bundle-component-add {
white-space: nowrap;
}
.bathgiant-product-single__bundle-item-actions .bathgiant-recommended-extra-add {
white-space: nowrap;
} .bathgiant-product-single__bundle:has(+ .bathgiant-product-single__extras) {
margin-bottom: 0;
}
.bathgiant-product-single__bundle + .bathgiant-product-single__extras {
margin-top: 0.85rem;
}
.bathgiant-product-single__bundle-item--extra .bathgiant-product-single__bundle-item-qty-badge,
.bathgiant-product-single__bundle-item--extra .bathgiant-product-single__bundle-item-qty-label {
display: none;
}
@media (max-width: 640px) {
.bathgiant-product-single__bundle-item {
flex-direction: column;
align-items: stretch;
}
.bathgiant-product-single__bundle-item-actions {
width: 100%;
}
.bathgiant-product-single__bundle-item-actions .bathgiant-bundle-component-add,
.bathgiant-product-single__bundle-item-actions .bathgiant-recommended-extra-add {
width: 100%;
justify-content: center;
}
}
.bathgiant-product-single__bundle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.9rem;
align-items: start;
}
.bathgiant-product-single__bundle-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
overflow: hidden;
box-shadow: 0 2px 10px rgba(15, 20, 25, 0.04);
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
box-sizing: border-box;
}
.bathgiant-product-single__bundle-card-media {
display: block;
aspect-ratio: 4 / 3;
background: #f8fafc;
overflow: hidden;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-product-single__bundle-card-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #f8fafc;
}
.bathgiant-product-single__bundle-card-placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0.75rem;
color: #6b7280;
font-size: 0.82rem;
text-align: center;
text-decoration: none;
}
.bathgiant-product-single__bundle-card-body {
padding: 0.8rem 0.9rem 0.95rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 0 1 auto;
}
.bathgiant-product-single__bundle-card-title {
margin: 0;
font-size: 1rem;
line-height: 1.4;
color: #1f2937;
}
.bathgiant-product-single__bundle-card-qty {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-product-single__bundle-card-prices {
margin: 0.15rem 0 0;
}
.bathgiant-product-single__bundle-card-prices-row {
margin: 0;
font-size: 0.92rem;
}
.bathgiant-product-single__bundle-card-line-total {
margin: 0.2rem 0 0;
font-size: 0.78rem;
color: var(--bathgiant-ink-muted);
line-height: 1.35;
}
.bathgiant-product-single__bundle-card-sku {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__bundle-mode {
margin: 0 0 0.5rem;
font-size: 0.9rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__components {
margin: 0;
padding-left: 1.1rem;
font-size: 0.92rem;
color: var(--bathgiant-ink);
}
.bathgiant-product-single__content {
font-size: 0.98rem;
line-height: 1.6;
color: var(--bathgiant-ink-muted);
}
.bathgiant-product-single__summary .bathgiant-product-single__content {
margin: 0 0 1.25rem;
}
.bathgiant-product-single__content > *:first-child {
margin-top: 0;
}
.bathgiant-product-single__summary .bathgiant-product-single__specs {
margin: 0 0 1.25rem;
}
.bathgiant-product-single__summary .bathgiant-product-single__content + .bathgiant-product-single__specs {
margin-top: -0.35rem;
}
.bathgiant-product-single__specs-list {
margin: 0;
padding: 0.65rem 0 0;
list-style: none;
border-top: 1px solid var(--bathgiant-border);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.45;
color: var(--bathgiant-ink);
}
.bathgiant-product-single__specs-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.15rem 0.65rem;
padding: 0.42rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--bathgiant-border) 75%, transparent);
}
.bathgiant-product-single__specs-list li:last-child {
padding-bottom: 0;
border-bottom: none;
}
.bathgiant-product-single__specs-list strong {
flex: 0 1 8.5rem;
min-width: 5.5rem;
font-weight: 500;
font-size: 0.82rem;
letter-spacing: 0.01em;
color: var(--bathgiant-ink-muted);
}
@media (max-width: 480px) {
.bathgiant-product-single__specs-list strong {
flex-basis: 100%;
min-width: 0;
}
}
.bathgiant-product-single__fetch-trade-wrap {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.bathgiant-product-single__fetch-trade {
gap: 0.45rem;
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.bathgiant-product-single__fetch-trade .bathgiant-fetch-trade-label {
min-width: 0;
}
.bathgiant-product-single__fetch-trade-wrap .bathgiant-btn {
position: relative;
overflow: visible;
}
.bathgiant-product-single__fetch-trade-wrap .bathgiant-btn:hover .bathgiant-tooltip,
.bathgiant-product-single__fetch-trade-wrap .bathgiant-btn:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-product-single__fetch-trade-wrap .bathgiant-btn:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-product-single__fetch-trade-wrap .bathgiant-fetch-trade-msg {
margin: 0;
}
.bathgiant-pagination {
margin-top: 2rem;
overflow-x: auto;
padding: 0 0.5rem;
}
.bathgiant-pagination .nav-links {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
min-width: 100%;
white-space: nowrap;
}
.bathgiant-pagination a,
.bathgiant-pagination span {
display: inline-block;
padding: 0.35rem 0.65rem;
border: 1px solid var(--bathgiant-border);
border-radius: 4px;
text-decoration: none;
color: #374151;
}
.bathgiant-pagination a:hover {
border-color: var(--bathgiant-accent);
color: var(--bathgiant-accent);
}
.bathgiant-pagination span.current {
background: var(--bathgiant-accent);
border-color: var(--bathgiant-accent);
color: #fff;
}
.bathgiant-pagination .nav-links .prev {
order: 0;
margin-right: auto;
}
.bathgiant-pagination .nav-links .next {
order: 2;
margin-left: auto;
}
.bathgiant-pagination .nav-links .page-numbers {
order: 1;
}
.bathgiant-tax-index-load-more {
margin: 1rem 0 0;
display: flex;
justify-content: center;
}
.bathgiant-no-results {
color: #6b7280;
} .bathgiant-browse-page {
width: 100%;
flex: 1;
}
.bathgiant-browse-hero {
width: 100%;
padding: clamp(1.75rem, 5vw, 3rem) 0;
background: linear-gradient(
160deg,
var(--bathgiant-brand-wash) 0%,
#fff 45%,
var(--bathgiant-light) 100%
);
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-browse-hero__inner {
width: 100%;
box-sizing: border-box;
}
.bathgiant-browse-hero__title {
margin: 0 0 0.5rem;
font-size: clamp(1.75rem, 4vw, 2.35rem);
}
.bathgiant-browse-hero__lede {
margin: 0;
max-width: 50ch;
color: var(--bathgiant-ink-muted);
font-size: 1.05rem;
}
.bathgiant-browse-page__body {
width: 100%;
padding-bottom: 3rem;
}
.bathgiant-browse-page__content {
width: 100%;
} .bathgiant-browse-page--wide {
--wp--style--global--content-size: 100%;
--wp--style--global--wide-size: 100%;
}
.bathgiant-browse-page--wide .bathgiant-browse-page__content {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.bathgiant-browse-page--wide .bathgiant-browse-page__content > * {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.bathgiant-browse-page--wide .bathgiant-browse-page__content .is-layout-constrained,
.bathgiant-browse-page--wide .bathgiant-browse-page__content .wp-block-group,
.bathgiant-browse-page--wide .bathgiant-browse-page__content .wp-block-post-content,
.bathgiant-browse-page--wide .bathgiant-browse-page__content .wp-block-shortcode {
max-width: none !important;
}
.bathgiant-browse-page--wide .bathgiant-browse-page__content .wp-block-shortcode,
.bathgiant-browse-page--wide .bathgiant-product-directory--hub {
width: 100%;
min-width: 0;
box-sizing: border-box;
} .bathgiant-directory-fullwidth {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
box-sizing: border-box;
} .bathgiant-product-directory--visual {
margin-top: 0;
}
.bathgiant-product-directory--hub {
margin-top: 0;
}
.bathgiant-directory-toolbar {
width: 100%;
padding: 1.25rem 0;
border-bottom: 1px solid var(--bathgiant-border);
background: #fff;
}
.bathgiant-directory-toolbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
box-sizing: border-box;
}
.bathgiant-directory-toolbar__hint {
margin: 0;
flex: 1 1 16rem;
font-size: 0.92rem;
color: var(--bathgiant-ink-muted);
max-width: 42rem;
}
.bathgiant-directory-hub {
padding-top: clamp(1.15rem, 3vw, 1.75rem);
padding-bottom: clamp(1.6rem, 4vw, 2.5rem);
}
.bathgiant-directory-hub-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
} @media (min-width: 480px) {
.bathgiant-directory-hub-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.bathgiant-directory-hub-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.bathgiant-directory-hub-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
}
.bathgiant-directory-hub-grid__item {
min-width: 0;
}
.bathgiant-directory-hub-card {
--bathgiant-hub-h: 210;
--bathgiant-hub-h2: 248;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-height: 13rem;
padding: 0;
overflow: hidden;
border-radius: var(--bathgiant-radius-md);
border: 1px solid rgba(207, 219, 234, 0.95);
background: #fff;
box-shadow: var(--bathgiant-shadow-sm);
text-decoration: none;
color: var(--bathgiant-ink);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bathgiant-directory-hub-card:hover {
transform: translateY(-2px);
box-shadow: var(--bathgiant-shadow-md);
border-color: rgba(61, 125, 217, 0.45);
}
.bathgiant-directory-hub-card__media {
position: relative;
flex: 0 0 auto;
width: 100%;
height: clamp(5.25rem, 14vw, 7rem);
background: linear-gradient(
135deg,
hsl(var(--bathgiant-hub-h), 52%, 42%) 0%,
hsl(var(--bathgiant-hub-h2), 46%, 28%) 100%
);
}
.bathgiant-directory-hub-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.88;
}
.bathgiant-directory-hub-card__shade {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 47, 87, 0.08) 0%,
rgba(15, 47, 87, 0.72) 100%
);
pointer-events: none;
}
.bathgiant-directory-hub-card--has-img .bathgiant-directory-hub-card__shade {
background: linear-gradient(
125deg,
rgba(15, 47, 87, 0.2) 0%,
rgba(15, 47, 87, 0.78) 100%
);
}
.bathgiant-directory-hub-card__media--swatches {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
padding: 8px;
box-sizing: border-box;
align-content: center;
background: #eef2f7;
}
.bathgiant-directory-hub-card__swatch-dot {
width: 100%;
aspect-ratio: 1;
border-radius: 5px;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bathgiant-directory-hub-card--swatches .bathgiant-directory-hub-card__shade {
background: linear-gradient(
180deg,
rgba(15, 47, 87, 0.02) 0%,
rgba(15, 47, 87, 0.12) 100%
);
}
.bathgiant-directory-hub-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
min-height: 0;
padding: 0.85rem 1rem 0.95rem;
background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}
.bathgiant-directory-hub-card__eyebrow {
display: block;
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
font-weight: 700;
}
.bathgiant-directory-hub-card__title {
margin-top: 0.4rem;
display: block;
font-family: var(--bathgiant-font-display);
font-size: 1.2rem;
line-height: 1.2;
font-weight: 600;
color: #0f2f57;
}
.bathgiant-directory-hub-card__meta {
margin-top: 0.45rem;
display: block;
font-size: 0.82rem;
color: var(--bathgiant-ink-muted);
font-weight: 600;
}
.bathgiant-directory-hub-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 700;
color: var(--bathgiant-brand-deep);
} @media (max-width: 479px) {
.bathgiant-directory-hub-grid {
gap: 0;
}
.bathgiant-directory-hub-card {
border-radius: 0;
box-shadow: none;
border-left: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgba(207, 219, 234, 0.95);
}
.bathgiant-directory-hub-grid__item:last-child .bathgiant-directory-hub-card {
border-bottom: 0;
}
.bathgiant-directory-hub-card:hover {
transform: none;
box-shadow: none;
}
.bathgiant-directory-hub-card__media {
border-radius: 0;
}
}
.bathgiant-directory-jump {
width: 100%;
margin: 0;
padding: 1rem 0 1.5rem;
background: #fff;
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-directory-jump__inner {
box-sizing: border-box;
}
.bathgiant-directory-jump-label {
display: block;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
margin-bottom: 0.65rem;
}
.bathgiant-directory-jump-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-directory-jump-list a {
display: inline-block;
padding: 0.45rem 0.9rem;
border-radius: 999px;
background: var(--bathgiant-light);
border: 1px solid var(--bathgiant-border);
color: var(--bathgiant-ink);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-directory-jump-list a:hover {
background: var(--bathgiant-brand-wash);
border-color: rgba(47, 136, 239, 0.35);
color: var(--bathgiant-brand-deep);
}
.bathgiant-directory-section {
scroll-margin-top: 5rem;
padding-top: clamp(1.5rem, 4vw, 2.5rem);
padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-product-directory > .bathgiant-directory-section:nth-of-type(even) {
background: linear-gradient(180deg, #fbfcfe 0%, var(--bathgiant-light) 100%);
}
.bathgiant-directory-section__head {
margin: 0 0 1.25rem;
}
.bathgiant-directory-heading {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
margin: 0 0 0.35rem;
padding: 0;
border: none;
}
.bathgiant-directory-all-link {
margin: 0;
font-size: 0.95rem;
}
.bathgiant-directory-all-link a {
color: var(--bathgiant-accent);
text-decoration: none;
font-weight: 600;
}
.bathgiant-directory-all-link a:hover {
text-decoration: underline;
}
.bathgiant-swatch {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 2px;
margin-right: 0.35em;
vertical-align: -0.15em;
border: 1px solid rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
.bathgiant-swatch--card {
width: 1.05rem;
height: 1.05rem;
margin-right: 0.45rem;
border-radius: 3px;
vertical-align: middle;
}
.bathgiant-swatch--pdp {
width: 1.35rem;
height: 1.35rem;
margin-right: 0.5rem;
border-radius: 4px;
vertical-align: middle;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.bathgiant-swatch--image {
padding: 0;
overflow: hidden;
background-color: #f8fafc;
}
.bathgiant-swatch__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-dir-card__colour--image {
display: block;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
background-color: #f8fafc;
}
.bathgiant-dir-card__colour-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-directory-hub-card__swatch-dot--image {
padding: 0;
overflow: hidden;
background-color: #f8fafc;
}
.bathgiant-directory-hub-card__swatch-dot-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .bathgiant-dir-grid-root {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
gap: clamp(0.75rem, 2vw, 1.15rem);
max-width: 100%;
}
@media (min-width: 480px) {
.bathgiant-dir-grid-root {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}
}
@media (min-width: 900px) {
.bathgiant-dir-grid-root {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}
}
.bathgiant-dir-cell {
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-dir-branch {
margin: 0;
padding: 0;
list-style: none;
} .bathgiant-directory-tree .bathgiant-directory-nested {
display: none;
}
.bathgiant-dir-card {
margin: 0;
height: 100%;
}
.bathgiant-dir-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--bathgiant-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(15, 20, 25, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bathgiant-dir-card__link:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15, 20, 25, 0.1);
border-color: rgba(47, 136, 239, 0.25);
}
.bathgiant-dir-card__media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bathgiant-light);
overflow: hidden;
}
.bathgiant-dir-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bathgiant-dir-card__media--brand-logo {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.15rem;
background: #fff;
}
.bathgiant-dir-card__img--brand-logo {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.bathgiant-dir-card__placeholder,
.bathgiant-dir-card__colour {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
}
.bathgiant-dir-card__body {
padding: 0.65rem 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
}
.bathgiant-dir-card__body--with-brand {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 0.55rem;
}
.bathgiant-dir-card__body-main {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
}
.bathgiant-dir-card__brand {
flex-shrink: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
max-width: 42%;
}
.bathgiant-dir-card__brand-logo {
display: block;
max-height: 1.65rem;
max-width: 5.5rem;
width: auto;
height: auto;
object-fit: contain;
object-position: right bottom;
}
.bathgiant-dir-card__title {
font-family: var(--bathgiant-font-sans);
font-weight: 700;
font-size: 0.88rem;
line-height: 1.35;
color: var(--bathgiant-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bathgiant-dir-card__count {
font-size: 0.75rem;
color: var(--bathgiant-ink-muted);
font-weight: 500;
}
.bathgiant-tax-index--ranges .bathgiant-dir-grid-root {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (min-width: 480px) {
.bathgiant-tax-index--ranges .bathgiant-dir-grid-root {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
}
@media (min-width: 900px) {
.bathgiant-tax-index--ranges .bathgiant-dir-grid-root {
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bathgiant-grid-card-min)), 1fr));
}
}
.bathgiant-dir-card--range .bathgiant-dir-card__media:not(.bathgiant-dir-card__media--brand-logo) {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.65rem;
}
.bathgiant-dir-card--range .bathgiant-dir-card__img:not(.bathgiant-dir-card__img--brand-logo) {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center center;
}
.bathgiant-directory-tree.bathgiant-dir-grid-root {
max-width: 100%;
}
.bathgiant-directory-list.bathgiant-dir-grid-root {
max-width: 100%;
}
.bathgiant-directory-fallback-note,
.bathgiant-directory-empty {
font-size: 0.95rem;
color: var(--bathgiant-ink-muted);
max-width: 55ch;
margin-left: auto;
margin-right: auto;
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
}
.bathgiant-directory-fallback-note {
margin-bottom: 1rem;
} .bathgiant-tax-index-layout {
width: 100%;
flex: 1;
padding-bottom: 2.5rem;
}
.bathgiant-tax-index-admin {
margin-bottom: 1.5rem;
}
.bathgiant-tax-index-sections {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.bathgiant-tax-index-section {
position: relative;
padding: clamp(1.1rem, 2.4vw, 1.85rem);
border-radius: 18px;
border: 1px solid #ece7ea;
background: #ffffff;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
} .bathgiant-tax-index-section:nth-of-type(even) {
background:
linear-gradient(180deg, rgba(139, 41, 66, 0.045), rgba(139, 41, 66, 0.015));
border-color: rgba(139, 41, 66, 0.14);
}
.bathgiant-tax-index-section:hover {
box-shadow: 0 14px 30px -22px rgba(31, 22, 26, 0.55);
border-color: rgba(139, 41, 66, 0.28);
}
.bathgiant-tax-index-section__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 1rem;
margin: 0 0 1.1rem;
padding: 0 0 0.75rem;
border-bottom: 1px solid rgba(31, 22, 26, 0.08);
}
.bathgiant-tax-index-section__title {
position: relative;
margin: 0;
padding-left: 0.85rem;
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
line-height: 1.2;
font-weight: 700;
} .bathgiant-tax-index-section__title::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 4px;
border-radius: 4px;
background: var(--bathgiant-primary, #8b2942);
}
.bathgiant-tax-index-section__title-link {
color: inherit;
text-decoration: none;
}
.bathgiant-tax-index-section__title-link:hover {
color: var(--bathgiant-primary, #8b2942);
text-decoration: underline;
}
.bathgiant-tax-index-section__meta {
margin: 0;
display: inline-flex;
align-items: center;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: rgba(139, 41, 66, 0.08);
color: var(--bathgiant-primary, #8b2942);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.bathgiant-tax-index-section .bathgiant-tax-index-section__grid {
margin: 0;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
gap: clamp(1rem, 2.2vw, 1.5rem);
}
@media (min-width: 480px) {
.bathgiant-tax-index-section .bathgiant-tax-index-section__grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
}
@media (min-width: 900px) {
.bathgiant-tax-index-section .bathgiant-tax-index-section__grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
}
.bathgiant-tax-index-section__more {
margin: 1.1rem 0 0;
padding: 0.85rem 0 0;
display: flex;
justify-content: center;
border-top: 1px solid rgba(31, 22, 26, 0.06);
}
.bathgiant-tax-index-section--master > .bathgiant-tax-index-section__head {
margin-bottom: 0.85rem;
} .bathgiant-tax-index-promote {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.bathgiant-tax-index-promote .bathgiant-tax-index-master__body,
.bathgiant-tax-index-promote .bathgiant-tax-index-master__categories {
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.bathgiant-tax-index-master__body {
display: grid;
gap: clamp(0.85rem, 2vw, 1.25rem);
}
.bathgiant-tax-index-master__categories {
display: grid;
gap: clamp(0.85rem, 2vw, 1.25rem);
}
.bathgiant-tax-index-section--category {
padding: clamp(0.85rem, 1.8vw, 1.25rem);
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
box-shadow: none;
}
.bathgiant-tax-index-section--master:nth-of-type(even) .bathgiant-tax-index-section--category {
background: rgba(255, 255, 255, 0.88);
}
.bathgiant-tax-index-section__title--child {
font-size: clamp(1rem, 1.8vw, 1.2rem);
font-weight: 650;
}
.bathgiant-tax-index-section__status {
margin: 0.35rem 0 0;
color: #5c5256;
font-size: 0.92rem;
}
.bathgiant-tax-index-section__status--error {
color: var(--bathgiant-primary, #8b2942);
}
.bathgiant-tax-index-section__noscript {
margin: 0.75rem 0 0;
}
.bathgiant-directory-tree {
list-style: none;
margin: 0;
padding: 0;
}
.bathgiant-directory-nested {
list-style: none;
margin: 0;
padding: 0;
}
.bathgiant-directory-count {
color: #9ca3af;
font-size: 0.9rem;
}
.bathgiant-subterms {
margin: 0 0 1.75rem;
padding: 1rem 1.1rem;
background: #fafafa;
border: 1px solid var(--bathgiant-border);
border-radius: 6px;
}
.bathgiant-subterms-heading {
font-size: 1.05rem;
margin: 0 0 0.75rem;
}
.bathgiant-subterms-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-subterms-grid li {
margin: 0;
}
.bathgiant-subterm-link {
display: inline-block;
padding: 0.4rem 0.75rem;
background: #fff;
border: 1px solid var(--bathgiant-border);
border-radius: 4px;
text-decoration: none;
color: #111827;
font-size: 0.95rem;
} .bathgiant-range-cat-filter {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
background: #fafafa;
border: 1px solid var(--bathgiant-border);
border-radius: 6px;
}
.bathgiant-range-cat-filter__heading {
font-size: 1rem;
margin: 0 0 0.65rem;
font-weight: 600;
}
.bathgiant-range-cat-filter__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-range-cat-filter__list li {
margin: 0;
}
.bathgiant-range-cat-filter__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.4rem 0.75rem;
background: #fff;
border: 1px solid var(--bathgiant-border);
border-radius: 999px;
text-decoration: none;
color: #111827;
font-size: 0.9rem;
line-height: 1.3;
}
.bathgiant-range-cat-filter__link:hover {
border-color: var(--bathgiant-accent, #2f88ef);
color: var(--bathgiant-accent, #2f88ef);
}
.bathgiant-range-cat-filter__link.is-active {
background: var(--bathgiant-accent, #2f88ef);
border-color: var(--bathgiant-accent, #2f88ef);
color: #fff;
}
.bathgiant-range-cat-filter__link.is-active .bathgiant-directory-count {
color: rgba(255, 255, 255, 0.9);
}
.bathgiant-subterm-link:hover {
border-color: var(--bathgiant-accent);
color: var(--bathgiant-accent);
}
.bathgiant-tax-cross {
margin: 0 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-tax-cross-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #6b7280;
margin-bottom: 0.5rem;
}
.bathgiant-tax-cross-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
}
.bathgiant-tax-cross-list a {
color: var(--bathgiant-accent);
text-decoration: none;
font-size: 0.95rem;
}
.bathgiant-tax-cross-list a:hover {
text-decoration: underline;
}
.bathgiant-tax-cross--bottom {
margin: 2rem 0 0;
padding: 1rem 1.1rem;
border: 1px solid #dbe5f1;
border-radius: 12px;
background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
}
.bathgiant-tax-cross--bottom .bathgiant-tax-cross-label {
margin-bottom: 0.65rem;
color: #415b7d;
}
.bathgiant-tax-cross--bottom .bathgiant-tax-cross-list {
gap: 0.5rem;
}
.bathgiant-tax-cross--bottom .bathgiant-tax-cross-list a {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.35rem 0.7rem;
border: 1px solid #c6d7ed;
border-radius: 999px;
background: #fff;
color: #244b77;
font-weight: 600;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-tax-cross--bottom .bathgiant-tax-cross-list a:hover {
text-decoration: none;
background: var(--bathgiant-brand-wash);
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #fff);
color: var(--bathgiant-nav-ink);
}
@media (max-width: 640px) {
.bathgiant-tax-cross--bottom {
padding: 0.9rem;
}
}
.bathgiant-sibling-terms {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--bathgiant-border);
}
.bathgiant-sibling-terms-heading {
font-size: 1.1rem;
margin: 0 0 0.75rem;
}
.bathgiant-sibling-terms-list {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.25rem 1rem;
max-height: 360px;
overflow-y: auto;
}
.bathgiant-sibling-terms-list li {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
font-size: 0.7rem;
line-height: 1.35;
}
.bathgiant-sibling-terms-list a {
color: var(--bathgiant-accent);
text-decoration: none;
font-size: 0.7rem;
line-height: 1.35;
}
.bathgiant-sibling-terms-list a:hover {
text-decoration: underline;
}
.bathgiant-sibling-terms-list .bathgiant-directory-count {
font-size: 0.78rem;
color: #9ca3af;
}
.bathgiant-sibling-terms-swatch {
width: 0.75rem;
height: 0.75rem;
border-radius: 3px;
border: 1px solid rgba(15, 23, 42, 0.15);
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bathgiant-sibling-terms-back {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
} .bathgiant-delivery-trust {
margin: 0;
}
.bathgiant-delivery-trust__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.bathgiant-delivery-trust--compact .bathgiant-delivery-trust__list {
grid-template-columns: 1fr;
}
.bathgiant-delivery-trust--cards .bathgiant-delivery-trust__list {
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0.65rem;
}
.bathgiant-delivery-trust__cell {
margin: 0;
min-width: 0;
}
.bathgiant-delivery-trust__item {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.65rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
a.bathgiant-delivery-trust__item:hover,
a.bathgiant-delivery-trust__item:focus-visible {
border-color: var(--bathgiant-brand, #2f68c4);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
outline: none;
}
.bathgiant-delivery-trust__item--active {
border-color: #86efac;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
box-shadow: 0 0 0 1px rgba(22, 101, 52, 0.08);
}
.bathgiant-delivery-trust__item--muted {
border-color: #fde68a;
background: #fffbeb;
} .bathgiant-tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 0.45rem);
transform: translateX(-50%) translateY(4px);
z-index: 12;
padding: 0.35rem 0.65rem;
border-radius: 8px;
background: #0f172a;
color: #f8fafc;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}
.bathgiant-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #0f172a;
}
.bathgiant-tooltip--wrap {
white-space: normal;
width: max-content;
max-width: min(18rem, 70vw);
text-align: center;
font-weight: 500;
}
.bathgiant-branches-map-band__legend-item--cta.bathgiant-has-tooltip,
.bathgiant-branches-map-band__legend-item--label.bathgiant-has-tooltip {
position: relative;
}
.bathgiant-branches-map-band__legend-item--cta .bathgiant-tooltip,
.bathgiant-branches-map-band__legend-item--label .bathgiant-tooltip {
z-index: 30;
}
.bathgiant-branches-map-band__legend-item--cta:hover .bathgiant-tooltip,
.bathgiant-branches-map-band__legend-item--cta:focus-visible .bathgiant-tooltip,
.bathgiant-branches-map-band__legend-item--label:hover .bathgiant-tooltip,
.bathgiant-branches-map-band__legend-item--label:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-branches-map-band__legend-item--cta:focus-visible .bathgiant-tooltip,
.bathgiant-branches-map-band__legend-item--label:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-delivery-trust__item--home-branch-cta {
cursor: pointer;
position: relative;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: #fff;
font: inherit;
color: inherit;
text-align: inherit;
width: 100%;
}
.bathgiant-delivery-trust__item--home-branch-cta:hover .bathgiant-tooltip,
.bathgiant-delivery-trust__item--home-branch-cta:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-delivery-trust__item--home-branch-cta:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-delivery-trust__item--home-branch-cta:hover,
.bathgiant-delivery-trust__item--home-branch-cta:focus-visible {
border-color: var(--bathgiant-info-surface-border);
box-shadow: 0 0 0 2px var(--bathgiant-brand-focus-ring);
outline: none;
}
.bathgiant-delivery-trust__item--inactive {
border-color: #e2e8f0;
background: #f8fafc;
opacity: 0.88;
}
.bathgiant-delivery-trust__item--home {
border-color: var(--bathgiant-info-surface-border);
background: linear-gradient(135deg, var(--bathgiant-info-surface) 0%, #f8fafc 100%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 10%, transparent);
}
.bathgiant-delivery-trust__item--home .bathgiant-delivery-trust__icon {
color: var(--bathgiant-brand-deep);
}
.bathgiant-delivery-trust__item--home-branch-cta.bathgiant-delivery-trust__item--home:hover,
.bathgiant-delivery-trust__item--home-branch-cta.bathgiant-delivery-trust__item--home:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand) 45%, #fff);
box-shadow: 0 0 0 2px var(--bathgiant-brand-focus-ring);
}
.bathgiant-delivery-trust__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: var(--bathgiant-brand-deep, #17365d);
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}
.bathgiant-delivery-trust__item--active .bathgiant-delivery-trust__icon {
color: #166534;
}
.bathgiant-delivery-trust__item--muted .bathgiant-delivery-trust__icon {
color: #92400e;
}
.bathgiant-delivery-trust__copy {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.bathgiant-delivery-trust__title {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.3;
color: var(--bathgiant-ink, #1f3552);
}
.bathgiant-delivery-trust__text {
font-size: 0.8rem;
line-height: 1.4;
color: var(--bathgiant-ink-muted, #64748b);
}
.bathgiant-delivery-trust--pdp {
margin: 0 0 0.85rem;
}
.bathgiant-delivery-trust--fulfillment {
margin: 0 0 0.85rem;
} .bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item--active,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item--default {
border-color: #e2e8f0;
background: #fff;
box-shadow: none;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item--active .bathgiant-delivery-trust__icon {
color: var(--bathgiant-brand-deep, #17365d);
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell {
display: flex;
min-width: 0;
align-items: stretch;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__item {
flex: 1 1 auto;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.bathgiant-home-delivery-trust {
background: linear-gradient(180deg, #fff 0%, var(--bathgiant-brand-wash, #f0f4fa) 100%);
padding: clamp(1rem, 2.5vw, 1.35rem) 0 clamp(0.65rem, 1.75vw, 0.95rem);
}
.bathgiant-home-delivery-trust .bathgiant-delivery-trust--home {
margin: 0;
padding: 0;
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__list {
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__item {
align-items: center;
padding: 1.25rem 1.05rem;
min-height: 5.5rem;
height: 100%;
box-sizing: border-box;
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__icon {
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__title {
font-size: 0.98rem;
line-height: 1.25;
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__text {
display: block;
font-size: 0.875rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted, #5c6673);
}
@media (min-width: 640px) {
.bathgiant-delivery-trust--compact .bathgiant-delivery-trust__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__list {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
gap: clamp(0.75rem, 2vw, 1rem);
}
.bathgiant-delivery-trust--home[data-bg-cards="2"] .bathgiant-delivery-trust__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-delivery-trust--home[data-bg-cards="3"] .bathgiant-delivery-trust__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bathgiant-delivery-trust--home .bathgiant-delivery-trust__text {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__item {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 5.5rem;
padding: 0.6rem 0.45rem;
gap: 0.35rem;
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__icon {
width: 2.35rem;
height: 2.35rem;
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__title {
font-size: 0.82rem;
line-height: 1.25;
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__text {
display: block;
font-size: 0.68rem;
line-height: 1.3;
margin-top: 0.1rem;
color: #64748b;
}
.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__item--home .bathgiant-delivery-trust__title {
color: #1e40af;
}
@media (max-width: 639px) {
.bathgiant-delivery-trust--pdp-row:not(.bathgiant-delivery-trust--pdp) .bathgiant-delivery-trust__list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.15rem;
}
.bathgiant-delivery-trust--pdp-row:not(.bathgiant-delivery-trust--pdp) .bathgiant-delivery-trust__cell {
flex: 0 0 min(9.5rem, 32vw);
scroll-snap-align: start;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__list,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
flex-wrap: unset;
scroll-snap-type: none;
padding-bottom: 0;
gap: 0.45rem;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell {
flex: unset;
scroll-snap-align: unset;
min-width: 0;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:first-child {
grid-column: 1 / -1;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__item,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__item {
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
min-height: 0;
padding: 0.65rem 0.75rem;
gap: 0.65rem;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__icon,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__icon {
width: 2.35rem;
height: 2.35rem;
flex-shrink: 0;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__item,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__item {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 4.85rem;
padding: 0.5rem 0.35rem;
gap: 0.3rem;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__icon,
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__icon {
width: 2.1rem;
height: 2.1rem;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__title {
font-size: 0.78rem;
line-height: 1.2;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__text {
font-size: 0.68rem;
line-height: 1.25;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-tooltip,
.bathgiant-delivery-trust--fulfillment .bathgiant-tooltip {
display: none;
}
.bathgiant-product-single__postcode-controls {
flex-direction: column;
}
.bathgiant-product-single__postcode-controls .bathgiant-btn {
width: 100%;
justify-content: center;
}
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__list,
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:not(:first-child),
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) {
display: flex;
min-width: 0;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__item,
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__item {
flex: 1;
width: 100%;
height: 100%;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__title {
font-size: 0.88rem;
font-weight: 700;
line-height: 1.25;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__text {
font-size: 0.8rem;
line-height: 1.35;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__title {
font-size: 0.84rem;
line-height: 1.25;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:not(:first-child) .bathgiant-delivery-trust__text {
font-size: 0.76rem;
line-height: 1.35;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:first-child,
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child {
grid-column: 1 / -1;
}
.bathgiant-delivery-trust--fulfillment .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__item,
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__item {
flex-direction: row;
align-items: center;
text-align: left;
min-height: 0;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.bathgiant-delivery-trust--pdp.bathgiant-delivery-trust--pdp-row .bathgiant-delivery-trust__cell:first-child .bathgiant-delivery-trust__copy {
text-align: left;
}
.bathgiant-checkout-choices {
margin: 0 0 0.25rem;
padding: 1rem 1.15rem;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-md);
background: var(--bathgiant-brand-wash);
}
.bathgiant-checkout-choices__list {
margin: 0;
padding: 0;
}
.bathgiant-checkout-choices__row {
display: grid;
grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr);
gap: 0.35rem 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(15, 20, 25, 0.06);
}
.bathgiant-checkout-choices__row:first-child {
padding-top: 0;
}
.bathgiant-checkout-choices__row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.bathgiant-checkout-choices__label {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
}
.bathgiant-checkout-choices__value {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--bathgiant-ink);
line-height: 1.4;
}
.bathgiant-checkout-choices__change {
margin: 0.85rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid rgba(15, 20, 25, 0.08);
font-size: 0.875rem;
}
.bathgiant-checkout-choices__change-link {
font-weight: 600;
color: var(--bathgiant-brand-deep);
text-decoration: none;
}
.bathgiant-checkout-choices__change-link:hover,
.bathgiant-checkout-choices__change-link:focus-visible {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.bathgiant-checkout-choices__notice {
margin: 0.75rem 0 0;
padding: 0.65rem 0.75rem;
border-radius: var(--bathgiant-radius-sm);
background: #fff7ed;
border: 1px solid #fed7aa;
color: #9a3412;
font-size: 0.875rem;
line-height: 1.45;
}
@media (max-width: 520px) {
.bathgiant-checkout-choices__row {
grid-template-columns: 1fr;
gap: 0.15rem;
}
}
.bathgiant-trust-strip {
margin: 0;
padding: clamp(1.1rem, 2.5vw, 1.65rem) 0 clamp(2rem, 4vw, 3rem);
background: linear-gradient(180deg, var(--bathgiant-brand-wash) 0%, #fff 55%, #fff 100%);
border-top: 1px solid var(--bathgiant-border);
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-main--home > .bathgiant-trust-strip {
padding-block: var(--bathgiant-home-row-space);
}
.bathgiant-trust-strip__grid {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.75rem, 2vw, 1.1rem);
}
.bathgiant-trust-strip__card {
margin: 0;
min-width: 0;
}
.bathgiant-trust-strip__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
border-radius: var(--bathgiant-radius-lg);
border: 1px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(
120deg,
rgba(203, 213, 225, 0.95) 0%,
rgba(186, 199, 218, 0.95) 45%,
rgba(203, 213, 225, 0.95) 100%
) border-box;
background-size: 100% 100%, 220% 220%;
background-position: 0 0, 0% 50%;
overflow: hidden;
box-shadow: var(--bathgiant-shadow-sm);
transition: box-shadow 0.2s ease, background-position 0.45s ease;
}
.bathgiant-trust-strip__link:hover,
.bathgiant-trust-strip__link:focus-visible {
background-position: 0 0, 100% 50%;
background-image:
linear-gradient(#fff, #fff),
linear-gradient(
120deg,
color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 58%, #ffffff) 0%,
color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 82%, #ffffff) 38%,
color-mix(in srgb, var(--bathgiant-trade, #c41e1e) 36%, #ffffff) 72%,
color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 62%, #ffffff) 100%
);
box-shadow: var(--bathgiant-shadow-md);
}
.bathgiant-trust-strip__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(145deg, var(--bathgiant-brand-wash) 0%, #f8fafc 100%);
}
.bathgiant-trust-strip__media-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-trust-strip__card--trade .bathgiant-trust-strip__media {
background: linear-gradient(145deg, #fff5f5 0%, var(--bathgiant-brand-wash) 100%);
}
body.bathgiant-has-trade-pricing .bathgiant-trust-strip__card--trade .bathgiant-trust-strip__media {
background: linear-gradient(145deg, var(--bathgiant-brand-wash) 0%, #fff 100%);
}
.bathgiant-trust-strip__media-frame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
height: 100%;
padding: 1rem;
text-align: center;
}
.bathgiant-trust-strip__media-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--bathgiant-brand-deep);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
} .bathgiant-trust-strip__media-icon svg,
.bathgiant-trust-strip__icon-badge svg {
display: block;
}
.bathgiant-trust-strip__card--trade .bathgiant-trust-strip__media-icon {
color: var(--bathgiant-trade, #c41e1e);
}
body.bathgiant-has-trade-pricing .bathgiant-trust-strip__card--trade .bathgiant-trust-strip__media-icon {
color: var(--bathgiant-brand-deep);
}
.bathgiant-trust-strip__media-label {
max-width: 14rem;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.35;
color: #64748b;
}
.bathgiant-trust-strip__body {
--bathgiant-trust-card-text: #ffffff;
--bathgiant-trust-card-text-muted: rgba(255, 255, 255, 0.88);
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.35rem;
padding: 1rem 1.05rem 1.1rem;
color: var(--bathgiant-trust-card-text);
background: var(--bathgiant-trust-card-background, var(--bathgiant-brand-deep));
background-size: 140% 140%;
background-position: 0% 50%;
transition: background-position 0.35s ease;
}
.bathgiant-trust-strip__card--trade {
--bathgiant-trust-card-background: linear-gradient(125deg, #3f0a1f 0%, #6f1433 42%, #9f1239 74%, var(--bathgiant-trade, #c41e1e) 100%);
}
.bathgiant-trust-strip__card--delivery {
--bathgiant-trust-card-background: linear-gradient(125deg, #1a2f4a 0%, #243d5c 42%, #2f5490 74%, var(--bathgiant-public-brand-deep, #2f68c4) 100%);
}
.bathgiant-trust-strip__card--branches {
--bathgiant-trust-card-background: linear-gradient(125deg, var(--bathgiant-dark, #0f1419) 0%, #27313d 42%, #3f4a57 74%, #5c6673 100%);
}
.bathgiant-trust-strip__link:hover .bathgiant-trust-strip__body,
.bathgiant-trust-strip__link:focus-visible .bathgiant-trust-strip__body {
background-position: 100% 50%;
}
.bathgiant-trust-strip__icon-badge {
display: none;
}
.bathgiant-trust-strip__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.2rem, 1.8vw, 1.4rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--bathgiant-trust-card-text);
}
.bathgiant-trust-strip__text {
margin: 0;
flex: 1 1 auto;
font-size: 0.88rem;
line-height: 1.45;
color: var(--bathgiant-trust-card-text-muted);
}
.bathgiant-trust-strip__cta {
margin-top: 0.35rem;
font-size: 0.84rem;
font-weight: 700;
color: var(--bathgiant-trust-card-text);
}
.bathgiant-trust-strip__link:hover .bathgiant-trust-strip__cta,
.bathgiant-trust-strip__link:focus-visible .bathgiant-trust-strip__cta {
text-decoration: underline;
}
@media (max-width: 720px) {
.bathgiant-trust-strip__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.bathgiant-trade-cta {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: 0;
padding-right: 0;
max-width: 100vw;
overflow-x: clip;
}
.bathgiant-main--home > .bathgiant-trade-cta .bathgiant-trade-cta__panel--full {
padding-top: var(--bathgiant-home-row-space);
padding-bottom: var(--bathgiant-home-row-space);
}
.bathgiant-home-catalogue:has(+ .bathgiant-trade-cta) {
padding-bottom: 0;
}
.bathgiant-main--home .bathgiant-trade-cta + .bathgiant-news-teasers {
margin-top: 0;
border-top: 0;
}
.bathgiant-trade-programme .bathgiant-trade-cta {
margin-left: 0;
margin-right: 0;
max-width: none;
width: 100%;
} .bathgiant-trade-cta__inner--split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: stretch;
min-height: clamp(22rem, 32vw, 28rem);
background: #0f172a;
overflow: hidden;
} .bathgiant-trade-cta__inner--full {
position: relative;
display: flex;
align-items: center;
min-height: clamp(20rem, 30vw, 26rem);
background: #0b1220;
overflow: hidden;
}
.bathgiant-trade-cta__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.bathgiant-trade-cta__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; opacity: 0.72;
filter: saturate(0.9) contrast(1.04);
} .bathgiant-trade-bg-rotator {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.bathgiant-trade-bg-rotator__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--trade-bg-fade, 1.5s) ease-in-out;
}
.bathgiant-trade-bg-rotator__slide.is-active {
opacity: 1;
z-index: 1;
}
.bathgiant-trade-bg-rotator.is-trade-bg-static .bathgiant-trade-bg-rotator__slide {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-trade-bg-rotator__slide {
transition: none;
}
}
.bathgiant-trade-bg-rotator__slide picture,
.bathgiant-trade-bg-rotator__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.bathgiant-trade-bg-rotator__img {
object-fit: cover;
object-position: center;
}
.bathgiant-trade-bg-rotator--banner .bathgiant-trade-bg-rotator__img {
opacity: 0.72;
filter: saturate(0.9) contrast(1.04);
}
.bathgiant-trade-cta__bg .bathgiant-trade-bg-rotator {
z-index: 0;
}
.bathgiant-trade-cta__bg-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(ellipse 80% 95% at 100% 100%, rgba(136, 19, 55, 0.48) 0%, transparent 62%),
linear-gradient(105deg, rgba(7, 13, 25, 0.82) 0%, rgba(12, 24, 42, 0.7) 43%, rgba(24, 48, 80, 0.38) 100%);
}
.bathgiant-trade-cta__inner--full.bathgiant-trade-cta__inner--no-photo .bathgiant-trade-cta__bg-overlay {
background:
radial-gradient(ellipse 70% 60% at 78% 22%, rgba(196, 30, 30, 0.32) 0%, transparent 60%),
linear-gradient(128deg, #2a0612 0%, #14233a 52%, #1e3a5f 100%);
}
.bathgiant-trade-cta__panel {
position: relative;
z-index: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
background:
radial-gradient(ellipse 80% 60% at 0% 100%, rgba(30, 58, 95, 0.55) 0%, transparent 55%),
linear-gradient(155deg, #0b1220 0%, #14233a 48%, #1e3a5f 100%);
color: #fff;
}
.bathgiant-trade-cta__panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(
90deg,
var(--bathgiant-trade, #c41e1e) 0%,
#9f1239 45%,
rgba(255, 255, 255, 0.35) 100%
);
pointer-events: none;
} .bathgiant-trade-cta__panel--full {
position: relative;
z-index: 1;
width: 100%;
max-width: min(46rem, 100%);
background: none;
padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.bathgiant-trade-cta__panel--full::before {
content: none;
}
.bathgiant-trade-cta__badge {
display: block;
width: auto;
max-width: 9rem;
height: auto;
margin: 0 0 clamp(1rem, 2vw, 1.35rem);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.bathgiant-trade-cta__eyebrow {
display: inline-flex;
align-items: center;
margin: 0 0 0.85rem;
padding: 0.28rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
font-family: var(--bathgiant-font-sans);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
width: fit-content;
}
.bathgiant-trade-cta__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.45rem, 2.8vw, 2.05rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.022em;
color: #fff;
text-wrap: balance;
max-width: 18ch;
overflow-wrap: break-word;
}
.bathgiant-trade-cta__lede,
.bathgiant-trade-cta__points li {
overflow-wrap: break-word;
word-break: break-word;
}
.bathgiant-trade-cta__lede {
max-width: 40ch;
margin: clamp(0.75rem, 1.5vw, 1rem) 0 0;
font-family: var(--bathgiant-font-sans);
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
line-height: 1.65;
color: rgba(226, 232, 240, 0.92);
}
.bathgiant-trade-cta__lede > :first-child { margin-top: 0; }
.bathgiant-trade-cta__lede > :last-child { margin-bottom: 0; }
.bathgiant-trade-cta__points {
margin: clamp(1rem, 2vw, 1.35rem) 0 0;
padding: 0;
list-style: none;
max-width: 42ch;
}
.bathgiant-trade-cta__points li {
position: relative;
margin: 0 0 0.55rem;
padding-left: 1.15rem;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
.bathgiant-trade-cta__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.45rem;
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: linear-gradient(135deg, #9f1239 0%, #881337 100%);
box-shadow: 0 0 0 3px rgba(159, 18, 57, 0.22);
}
.bathgiant-trade-cta__points li:last-child {
margin-bottom: 0;
}
.bathgiant-trade-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: clamp(1.35rem, 2.5vw, 1.75rem) 0 0;
}
.bathgiant-trade-cta__actions .bathgiant-trade-cta__btn {
width: auto;
min-width: 9.5rem;
text-align: center;
} .bathgiant-trade-cta__link {
display: inline-flex;
align-items: center;
align-self: center;
color: rgba(255, 255, 255, 0.82);
font-size: 0.92rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.18em;
transition: color 0.15s ease;
}
.bathgiant-trade-cta__link:hover,
.bathgiant-trade-cta__link:focus-visible {
color: #fff;
}
.bathgiant-trade-cta__btn--primary {
background: linear-gradient(135deg, #9f1239 0%, #881337 100%) !important;
color: #fff !important;
border: 1px solid transparent !important;
box-shadow: 0 8px 20px rgba(136, 19, 55, 0.35) !important;
font-weight: 700 !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.bathgiant-trade-cta__btn--primary:hover,
.bathgiant-trade-cta__btn--primary:focus-visible {
filter: brightness(1.06);
box-shadow: 0 10px 24px rgba(136, 19, 55, 0.42) !important;
transform: translateY(-1px);
color: #fff !important;
}
.bathgiant-trade-cta__btn--secondary {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.38) !important;
color: #fff !important;
box-shadow: none !important;
font-weight: 600 !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
}
.bathgiant-trade-cta__btn--secondary:hover,
.bathgiant-trade-cta__btn--secondary:focus-visible {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.55) !important;
color: #fff !important;
}
.bathgiant-trade-cta__media {
position: relative;
min-height: 100%;
background: #1e293b;
overflow: hidden;
}
.bathgiant-trade-cta__img {
display: block;
width: 100%;
height: 100%;
min-height: clamp(18rem, 28vw, 28rem);
object-fit: cover;
object-position: center;
}
.bathgiant-trade-cta__fallback {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(16rem, 26vw, 24rem);
height: 100%;
background:
radial-gradient(ellipse 70% 55% at 70% 30%, rgba(159, 18, 57, 0.35) 0%, transparent 60%),
linear-gradient(148deg, #2a0612 0%, #4a0818 45%, #6f1433 100%);
}
.bathgiant-trade-cta__fallback-glow,
.bathgiant-trade-cta__fallback-grid {
position: absolute;
inset: 0;
pointer-events: none;
}
.bathgiant-trade-cta__fallback-grid {
opacity: 0.16;
background-image:
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 60% at 40% 40%, #000 0%, transparent 75%);
}
.bathgiant-trade-cta__fallback-mark {
position: relative;
z-index: 1;
width: auto;
max-width: 8.5rem;
height: auto;
opacity: 0.9;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
.bathgiant-trade-cta__panel {
animation: bathgiant-tp-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bathgiant-trade-cta__media {
animation: bathgiant-tp-fade-scale 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
}
@media (max-width: 899px) {
.bathgiant-trade-cta__panel,
.bathgiant-trade-cta__media {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
@media (max-width: 900px) {
.bathgiant-trade-cta__bg-overlay {
background:
linear-gradient(180deg, rgba(7, 13, 25, 0.78) 0%, rgba(12, 24, 42, 0.7) 68%, rgba(68, 16, 38, 0.6) 100%);
}
.bathgiant-trade-bg-rotator--banner .bathgiant-trade-bg-rotator__img {
opacity: 0.64;
}
.bathgiant-trade-cta__bg-img {
opacity: 0.64;
}
.bathgiant-trade-cta__inner--split {
grid-template-columns: 1fr;
min-height: 0;
}
.bathgiant-trade-cta__title {
max-width: none;
}
.bathgiant-trade-cta__img,
.bathgiant-trade-cta__fallback {
min-height: 14rem;
} .bathgiant-trade-cta__panel--full,
.bathgiant-trade-cta__panel {
padding-left: var(--bathgiant-gutter-x);
padding-right: var(--bathgiant-gutter-x);
}
.bathgiant-trade-cta__actions {
flex-direction: column;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.bathgiant-trade-cta__actions .bathgiant-trade-cta__btn {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 2.75rem;
box-sizing: border-box;
}
.bathgiant-trade-cta__link {
align-self: center;
margin-top: 0.15rem;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-trade-cta__btn--primary {
transition: none;
}
.bathgiant-trade-cta__btn--primary:hover,
.bathgiant-trade-cta__btn--primary:focus-visible {
transform: none;
}
}
.bathgiant-marketing-page {
margin: var(--bathgiant-space-section) 0 calc(var(--bathgiant-space-section) + 0.35rem);
}
.bathgiant-marketing-hero {
margin-top: 0.35rem;
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.bathgiant-marketing-page .bathgiant-marketing-hero {
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.bathgiant-marketing-page .bathgiant-marketing-hero__title {
line-height: 1.15;
}
.bathgiant-marketing-page .bathgiant-marketing-hero__lede {
margin-top: clamp(0.65rem, 1.5vw, 0.95rem);
font-size: clamp(1rem, 1.6vw, 1.08rem);
line-height: 1.65;
}
.bathgiant-marketing-hero__eyebrow {
margin: 0 0 0.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-marketing-hero__title {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2rem);
}
.bathgiant-marketing-hero__lede {
margin: 0.55rem 0 0;
max-width: 68ch;
color: #475569;
}
.bathgiant-marketing-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.bathgiant-marketing-grid__panel {
padding: var(--bathgiant-space-block);
}
.bathgiant-marketing-grid__panel h2 {
margin: 0 0 0.65rem;
font-size: 1.1rem;
}
.bathgiant-marketing-grid__panel p:last-child,
.bathgiant-marketing-grid__panel ul:last-child {
margin-bottom: 0;
}
.bathgiant-optional-page-content {
margin-top: 0.9rem;
padding: var(--bathgiant-space-block);
}
.bathgiant-faq-list,
.bathgiant-branches-grid,
.bathgiant-news-list {
display: grid;
gap: 0.8rem;
}
.bathgiant-faq-list__item,
.bathgiant-branches-grid__item,
.bathgiant-news-list__item,
.bathgiant-policy-layout {
padding: var(--bathgiant-space-block);
}
.bathgiant-faq-list__item h2,
.bathgiant-branches-grid__item h2,
.bathgiant-news-list__item h2 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.bathgiant-faq-list__item p:last-child,
.bathgiant-branches-grid__item p:last-child,
.bathgiant-news-list__item p:last-child {
margin-bottom: 0;
}
.bathgiant-branches-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
} .bathgiant-branches-archive {
margin: 0;
} .bathgiant-archive-branches.bathgiant-archive {
padding-bottom: clamp(1.6rem, 3.2vw, 2.4rem);
}
.bathgiant-branches-archive__header {
display: grid;
grid-template-columns: minmax(17.5rem, 0.43fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1.25rem, 2.25vw, 2.25rem);
margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem);
}
.bathgiant-branches-archive__intro {
min-width: 0;
}
.bathgiant-branches-archive__intro .bathgiant-marketing-hero__lede {
max-width: 36ch;
}
.bathgiant-branches-archive__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 26rem;
margin: 0;
overflow: hidden;
border: 1px solid rgba(13, 67, 125, 0.16);
border-radius: var(--bathgiant-radius-lg);
background: linear-gradient(145deg, var(--bathgiant-brand-wash) 0%, #e8f0f8 100%);
box-shadow: 0 16px 36px rgba(15, 45, 78, 0.16);
}
.bathgiant-branches-archive__media::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 3px 0 rgba(50, 137, 218, 0.78);
pointer-events: none;
}
.bathgiant-branches-archive__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .bathgiant-archive-branches > .bathgiant-branches-map-band {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: var(--bathgiant-space-section, 2rem);
overflow: visible;
}
.bathgiant-branches-archive__header-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1rem;
}
@media (max-width: 940px) {
.bathgiant-branches-archive__header {
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
} .bathgiant-branches-archive__media {
order: -1;
max-width: none;
max-height: none;
}
.bathgiant-branches-archive__intro {
order: 0;
}
}
@media (max-width: 480px) {
.bathgiant-branches-archive__media {
border-radius: var(--bathgiant-radius-md);
}
}
.bathgiant-branches-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
gap: clamp(1.25rem, 2.8vw, 1.85rem); padding-bottom: 0.85rem;
}
.bathgiant-branch-card {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-lg);
background: #fff; overflow: visible;
box-shadow: var(--bathgiant-shadow-sm);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.bathgiant-branch-card:hover {
border-color: #c7d7ec;
box-shadow: var(--bathgiant-shadow-md);
}
.bathgiant-branch-card__media {
display: block;
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--bathgiant-radius-lg) var(--bathgiant-radius-lg) 0 0;
background: linear-gradient(145deg, var(--bathgiant-brand-wash) 0%, #f8fafc 100%);
text-decoration: none;
}
.bathgiant-branch-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-branch-card__placeholder-wrap,
.bathgiant-branch-card__placeholder-wrap .bathgiant-marketing-media {
height: 100%;
margin: 0;
}
.bathgiant-branch-card__placeholder-wrap .bathgiant-marketing-media__frame {
min-height: 100%;
border: 0;
border-radius: 0;
background: transparent;
}
.bathgiant-marketing-media--branch-card .bathgiant-marketing-media__frame {
min-height: 10rem;
padding: 1rem;
}
.bathgiant-marketing-media--branch-card .bathgiant-marketing-media__label {
font-size: 0.78rem;
}
.bathgiant-branch-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.55rem;
padding: 1.15rem 1.25rem 1.45rem;
}
.bathgiant-branch-card__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 1.15rem;
line-height: 1.25;
}
.bathgiant-branch-card__title a {
color: var(--bathgiant-ink);
text-decoration: none;
}
.bathgiant-branch-card__title a:hover,
.bathgiant-branch-card__title a:focus-visible {
color: var(--bathgiant-brand-deep);
}
.bathgiant-branch-card__address,
.bathgiant-branch-card__hours,
.bathgiant-branch-card__phone {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branch-card__hours-label {
font-weight: 700;
color: #475569;
}
.bathgiant-branch-card__phone a {
color: inherit;
font-weight: 600;
}
.bathgiant-branch-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: auto;
padding-top: 0.7rem;
}
.bathgiant-branch-card__btn {
flex: 1 1 auto;
min-width: 8.5rem;
text-align: center;
box-sizing: border-box;
}
.bathgiant-branch-card__google-reviews {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex: 1 1 100%;
margin-top: 0.15rem;
color: var(--bathgiant-ink, #1f2937);
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
}
.bathgiant-branch-card__google-reviews:hover,
.bathgiant-branch-card__google-reviews:focus-visible {
color: #1a73e8;
}
.bathgiant-branch-card__google-icon {
display: block;
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.bathgiant-branches-archive__empty,
.bathgiant-branches-archive__all {
margin: 1rem 0 0;
} .bathgiant-branches-map-band {
--bg-map-showroom: #3b82f6;
--bg-map-showroom-deep: #2563eb;
--bg-map-local-zone: #22c55e;
--bg-map-local-zone-deep: #16a34a;
--bg-map-local-zone-ring: color-mix(in srgb, var(--bg-map-local-zone) 28%, #dcfce7);
--bg-map-uk-distribution: #ffd88a;
--bg-map-uk-distribution-ring: #1f2937;
--bg-map-uk-wide: var(--bg-map-uk-distribution);
--bg-map-uk-wide-ring: var(--bg-map-uk-distribution-ring);
--bg-map-branch-zone: var(--bg-map-local-zone);
--bg-map-branch-zone-deep: var(--bg-map-local-zone-deep);
--bg-map-uk-zone: #cbd5e1;
--bg-map-uk-zone-ring: #e2e8f0;
position: relative;
z-index: 0;
isolation: isolate;
width: 100%;
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, var(--bathgiant-border));
background: #fff;
}
.bathgiant-branches-map-band__legend-bar {
position: relative;
z-index: 6;
width: 100%;
padding: 0.5rem clamp(1rem, 3vw, 2rem);
background: #fff;
overflow: visible;
}
.bathgiant-branches-map-band__legend {
width: min(72rem, 100%);
margin: 0 auto;
padding: 0;
}
.bathgiant-branches-map-band__legend-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0;
}
.bathgiant-branches-map-band__legend-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
min-height: 1.35rem;
padding: 0.15rem 0;
}
.bathgiant-branches-map-band__legend-item + .bathgiant-branches-map-band__legend-item {
margin-left: 1.1rem;
padding-left: 1.1rem;
border-left: 1px solid color-mix(in srgb, var(--bathgiant-ink-muted) 22%, var(--bathgiant-border));
}
.bathgiant-branches-map-band__legend-marker-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.bathgiant-branches-map-band__legend-item--cta {
cursor: pointer;
border-radius: 999px;
padding: 0.2rem 0.55rem 0.2rem 0.35rem;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bathgiant-branches-map-band__legend-item--cta:hover,
.bathgiant-branches-map-band__legend-item--cta:focus-visible,
.bathgiant-branches-map-band__legend-item--cta.is-legend-active {
background: color-mix(in srgb, var(--bathgiant-brand) 10%, #fff);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 18%, var(--bathgiant-border));
outline: none;
}
.bathgiant-branches-map-band__legend-item--cta:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand) 34%, transparent);
}
.bathgiant-branches-map-band__legend-item--label {
cursor: default;
}
.bathgiant-branches-map-band__legend-label {
font-size: 0.75rem;
line-height: 1.2;
font-weight: 500;
color: var(--bathgiant-ink);
white-space: nowrap;
}
.bathgiant-branches-map-band__legend-marker {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
}
.bathgiant-branches-map-band__legend-marker--showroom {
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
color: #fff;
background: var(--bg-map-showroom, #3b82f6);
border: 1.5px solid #fff;
box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
}
.bathgiant-branches-map-band__legend-marker--showroom svg {
display: block;
}
.bathgiant-branches-map-band__legend-marker--local {
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--bg-map-local-zone, #22c55e);
border: 1.5px solid #fff;
box-shadow: 0 0 0 2px var(--bg-map-local-zone, #22c55e);
}
.bathgiant-branches-map-band__legend-marker--distribution {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--bg-map-uk-distribution, #fff);
border: 1.5px solid var(--bg-map-uk-distribution-ring, #1f2937);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}
.bathgiant-branches-map-band__stage {
position: relative;
z-index: 0;
isolation: isolate;
width: 100%; overflow: visible;
background: linear-gradient(180deg, var(--bathgiant-brand-wash) 0%, #fff 100%);
}
.bathgiant-branches-map-band__glow {
position: absolute;
inset: auto auto 8% -8%;
width: min(52vw, 34rem);
height: min(52vw, 34rem);
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, var(--bathgiant-brand) 24%, transparent) 0%,
transparent 68%
);
pointer-events: none;
z-index: 1;
}
.bathgiant-branches-map-band__map {
position: relative;
z-index: 0;
width: 100%;
height: 70vh;
min-height: 22rem;
max-height: 52rem; overflow: visible;
} .bathgiant-branches-map-band__map .leaflet-container {
touch-action: pan-y;
background: var(--bathgiant-brand-wash);
overflow: visible;
}
.bathgiant-branches-map-band__map .leaflet-popup-pane {
z-index: 700;
}
.bathgiant-branches-map-band__map::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
linear-gradient(90deg, color-mix(in srgb, var(--bathgiant-brand-wash) 94%, transparent) 0%, transparent 40%),
linear-gradient(270deg, color-mix(in srgb, var(--bathgiant-brand-wash) 94%, transparent) 0%, transparent 40%),
linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand-wash) 52%, transparent) 0%, transparent 24%);
}
.bathgiant-branches-map-band__overlay {
position: absolute;
z-index: 5;
left: clamp(1rem, 4vw, 2.75rem);
top: 50%;
transform: translateY(-50%);
width: min(22rem, calc(100% - 2rem));
padding: 1.15rem 1.15rem 1rem;
border-radius: var(--bathgiant-radius-lg);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 22%, rgba(255, 255, 255, 0.92));
background: #fff;
box-shadow: 0 16px 40px color-mix(in srgb, var(--bathgiant-brand-deep) 12%, transparent);
color: var(--bathgiant-ink);
pointer-events: auto;
}
.bathgiant-branches-map-band__eyebrow {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-branches-map-band__title {
margin: 0 0 0.45rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.35rem, 2.8vw, 1.75rem);
line-height: 1.15;
color: var(--bathgiant-ink);
}
.bathgiant-branches-map-band__lede {
margin: 0 0 0.85rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branches-map-band__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bathgiant-branches-map-band__list-divider {
height: 1px;
margin: 0.35rem 0;
background: color-mix(in srgb, var(--bathgiant-brand) 14%, rgba(255, 255, 255, 0.88));
list-style: none;
}
.bathgiant-branches-map-band__postcode-item {
list-style: none;
}
.bathgiant-branches-map-band__postcode-finder {
margin-top: 0.15rem;
}
.bathgiant-branches-map-band__postcode-label {
margin: 0 0 0.45rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: color-mix(in srgb, var(--bathgiant-ink) 72%, var(--bathgiant-brand));
}
.bathgiant-branches-map-band__postcode-row {
display: flex;
align-items: stretch;
gap: 0.45rem;
}
.bathgiant-branches-map-band__postcode-input {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0.55rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 18%, rgba(255, 255, 255, 0.88));
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
font: inherit;
font-size: 0.92rem;
}
.bathgiant-branches-map-band__postcode-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--bathgiant-brand) 42%, white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand) 16%, transparent);
}
.bathgiant-branches-map-band__postcode-btn {
flex: 0 0 auto;
min-height: 2.35rem;
padding-inline: 0.85rem;
font-size: 0.88rem;
white-space: nowrap;
}
.bathgiant-branches-map-band__postcode-status {
margin: 0.45rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branches-map-band__postcode-status--ok {
color: color-mix(in srgb, #0f766e 78%, var(--bathgiant-ink));
}
.bathgiant-branches-map-band__postcode-status--error {
color: #b91c1c;
}
.bathgiant-branches-map-band__postcode-status--pending {
color: var(--bathgiant-ink-muted);
font-style: italic;
}
.bathgiant-branches-map-band__chip--network.is-active {
border-color: color-mix(in srgb, var(--bathgiant-brand) 34%, white);
background: color-mix(in srgb, var(--bathgiant-brand) 10%, rgba(255, 255, 255, 0.9));
}
.bathgiant-branches-map-band__chip-pin--network {
border-radius: 4px;
background: var(--bg-map-uk-zone, #cbd5e1);
box-shadow: 0 0 0 4px var(--bg-map-uk-zone-ring, #e2e8f0);
}
.bathgiant-branches-map-band__chip {
display: flex;
align-items: flex-start;
gap: 0.55rem;
width: 100%;
margin: 0;
padding: 0.55rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, rgba(255, 255, 255, 0.88));
border-radius: 12px;
background: color-mix(in srgb, var(--bathgiant-brand) 5%, rgba(255, 255, 255, 0.72));
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-branches-map-band__chip:hover,
.bathgiant-branches-map-band__chip:focus-visible {
background: color-mix(in srgb, var(--bathgiant-brand) 10%, rgba(255, 255, 255, 0.86));
border-color: color-mix(in srgb, var(--bathgiant-brand) 28%, white);
outline: none;
}
.bathgiant-branches-map-band__chip.is-active {
background: color-mix(in srgb, var(--bathgiant-brand) 14%, rgba(255, 255, 255, 0.92));
border-color: color-mix(in srgb, var(--bathgiant-brand) 36%, white);
box-shadow: 0 6px 18px color-mix(in srgb, var(--bathgiant-brand) 14%, transparent);
transform: translateX(2px);
}
.bathgiant-branches-map-band__chip-pin {
flex: 0 0 auto;
width: 0.65rem;
height: 0.65rem;
margin-top: 0.35rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-map-showroom, #3b82f6) 36%, transparent);
}
.bathgiant-branches-map-band__chip.is-active .bathgiant-branches-map-band__chip-pin {
background: var(--bg-map-showroom, #3b82f6);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-map-showroom, #3b82f6) 44%, transparent);
}
.bathgiant-branches-map-band__chip-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.bathgiant-branches-map-band__chip-label {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
color: var(--bathgiant-ink);
}
.bathgiant-branches-map-band__chip-meta {
font-size: 0.76rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branches-map-band__attrib {
margin: 0.7rem 0 0;
font-size: 0.68rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branches-map-band__attrib a {
color: var(--bathgiant-brand-deep);
} body.bathgiant-has-trade-pricing .bathgiant-branches-map-band {
border-top-color: color-mix(in srgb, var(--bathgiant-brand) 20%, var(--bathgiant-border));
background: linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand) 6%, #fff) 0%, #fff 100%);
}
body.bathgiant-has-trade-pricing .bathgiant-branches-map-band__glow {
background: radial-gradient(
circle,
color-mix(in srgb, var(--bathgiant-brand) 28%, transparent) 0%,
transparent 68%
);
}
body.bathgiant-has-trade-pricing .bathgiant-branches-map-band__map::after {
background:
linear-gradient(90deg, color-mix(in srgb, var(--bathgiant-brand) 8%, rgba(255, 255, 255, 0.92)) 0%, transparent 46%),
linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand) 6%, rgba(255, 255, 255, 0.88)) 0%, transparent 24%);
}
body.bathgiant-has-trade-pricing .bathgiant-branches-map-band__overlay {
border-color: color-mix(in srgb, var(--bathgiant-brand) 26%, rgba(255, 255, 255, 0.9));
background: #fff;
box-shadow: 0 16px 40px color-mix(in srgb, var(--bathgiant-brand) 16%, transparent);
} .bathgiant-branches-map-band__detail {
position: absolute;
z-index: 5;
right: clamp(1rem, 4vw, 2.75rem);
top: 50%;
transform: translateY(-50%);
width: min(21rem, calc(100% - 2rem));
max-height: calc(100% - 2rem);
overflow: auto;
border-radius: var(--bathgiant-radius-lg);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 22%, rgba(255, 255, 255, 0.92));
background: color-mix(in srgb, var(--bathgiant-brand) 9%, rgba(255, 255, 255, 0.84));
backdrop-filter: blur(18px) saturate(1.12);
-webkit-backdrop-filter: blur(18px) saturate(1.12);
box-shadow: 0 16px 40px color-mix(in srgb, var(--bathgiant-brand-deep) 12%, transparent);
pointer-events: auto;
}
body.bathgiant-has-trade-pricing .bathgiant-branches-map-band__detail {
border-color: color-mix(in srgb, var(--bathgiant-brand) 26%, rgba(255, 255, 255, 0.9));
background: color-mix(in srgb, var(--bathgiant-brand) 11%, rgba(255, 255, 255, 0.84));
box-shadow: 0 16px 40px color-mix(in srgb, var(--bathgiant-brand) 16%, transparent);
}
.bathgiant-branch-map-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.bathgiant-branch-map-card__media {
overflow: hidden;
border-radius: var(--bathgiant-radius-lg) var(--bathgiant-radius-lg) 0 0;
background: color-mix(in srgb, var(--bathgiant-brand) 8%, #e8eef6);
}
.bathgiant-branch-map-card__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.bathgiant-branch-map-card__body {
padding: 0.85rem 0.95rem 0.95rem;
}
.bathgiant-branch-map-card__title {
margin: 0 0 0.35rem;
font-family: var(--bathgiant-font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: var(--bathgiant-ink);
}
.bathgiant-branch-map-card__address,
.bathgiant-branch-map-card__hours,
.bathgiant-branch-map-card__phone {
margin: 0 0 0.3rem;
font-size: 0.82rem;
line-height: 1.45;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branch-map-card__hours span {
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-branch-map-card__phone a {
color: var(--bathgiant-brand-deep);
font-weight: 600;
text-decoration: none;
}
.bathgiant-branch-map-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.55rem;
}
.bathgiant-branch-map-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.38rem 0.7rem;
border-radius: 999px;
background: var(--bathgiant-brand-deep);
color: #fff !important;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
}
.bathgiant-branch-map-card__btn--ghost {
background: #fff;
color: var(--bathgiant-brand-deep) !important;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 20%, #dbe3ec);
}
@media (min-width: 821px) {
.bathgiant-branches-map-band .leaflet-popup {
display: none !important;
}
}
.bathgiant-branch-map-marker {
background: transparent;
border: 0;
cursor: pointer;
}
.bathgiant-branch-map-marker__icon {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #fff;
background: var(--bg-map-showroom, #3b82f6);
border: 2px solid #fff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}
.bathgiant-branch-map-marker__dot {
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 999px;
background: var(--bg-map-showroom, #3b82f6);
border: 2px solid #fff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}
.bathgiant-branch-map-marker__pulse {
position: absolute;
left: 50%;
top: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-map-showroom, #3b82f6) 28%, transparent);
animation: bg2026-branch-map-pulse 2.4s ease-out infinite;
}
.bathgiant-branch-map-marker--active .bathgiant-branch-map-marker__pulse {
background: color-mix(in srgb, var(--bg-map-showroom, #3b82f6) 38%, transparent);
animation-duration: 1.6s;
}
.bathgiant-branch-map-marker--active .bathgiant-branch-map-marker__icon {
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
background: var(--bg-map-showroom-deep, #2563eb);
}
.bathgiant-branch-map-marker--active .bathgiant-branch-map-marker__dot {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: var(--bg-map-showroom-deep, #2563eb);
}
.bathgiant-branch-map-marker--muted {
opacity: 0.55;
}
.bathgiant-branch-map-marker--muted .bathgiant-branch-map-marker__pulse {
animation: none;
opacity: 0.25;
}
.bathgiant-branch-area-marker {
background: transparent;
border: 0;
pointer-events: auto;
transition: opacity 0.45s ease;
}
.bathgiant-branch-area-marker__pin {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.bathgiant-branch-area-marker__dot {
display: block;
width: 7px;
height: 7px;
border-radius: 999px;
background: #94a3b8;
border: 1.5px solid #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.bathgiant-branch-area-marker--uk-wide .bathgiant-branch-area-marker__dot {
width: 7px;
height: 7px;
background: var(--bg-map-uk-distribution, #fff);
border: 1.5px solid var(--bg-map-uk-distribution-ring, #1f2937);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
opacity: var(--bg-uk-dot-opacity, 0);
transition: opacity 0.28s ease;
}
.bathgiant-branch-area-marker--uk-wide.bathgiant-branch-area-marker--uk-sonar-lit .bathgiant-branch-area-marker__dot {
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.bathgiant-branch-area-marker--uk-ref .bathgiant-branch-area-marker__dot {
width: 4px;
height: 4px;
background: var(--bg-map-uk-zone-ring, #e2e8f0);
border-width: 1px;
box-shadow: none;
opacity: 0.72;
}
.bathgiant-branch-area-marker--local-delivery .bathgiant-branch-area-marker__dot,
.bathgiant-branch-area-marker--delivery-range .bathgiant-branch-area-marker__dot {
width: 8px;
height: 8px;
background: var(--bg-map-local-zone, #64748b);
border-width: 1.5px;
box-shadow: 0 0 0 4px var(--bg-map-local-zone-ring, #e2e8f0);
}
.bathgiant-branch-area-marker--local-delivery.bathgiant-branch-area-marker--in-branch-radius .bathgiant-branch-area-marker__dot,
.bathgiant-branch-area-marker--delivery-range.bathgiant-branch-area-marker--in-branch-radius .bathgiant-branch-area-marker__dot {
width: 9px;
height: 9px;
background: var(--bg-map-local-zone-deep, #16a34a);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 32%, transparent);
}
.bathgiant-branch-area-marker--branch-region .bathgiant-branch-area-marker__dot {
width: 9px;
height: 9px;
background: var(--bg-map-local-zone, #22c55e);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 28%, transparent);
}
.bathgiant-branch-area-marker--branch-region-visible .bathgiant-branch-area-marker__label {
opacity: 1;
transform: scale(1);
color: var(--bg-map-local-zone-deep, #16a34a);
border-color: color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 30%, transparent);
background: rgba(255, 255, 255, 0.98);
}
.bathgiant-branch-area-marker--active:not(.bathgiant-branch-area-marker--uk-wide) .bathgiant-branch-area-marker__dot {
width: 9px;
height: 9px;
background: var(--bg-map-local-zone-deep, #16a34a);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 32%, transparent);
}
.bathgiant-branch-area-marker--sonar-lit {
transition: opacity 0.35s ease;
}
.bathgiant-branch-area-marker--sonar-lit .bathgiant-branch-area-marker__label {
opacity: 1;
transform: scale(1);
color: var(--bg-map-branch-zone-deep, #334155);
background: rgba(255, 255, 255, 0.98);
border-color: color-mix(in srgb, var(--bg-map-branch-zone, #475569) 32%, transparent);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
}
.bathgiant-branch-area-marker__label {
display: inline-block;
margin-left: 0;
padding: 0.15rem 0.45rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #475569;
background: color-mix(in srgb, #94a3b8 14%, rgba(255, 255, 255, 0.94));
border: 1px solid color-mix(in srgb, #94a3b8 30%, transparent);
white-space: nowrap;
opacity: 0;
transform: scale(0.75);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes bg2026-branch-area-sonar-in {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}
.bathgiant-branch-area-popup {
margin: 0;
padding: 0.15rem 0;
}
.bathgiant-branch-area-popup__eyebrow {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branch-area-popup__title {
margin: 0 0 0.35rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-branch-area-popup__branch {
margin: 0;
font-size: 0.82rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-branches-map-band .leaflet-marker-pane .bathgiant-branch-area-marker {
cursor: pointer;
}
@keyframes bg2026-branch-map-pulse {
0% {
transform: scale(0.55);
opacity: 0.85;
}
70% {
transform: scale(1.15);
opacity: 0;
}
100% {
transform: scale(1.15);
opacity: 0;
}
}
.bathgiant-branch-map-popup-wrap .leaflet-popup-content-wrapper,
.bathgiant-branch-area-popup-wrap .leaflet-popup-content-wrapper {
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
padding: 0;
}
.bathgiant-branch-map-popup-wrap .leaflet-popup-content,
.bathgiant-branch-area-popup-wrap .leaflet-popup-content {
margin: 0;
overflow: visible;
}
.bathgiant-branch-map-popup-wrap .leaflet-popup-tip,
.bathgiant-branch-area-popup-wrap .leaflet-popup-tip {
box-shadow: none;
}
.bathgiant-branch-map-popup {
min-width: 12rem;
}
.bathgiant-branch-map-popup .bathgiant-branch-map-card__body {
padding: 0.8rem 0.85rem 0.85rem;
}
.bathgiant-branch-map-popup .bathgiant-branch-map-card__title {
font-size: 1rem;
}
.bathgiant-branches-map-band .leaflet-control-zoom {
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 18%, white) !important;
border-radius: 10px !important;
overflow: hidden;
background: color-mix(in srgb, var(--bathgiant-brand) 6%, rgba(255, 255, 255, 0.92)) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 22px color-mix(in srgb, var(--bathgiant-brand-deep) 12%, transparent) !important;
}
.bathgiant-branches-map-band .leaflet-control-zoom a {
color: var(--bathgiant-brand-deep) !important;
background: transparent !important;
border-color: color-mix(in srgb, var(--bathgiant-brand) 14%, white) !important;
} .bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line {
fill: none;
pointer-events: none;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--primary {
stroke: var(--bathgiant-brand) !important;
stroke-opacity: 0.5;
filter: drop-shadow(0 0 3px color-mix(in srgb, var(--bathgiant-brand) 35%, transparent));
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--secondary {
stroke: var(--bathgiant-brand-deep) !important;
stroke-opacity: 0.3;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-sonar-trail {
stroke: none;
pointer-events: none;
}
.bathgiant-branches-map-band__map.is-sonar-active .leaflet-overlay-pane {
z-index: 680;
}
.bathgiant-branches-map-band__map.is-sonar-active .leaflet-marker-pane .bathgiant-branch-area-marker {
z-index: auto !important;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-sonar-sweep {
fill: none;
stroke: var(--bg-map-local-zone, #22c55e) !important;
stroke-opacity: 0.38;
stroke-width: 1.35px;
stroke-linecap: round;
pointer-events: none;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--animated {
animation: bg2026-branch-network-flow 2.8s linear infinite;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--delay-0 {
animation-delay: 0s;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--delay-1 {
animation-delay: 0.55s;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--delay-2 {
animation-delay: 1.1s;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--delay-3 {
animation-delay: 1.65s;
}
@keyframes bg2026-branch-network-flow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -56;
}
}
@media (max-width: 820px) {
.bathgiant-branches-map-band__detail {
position: relative;
right: auto;
top: auto;
transform: none;
width: auto;
max-height: none;
margin: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, var(--bathgiant-border));
border-bottom: 0;
}
.bathgiant-branches-map-band__overlay {
position: relative;
left: auto;
top: auto;
transform: none;
width: auto;
margin: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid color-mix(in srgb, var(--bathgiant-brand) 16%, var(--bathgiant-border));
border-bottom: 0;
}
.bathgiant-branches-map-band__legend-bar {
padding: 0.65rem 1rem;
}
.bathgiant-branches-map-band__legend-list {
justify-content: flex-start;
gap: 0.45rem 0.85rem;
}
.bathgiant-branches-map-band__legend-item + .bathgiant-branches-map-band__legend-item {
margin-left: 0;
padding-left: 0;
border-left: 0;
}
.bathgiant-branches-map-band__legend-label {
font-size: 0.68rem;
white-space: nowrap;
}
.bathgiant-branches-map-band__map {
height: 58vh;
min-height: 18rem;
}
.bathgiant-branches-map-band__map::after {
background:
linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand-wash) 72%, transparent) 0%, transparent 26%),
linear-gradient(0deg, color-mix(in srgb, var(--bathgiant-brand-wash) 48%, transparent) 0%, transparent 28%);
}
.bathgiant-branch-map-card__media {
border-radius: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-branch-map-marker__pulse {
animation: none;
opacity: 0.45;
}
.bathgiant-branches-map-band .leaflet-overlay-pane path.bathgiant-branch-network-line--animated {
animation: none;
}
.bathgiant-branches-map-band__chip.is-active {
transform: none;
}
}
.bathgiant-news-list {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
@media (max-width: 820px) {
.bathgiant-marketing-grid {
grid-template-columns: 1fr;
}
} .bathgiant-marketing-media {
width: 100%;
}
.bathgiant-marketing-media__frame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.65rem;
min-height: 11rem;
padding: 1.25rem;
border-radius: 12px;
border: 1px dashed #cbd5e1;
background: linear-gradient(145deg, #f8fafc 0%, #eef4fc 100%);
color: #64748b;
text-align: center;
position: relative;
overflow: hidden;
}
.bathgiant-marketing-media__icon {
display: flex;
color: #94a3b8;
}
.bathgiant-marketing-media__label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.35;
max-width: 16rem;
}
.bathgiant-marketing-media__label--soft {
position: relative;
z-index: 2;
color: rgba(255, 245, 248, 0.72);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.72rem;
}
.bathgiant-marketing-media--brand .bathgiant-marketing-media__frame {
border: 1px solid color-mix(in srgb, #881337 35%, transparent);
background:
radial-gradient(ellipse 80% 70% at 88% 12%, rgba(196, 30, 30, 0.28) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 8% 92%, rgba(74, 13, 34, 0.55) 0%, transparent 60%),
linear-gradient(148deg, #2a0612 0%, #4a0818 42%, #6f1433 78%, #881337 100%);
color: #f8e8ee;
min-height: 12rem;
}
.bathgiant-marketing-media__glow,
.bathgiant-marketing-media__grid {
position: absolute;
inset: 0;
pointer-events: none;
}
.bathgiant-marketing-media__glow {
z-index: 0;
background: radial-gradient(circle at 70% 30%, rgba(196, 30, 30, 0.35) 0%, transparent 55%);
}
.bathgiant-marketing-media__grid {
z-index: 1;
opacity: 0.16;
background-image:
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 75% 65% at 30% 40%, #000 0%, transparent 78%);
}
.bathgiant-marketing-media__mark {
position: relative;
z-index: 2;
width: auto;
max-width: 7.5rem;
height: auto;
opacity: 0.92;
filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.28));
}
.bathgiant-marketing-media--hero .bathgiant-marketing-media__frame {
min-height: 14rem;
}
.bathgiant-marketing-media--card .bathgiant-marketing-media__frame {
min-height: 9.5rem;
}
.bathgiant-marketing-media--split .bathgiant-marketing-media__frame {
min-height: 12rem;
}
.bathgiant-marketing-media--cta .bathgiant-marketing-media__frame {
min-height: 10rem;
}
.bathgiant-marketing-media--has-image .bathgiant-marketing-media__frame {
min-height: 0;
padding: 0;
border: none;
background: none;
}
.bathgiant-marketing-media__img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
}
.bathgiant-marketing-media--hero.bathgiant-marketing-media--has-image .bathgiant-marketing-media__img {
min-height: 16rem;
max-height: 28rem;
aspect-ratio: 4 / 3;
}
.bathgiant-marketing-media--card.bathgiant-marketing-media--has-image .bathgiant-marketing-media__img {
width: 100%;
min-height: 0;
max-height: none;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 0;
}
.bathgiant-marketing-media--split.bathgiant-marketing-media--has-image .bathgiant-marketing-media__img {
min-height: 14rem;
max-height: 20rem;
}
.bathgiant-marketing-media--cta.bathgiant-marketing-media--has-image .bathgiant-marketing-media__img {
min-height: 12rem;
max-height: 18rem;
} .bathgiant-trade-programme {
--tp-maroon: #9f1239;
--tp-maroon-deep: #881337;
--tp-ink: #1f1520;
--tp-navy: #071d3b;
--tp-muted: #5c6b80;
--tp-wash: #f8fafc;
--tp-line: color-mix(in srgb, var(--tp-maroon-deep) 12%, #d9e4f2);
--tp-blue: var(--bathgiant-public-brand-deep, #2f68c4);
width: 100vw;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
color: var(--bathgiant-ink, #1f2937);
font-family: var(--bathgiant-font-sans);
background: #fff;
overflow-x: clip;
}
.bathgiant-trade-programme *,
.bathgiant-trade-programme *::before,
.bathgiant-trade-programme *::after {
box-sizing: border-box;
}
.bathgiant-trade-programme .bathgiant-wrap {
box-sizing: border-box;
}
.bathgiant-trade-programme a:focus-visible,
.bathgiant-trade-programme button:focus-visible,
.bathgiant-trade-programme input:focus-visible,
.bathgiant-trade-programme select:focus-visible,
.bathgiant-trade-programme textarea:focus-visible {
outline: 3px solid #f2a900;
outline-offset: 3px;
}
.bathgiant-trade-programme h1,
.bathgiant-trade-programme h2,
.bathgiant-trade-programme h3,
.bathgiant-trade-programme p {
margin-top: 0;
}
.bathgiant-trade-programme h1,
.bathgiant-trade-programme h2 {
font-family: var(--bathgiant-font-display);
font-weight: 700;
letter-spacing: -0.025em;
overflow-wrap: break-word;
text-wrap: balance;
color: var(--tp-navy);
}
.bathgiant-trade-programme h3 {
font-family: var(--bathgiant-font-sans);
font-weight: 700;
letter-spacing: normal;
}
.bathgiant-page-default:has(.bathgiant-trade-programme) {
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-trade-programme),
body #main-content.bathgiant-wrap:has(.bathgiant-trade-programme) {
padding-top: 0;
}
.bathgiant-marketing-page:has(.bathgiant-trade-programme) {
background: transparent;
margin-top: 0;
margin-bottom: 0;
}
.bathgiant-trade-programme-eyebrow {
margin-bottom: 0.5rem;
color: var(--tp-maroon-deep);
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-trade-programme-band {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2.75rem, 5vw, 5rem) 0;
}
.bathgiant-trade-programme-band--intro {
background:
radial-gradient(circle at 100% 0%, rgba(159, 18, 57, 0.05), transparent 28rem),
#fff;
}
.bathgiant-trade-programme-band--muted {
background:
radial-gradient(circle at 0% 20%, rgba(47, 104, 196, 0.04), transparent 26rem),
var(--tp-wash);
}
.bathgiant-trade-programme-band--apply {
background:
radial-gradient(circle at 100% 10%, rgba(159, 18, 57, 0.06), transparent 30rem),
#f8fafc;
scroll-margin-top: 5rem;
}
.bathgiant-trade-programme-split-layout {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.bathgiant-trade-programme-aside,
.bathgiant-trade-programme-panel,
.bathgiant-trade-programme-benefits,
.bathgiant-trade-programme-tools,
.bathgiant-trade-programme-steps,
.bathgiant-trade-programme-faq,
.bathgiant-trade-programme-apply-panel,
.bathgiant-trade-programme-benefits__item,
.bathgiant-trade-programme-benefits__body,
.bathgiant-trade-programme-tool,
.bathgiant-trade-programme-steps__item,
.bathgiant-trade-programme-faq__item {
min-width: 0;
}
.bathgiant-trade-programme-aside {
padding-top: 0.35rem;
}
.bathgiant-trade-programme-aside--sticky {
position: sticky;
top: 7rem;
}
.bathgiant-trade-programme-aside__badge {
display: block;
width: auto;
height: 2.65rem;
margin: 0 0 1.15rem;
}
.bathgiant-trade-programme-aside h1 {
max-width: 14ch;
margin-bottom: 0.85rem;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.08;
}
.bathgiant-trade-programme-aside h2 {
max-width: 16ch;
margin-bottom: 0.8rem;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.18;
}
.bathgiant-trade-programme-aside__lede {
max-width: 36rem;
margin-bottom: 1.35rem;
color: var(--tp-muted);
font-size: clamp(0.98rem, 1.5vw, 1.05rem);
line-height: 1.7;
}
.bathgiant-trade-programme-aside__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-bottom: 1rem;
}
.bathgiant-trade-programme-btn--ghost {
border-color: color-mix(in srgb, var(--tp-maroon-deep) 28%, #d9e4f2);
color: var(--tp-maroon-deep);
background: transparent;
}
.bathgiant-trade-programme-btn--ghost:hover,
.bathgiant-trade-programme-btn--ghost:focus-visible {
border-color: var(--tp-maroon-deep);
background: color-mix(in srgb, var(--tp-maroon) 8%, #fff);
color: var(--tp-maroon-deep);
}
.bathgiant-trade-programme-aside__hint {
margin: 0;
color: var(--tp-muted);
font-size: 0.92rem;
line-height: 1.55;
}
.bathgiant-trade-programme-aside__hint a {
color: var(--tp-maroon-deep);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.18em;
}
.bathgiant-trade-programme-aside__note {
margin: 0 0 1.25rem;
padding-left: 1rem;
border-left: 3px solid var(--tp-maroon-deep);
color: var(--tp-muted);
font-size: 0.92rem;
line-height: 1.6;
}
.bathgiant-trade-programme-panel {
padding: clamp(1.25rem, 3vw, 1.75rem);
border: 1px solid var(--tp-line);
border-radius: var(--bathgiant-radius-lg, 16px);
background:
radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--tp-maroon) 7%, transparent) 0%, transparent 55%),
linear-gradient(165deg, #fff 0%, #faf7f8 55%, #f8fafc 100%);
box-shadow: 0 14px 36px rgba(42, 6, 18, 0.06);
}
.bathgiant-trade-programme-highlights {
display: grid;
gap: 0;
}
.bathgiant-trade-programme-highlights__item {
padding: 1rem 0;
border-bottom: 1px solid var(--tp-line);
}
.bathgiant-trade-programme-highlights__item:first-child {
padding-top: 0;
}
.bathgiant-trade-programme-highlights__item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.bathgiant-trade-programme-highlights__label {
margin: 0 0 0.35rem;
color: var(--tp-maroon-deep);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bathgiant-trade-programme-highlights__value {
margin: 0 0 0.35rem;
color: var(--tp-navy);
font-family: var(--bathgiant-font-display);
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
line-height: 1.2;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-highlights__detail {
margin: 0;
color: var(--tp-muted);
font-size: 0.95rem;
line-height: 1.6;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-benefits {
display: grid;
gap: 0;
border-top: 1px solid var(--tp-line);
border-left: 1px solid var(--tp-line);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 28px rgba(15, 39, 72, 0.05);
}
.bathgiant-trade-programme-benefits__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
padding: clamp(1.15rem, 2.2vw, 1.45rem);
border-right: 1px solid var(--tp-line);
border-bottom: 1px solid var(--tp-line);
background: transparent;
}
.bathgiant-trade-programme-benefits__marker {
padding-top: 0.18rem;
color: #8da1b8;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.bathgiant-trade-programme-benefits__title {
margin: 0 0 0.45rem;
color: var(--tp-navy);
font-size: clamp(1.02rem, 1.6vw, 1.12rem);
font-weight: 800;
line-height: 1.3;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-benefits__text {
margin: 0;
color: #657287;
font-size: 0.95rem;
line-height: 1.65;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-tools {
display: grid;
gap: 1.25rem;
}
.bathgiant-trade-programme-tool {
padding: clamp(1.15rem, 2.2vw, 1.45rem);
border: 1px solid var(--tp-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(15, 39, 72, 0.04);
}
.bathgiant-trade-programme-tool h3 {
margin: 0 0 0.55rem;
color: var(--tp-navy);
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
line-height: 1.25;
}
.bathgiant-trade-programme-tool > p {
margin: 0 0 0.85rem;
color: var(--tp-muted);
font-size: 0.98rem;
line-height: 1.65;
}
.bathgiant-trade-programme-tool__action {
margin: 1rem 0 0;
}
.bathgiant-trade-programme-checklist {
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-trade-programme-checklist li {
position: relative;
margin: 0 0 0.55rem;
padding-left: 1.15rem;
color: var(--tp-ink);
font-size: 0.95rem;
line-height: 1.5;
}
.bathgiant-trade-programme-checklist li::before {
position: absolute;
top: 0.45rem;
left: 0;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--tp-maroon-deep);
content: "";
}
.bathgiant-trade-programme-checklist li:last-child {
margin-bottom: 0;
}
.bathgiant-trade-programme-steps {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--tp-line);
border-left: 1px solid var(--tp-line);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 28px rgba(15, 39, 72, 0.05);
}
.bathgiant-trade-programme-steps__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
padding: clamp(1.15rem, 2.2vw, 1.45rem);
border-right: 1px solid var(--tp-line);
border-bottom: 1px solid var(--tp-line);
}
.bathgiant-trade-programme-steps__num {
padding-top: 0.18rem;
color: #8da1b8;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.bathgiant-trade-programme-steps__item h3 {
margin: 0 0 0.4rem;
color: var(--tp-navy);
font-size: clamp(1.02rem, 1.6vw, 1.12rem);
font-weight: 800;
line-height: 1.3;
}
.bathgiant-trade-programme-steps__item p {
margin: 0;
color: #657287;
font-size: 0.95rem;
line-height: 1.65;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-faq {
display: grid;
gap: 0.75rem;
}
.bathgiant-trade-programme-faq__item {
border: 1px solid var(--tp-line);
border-radius: 12px;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-trade-programme-faq__item:hover,
.bathgiant-trade-programme-faq__item:focus-within {
border-color: color-mix(in srgb, var(--tp-maroon-deep) 28%, var(--tp-line));
}
.bathgiant-trade-programme-faq__item.is-open {
border-color: color-mix(in srgb, var(--tp-maroon-deep) 35%, var(--tp-line));
box-shadow: 0 8px 22px rgba(42, 6, 18, 0.06);
}
.bathgiant-trade-programme-faq__heading {
margin: 0;
}
.bathgiant-trade-programme-faq__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin: 0;
padding: 1rem 1.15rem;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.bathgiant-trade-programme-faq__trigger:hover {
background: color-mix(in srgb, var(--tp-maroon) 4%, #fff);
}
.bathgiant-trade-programme-faq__question {
color: var(--tp-navy);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-faq__chevron {
position: relative;
flex: 0 0 auto;
width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
border: 1px solid var(--tp-line);
background: #fff;
transition: transform 0.2s ease, border-color 0.15s ease;
}
.bathgiant-trade-programme-faq__chevron::before {
position: absolute;
top: 50%;
left: 50%;
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid var(--tp-maroon-deep);
border-bottom: 2px solid var(--tp-maroon-deep);
transform: translate(-50%, -65%) rotate(45deg);
content: "";
}
.bathgiant-trade-programme-faq__item.is-open .bathgiant-trade-programme-faq__chevron {
transform: rotate(180deg);
border-color: color-mix(in srgb, var(--tp-maroon-deep) 35%, var(--tp-line));
}
.bathgiant-trade-programme-faq__panel {
padding: 0 1.15rem 1.1rem;
}
.bathgiant-trade-programme-faq__panel[hidden] {
display: none;
}
.bathgiant-trade-programme-faq__answer {
margin: 0;
color: var(--tp-muted);
font-size: 0.98rem;
line-height: 1.7;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-apply-panel {
min-width: 0;
}
.bathgiant-trade-programme .bathgiant-trade-application--embed {
margin: 0;
max-width: none;
}
.bathgiant-trade-programme .bathgiant-trade-application--embed .bathgiant-trade-application__card {
margin: 0;
}
.bathgiant-trade-programme .bathgiant-trade-cta {
margin: 0 calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
.bathgiant-trade-programme-login-strip {
--tp-maroon: #9f1239;
--tp-maroon-deep: #881337;
--tp-ink: #1f1520;
--tp-muted: #5c4a52;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 2vw, 1.5rem);
max-width: 62rem;
margin: 0 auto clamp(2.5rem, 5vw, 3.85rem);
padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.5vw, 1.6rem);
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--tp-maroon-deep) 18%, #e8e2e4);
background:
radial-gradient(ellipse 70% 120% at 100% 0%, color-mix(in srgb, #1e3a5f 10%, transparent) 0%, transparent 60%),
linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--tp-maroon) 7%, #fff) 100%);
box-shadow: 0 12px 30px rgba(42, 6, 18, 0.06);
}
.bathgiant-trade-customer-banner {
width: 100%;
max-width: 83.333%;
box-sizing: border-box;
margin: 0 auto;
padding: clamp(1.5rem, 3.2vw, 2.35rem) 0 clamp(1.05rem, 2.2vw, 1.55rem);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 70%, #fff) 0%,
#fff 72%,
#fff 100%
);
border-top: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: var(--bathgiant-radius-md, 12px) var(--bathgiant-radius-md, 12px) 0 0;
}
.bathgiant-trade-programme-login-strip--above-footer {
max-width: var(--bathgiant-content-max);
width: 100%;
margin: 0 auto;
gap: clamp(1.25rem, 3vw, 2.5rem);
padding-top: clamp(1.35rem, 2.8vw, 1.9rem);
padding-bottom: clamp(1.35rem, 2.8vw, 1.9rem);
padding-left: clamp(1.35rem, 3vw, 2.35rem);
padding-right: clamp(1.35rem, 3vw, 2.35rem);
border-radius: var(--bathgiant-radius-md, 12px);
box-shadow: 0 10px 28px rgba(42, 6, 18, 0.055);
}
.bathgiant-trade-programme-login-strip--above-footer .bathgiant-trade-programme-login-strip__text {
max-width: min(64ch, 100%);
}
.bathgiant-trade-programme-login-strip__copy {
flex: 1 1 25rem;
min-width: 0;
}
.bathgiant-trade-programme-login-strip__copy > .bathgiant-marketing-hero__eyebrow {
margin: 0 0 0.45rem;
color: var(--tp-maroon-deep);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.bathgiant-trade-programme-login-strip__title {
margin: 0 0 0.35rem;
color: var(--tp-ink);
font-family: var(--bathgiant-font-display);
font-size: clamp(1.15rem, 2vw, 1.4rem);
font-weight: 700;
line-height: 1.2;
}
.bathgiant-trade-programme-login-strip__text {
margin: 0;
max-width: 54ch;
color: var(--tp-muted);
font-size: 1rem;
line-height: 1.6;
overflow-wrap: break-word;
}
.bathgiant-trade-programme-login-strip__actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem;
}
.bathgiant-trade-programme-login-strip__signin {
border-color: var(--tp-maroon-deep);
background: var(--tp-maroon-deep);
color: #fff;
}
.bathgiant-trade-programme-login-strip__signin:hover,
.bathgiant-trade-programme-login-strip__signin:focus-visible {
background: linear-gradient(135deg, #b31442 0%, var(--tp-maroon) 100%);
color: #fff;
}
.bathgiant-trade-programme .bathgiant-optional-page-content {
margin: 1.25rem auto 2.5rem;
border-radius: 14px;
border: 1px solid var(--tp-line);
background: #fff;
}
@keyframes bathgiant-tp-fade-in {
from {
opacity: 0;
transform: translateY(0.55rem);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
.bathgiant-trade-programme.has-tp-reveal-js [data-tp-reveal]:not(.is-tp-revealed) {
opacity: 0.2;
}
.bathgiant-trade-programme.has-tp-reveal-js [data-tp-reveal].is-tp-revealed {
animation: bathgiant-tp-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: var(--tp-reveal-delay, 0ms);
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-trade-programme.has-tp-reveal-js [data-tp-reveal] {
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
}
@media (max-width: 980px) {
.bathgiant-trade-programme-split-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bathgiant-trade-programme-aside--sticky {
position: static;
}
.bathgiant-trade-programme-aside h1,
.bathgiant-trade-programme-aside h2 {
max-width: none;
}
}
@media (max-width: 640px) {
.bathgiant-trade-programme-aside__actions {
flex-direction: column;
align-items: stretch;
}
.bathgiant-trade-programme-aside__actions .bathgiant-btn {
width: 100%;
justify-content: center;
text-align: center;
}
.bathgiant-trade-programme-login-strip {
flex-direction: column;
align-items: stretch;
}
.bathgiant-trade-programme-login-strip__actions {
width: 100%;
justify-content: stretch;
}
.bathgiant-trade-programme-login-strip__actions .bathgiant-btn {
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
}
@media (max-width: 520px) {
.bathgiant-trade-programme-login-strip__actions {
flex-direction: column;
}
.bathgiant-trade-programme-login-strip__actions .bathgiant-btn {
width: 100%;
}
}
.bathgiant-product-pdp-support__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.65rem;
margin: 0 0 0.85rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--bathgiant-ink, #1f3552);
letter-spacing: -0.01em;
}
.bathgiant-product-pdp-support__postcode {
margin-top: 0.15rem;
padding-top: 1rem;
border-top: 1px solid #e8eef5;
}
.bathgiant-product-single__postcode-checker {
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.bathgiant-product-single__postcode-help {
margin: 0 0 0.85rem;
color: #475569;
font-size: 0.9rem;
line-height: 1.5;
}
.bathgiant-product-single__postcode-form {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bathgiant-product-single__postcode-form label {
font-weight: 600;
font-size: 0.88rem;
color: #233a59;
margin: 0;
}
.bathgiant-product-single__postcode-controls {
display: flex;
align-items: stretch;
gap: 0.55rem;
}
.bathgiant-product-single__postcode-controls input {
flex: 1 1 auto;
min-width: 0;
width: auto;
border: 1px solid #c6d5ea;
border-radius: 10px;
padding: 0.68rem 0.8rem;
font: inherit;
background: #fff;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.bathgiant-product-single__postcode-controls input:focus {
border-color: var(--bathgiant-brand, #2f68c4);
outline: none;
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-product-single__postcode-controls .bathgiant-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.65rem;
padding-left: 1.15rem;
padding-right: 1.15rem;
border-radius: 999px;
white-space: nowrap;
}
.bathgiant-product-single__postcode-result {
margin-top: 1rem;
font-size: 0.92rem;
}
.bathgiant-product-postcode-loading {
margin: 0;
padding: 0.75rem 0.85rem;
border-radius: 10px;
background: #f1f5f9;
color: #475569;
font-size: 0.9rem;
}
.bathgiant-product-postcode-error {
margin: 0;
padding: 0.7rem 0.85rem;
border-radius: 10px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: 0.9rem;
}
.bathgiant-product-postcode-results {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.bathgiant-product-postcode-results__summary {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.7rem 0.85rem;
border-radius: 10px;
border: 1px solid var(--bathgiant-info-surface-border);
background: linear-gradient(135deg, var(--bathgiant-info-surface) 0%, #f8fafc 100%);
color: var(--bathgiant-info-surface-text);
line-height: 1.45;
}
.bathgiant-product-postcode-results__summary.is-limited {
border-color: #fde68a;
background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
color: #92400e;
}
.bathgiant-product-postcode-results__summary-icon {
flex: 0 0 auto;
width: 1.35rem;
height: 1.35rem;
margin-top: 0.1rem;
border-radius: 999px;
background: #22c55e;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.bathgiant-product-postcode-results__summary.is-limited .bathgiant-product-postcode-results__summary-icon {
background: #f59e0b;
}
.bathgiant-product-postcode-results__summary-text {
min-width: 0;
}
.bathgiant-product-postcode-results__callout {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.65rem 0.85rem;
border-radius: 10px;
font-size: 0.88rem;
line-height: 1.4;
}
.bathgiant-product-postcode-results__callout--collect {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #166534;
}
.bathgiant-product-postcode-results__callout--home {
background: var(--bathgiant-info-surface);
border: 1px solid var(--bathgiant-info-surface-border);
color: var(--bathgiant-info-surface-text);
}
.bathgiant-product-postcode-results__callout-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bathgiant-brand-deep);
}
.bathgiant-product-postcode-results__callout-meta {
font-size: 0.82rem;
color: #475569;
}
.bathgiant-product-postcode-results__callout-status {
font-size: 0.82rem;
color: #475569;
}
.bathgiant-product-postcode-results__callout-status--ok {
color: #166534;
font-weight: 600;
}
.bathgiant-product-postcode-results__callout-alt {
margin: 0.35rem 0 0;
padding: 0.45rem 0.55rem;
border-radius: 8px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #166534;
font-size: 0.82rem;
line-height: 1.4;
}
.bathgiant-product-postcode-results {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.bathgiant-product-postcode-results__collection {
display: grid;
gap: 0.45rem;
}
.bathgiant-product-postcode-results__collection--trade .bathgiant-product-postcode-results__callout--home {
box-shadow: inset 3px 0 0 var(--bathgiant-brand-deep);
}
.bathgiant-product-postcode-results__callout-name {
font-size: 1rem;
color: #1e3a8a;
}
.bathgiant-product-postcode-results__callout-copy {
color: inherit;
line-height: 1.45;
}
.bathgiant-product-postcode-results__callout-distance {
font-size: 0.8rem;
color: #64748b;
}
.bathgiant-product-postcode-results__disclosure {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.bathgiant-product-postcode-results__disclosure-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0.65rem 0.85rem;
border: 0;
background: #f8fafc;
color: var(--bathgiant-brand, #2f68c4);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-product-postcode-results__disclosure-toggle::after {
content: "";
flex: 0 0 auto;
width: 0.45rem;
height: 0.45rem;
margin-top: -0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.15s ease, margin 0.15s ease;
}
.bathgiant-product-postcode-results__disclosure-toggle[aria-expanded="true"] {
background: var(--bathgiant-info-surface);
color: var(--bathgiant-brand-deep);
}
.bathgiant-product-postcode-results__disclosure-toggle[aria-expanded="true"]::after {
transform: rotate(-135deg);
margin-top: 0.15rem;
}
.bathgiant-product-postcode-results__disclosure-toggle:hover,
.bathgiant-product-postcode-results__disclosure-toggle:focus-visible {
background: var(--bathgiant-info-surface);
outline: none;
}
.bathgiant-product-postcode-results__disclosure-panel {
padding: 0.65rem 0.85rem 0.85rem;
border-top: 1px solid #e2e8f0;
background: #fff;
}
.bathgiant-product-postcode-results__disclosure-panel[hidden] {
display: none !important;
}
.bathgiant-product-postcode-results__disclosure-panel .bathgiant-product-postcode-results__branches-head {
margin-top: 0;
}
.bathgiant-product-postcode-results--public .bathgiant-product-postcode-results__disclosure-toggle {
color: #166534;
}
.bathgiant-product-postcode-results--public .bathgiant-product-postcode-results__disclosure-toggle[aria-expanded="true"],
.bathgiant-product-postcode-results--public .bathgiant-product-postcode-results__disclosure-toggle:hover,
.bathgiant-product-postcode-results--public .bathgiant-product-postcode-results__disclosure-toggle:focus-visible {
background: #ecfdf5;
color: #14532d;
}
.bathgiant-product-postcode-results__branches-wrap {
margin-top: 0.15rem;
}
.bathgiant-product-postcode-results__branches-toggle {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--bathgiant-brand, #2f68c4);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
.bathgiant-product-postcode-results__branches-toggle:hover,
.bathgiant-product-postcode-results__branches-toggle:focus-visible {
color: #1e40af;
outline: none;
}
.bathgiant-product-postcode-results__branches-panel {
margin-top: 0.55rem;
}
.bathgiant-product-postcode-results__branches-panel[hidden] {
display: none !important;
}
.bathgiant-product-postcode-results__shipping {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
align-items: baseline;
padding: 0.55rem 0.85rem;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
font-size: 0.88rem;
color: #334155;
}
.bathgiant-product-postcode-results__shipping-label {
font-weight: 600;
color: #64748b;
}
.bathgiant-product-postcode-results__shipping-code {
color: #64748b;
font-size: 0.82rem;
}
.bathgiant-product-postcode-results__branches-head {
margin: 0.15rem 0 0;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.bathgiant-product-postcode-branches {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.45rem;
}
.bathgiant-product-postcode-branch {
margin: 0;
padding: 0.65rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
}
.bathgiant-product-postcode-branch.is-ok {
border-color: #bbf7d0;
background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}
.bathgiant-product-postcode-branch.is-lead {
border-color: #fde68a;
background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}
.bathgiant-product-postcode-branch.is-home-branch {
border-color: var(--bathgiant-info-surface-border);
background: linear-gradient(180deg, var(--bathgiant-info-surface) 0%, #fff 100%);
box-shadow: inset 3px 0 0 var(--bathgiant-brand-deep);
padding-left: 0.85rem;
}
.bathgiant-product-postcode-branch__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin-bottom: 0.35rem;
}
.bathgiant-product-postcode-branch__name {
font-weight: 700;
font-size: 0.95rem;
color: #9a3412;
}
.bathgiant-product-postcode-branch.is-home-branch .bathgiant-product-postcode-branch__name {
color: var(--bathgiant-brand-deep);
}
.bathgiant-product-postcode-branch__meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.65rem;
font-size: 0.82rem;
line-height: 1.35;
color: #475569;
}
.bathgiant-product-postcode-branch__stock {
font-weight: 600;
}
.bathgiant-product-postcode-branch.is-ok .bathgiant-product-postcode-branch__status {
color: #166534;
font-weight: 600;
}
.bathgiant-product-postcode-branch.is-lead .bathgiant-product-postcode-branch__status {
color: #92400e;
}
.bathgiant-product-postcode-branch__distance {
margin-left: auto;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
.bathgiant-product-postcode-branch__alt-notice {
margin: 0.45rem 0 0;
padding: 0.45rem 0.55rem;
border-radius: 8px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #166534;
font-size: 0.8rem;
line-height: 1.4;
}
.bathgiant-product-postcode-home-tag {
display: inline-flex;
align-items: center;
padding: 0.12rem 0.45rem;
border-radius: 999px;
background: var(--bathgiant-brand-deep);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
vertical-align: middle;
} .bathgiant-product-postcode-collect-now {
margin: 0.5rem 0 0.65rem;
padding: 0.55rem 0.7rem;
border-radius: 8px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #166534;
font-size: 0.9rem;
line-height: 1.45;
}
.bathgiant-product-postcode-collect-now--home {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-color: #6ee7b7;
}
.bathgiant-checkout-home-branch {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 0 0 1rem;
padding: 0.65rem 0.75rem;
border-radius: 10px;
background: var(--bathgiant-info-surface);
border: 1px solid var(--bathgiant-info-surface-border);
color: var(--bathgiant-info-surface-text);
font-size: 0.92rem;
}
.bathgiant-checkout-home-branch__icon {
flex: 0 0 auto;
color: var(--bathgiant-brand-deep, #17365d);
}
.bathgiant-checkout-home-branch__copy .description {
display: block;
margin-top: 0.15rem;
color: #475569;
font-size: 0.82rem;
font-weight: 400;
}
.bathgiant-trade-home-branch-modal-open {
overflow: hidden;
}
.bathgiant-trade-home-branch-modal[hidden] {
display: none !important;
}
.bathgiant-trade-home-branch-modal {
position: fixed;
inset: 0;
z-index: 100050;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
html.bathgiant-trade-home-branch-modal-open--over-tour .bathgiant-trade-home-branch-modal {
z-index: 100070;
}
.bathgiant-trade-home-branch-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
}
.bathgiant-trade-home-branch-modal__panel {
position: relative;
z-index: 1;
width: min(32rem, 100%);
max-height: min(90vh, 640px);
overflow: auto;
padding: clamp(1rem, 3vw, 1.35rem);
padding-top: clamp(2.25rem, 4vw, 2.5rem);
border-radius: 14px;
background: #fff;
border: 1px solid #dce6f2;
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
.bathgiant-trade-home-branch-modal__close {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 2;
border: none;
background: transparent;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
color: #64748b;
padding: 0.2rem 0.45rem;
border-radius: 8px;
}
.bathgiant-trade-home-branch-modal__close:hover,
.bathgiant-trade-home-branch-modal__close:focus-visible {
background: rgba(15, 23, 42, 0.06);
color: var(--bathgiant-store-ink);
outline: none;
}
.bathgiant-trade-home-branch-modal__head {
margin-bottom: 0.85rem;
}
.bathgiant-trade-home-branch-modal__icon {
display: inline-flex;
margin-bottom: 0.45rem;
color: var(--bathgiant-brand-deep, #17365d);
}
.bathgiant-trade-home-branch-modal__title {
margin: 0 0 0.35rem;
font-family: var(--bathgiant-font-display);
font-size: 1.35rem;
line-height: 1.2;
}
.bathgiant-trade-home-branch-modal__lede {
margin: 0;
color: #64748b;
font-size: 0.92rem;
line-height: 1.45;
}
.bathgiant-trade-home-branch-modal__note {
margin: 0.65rem 0 0;
color: #64748b;
font-size: 0.88rem;
line-height: 1.45;
}
.bathgiant-trade-home-branch-modal__options {
margin: 0;
padding: 0;
border: 0;
display: grid;
gap: 0.45rem;
}
.bathgiant-trade-home-branch-option {
display: block;
cursor: pointer;
}
.bathgiant-trade-home-branch-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-trade-home-branch-option__body {
display: block;
padding: 0.65rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-trade-home-branch-option input:checked + .bathgiant-trade-home-branch-option__body {
border-color: #86efac;
background: #f0fdf4;
box-shadow: 0 0 0 1px rgba(22, 101, 52, 0.12);
}
.bathgiant-trade-home-branch-option input:focus-visible + .bathgiant-trade-home-branch-option__body {
outline: 2px solid var(--bathgiant-brand, #2f68c4);
outline-offset: 2px;
}
.bathgiant-trade-home-branch-option__label {
font-weight: 700;
color: var(--bathgiant-ink, #1f3552);
}
.bathgiant-trade-home-branch-option__hint {
display: block;
margin-top: 0.2rem;
font-size: 0.82rem;
font-weight: 400;
color: #64748b;
line-height: 1.35;
}
.bathgiant-trade-home-branch-modal__error {
color: #b91c1c;
font-size: 0.88rem;
}
.bathgiant-trade-home-branch-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin: 0.85rem 0 0;
}
.bathgiant-customer-email-modal-open {
overflow: hidden;
}
.bathgiant-customer-email-modal[hidden] {
display: none !important;
}
.bathgiant-customer-email-modal {
position: fixed;
inset: 0;
z-index: 100050;
display: grid;
place-items: center;
padding: 1rem;
}
.bathgiant-customer-email-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.52);
}
.bathgiant-customer-email-modal__panel {
position: relative;
width: min(100%, 34rem);
max-height: min(92vh, 44rem);
overflow: auto;
padding: 1.15rem 1.15rem 1rem;
border-radius: 1rem;
background: #fff;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
.bathgiant-customer-email-modal__close {
position: absolute;
top: 0.65rem;
right: 0.65rem;
border: 0;
background: transparent;
color: #64748b;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.bathgiant-customer-email-modal__close:hover,
.bathgiant-customer-email-modal__close:focus-visible {
color: #0f172a;
outline: none;
}
.bathgiant-customer-email-modal__head {
margin: 0 0 0.85rem;
padding-right: 1.5rem;
}
.bathgiant-customer-email-modal__title {
margin: 0 0 0.35rem;
font-size: 1.2rem;
line-height: 1.25;
color: #0f172a;
}
.bathgiant-customer-email-modal__lede {
margin: 0;
color: #64748b;
font-size: 0.92rem;
line-height: 1.45;
}
.bathgiant-customer-email-modal__field {
margin: 0 0 0.8rem;
}
.bathgiant-customer-email-modal__field label {
display: block;
margin: 0 0 0.3rem;
font-size: 0.84rem;
font-weight: 600;
color: #334155;
}
.bathgiant-customer-email-modal__input,
.bathgiant-customer-email-modal__textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 0.55rem;
padding: 0.58rem 0.7rem;
font: inherit;
color: #0f172a;
background: #fff;
}
.bathgiant-customer-email-modal__input--readonly {
background: #f8fafc;
color: #475569;
}
.bathgiant-customer-email-modal__textarea {
min-height: 9rem;
resize: vertical;
}
.bathgiant-customer-email-modal__error {
color: #b91c1c;
font-size: 0.88rem;
}
.bathgiant-customer-email-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin: 0.85rem 0 0;
}
.bathgiant-customer-dashboard__email-status.is-failed {
color: #b91c1c;
font-weight: 600;
}
.bathgiant-customer-dashboard__table--emails td:last-child {
max-width: 18rem;
white-space: normal;
word-break: break-word;
}
@media (max-width: 479px) {
.bathgiant-product-single__postcode-controls {
flex-direction: column;
align-items: stretch;
}
.bathgiant-product-single__postcode-controls .bathgiant-btn {
width: 100%;
}
.bathgiant-product-postcode-branch__distance {
margin-left: 0;
width: 100%;
}
}
.bathgiant-product-related {
margin-bottom: 4.5rem;
padding: clamp(1rem, 2.2vw, 1.4rem) clamp(0.9rem, 2vw, 1.2rem) clamp(1.1rem, 2.4vw, 1.5rem); border-bottom: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e3eaf2);
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.bathgiant-product-related__eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 0 0 0.3rem;
}
.bathgiant-product-related__eyebrow-line {
display: block;
width: 2.5rem;
height: 1px;
flex-shrink: 0;
background: linear-gradient(
90deg,
var(--bathgiant-public-brand-deep, var(--bathgiant-brand-deep, #2f68c4)) 0%,
color-mix(in srgb, var(--bathgiant-public-brand, var(--bathgiant-brand, #4a8ae8)) 35%, transparent) 100%
);
}
.bathgiant-product-related__eyebrow-text {
font-family: var(--bathgiant-font-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bathgiant-public-brand-deep, var(--bathgiant-brand-deep, #2f68c4));
}
.bathgiant-product-related__title {
margin: 0 0 clamp(1.35rem, 2.8vw, 2rem);
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--bathgiant-ink, #1f2937);
text-wrap: balance;
}
.bathgiant-product-related > .bathgiant-product-grid,
.bathgiant-product-related__carousel {
margin-bottom: clamp(1.35rem, 2.8vw, 2rem);
}
.bathgiant-product-related__carousel .owl-nav {
display: none !important;
}
.bathgiant-product-related__carousel .owl-dots {
margin-top: clamp(0.85rem, 2vw, 1.15rem);
}
.bathgiant-product-related__cta {
margin: 0 0 clamp(1rem, 2vw, 1.35rem);
}
.bathgiant-product-related__sisters {
margin-top: clamp(1.35rem, 2.8vw, 2rem);
padding-top: clamp(1rem, 2vw, 1.35rem);
border-top: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 22%, var(--bathgiant-border, #e4e9f0));
}
.bathgiant-product-related__sisters-head {
margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem);
}
.bathgiant-product-related__sisters-eyebrow {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-product-related__sisters-label {
display: block;
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: clamp(1rem, 1.7vw, 1.2rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--bathgiant-ink, #1f2937);
}
.bathgiant-product-related__sisters-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: clamp(1rem, 2vw, 1.6rem);
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-product-related__sisters-item {
margin: 0;
min-width: 0;
border-bottom: 1px solid var(--bathgiant-border, #e4e9f0);
}
.bathgiant-product-related__sisters-link {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 3.75rem;
height: 100%;
padding: 0.45rem 0;
font-size: 0.84rem;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
color: var(--bathgiant-header-secondary, #243d5c);
transition: color 0.18s ease;
}
.bathgiant-product-related__sisters-link:hover,
.bathgiant-product-related__sisters-link:focus-visible {
color: var(--bathgiant-brand-deep, #2f68c4);
outline: 2px solid transparent;
}
.bathgiant-product-related__sisters-link:focus-visible {
outline-color: var(--bathgiant-brand-focus-ring-strong, rgba(47, 104, 196, 0.35));
outline-offset: 3px;
}
.bathgiant-product-related__sisters-media {
position: relative;
display: flex;
flex: 0 0 2.75rem;
width: 2.75rem;
height: 2.75rem;
overflow: hidden;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #f3f5f7;
}
.bathgiant-product-related__sisters-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.22s ease;
}
.bathgiant-product-related__sisters-link:hover .bathgiant-product-related__sisters-image,
.bathgiant-product-related__sisters-link:focus-visible .bathgiant-product-related__sisters-image {
transform: scale(1.025);
}
.bathgiant-product-related__sisters-placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: #9aa6b2;
background: #f3f5f7;
}
.bathgiant-product-related__sisters-name {
min-width: 0;
flex: 1 1 auto;
}
@media (max-width: 1100px) {
.bathgiant-product-related__sisters-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 800px) {
.bathgiant-product-related__sisters-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.bathgiant-product-related__sisters-list {
grid-template-columns: minmax(0, 1fr);
}
} .bathgiant-archive-footer-banner {
--afb-ov-rgb: 0, 0, 0;
--afb-ov-a: 0;
--afb-text: #ffffff;
--afb-eyebrow: rgba(255, 255, 255, 0.82);
--afb-tint: linear-gradient(120deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.15));
position: relative;
isolation: isolate;
overflow: hidden;
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
padding: clamp(1.5rem, 4vw, 3rem);
border-radius: 18px;
background-color: #1f2937;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--afb-text);
}
.bathgiant-archive-footer-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
rgba(var(--afb-ov-rgb), var(--afb-ov-a)),
var(--afb-tint);
}
.bathgiant-archive-footer-banner--brand {
--afb-tint: linear-gradient(120deg, rgba(37, 99, 194, 0.92), rgba(61, 125, 217, 0.78));
background-color: #2f68c4;
}
.bathgiant-archive-footer-banner--trade {
--afb-tint: linear-gradient(120deg, rgba(107, 26, 48, 0.94), rgba(139, 41, 66, 0.82));
background-color: #8b2942;
}
.bathgiant-archive-footer-banner--dark {
--afb-tint: linear-gradient(120deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.8));
background-color: #0f172a;
}
.bathgiant-archive-footer-banner--light {
--afb-ov-rgb: 255, 255, 255;
--afb-text: #1f2937;
--afb-eyebrow: #64748b;
--afb-tint: linear-gradient(120deg, rgba(241, 245, 249, 0.94), rgba(226, 232, 240, 0.82));
background-color: #f1f5f9;
}
.bathgiant-archive-footer-banner.is-overlay-light {
--afb-ov-a: 0.25;
}
.bathgiant-archive-footer-banner.is-overlay-medium {
--afb-ov-a: 0.45;
}
.bathgiant-archive-footer-banner.is-overlay-strong {
--afb-ov-a: 0.65;
}
.bathgiant-archive-footer-banner__inner {
max-width: 46rem;
}
.bathgiant-archive-footer-banner.is-align-center {
text-align: center;
}
.bathgiant-archive-footer-banner.is-align-center .bathgiant-archive-footer-banner__inner {
margin-inline: auto;
}
.bathgiant-archive-footer-banner__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--afb-eyebrow);
}
.bathgiant-archive-footer-banner__title {
margin: 0 0 0.6rem;
font-size: clamp(1.4rem, 3vw, 2.1rem);
line-height: 1.15;
color: var(--afb-text);
}
.bathgiant-archive-footer-banner__text {
margin: 0;
font-size: clamp(0.95rem, 1.6vw, 1.05rem);
line-height: 1.55;
color: var(--afb-text);
}
.bathgiant-archive-footer-banner__text p {
margin: 0 0 0.6rem;
}
.bathgiant-archive-footer-banner__text p:last-child {
margin-bottom: 0;
}
.bathgiant-archive-footer-banner__cta {
margin: 1.15rem 0 0;
}
.bathgiant-archive-footer-banner.is-align-center .bathgiant-archive-footer-banner__cta {
display: flex;
justify-content: center;
} .bathgiant-marketing-page:has(.bathgiant-policy-page) {
margin-top: 0;
margin-bottom: 0;
background: transparent;
}
.bathgiant-page-default:has(.bathgiant-policy-page) {
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-policy-page),
body #main-content.bathgiant-wrap:has(.bathgiant-policy-page) {
padding-top: 0;
}
.bathgiant-policy-page {
--policy-navy: #071d3b;
--policy-blue: var(--bathgiant-public-brand-deep, #2f68c4);
--policy-maroon: #881337;
--policy-line: #d9e4f2;
width: 100vw;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
color: var(--bathgiant-ink, #1f2937);
font-family: var(--bathgiant-font-sans);
overflow-x: clip;
}
.bathgiant-policy-page *,
.bathgiant-policy-page *::before,
.bathgiant-policy-page *::after {
box-sizing: border-box;
}
.bathgiant-policy-page a:focus-visible {
outline: 3px solid #f2a900;
outline-offset: 3px;
}
.bathgiant-policy-frame {
max-width: 74.25rem;
}
.bathgiant-policy-heading {
margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
border-bottom: 1px solid var(--policy-line);
}
.bathgiant-policy-heading__eyebrow {
margin: 0 0 0.5rem;
color: var(--policy-blue);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-policy-heading__title {
max-width: 22ch;
margin: 0;
color: var(--policy-navy);
font-family: var(--bathgiant-font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
overflow-wrap: break-word;
text-wrap: balance;
}
.bathgiant-policy-heading__lede {
max-width: 44rem;
margin: 0.65rem 0 0;
color: #52647b;
font-size: clamp(0.98rem, 1.4vw, 1.075rem);
line-height: 1.55;
}
.bathgiant-policy-band { overflow: clip;
padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3rem, 6vw, 5.5rem);
background: #f8fafc;
}
.bathgiant-policy-shell {
display: grid;
grid-template-columns: minmax(14rem, 17rem) minmax(0, 54rem);
align-items: start;
gap: clamp(1.5rem, 3.5vw, 3.25rem);
}
.bathgiant-policy-shell__sidebar {
position: sticky;
top: calc(var(--bathgiant-sticky-below-header, 6rem) + 0.75rem);
min-width: 0;
}
.bathgiant-policy-nav {
overflow: hidden;
border: 1px solid var(--policy-line);
border-radius: 0.85rem;
background: #fff;
box-shadow: 0 12px 34px rgba(25, 44, 71, 0.08);
}
.bathgiant-policy-nav__title {
margin: 0;
padding: 1rem 1.1rem 0.85rem;
border-bottom: 1px solid var(--policy-line);
color: #5b6b80;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-policy-nav__list {
margin: 0;
padding: 0.4rem;
list-style: none;
}
.bathgiant-policy-nav__list li {
margin: 0;
}
.bathgiant-policy-nav__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 3rem;
padding: 0.68rem 0.75rem;
border-inline-start: 3px solid transparent;
border-radius: 0.45rem;
color: #30445e;
font-size: 0.91rem;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.bathgiant-policy-nav__list a:hover,
.bathgiant-policy-nav__list a:focus-visible {
background: #f1f6fc;
color: var(--policy-blue);
}
.bathgiant-policy-nav__list a.is-current {
border-inline-start-color: var(--policy-maroon);
background: #eaf2fc;
color: var(--policy-navy);
font-weight: 700;
}
.bathgiant-policy-nav__arrow {
flex: 0 0 auto;
color: var(--policy-blue);
font-size: 1.05rem;
line-height: 1;
}
.bathgiant-policy-content {
position: relative;
min-width: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--policy-line);
border-radius: 0.95rem;
background: #fff;
box-shadow: 0 18px 48px rgba(25, 44, 71, 0.09);
}
.bathgiant-policy-content::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--policy-blue), var(--policy-maroon));
content: "";
}
.bathgiant-policy-content__inner {
max-width: 74ch;
margin-inline: auto;
padding: clamp(1.5rem, 4vw, 3rem);
color: #3c4b5f;
font-size: clamp(0.98rem, 1.2vw, 1.035rem);
line-height: 1.76;
}
.bathgiant-policy-content__inner > :first-child {
margin-top: 0;
}
.bathgiant-policy-content__inner > :last-child {
margin-bottom: 0;
}
.bathgiant-policy-content__inner h2,
.bathgiant-policy-content__inner h3,
.bathgiant-policy-content__inner h4 {
color: var(--policy-navy);
scroll-margin-top: calc(var(--bathgiant-sticky-below-header, 6rem) + 1rem);
}
.bathgiant-policy-content__inner h2 {
margin: clamp(2rem, 4vw, 2.75rem) 0 0.75rem;
padding-top: clamp(1.25rem, 2.5vw, 1.65rem);
border-top: 1px solid #e7edf5;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.45rem, 2.5vw, 1.8rem);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.2;
text-wrap: balance;
}
.bathgiant-policy-content__inner h3 {
margin: 1.75rem 0 0.55rem;
font-size: clamp(1.08rem, 1.7vw, 1.22rem);
line-height: 1.35;
}
.bathgiant-policy-content__inner h4 {
margin: 1.5rem 0 0.45rem;
font-size: 1rem;
line-height: 1.4;
}
.bathgiant-policy-content__inner p {
margin: 0 0 1.05rem;
}
.bathgiant-policy-content__inner .bathgiant-policy-lede {
margin: 0 0 clamp(1.6rem, 3vw, 2.25rem);
padding: 1rem 1.15rem;
border-inline-start: 4px solid var(--policy-blue);
border-radius: 0 0.55rem 0.55rem 0;
background: #f1f6fc;
color: #30445e;
font-size: clamp(1rem, 1.5vw, 1.08rem);
line-height: 1.7;
}
.bathgiant-policy-content__inner ul,
.bathgiant-policy-content__inner ol {
margin: 0 0 1.25rem;
padding-inline-start: 1.4rem;
}
.bathgiant-policy-content__inner li {
margin-bottom: 0.45rem;
padding-inline-start: 0.2rem;
}
.bathgiant-policy-content__inner li::marker {
color: var(--policy-blue);
font-weight: 700;
}
.bathgiant-policy-content__inner a {
color: var(--policy-blue);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
}
.bathgiant-policy-content__inner a:hover {
color: var(--policy-maroon);
}
.bathgiant-policy-content__inner blockquote {
margin: 1.5rem 0;
padding: 1rem 1.2rem;
border: 1px solid #eadde2;
border-inline-start: 4px solid var(--policy-maroon);
border-radius: 0.55rem;
background: #fffafb;
color: #4b3a41;
}
.bathgiant-policy-content__inner blockquote > :last-child {
margin-bottom: 0;
}
.bathgiant-policy-content__inner table {
display: block;
width: 100%;
margin: 1.5rem 0;
overflow-x: auto;
border: 1px solid var(--policy-line);
border-collapse: collapse;
border-radius: 0.5rem;
}
.bathgiant-policy-content__inner th,
.bathgiant-policy-content__inner td {
min-width: 9rem;
padding: 0.75rem 0.85rem;
border: 1px solid var(--policy-line);
text-align: start;
vertical-align: top;
}
.bathgiant-policy-content__inner th {
background: #edf4fc;
color: var(--policy-navy);
font-size: 0.9rem;
}
.bathgiant-policy-content__inner hr {
margin: 2rem 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
.bathgiant-policy-content__inner img {
max-width: 100%;
height: auto;
border-radius: 0.55rem;
}
@media (max-width: 860px) {
.bathgiant-policy-shell {
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
.bathgiant-policy-shell__sidebar {
position: static;
}
.bathgiant-policy-nav__title {
padding: 0.85rem 1rem 0.7rem;
}
.bathgiant-policy-nav__list {
display: flex;
gap: 0.35rem;
padding: 0.45rem;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.bathgiant-policy-nav__list li {
flex: 0 0 auto;
}
.bathgiant-policy-nav__list a {
min-width: 12.75rem;
min-height: 2.8rem;
}
.bathgiant-policy-nav__list a.is-current {
border-inline-start-color: var(--policy-maroon);
}
}
@media (max-width: 560px) {
.bathgiant-policy-band {
padding-top: 1.5rem;
}
.bathgiant-policy-heading {
margin-bottom: 1.15rem;
padding-bottom: 1.1rem;
}
.bathgiant-policy-shell {
gap: 1rem;
}
.bathgiant-policy-content__inner {
padding: 1.35rem 1.15rem 1.6rem;
}
.bathgiant-policy-content__inner h2 {
font-size: 1.4rem;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-policy-nav__list a {
transition: none;
}
}
.bathgiant-policy-sibling-wrap {
margin-bottom: 1rem;
}
.bathgiant-policy-strip {
padding: var(--bathgiant-space-block);
margin: 0;
}
.bathgiant-policy-strip__title {
margin: 0 0 0.5rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-policy-strip__list {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.bathgiant-policy-strip__list a {
color: var(--bathgiant-brand, #1e3a5f);
text-decoration: underline;
text-underline-offset: 2px;
}
.bathgiant-policy-strip__list a:hover,
.bathgiant-policy-strip__list a:focus-visible {
color: var(--bathgiant-accent, #c4a35a);
}
.bathgiant-policy-strip__list a.is-current {
font-weight: 600;
text-decoration: none;
color: #0f172a;
}
.bathgiant-checkout-policy-strip .bathgiant-policy-strip {
margin-top: 0.75rem;
}
.bathgiant-policy-lede {
font-size: 1.05rem;
color: #334155;
}
.single-bg_ecommerce .bathgiant-product-single .bathgiant-policy-strip {
display: none;
}
.bathgiant-product-pdp-support {
display: grid;
gap: var(--bathgiant-space-block);
margin-top: 1.1rem;
}
@media (min-width: 900px) {
.bathgiant-product-pdp-support {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.bathgiant-product-pdp-support > :only-child {
grid-column: 1 / -1;
}
}
.bathgiant-product-pdp-support__availability,
.bathgiant-product-pdp-support__actions {
min-width: 0;
max-width: 100%;
padding: clamp(0.95rem, 2.2vw, 1.25rem);
border: 1px solid #dce6f2;
box-shadow: 0 8px 24px rgba(25, 44, 71, 0.06);
}
.bathgiant-product-pdp-support__meta {
margin: 0.3rem 0 0.7rem;
font-size: 0.95rem;
color: #2f425b;
}
.bathgiant-product-pdp-support__code {
color: var(--bathgiant-store-muted);
font-size: 0.88em;
margin-left: 0.35rem;
}
.bathgiant-product-pdp-support__flag {
margin: 0.5rem 0;
padding: 0.6rem 0.75rem;
background: #fff6e8;
border: 1px solid #f4d7a5;
border-radius: var(--bathgiant-radius-sm);
font-size: 0.9rem;
color: #8b5a18;
}
.bathgiant-product-pdp-support__lead-badge {
margin: 0 0 0.8rem;
padding: 0.72rem 0.85rem;
border-radius: 10px;
background: linear-gradient(135deg, var(--bathgiant-brand-wash) 0%, #fff 100%);
border: 1px solid var(--bathgiant-info-surface-border);
color: var(--bathgiant-brand-deep);
font-size: 1.03rem;
font-weight: 700;
line-height: 1.35;
}
.bathgiant-product-pdp-support__lead-badge--now {
background: linear-gradient(135deg, #ecfdf3 0%, #d1fae5 100%);
border-color: #a7f3d0;
color: #166534;
}
.bathgiant-product-pdp-support__branches {
margin: 0.8rem 0 0;
padding-left: 1.1rem;
border-top: 1px solid #e4ecf7;
padding-top: 0.7rem;
font-size: 0.9rem;
}
.bathgiant-product-pdp-support__branch {
font-weight: 600;
margin-right: 0.35rem;
}
.bathgiant-product-pdp-support__btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.8rem 0 0.4rem;
}
.bathgiant-product-pdp-support__btn-row .bathgiant-btn {
margin: 0;
min-width: 10rem;
border-radius: 999px;
}
.bathgiant-product-pdp-support__policies {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.92rem;
}
.bathgiant-product-pdp-support__policies li + li {
margin-top: 0.35rem;
}
@media (max-width: 640px) {
.bathgiant-product-pdp-support__lead-badge {
font-size: 0.95rem;
}
}
.bathgiant-product-single__specs {
margin: 0;
padding: 0;
}
.bathgiant-product-single__tile-calc {
margin: var(--bathgiant-space-block, 1rem) 0;
padding: var(--bathgiant-space-block);
}
.bathgiant-product-single__tile-calc-intro {
margin: 0 0 0.75rem;
font-size: 0.95rem;
color: var(--bathgiant-muted, #555);
}
.bathgiant-product-single__tile-walls {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bathgiant-tile-wall {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--bathgiant-border, #e5e7eb);
}
.bathgiant-tile-wall:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bathgiant-tile-wall__fields {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
flex: 1 1 12rem;
}
.bathgiant-tile-wall__label {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.9rem;
min-width: 6.5rem;
}
.bathgiant-tile-wall__label input {
max-width: 10rem;
width: 100%;
padding: 0.35rem 0.5rem;
border-radius: var(--bathgiant-radius-sm);
border: 1px solid var(--bathgiant-border, #ccc);
}
.bathgiant-tile-wall__remove {
flex-shrink: 0;
}
.bathgiant-product-single__tile-add-wrap {
margin: 0.25rem 0 0.75rem;
}
.bathgiant-product-single__tile-wastage {
margin: 0.75rem 0;
}
.bathgiant-product-single__tile-wastage-label {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.bathgiant-product-single__tile-wastage-range {
width: 100%;
display: block;
}
.bathgiant-product-single__tile-calc-results {
margin-top: 0.75rem;
font-size: 0.95rem;
}
.bathgiant-product-single__tile-calc-results p {
margin: 0.35rem 0;
} body.bathgiant-account-drawer-open {
overflow: hidden;
}
.bathgiant-account-drawer {
position: fixed;
inset: 0;
z-index: 600;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-account-drawer[hidden] {
display: none !important;
}
.bathgiant-account-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
.bathgiant-account-drawer__panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 90vw;
max-width: 90vw;
background: #fff;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
outline: none;
}
@media (min-width: 900px) {
.bathgiant-account-drawer__panel {
width: 50vw;
max-width: 50vw;
}
}
.bathgiant-account-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--bathgiant-border);
background: #f8fafc;
}
.bathgiant-account-drawer__title {
margin: 0;
font-size: 1.15rem;
color: var(--bathgiant-ink);
}
.bathgiant-account-drawer__close {
border: none;
background: transparent;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
color: var(--bathgiant-ink-muted);
padding: 0.2rem 0.45rem;
border-radius: 8px;
}
.bathgiant-account-drawer__close:hover {
background: rgba(15, 23, 42, 0.06);
color: var(--bathgiant-ink);
}
.bathgiant-account-drawer__split {
display: grid;
grid-template-columns: 1fr;
flex: 1;
overflow: auto;
min-height: 0;
}
@media (min-width: 520px) {
.bathgiant-account-drawer__split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
}
.bathgiant-account-drawer__visual {
background:
radial-gradient(ellipse 95% 75% at 12% 8%, color-mix(in srgb, var(--bathgiant-public-brand, #3d7dd9) 32%, transparent) 0%, transparent 52%),
radial-gradient(ellipse 70% 55% at 92% 88%, color-mix(in srgb, #0f172a 50%, transparent) 0%, transparent 48%),
linear-gradient(
155deg,
color-mix(in srgb, var(--bathgiant-public-brand-deep, #2f68c4) 38%, #1e3a5f) 0%,
#1e3a5f 34%,
#162d4a 66%,
#0f172a 100%
);
color: #fff;
padding: 1.75rem 1.75rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 1rem;
min-height: 10rem;
transition:  all ease 0.4s;
}
.bathgiant-account-drawer__logo {
min-height: 146px;
width: auto; border-radius: 8px;
background:#FFF;
padding:16px;
}
.bathgiant-account-drawer__badge {
max-width: 170px;
width: 100%;
height: auto; opacity: 1;
}
.bathgiant-account-drawer__tagline {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.45;
}
.bathgiant-account-drawer__main {
padding: 1.35rem 1.5rem 1.5rem;
overflow: auto;
}
.bathgiant-account-drawer--login-public .bathgiant-account-drawer__main {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 85%, #fff) 0%,
#fff 11rem
);
}
.bathgiant-account-drawer--login-trade .bathgiant-account-drawer__main {
background: linear-gradient(180deg, #fff5f5 0%, #fff 11rem);
}
.bathgiant-account-drawer--login-public .bathgiant-account-drawer__head {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 55%, #f8fafc) 0%,
#f8fafc 100%
);
}
.bathgiant-account-drawer--login-trade .bathgiant-account-drawer__head {
background: linear-gradient(180deg, #fff5f5 0%, #f8fafc 100%);
}
.bathgiant-account-drawer__mode-toggle {
display: flex;
width: 100%;
box-sizing: border-box;
padding: 3px;
margin: 0 0 1rem;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bathgiant-account-drawer--login-public .bathgiant-account-drawer__mode-toggle {
background: linear-gradient(180deg, #fff 0%, var(--bathgiant-brand-wash, #eef4fc) 100%);
border-color: color-mix(in srgb, var(--bathgiant-public-brand, #3d7dd9) 18%, #e2e8f0);
}
.bathgiant-account-drawer--login-trade .bathgiant-account-drawer__mode-toggle {
background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
border-color: color-mix(in srgb, #9f1239 16%, #e2e8f0);
}
.bathgiant-account-drawer__mode-option {
appearance: none;
flex: 1 1 0;
border: 0;
margin: 0;
padding: 0.45rem 0.75rem;
border-radius: 7px;
background: transparent;
color: #475569;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-drawer__mode-option:hover,
.bathgiant-account-drawer__mode-option:focus-visible {
color: #1e293b;
outline: none;
}
.bathgiant-account-drawer__mode-option.is-active[data-bathgiant-login-mode="public"] {
background: linear-gradient(180deg, var(--bathgiant-public-brand, #3d7dd9) 0%, var(--bathgiant-public-brand-deep, #2f68c4) 100%);
color: #fff;
box-shadow: 0 1px 2px color-mix(in srgb, var(--bathgiant-public-brand-deep, #2f68c4) 35%, transparent);
}
.bathgiant-account-drawer__mode-option.is-active[data-bathgiant-login-mode="trade"] {
background: linear-gradient(180deg, #9f1239 0%, #881337 100%);
color: #fff;
box-shadow: 0 1px 2px color-mix(in srgb, #881337 35%, transparent);
}
.bathgiant-account-drawer__lede {
margin: 0 0 1rem;
font-size: 0.92rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-account-drawer__main .bathgiant-site-login__form label {
display: block;
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 0.35rem;
}
.bathgiant-account-drawer__main .bathgiant-site-login__form input[type="text"],
.bathgiant-account-drawer__main .bathgiant-site-login__form input[type="password"] {
width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.65rem;
border: 1px solid var(--bathgiant-border);
border-radius: 10px;
font: inherit;
}
.bathgiant-account-drawer__meta {
margin: 0.75rem 0 0;
font-size: 0.88rem;
}
.bathgiant-account-drawer__guest-trade { display: none;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px dashed var(--bathgiant-border);
}
.bathgiant-account-drawer__subhead {
margin: 0 0 0.5rem;
font-size: 0.95rem;
}
.bathgiant-account-drawer__hint {
margin: 0 0 0.65rem;
font-size: 0.82rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-account-drawer__trade-form input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 0.5rem 0.6rem;
border: 1px solid var(--bathgiant-border);
border-radius: 10px;
font: inherit;
}
.bathgiant-account-drawer__trade-feedback {
margin: 0 0 0.75rem;
font-size: 0.86rem;
color: #166534;
}
.bathgiant-account-drawer__trade-feedback--error {
color: #b91c1c;
}
.bathgiant-account-drawer__dashboard {
padding: 1.35rem 1.5rem 1.5rem;
overflow: auto;
flex: 1;
min-height: 0;
}
.bathgiant-account-drawer__welcome {
margin: 0 0 0.35rem;
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-account-drawer__email {
margin: 0 0 1rem;
font-size: 0.9rem;
color: var(--bathgiant-ink-muted);
}
.bathgiant-account-drawer__nav ul {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.bathgiant-account-drawer__nav-link {
display: block;
padding: 0.45rem 0;
font-weight: 600;
color: var(--bathgiant-brand-deep);
text-decoration: none;
}
.bathgiant-account-drawer__nav-link:hover {
text-decoration: underline;
}
.bathgiant-account-drawer__profile {
padding: 1rem 0 0;
border-top: 1px solid var(--bathgiant-border);
}
.bathgiant-account-drawer__trade-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.bathgiant-account-drawer__foot {
margin: 1rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--bathgiant-border);
font-size: 0.9rem;
} .bathgiant-login-post-overlay {
position: fixed;
inset: 0;
z-index: 100010;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(2px);
font-family: var(--bathgiant-font-sans);
}
.bathgiant-login-post-overlay__panel {
max-width: 26rem;
width: 100%;
background: #fff;
border-radius: 12px;
padding: 1.25rem 1.35rem;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
border: 1px solid var(--bathgiant-border);
}
.bathgiant-login-post-overlay__title {
margin: 0 0 0.5rem;
font-size: 1.15rem;
color: var(--bathgiant-ink);
}
.bathgiant-login-post-overlay__body {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: #475569;
}
.bathgiant-login-post-overlay__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1.1rem;
align-items: center;
}
.bathgiant-login-post-overlay__account {
text-decoration: none;
}
.bathgiant-account-profile-card {
margin: 0 0 1.25rem;
padding: 1rem 1.1rem;
border: 1px solid #d7dbe0;
border-radius: 10px;
background: #fbfcfe;
}
.bathgiant-account-notice {
margin: 0 0 0.9rem;
padding: 0.7rem 0.85rem;
border: 1px solid #d7dbe0;
border-radius: 8px;
background: #f8fafc;
}
.bathgiant-account-notice--error {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.bathgiant-toast--ephemeral.bathgiant-toast--success {
border-color: #a7f3d0;
background: #ecfdf5;
}
.bathgiant-toast--ephemeral .bathgiant-toast__title {
color: #065f46;
}
.bathgiant-toast--ephemeral .bathgiant-toast__message {
color: #047857;
}
.bathgiant-toast--ephemeral.bathgiant-toast--preview {
border-color: #bfdbfe;
background: #eff6ff;
}
.bathgiant-toast--ephemeral.bathgiant-toast--preview .bathgiant-toast__title {
color: #1e3a8a;
}
.bathgiant-toast--ephemeral.bathgiant-toast--preview .bathgiant-toast__subtitle {
margin: 0.15rem 0 0;
font-size: 0.78rem;
line-height: 1.35;
color: #3b82f6;
}
.bathgiant-toast--ephemeral.bathgiant-toast--preview .bathgiant-toast__message {
margin: 0.2rem 0 0;
font-size: 1rem;
font-weight: 700;
color: #1d4ed8;
}
.bathgiant-toast__action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.75rem;
padding: 0.2rem 0.65rem;
margin-right: 0.35rem;
border-radius: 6px;
border: 1px solid #93c5fd;
background: #fff;
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
line-height: 1.2;
}
.bathgiant-toast__action:hover,
.bathgiant-toast__action:focus-visible {
background: #dbeafe;
color: #1e3a8a;
}
.bathgiant-toast--preview .bathgiant-toast__toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
}
.bathgiant-toast-stack {
position: fixed;
top: calc(var(--bathgiant-header-offset, 72px) + 0.75rem);
right: 0.75rem;
left: auto;
z-index: 100050;
display: flex;
flex-direction: column;
gap: 0.65rem;
width: min(22rem, calc(100% - 1.5rem));
max-width: calc(100vw - 1.5rem);
box-sizing: border-box;
pointer-events: none;
}
.bathgiant-toast-stack:has(.bathgiant-toast--has-media) {
width: min(30rem, calc(100% - 1.5rem));
max-width: calc(100vw - 1.5rem);
}
@media (max-width: 640px) {
.bathgiant-toast-stack {
left: 0.75rem;
right: 0.75rem;
width: auto;
max-width: none;
}
}
.bathgiant-toast {
pointer-events: auto;
border: 1px solid #d7dbe0;
border-radius: 10px;
background: #fff;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
padding: 0.85rem 4.25rem 0.85rem 0.9rem;
position: relative;
animation: bathgiant-toast-in 0.24s ease;
}
.bathgiant-toast--has-media {
padding-left: 0.75rem;
}
.bathgiant-toast.is-leaving {
animation: bathgiant-toast-out 0.2s ease forwards;
}
.bathgiant-toast__inner {
display: grid;
gap: 0.65rem;
}
.bathgiant-toast__body--has-media {
display: flex;
align-items: stretch;
gap: 0.75rem;
}
.bathgiant-toast__media-col {
flex: 0 0 4.75rem;
width: 4.75rem;
display: flex;
align-self: stretch;
}
.bathgiant-toast__media-col .bathgiant-notification__media {
margin: 0;
flex: 1 1 auto;
display: flex;
min-height: 4.75rem;
}
.bathgiant-toast__media-col .bathgiant-notification__media-link {
display: flex;
flex: 1 1 auto;
min-height: 100%;
}
.bathgiant-toast__content {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-toast--has-media .bathgiant-toast__content {
max-width: 20rem;
}
.bathgiant-toast__title {
margin: 0;
font-weight: 600;
color: #0f172a;
font-size: 0.95rem;
line-height: 1.35;
}
.bathgiant-toast__message {
margin: 0.2rem 0 0;
color: #475569;
font-size: 0.88rem;
line-height: 1.45;
}
.bathgiant-toast__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-toast__toolbar {
position: absolute;
top: 0.35rem;
right: 0.35rem;
display: flex;
align-items: center;
gap: 0.1rem;
}
.bathgiant-toast__mark-read,
.bathgiant-toast__close {
width: 1.75rem;
height: 1.75rem;
border: 0;
border-radius: 999px;
background: transparent;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.bathgiant-toast__mark-read:hover,
.bathgiant-toast__mark-read:focus-visible,
.bathgiant-toast__close:hover,
.bathgiant-toast__close:focus-visible {
background: #f1f5f9;
color: #0f172a;
}
.bathgiant-toast__mark-read svg {
display: block;
}
.bathgiant-toast__close {
position: static;
}
@keyframes bathgiant-toast-in {
from {
opacity: 0;
transform: translateY(-0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bathgiant-toast-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-0.35rem);
}
}
.bathgiant-header-account__badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 1.05rem;
height: 1.05rem;
padding: 0 1.2rem 0 0.2rem;
border-radius: 999px;
background: var(--bathgiant-dark);
color: #fff;
font-size: 0.62rem;
font-weight: 700;
line-height: 1.05rem;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
body.bathgiant-notifications-drawer-open {
overflow: hidden;
}
.bathgiant-notifications-drawer {
position: fixed;
inset: 0;
width: 100%;
max-width: 100%;
height: 100%;
height: 100dvh;
z-index: 650;
font-family: var(--bathgiant-font-sans); transform: translateZ(0);
}
body.bathgiant-notifications-drawer-open .bathgiant-notifications-drawer,
body.bathgiant-account-dashboard-focus .bathgiant-notifications-drawer:not([hidden]) {
z-index: 100100;
}
.bathgiant-notifications-drawer[hidden] {
display: none !important;
}
.bathgiant-notifications-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
.bathgiant-notifications-drawer__panel {
position: absolute;
top: 0;
right: 0;
left: auto;
bottom: 0;
height: 100%;
width: min(24rem, 100%);
max-width: 100%;
box-sizing: border-box;
background: #fff;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
overflow-x: hidden;
outline: none;
min-width: 0;
}
@media (max-width: 899px) { .bathgiant-notifications-drawer__panel {
left: 0;
right: 0;
width: 100%;
max-width: 100%;
box-shadow: none;
}
.bathgiant-notifications-drawer__toolbar {
flex-wrap: wrap;
align-items: stretch;
}
.bathgiant-notifications-drawer__toolbar .bathgiant-btn,
.bathgiant-notifications-drawer__history-link {
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
.bathgiant-web-push--drawer .bathgiant-web-push__actions {
flex-direction: column;
align-items: stretch;
}
.bathgiant-web-push--drawer .bathgiant-web-push__actions .bathgiant-btn {
width: 100%;
justify-content: center;
}
}
.bathgiant-notifications-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1rem 0.75rem;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.bathgiant-notifications-drawer__title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
min-width: 0;
}
.bathgiant-notifications-drawer__close {
border: 0;
background: transparent;
color: #64748b;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
padding: 0.15rem 0.35rem;
border-radius: 6px;
flex-shrink: 0;
}
.bathgiant-notifications-drawer__close:hover,
.bathgiant-notifications-drawer__close:focus-visible {
background: #f1f5f9;
color: #0f172a;
}
.bathgiant-notifications-drawer__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
flex-shrink: 0;
min-width: 0;
}
.bathgiant-notifications-drawer__history-link {
font-size: 0.85rem;
font-weight: 600;
color: var(--bathgiant-brand-deep);
text-decoration: none;
}
.bathgiant-notifications-drawer__history-link:hover {
text-decoration: underline;
}
.bathgiant-notifications-drawer__list {
flex: 1 1 auto;
overflow: auto;
padding: 0.5rem 0;
}
.bathgiant-notifications-drawer__item {
display: grid;
gap: 0.65rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid #eef2f7;
min-width: 0;
}
.bathgiant-notifications-drawer__item.is-unread {
background: #f8fbff;
border-left: 3px solid var(--bathgiant-brand);
padding-left: calc(1rem - 3px);
}
.bathgiant-notifications-drawer__item-title,
.bathgiant-account-notifications__title {
margin: 0;
font-weight: 600;
color: #0f172a;
font-size: 0.92rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.bathgiant-notifications-drawer__item-message,
.bathgiant-account-notifications__message {
margin: 0.25rem 0 0;
color: #475569;
font-size: 0.86rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.bathgiant-notifications-drawer__item-time,
.bathgiant-account-notifications__time {
margin: 0.35rem 0 0;
color: #94a3b8;
font-size: 0.78rem;
}
.bathgiant-notifications-drawer__empty {
margin: 0;
padding: 1.25rem 1rem;
color: #64748b;
font-size: 0.9rem;
}
.bathgiant-account-notifications {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.bathgiant-account-notifications__item {
display: grid;
gap: 0.65rem;
padding: 0.95rem 1rem;
border-bottom: 1px solid #eef2f7;
background: #fff;
}
.bathgiant-account-notifications__item:last-child {
border-bottom: 0;
}
.bathgiant-account-notifications__item.is-unread {
background: #f8fbff;
border-left: 3px solid var(--bathgiant-brand);
padding-left: calc(1rem - 3px);
}
.bathgiant-notifications-drawer__item-actions,
.bathgiant-account-notifications__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
.bathgiant-btn--icon-only {
padding: 0.35rem;
min-width: 2rem;
gap: 0;
}
.bathgiant-account-notifications__actions .bathgiant-notification-archive-btn,
.bathgiant-notifications-drawer__item-actions .bathgiant-notification-archive-btn,
.bathgiant-notification-archive-btn,
button[data-notification-archive] {
color: #fff;
}
.bathgiant-account-notifications__actions .bathgiant-notification-archive-btn:hover,
.bathgiant-account-notifications__actions .bathgiant-notification-archive-btn:focus-visible,
.bathgiant-notifications-drawer__item-actions .bathgiant-notification-archive-btn:hover,
.bathgiant-notifications-drawer__item-actions .bathgiant-notification-archive-btn:focus-visible,
.bathgiant-notification-archive-btn:hover,
.bathgiant-notification-archive-btn:focus-visible,
button[data-notification-archive]:hover,
button[data-notification-archive]:focus-visible {
color: #fff;
}
.bathgiant-notification-archive-btn svg,
button[data-notification-archive] svg {
stroke: currentColor;
}
.bathgiant-notification-archive-btn svg path,
button[data-notification-archive] svg path {
stroke: #fff;
}
.bathgiant-notification-reactions {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.bathgiant-notification-reactions__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.2rem;
min-width: 1.65rem;
min-height: 1.65rem;
border: 1px solid #d7dbe0;
border-radius: 999px;
background: #fff;
color: #64748b;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-notification-reactions__btn.has-count {
padding: 0.18rem 0.32rem;
min-width: 0;
}
.bathgiant-notification-reactions__btn svg {
flex-shrink: 0;
display: block;
width: 15px;
height: 15px;
pointer-events: none;
}
.bathgiant-notification-reactions__btn .bathgiant-notification-reactions__count,
.bathgiant-notification-reactions__btn .bathgiant-notification-reactions__label {
pointer-events: none;
}
.bathgiant-notification-reactions__btn:hover,
.bathgiant-notification-reactions__btn:focus-visible {
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
background: var(--bathgiant-brand-wash);
}
.bathgiant-notification-reactions__btn--like:hover,
.bathgiant-notification-reactions__btn--like:focus-visible {
border-color: #86efac;
color: #166534;
background: #f0fdf4;
}
.bathgiant-notification-reactions__btn--dislike:hover,
.bathgiant-notification-reactions__btn--dislike:focus-visible {
border-color: #fecaca;
color: #991b1b;
background: #fef2f2;
}
.bathgiant-notification-reactions__btn.has-count {
border-color: var(--bathgiant-brand-deep);
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
}
.bathgiant-notification-reactions__btn--like.has-count {
border-color: #86efac;
background: #f0fdf4;
color: #166534;
}
.bathgiant-notification-reactions__btn--dislike.has-count {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.bathgiant-notification-reactions__count {
min-width: 0.85rem;
text-align: center;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.bathgiant-notification-reactions__btn:not(.has-count) .bathgiant-notification-reactions__count {
display: none;
}
.bathgiant-notification-reactions__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.bathgiant-account-notifications__toolbar {
margin: 0 0 0.85rem;
}
.bathgiant-web-push {
margin: 0 0 1rem;
padding: 0.85rem 1rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 28%, #d8dee8);
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 6%, #fff);
border-radius: 0;
}
.bathgiant-web-push--drawer {
margin: 0 0 0.75rem;
padding: 0.7rem 0.85rem;
min-width: 0;
flex-shrink: 0;
}
.bathgiant-web-push__inner {
display: grid;
gap: 0.55rem;
}
.bathgiant-web-push__status {
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
color: var(--bathgiant-ink, #1c2430);
}
.bathgiant-web-push__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-web-push[data-web-push-state="blocked"] .bathgiant-web-push__status {
color: var(--bathgiant-ink, #1c2430);
}
.bathgiant-web-push__hint {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
color: color-mix(in srgb, var(--bathgiant-ink, #1c2430) 78%, #667);
}
.bathgiant-sn-compose-layout {
display: grid;
gap: 1.25rem 1.5rem;
min-width: 0;
}
.bathgiant-sn-compose-layout > * {
min-width: 0;
}
.bathgiant-sn-compose-hero {
display: grid;
gap: 0.35rem;
padding: 0.15rem 0 0.25rem;
border-left: 3px solid var(--bathgiant-brand, #3d7dd9);
padding-left: 0.9rem;
}
.bathgiant-sn-compose-hero__eyebrow {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-sn-compose-hero .bathgiant-account-panel__title {
margin: 0;
}
.bathgiant-sn-compose-hero .bathgiant-account-panel__lede {
margin: 0;
max-width: 42rem;
}
.bathgiant-sn-compose {
display: flex;
flex-direction: column;
gap: 1.15rem;
max-width: none;
min-width: 0;
container-type: inline-size;
container-name: sn-compose;
}
.bathgiant-sn-compose__recipients {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: stretch;
min-width: 0;
}
.bathgiant-sn-compose__recipients-card {
display: grid;
grid-template-columns: minmax(11rem, 0.78fr) minmax(0, 1.22fr);
gap: 0;
align-items: stretch;
min-width: 0;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e2e8f0);
border-radius: 14px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 4%, #fff) 0%, #fff 42%),
#fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04); overflow: visible;
}
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__group,
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__audience {
height: 100%;
border: 0;
box-shadow: none;
background: transparent;
}
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__group {
border-right: 1px solid #e8edf3;
border-radius: 14px 0 0 14px;
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 3%, #f8fafc);
}
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__audience {
border-radius: 0 14px 14px 0;
}
.bathgiant-sn-compose__recipients > .bathgiant-sn-compose__group,
.bathgiant-sn-compose__recipients > .bathgiant-sn-compose__audience {
height: 100%;
}
.bathgiant-sn-compose__compose {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: stretch;
padding: 1.15rem 1.25rem 1.2rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e2e8f0);
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04);
min-width: 0;
}
.bathgiant-sn-compose__compose-head {
display: grid;
gap: 0.2rem;
margin: 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e8edf3;
}
.bathgiant-sn-compose__compose-title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 1rem;
font-weight: 700;
color: var(--bathgiant-ink, #0f172a);
}
.bathgiant-sn-compose__compose-lede {
margin: 0;
}
.bathgiant-sn-compose__compose-main {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.bathgiant-sn-compose__field--title,
.bathgiant-sn-compose__field--message {
min-width: 0;
}
.bathgiant-sn-compose__compose-side {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: stretch;
min-width: 0;
padding: 1rem 1.05rem;
border: 1px solid #e8edf3;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.bathgiant-sn-compose__field--message textarea {
min-height: 10.5rem;
resize: vertical;
max-width: 100%;
}
.bathgiant-sn-compose__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
padding: 0.85rem 1rem;
border: 1px solid #e8edf3;
border-radius: 12px;
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 4%, #fff);
}
.bathgiant-sn-compose__legend,
.bathgiant-sn-compose__history-title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-ink);
letter-spacing: 0.01em;
}
.bathgiant-sn-compose__group,
.bathgiant-sn-compose__audience {
margin: 0;
padding: 1.05rem 1.1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.bathgiant-sn-compose__recipients-card .bathgiant-sn-compose__legend {
margin-bottom: 0.85rem;
}
.bathgiant-sn-compose__group + .bathgiant-sn-compose__audience {
margin-top: 0;
}
.bathgiant-sn-compose__segment {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.bathgiant-sn-compose__segment-option {
position: relative;
display: block;
margin: 0;
cursor: pointer;
}
.bathgiant-sn-compose__segment-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-sn-compose__segment-option span {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.55rem;
padding: 0.55rem 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #fff;
color: #334155;
font-size: 0.88rem;
font-weight: 650;
text-align: center;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-sn-compose__segment-option input:checked + span {
border-color: var(--bathgiant-brand-deep, #2f68c4);
background: var(--bathgiant-brand-wash, #eef4fc);
color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 16%, transparent);
}
.bathgiant-sn-compose__segment-option:hover span {
border-color: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 35%, #cbd5e1);
}
.bathgiant-sn-compose__option {
position: relative;
display: flex;
gap: 0.7rem;
align-items: flex-start;
margin: 0 0 0.55rem;
padding: 0.75rem 0.8rem;
border: 1px solid #e2e8f0;
border-radius: 11px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-sn-compose__option:last-of-type {
margin-bottom: 0;
}
.bathgiant-sn-compose__option:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 28%, #e2e8f0);
background: #fbfdff;
}
.bathgiant-sn-compose__option:has(input:checked) {
border-color: var(--bathgiant-brand-deep, #2f68c4);
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 6%, #fff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 14%, transparent);
}
.bathgiant-sn-compose__option input {
margin-top: 0.2rem;
flex-shrink: 0;
accent-color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-sn-compose__option-body {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.bathgiant-sn-compose__option-title {
font-size: 0.9rem;
font-weight: 650;
color: #0f172a;
line-height: 1.35;
}
.bathgiant-sn-compose__option-note {
margin: 0 !important;
}
.bathgiant-sn-compose__choice {
display: flex;
gap: 0.55rem;
align-items: flex-start;
margin: 0 0 0.55rem;
cursor: pointer;
}
.bathgiant-sn-compose__choice:last-child {
margin-bottom: 0;
}
.bathgiant-sn-compose__choice input {
margin-top: 0.15rem;
flex-shrink: 0;
accent-color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-sn-compose__link-options {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.bathgiant-sn-compose__chip {
position: relative;
display: inline-flex;
margin: 0;
cursor: pointer;
}
.bathgiant-sn-compose__chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-sn-compose__chip span {
display: inline-flex;
align-items: center;
padding: 0.38rem 0.7rem;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
color: #475569;
font-size: 0.8rem;
font-weight: 650;
line-height: 1.2;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bathgiant-sn-compose__chip input:checked + span {
border-color: var(--bathgiant-brand-deep, #2f68c4);
background: var(--bathgiant-brand-wash, #eef4fc);
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-sn-compose__email-copy {
margin: 0;
padding: 0.75rem 0.8rem;
border: 1px solid #e8edf3;
border-radius: 10px;
background: #f8fafc;
min-width: 0;
}
.bathgiant-sn-compose__email-copy > span {
min-width: 0;
}
.bathgiant-sn-compose__email-copy .description {
display: block;
margin-top: 0.2rem;
font-weight: 400;
color: #64748b;
}
.bathgiant-sn-compose__audience-note {
margin: 0 0 0.75rem;
color: #64748b;
}
.bathgiant-sn-compose__trade-user,
.bathgiant-sn-compose__branch-user,
.bathgiant-sn-compose__branch-select {
margin-top: 0.55rem;
padding: 0.75rem 0.8rem;
border: 1px dashed color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 22%, #cbd5e1);
border-radius: 10px;
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 3%, #fff);
}
.bathgiant-sn-compose__field {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
.bathgiant-sn-compose__from-value {
margin: 0;
padding: 0.7rem 0.85rem;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
background: #f8fafc;
color: var(--bathgiant-ink);
font: inherit;
line-height: 1.4;
word-break: break-word;
}
.bathgiant-sn-compose__label {
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-sn-compose__search-wrap {
position: relative;
}
.bathgiant-sn-compose__search,
.bathgiant-sn-compose input[type="text"],
.bathgiant-sn-compose input[type="url"],
.bathgiant-sn-compose textarea,
.bathgiant-sn-compose select {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0.7rem 0.85rem;
border: 1px solid #cbd5e1;
border-radius: 0.65rem;
font: inherit;
background: #fff;
box-sizing: border-box;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-sn-compose__search:focus,
.bathgiant-sn-compose input[type="text"]:focus,
.bathgiant-sn-compose input[type="url"]:focus,
.bathgiant-sn-compose textarea:focus,
.bathgiant-sn-compose select:focus {
outline: none;
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, transparent);
}
.bathgiant-sn-compose select {
cursor: pointer;
}
.bathgiant-sn-compose__search-results {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.25rem);
z-index: 30;
max-height: 14rem;
overflow: auto;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
background: #fff;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.bathgiant-sn-compose__search-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
width: 100%;
padding: 0.65rem 0.8rem;
border: 0;
border-bottom: 1px solid #eef2f7;
background: #fff;
text-align: left;
cursor: pointer;
}
.bathgiant-sn-compose__search-item:hover,
.bathgiant-sn-compose__search-item:focus-visible {
background: #f8fafc;
outline: none;
}
.bathgiant-sn-compose__search-item:last-child {
border-bottom: 0;
}
.bathgiant-sn-compose__search-label {
font-weight: 600;
color: #0f172a;
}
.bathgiant-sn-compose__search-meta,
.bathgiant-sn-compose__search-empty {
margin: 0;
padding: 0.65rem 0.8rem;
color: #64748b;
font-size: 0.88rem;
}
.bathgiant-sn-compose__status.is-error {
color: #b91c1c;
}
.bathgiant-sn-compose__actions {
margin: 0;
flex: 0 0 auto;
}
.bathgiant-sn-compose__actions .bathgiant-btn {
min-width: 11rem;
}
.bathgiant-sn-compose__history {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
}
.bathgiant-sn-compose__history-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: 0;
padding: 1.05rem 1.1rem 1.15rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e2e8f0);
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04);
}
.bathgiant-sn-compose__history-head {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bathgiant-sn-compose__history-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.45rem;
height: 1.45rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
}
.bathgiant-sn-compose__history-lede {
margin: 0;
color: #64748b;
}
.bathgiant-sn-compose__history-body {
min-height: 0;
padding: 0.15rem 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-sn-compose__history-empty {
padding: 1.5rem 0.85rem;
text-align: center;
}
.bathgiant-sn-compose__history-empty-title {
margin: 0 0 0.35rem;
font-weight: 700;
color: #334155;
}
.bathgiant-sn-compose-log {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
max-height: min(32rem, calc(100vh - 12rem));
overflow: auto;
}
.bathgiant-sn-compose-log__item {
display: grid;
gap: 0.45rem;
padding: 0.95rem 0;
border-bottom: 1px solid #e8edf3;
background: transparent;
}
.bathgiant-sn-compose-log__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.bathgiant-sn-compose-log__item:first-child {
padding-top: 0;
}
.bathgiant-sn-compose-log__item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
}
.bathgiant-sn-compose-log__when {
font-size: 0.78rem;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
.bathgiant-sn-compose-log__title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.bathgiant-sn-compose-log__preview {
margin: 0;
font-size: 0.84rem;
line-height: 1.45;
color: #475569;
}
.bathgiant-sn-compose-log__tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.bathgiant-sn-compose-log__tag {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.52rem;
border-radius: 999px;
background: #eef2f7;
color: #334155;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.2;
}
.bathgiant-sn-compose-log__tag--muted {
background: #f8fafc;
color: #64748b;
}
.bathgiant-sn-compose-log__from {
margin: 0;
font-size: 0.78rem;
color: #64748b;
}
.bathgiant-sn-compose-log__reactions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.bathgiant-sn-compose-log__reaction {
display: inline-flex;
align-items: center;
padding: 0.16rem 0.48rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.2;
}
.bathgiant-sn-compose-log__reaction--like {
background: #ecfdf3;
color: #166534;
}
.bathgiant-sn-compose-log__reaction--dislike {
background: #fef2f2;
color: #991b1b;
}
.bathgiant-sn-compose-log__item-actions {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex: 0 0 auto;
}
.bathgiant-sn-compose-log__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.2rem 0.45rem;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
font-family: var(--bathgiant-font-sans);
font-size: 0.74rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-sn-compose-log__action:hover,
.bathgiant-sn-compose-log__action:focus-visible {
background: #f1f5f9;
color: #334155;
outline: none;
}
.bathgiant-sn-compose-log__action svg {
display: block;
flex-shrink: 0;
}
.bathgiant-sn-compose-log__delete {
color: #b91c1c;
}
.bathgiant-sn-compose-log__delete:hover,
.bathgiant-sn-compose-log__delete:focus-visible {
background: #fef2f2;
color: #991b1b;
}
.bathgiant-sn-compose__search-item--link {
align-items: center;
gap: 0.55rem;
text-align: left;
}
.bathgiant-sn-compose__search-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
background: #f1f5f9;
}
.bathgiant-sn-compose__search-copy {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.bathgiant-sn-compose__link-panel {
margin-top: 0.35rem;
}
.bathgiant-sn-compose__link-preview {
display: flex;
align-items: center;
gap: 0.65rem;
margin-top: 0.55rem;
padding: 0.55rem 0.65rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
}
.bathgiant-sn-compose__link-preview-image {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 6px;
background: #fff;
}
.bathgiant-notification__media {
margin: 0 0 0.55rem;
}
.bathgiant-notification__image {
display: block;
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.bathgiant-toast__body .bathgiant-notification__image {
width: 64px;
height: 64px;
}
.bathgiant-toast__media-col .bathgiant-notification__image {
width: 100%;
height: 100%;
min-height: 4.75rem;
border-radius: 8px;
}
.bathgiant-notification__from {
margin: 0 0 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--bathgiant-ink-muted);
}
.bathgiant-account-notifications__item .bathgiant-notification__media,
.bathgiant-notifications-drawer__item .bathgiant-notification__media {
float: left;
margin: 0 0.75rem 0.5rem 0;
}
.bathgiant-sn-compose-log__title {
margin: 0;
}
.bathgiant-sn-compose-log__meta {
margin: 0;
}
.bathgiant-sn-compose-admin__panel {
max-width: 56rem;
margin-top: 1rem;
padding: 1rem 1.1rem;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
}
@media (min-width: 900px) {
.bathgiant-account-dashboard-page .bathgiant-sn-compose-layout {
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
align-items: start;
}
.bathgiant-account-dashboard-page .bathgiant-sn-compose-layout .bathgiant-sn-compose__history {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
}
.bathgiant-account-dashboard-page .bathgiant-sn-compose-layout .bathgiant-sn-compose__history-card {
max-height: calc(100vh - 2rem);
overflow: auto;
}
}
@media (max-width: 899px) {
.bathgiant-sn-compose__recipients-card {
grid-template-columns: 1fr;
}
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__group {
border-right: 0;
border-bottom: 1px solid #e8edf3;
border-radius: 14px 14px 0 0;
}
.bathgiant-sn-compose__recipients-card > .bathgiant-sn-compose__audience {
border-radius: 0 0 14px 14px;
}
.bathgiant-sn-compose__recipients {
grid-template-columns: 1fr;
}
.bathgiant-sn-compose__compose-side {
padding: 0.85rem 0.9rem;
}
}
@container sn-compose (max-width: 760px) {
.bathgiant-sn-compose__compose-side {
padding: 0.85rem 0.9rem;
}
}
@media (max-width: 560px) {
.bathgiant-sn-compose__compose {
padding: 0.9rem;
}
.bathgiant-sn-compose__footer {
flex-direction: column;
align-items: stretch;
}
.bathgiant-sn-compose__actions .bathgiant-btn {
width: 100%;
}
}
.bathgiant-account-panel[data-bathgiant-account-panel="send-notifications"] .bathgiant-account-panel__head {
margin-bottom: 1rem;
}
.bathgiant-account-panel[data-bathgiant-account-panel="send-notifications"] .bathgiant-sn-compose-layout {
gap: 1.35rem 1.5rem;
}
.bathgiant-sn-compose__link-group {
border: 0;
box-shadow: none;
padding: 0;
background: transparent;
}
.bathgiant-sn-compose__link-group .bathgiant-sn-compose__legend {
margin-bottom: 0.55rem;
}
.bathgiant-account-order-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin: 0.75rem 0 0;
}
.bathgiant-account-order-actions .bathgiant-btn--ghost {
color: var(--bathgiant-color-primary, #1e5a9e);
border-color: var(--bathgiant-color-primary, #1e5a9e);
}
.bathgiant-account-order-actions .bathgiant-btn--ghost:hover {
background: var(--bathgiant-color-primary, #1e5a9e);
border-color: var(--bathgiant-color-primary, #1e5a9e);
color: #fff;
} .bathgiant-account-panel--account-contacts,
.bathgiant-account-panel--intact {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
} .bathgiant-account-panel__head {
margin: 0 0 1.15rem;
}
.bathgiant-account-panel__title,
.bathgiant-account-panel > h3,
.bathgiant-account-form > h3,
.bathgiant-instore-panel__title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
color: var(--bathgiant-store-ink-strong);
letter-spacing: -0.01em;
}
.bathgiant-account-panel__lede,
.bathgiant-account-panel__intro,
.bathgiant-account-panel > .description,
.bathgiant-account-panel p.description,
.bathgiant-instore-panel__lede,
.bathgiant-intact-account__lede {
margin: 0;
max-width: 52rem;
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
}
.bathgiant-account-panel__head .bathgiant-account-panel__lede,
.bathgiant-account-panel__head .bathgiant-account-panel__intro {
margin-top: 0.35rem;
}
.bathgiant-account-panel__title-row {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 0.35rem;
}
.bathgiant-account-panel__title-row .bathgiant-account-panel__title {
margin: 0;
}
.bathgiant-account-panel__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 10px;
background: color-mix(in srgb, var(--bathgiant-brand-deep, #3d6fa3) 12%, #fff);
color: var(--bathgiant-brand-deep, #3d6fa3);
opacity: 1;
flex-shrink: 0;
}
.bathgiant-intact-account {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.bathgiant-intact-account__notice {
margin-bottom: 0;
}
.bathgiant-intact-account__hero {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1.25rem 1.5rem;
padding: 1.25rem 1.35rem;
border-radius: 14px;
border: 1px solid var(--bathgiant-store-border);
background: linear-gradient(135deg, #f8fafc 0%, #eef4fb 100%);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.bathgiant-intact-account__title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
letter-spacing: -0.01em;
}
.bathgiant-intact-account__lede,
.bathgiant-intact-card__lede {
margin: 0;
color: #64748b;
font-size: 0.92rem;
line-height: 1.5;
}
.bathgiant-intact-account__hero-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.75rem;
flex-shrink: 0;
}
.bathgiant-intact-account__code {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.2rem;
text-align: right;
}
.bathgiant-intact-account__code-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
}
.bathgiant-intact-account__code-value {
display: inline-block;
padding: 0.35rem 0.65rem;
border-radius: 8px;
background: #fff;
border: 1px solid #cbd5e1;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
letter-spacing: 0.04em;
}
.bathgiant-intact-card {
padding: 1.15rem 1.25rem;
border-radius: 14px;
border: 1px solid var(--bathgiant-store-border);
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.bathgiant-intact-card__head {
margin-bottom: 1rem;
}
.bathgiant-intact-card__title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
}
.bathgiant-intact-card__empty {
margin: 0;
padding: 1.25rem 1rem;
text-align: center;
color: #64748b;
background: #f8fafc;
border-radius: 10px;
border: 1px dashed #cbd5e1;
}
.bathgiant-intact-card__actions {
margin: 1rem 0 0;
}
.bathgiant-intact-dl {
margin: 0;
display: grid;
gap: 0;
}
.bathgiant-intact-dl__row {
display: grid;
grid-template-columns: minmax(8rem, 34%) 1fr;
gap: 0.75rem 1rem;
padding: 0.65rem 0;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-intact-dl__row:last-child {
border-bottom: 0;
}
.bathgiant-intact-dl dt {
margin: 0;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-intact-dl dd {
margin: 0;
font-size: 0.95rem;
color: #0f172a;
line-height: 1.45;
}
.bathgiant-intact-card--credit,
.bathgiant-intact-documents {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 1rem;
}
.bathgiant-intact-card--invoices,
.bathgiant-intact-card--quotations {
margin-top: 0;
}
.bathgiant-intact-card--quotations {
border-top: 1px solid var(--bathgiant-border, rgba(0, 0, 0, 0.08));
padding-top: 1rem;
margin-top: 1rem;
}
.bathgiant-intact-table-wrap {
overflow-x: auto;
margin-top: 0.35rem;
-webkit-overflow-scrolling: touch;
}
.bathgiant-intact-table {
width: 100%;
min-width: 32rem;
margin: 0;
border-collapse: collapse;
font-size: 0.9rem;
}
.bathgiant-intact-table th {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.bathgiant-intact-table__num {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.bathgiant-intact-table__text {
text-align: left;
}
.bathgiant-intact-table th.bathgiant-intact-table__status,
.bathgiant-intact-table td.bathgiant-intact-table__status {
text-align: center;
}
.bathgiant-intact-table__action {
text-align: right;
white-space: nowrap;
}
.bathgiant-intact-table--docs {
min-width: 42rem;
}
.bathgiant-intact-doc-link {
font-weight: 600;
text-decoration: none;
color: var(--bathgiant-doc-accent);
}
.bathgiant-intact-doc-link:hover {
text-decoration: underline;
}
.bathgiant-btn--compact {
padding: 0.35rem 0.65rem;
font-size: 0.82rem;
line-height: 1.2;
}
.bathgiant-intact-doc-view {
margin-top: 1rem;
}
.bathgiant-intact-doc-view__back,
.bathgiant-quote-detail__back,
.bathgiant-appointment-detail__back {
margin: 0 0 1rem;
font-size: 0.92rem;
}
.bathgiant-intact-doc-view__back a,
.bathgiant-quote-detail__back a,
.bathgiant-appointment-detail__back a {
text-decoration: none;
font-weight: 600;
color: var(--bathgiant-doc-accent);
}
.bathgiant-intact-doc-view__back a:hover,
.bathgiant-intact-doc-view__back a:focus-visible,
.bathgiant-quote-detail__back a:hover,
.bathgiant-quote-detail__back a:focus-visible,
.bathgiant-appointment-detail__back a:hover,
.bathgiant-appointment-detail__back a:focus-visible {
text-decoration: underline;
}
.bathgiant-intact-card--doc-detail {
margin-top: 0;
}
.bathgiant-intact-doc-view__head {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--bathgiant-border, rgba(0, 0, 0, 0.08));
}
.bathgiant-intact-doc-view__status {
margin: 0.35rem 0 0;
font-size: 0.92rem;
color: #475569;
}
.bathgiant-intact-doc-view__status-label {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.75rem;
color: #64748b;
}
.bathgiant-intact-doc-view__section {
margin-top: 1.35rem;
}
.bathgiant-intact-doc-view__section-title {
margin: 0 0 0.65rem;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-intact-doc-view__particulars {
margin: 0;
padding: 0.85rem 1rem;
font-size: 0.9rem;
line-height: 1.5;
color: #334155;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
white-space: pre-wrap;
}
.bathgiant-intact-dl--doc-detail .bathgiant-intact-dl__row {
grid-template-columns: minmax(9rem, 32%) 1fr;
}
.bathgiant-intact-dl--totals {
max-width: 22rem;
margin-left: auto;
margin-top: 0.5rem;
}
.bathgiant-intact-table--lines {
min-width: 36rem;
} .bathgiant-intact-doc-sheet {
margin-top: 0;
padding: 1.75rem 1.85rem 2rem;
background: #fff;
border: 1px solid #dbe3ec;
border-radius: 14px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}
.bathgiant-intact-doc-meta-col {
padding: 1rem 1.15rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.bathgiant-intact-doc-meta-col__title {
margin: 0 0 0.65rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-intact-doc-meta-dl > div:last-child {
border-bottom: none;
}
.bathgiant-intact-doc-sheet__heading {
margin: 0 0 0.85rem;
padding-bottom: 0.55rem;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bathgiant-doc-accent);
border-bottom: 2px solid #e2e8f0;
}
.bathgiant-intact-doc-sheet__section {
margin-top: 1.5rem;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table-wrap--lines {
margin-top: 0;
border: 1px solid #dbe3ec;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines {
min-width: 0;
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines thead th {
background: var(--bathgiant-doc-table-header-bg);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.8rem 1rem;
text-align: left;
border: none;
white-space: nowrap;
vertical-align: bottom;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines thead th.bathgiant-intact-table__num {
text-align: right;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody td {
padding: 0.85rem 1rem;
border-top: 1px solid #e8eef4;
font-size: 0.9rem;
color: #0f172a;
vertical-align: top;
background: #fff;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody tr:nth-child(even) td {
background: #f8fafc;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__text {
text-align: left;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__product {
font-weight: 600;
font-size: 0.84rem;
color: #334155;
white-space: nowrap;
vertical-align: middle;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__desc {
min-width: 12rem;
line-height: 1.45;
}
.bathgiant-intact-doc-sheet .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__num {
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.bathgiant-intact-doc-sheet__section--totals {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
}
.bathgiant-intact-doc-totals {
width: 100%;
max-width: 24rem;
margin: 0;
border-collapse: collapse;
font-size: 0.92rem;
border: 1px solid #dbe3ec;
border-radius: 10px;
overflow: hidden;
background: #f8fafc;
}
.bathgiant-intact-doc-totals th {
padding: 0.65rem 1rem;
font-weight: 600;
text-align: left;
color: #475569;
background: transparent;
}
.bathgiant-intact-doc-totals td {
padding: 0.65rem 1rem;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #0f172a;
background: transparent;
}
.bathgiant-intact-doc-totals__row--total th,
.bathgiant-intact-doc-totals__row--total td {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
border-top: 2px solid var(--bathgiant-doc-accent);
background: #fff;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-intact-doc-sheet__footer {
margin-top: 1.75rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
font-size: 0.82rem;
color: #64748b;
} .bathgiant-quote-detail {
margin-top: 0;
}
.bathgiant-quote-detail__header {
margin: 0 0 0.85rem;
}
.bathgiant-quote-detail__header-bar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem 1.25rem;
flex-wrap: wrap;
}
.bathgiant-quote-detail__header-bar .bathgiant-quote-detail__back {
margin: 0;
flex: 0 1 auto;
min-width: 0;
}
.bathgiant-quote-detail__title {
margin: 0;
}
.bathgiant-quote-detail__ref {
flex: 0 1 auto;
margin-left: auto;
text-align: right;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.25;
color: #0f172a;
letter-spacing: 0.01em;
}
.bathgiant-quote-detail__meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem 1rem;
margin: 0 0 1.25rem;
padding: 1rem 1.1rem;
border: 1px solid #dbe3ec;
border-radius: 10px;
background: #f8fafc;
}
.bathgiant-quote-detail__meta-item {
margin: 0;
min-width: 0;
}
.bathgiant-quote-detail__meta-item--wide {
grid-column: 1 / -1;
}
.bathgiant-quote-detail__meta-label {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-quote-detail__meta-value {
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
color: var(--bathgiant-ink, #1a1a1a);
word-break: break-word;
}
.bathgiant-quote-detail__meta-value a {
color: inherit;
}
.bathgiant-quote-detail__meta-value code {
font-size: 0.88em;
}
.bathgiant-quote-detail__panels {
display: grid;
gap: 0.85rem;
margin: 0 0 1.25rem;
}
.bathgiant-quote-detail__note {
margin: 0;
padding: 0.75rem 1rem;
font-size: 0.9rem;
line-height: 1.5;
color: #475569;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.bathgiant-account-quote-detail-table .bathgiant-cart-line-product {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.bathgiant-account-quote-detail-table .bathgiant-cart-line-product__body {
flex: 1 1 0%;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
}
.bathgiant-account-quote-detail-table .bathgiant-cart-title {
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
}
.bathgiant-account-quote-detail-table .bathgiant-cart-line-product .bathgiant-pkg-line__thumb {
flex-shrink: 0;
margin-top: 0.05rem;
}
@media (max-width: 900px) {
.bathgiant-quote-detail__meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.bathgiant-quote-detail__meta {
grid-template-columns: 1fr;
}
}
.bathgiant-account-quote-detail-table-wrap {
margin-top: 0;
border: 1px solid #dbe3ec;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.bathgiant-account-quote-detail-table {
margin-top: 0;
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.bathgiant-account-quote-detail-table th,
.bathgiant-account-quote-detail-table td {
border: none;
border-bottom: 1px solid #e8eef4;
padding: 0.85rem 1rem;
vertical-align: middle;
text-align: left;
}
.bathgiant-account-quote-detail-table thead th {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-account-quote-detail-table thead th:not(:first-child) {
text-align: right;
}
.bathgiant-account-quote-detail-table tbody tr:nth-child(even) td {
background: #f8fafc;
}
.bathgiant-account-quote-detail-table tbody tr:last-child td {
border-bottom: none;
}
.bathgiant-account-quote-detail-table tbody td:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.bathgiant-account-quote-detail-table tbody td.bathgiant-cart-cell-product {
text-align: left;
vertical-align: top;
}
.bathgiant-account-quote-detail-table--dual-pricing tbody td.bathgiant-quote-pricing-col--trade,
.bathgiant-account-quote-detail-table--dual-pricing tbody td.bathgiant-quote-pricing-col--customer {
text-align: right;
font-weight: 600;
}
.bathgiant-account-quote-detail-total {
margin: 1rem 0 0;
padding: 0.75rem 1rem;
font-size: 1rem;
border: 1px solid #dbe3ec;
border-radius: 10px;
background: #f8fafc;
max-width: 24rem;
margin-left: auto;
text-align: right;
font-variant-numeric: tabular-nums;
}
.bathgiant-account-quote-detail-total--trade,
.bathgiant-account-quote-detail-total--customer {
display: block;
max-width: 24rem;
margin-left: auto;
text-align: right;
}
.bathgiant-account-quote-detail-vat-note {
margin: 0.5rem 0 0;
max-width: 24rem;
margin-left: auto;
text-align: right;
font-size: 0.82rem;
color: #64748b;
} .bathgiant-intact-date-filter {
margin: 0 0 1rem;
padding: 0 0 1rem;
border-bottom: 1px solid #e2e8f0;
background: transparent;
}
.bathgiant-intact-date-filter__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
}
.bathgiant-intact-date-filter__field {
margin: 0;
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bathgiant-intact-date-filter__field label {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: #475569;
white-space: nowrap;
}
.bathgiant-intact-date-filter__field input[type="date"] {
width: 10.5rem;
max-width: 100%;
min-height: 2.25rem;
padding: 0.35rem 0.55rem;
border: 1px solid var(--bathgiant-border, #dbe3ec);
border-radius: 10px;
background: #fff;
font: inherit;
box-sizing: border-box;
color: #0f172a;
}
.bathgiant-intact-date-filter__actions {
margin: 0;
margin-left: auto;
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
.bathgiant-intact-date-filter .bathgiant-btn--compact {
min-height: 2.25rem;
padding: 0.35rem 0.85rem;
font-size: 0.875rem;
}
.bathgiant-intact-date-filter__clear {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
color: var(--bathgiant-doc-accent);
text-decoration: none;
white-space: nowrap;
}
.bathgiant-intact-date-filter__clear:hover,
.bathgiant-intact-date-filter__clear:focus-visible {
text-decoration: underline;
}
@media (max-width: 640px) {
.bathgiant-intact-date-filter__row {
align-items: stretch;
}
.bathgiant-intact-date-filter__field {
flex: 1 1 100%;
}
.bathgiant-intact-date-filter__field input[type="date"] {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.bathgiant-intact-date-filter__actions {
margin-left: 0;
width: 100%;
}
}
.bathgiant-instore-panel {
margin-top: 0;
}
.bathgiant-account-panel .bathgiant-instore-panel .bathgiant-intact-card--invoices,
.bathgiant-account-panel .bathgiant-instore-panel .bathgiant-intact-card--quotations {
margin-top: 0;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-account-panel .bathgiant-instore-panel .bathgiant-intact-table-wrap {
margin-top: 0;
}
.bathgiant-intact-doc-view__toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin-bottom: 1rem;
}
.bathgiant-intact-doc-brand {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem 1.25rem;
align-items: start;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 2px solid var(--bathgiant-doc-accent);
}
.bathgiant-intact-doc-brand__logo-wrap {
display: flex;
align-items: center;
min-width: 8rem;
}
.bathgiant-intact-doc-brand__logo-wrap img,
.bathgiant-intact-doc-brand__logo {
display: block;
max-height: 56px;
max-width: 220px;
width: auto;
height: auto;
object-fit: contain;
}
.bathgiant-intact-doc-brand__name {
font-size: 1.35rem;
font-weight: 700;
color: var(--bathgiant-doc-accent);
}
.bathgiant-intact-doc-brand__company {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.88rem;
color: #64748b;
}
.bathgiant-intact-doc-brand__line {
display: block;
}
.bathgiant-intact-doc-brand__doc {
text-align: right;
}
.bathgiant-intact-doc-brand__type {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.bathgiant-intact-doc-brand__number {
margin: 0.2rem 0 0;
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-intact-doc-brand__status {
margin: 0.35rem 0 0;
}
.bathgiant-intact-doc-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem 2rem;
margin-bottom: 1.25rem;
}
.bathgiant-intact-doc-meta-col__primary {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-intact-doc-meta-dl {
margin: 0;
font-size: 0.9rem;
}
.bathgiant-intact-doc-meta-dl > div {
display: grid;
grid-template-columns: minmax(7rem, 38%) 1fr;
gap: 0.35rem 0.75rem;
padding: 0.2rem 0;
border-bottom: 1px solid #f1f5f9;
}
.bathgiant-intact-doc-meta-dl dt {
margin: 0;
font-weight: 600;
color: #64748b;
}
.bathgiant-intact-doc-meta-dl dd {
margin: 0;
color: #0f172a;
}
.bathgiant-intact-doc-sheet__footer p {
margin: 0;
}
.bathgiant-intact-doc-sheet__footer p + p {
margin-top: 0.35rem;
}
.bathgiant-doc-sheet-footer__legal,
.bathgiant-doc-sheet-footer__company-no,
.bathgiant-quote-legal-footer,
.bathgiant-legal-registration,
.bathgiant-email-legal {
margin: 0.85rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: #64748b;
}
p.bathgiant-email-legal {
margin-top: 1.25rem;
font-size: 0.8rem;
color: #64748b;
}
@media print {
@page {
size: A4 portrait;
margin: 12mm 10mm 14mm;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
overflow: visible !important;
}
body * {
visibility: hidden;
}
#bathgiant-intact-doc-print,
#bathgiant-intact-doc-print *,
html.bathgiant-printing-training [data-bg-training-print].is-print-active,
html.bathgiant-printing-training [data-bg-training-print].is-print-active * {
visibility: visible !important;
box-sizing: border-box;
}
html.bathgiant-printing-training [data-bg-training-print]:not(.is-print-active) {
display: none !important;
visibility: hidden !important;
}
html.bathgiant-printing-training #bathgiant-intact-doc-print {
display: none !important;
visibility: hidden !important;
}
#bathgiant-intact-doc-print {
position: absolute;
left: 0;
top: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 2mm;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-brand {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
gap: 0.65rem 0.85rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-brand__logo {
max-width: 180px;
max-height: 48px;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-meta-grid {
gap: 0.85rem 1rem;
margin-bottom: 0.85rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-meta-col {
padding: 0.65rem 0.75rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-table-wrap--lines {
overflow: visible;
border-radius: 0;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines {
width: 100%;
max-width: 100%;
table-layout: fixed;
font-size: 0.72rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines thead th {
padding: 0.45rem 0.35rem;
font-size: 0.58rem;
letter-spacing: 0.04em;
white-space: normal;
line-height: 1.25;
hyphens: auto;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines tbody td {
padding: 0.45rem 0.35rem;
font-size: 0.72rem;
word-wrap: break-word;
overflow-wrap: anywhere;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__product {
white-space: normal;
font-size: 0.68rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__desc {
min-width: 0;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines tbody td.bathgiant-intact-table__num {
white-space: nowrap;
font-size: 0.7rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(1),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(1) {
width: 11%;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(2),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(2) {
width: 28%;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(3),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(3) {
width: 7%;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(4),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(4),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(5),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(5),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(6),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(6),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines th:nth-child(7),
#bathgiant-intact-doc-print .bathgiant-intact-table--lines td:nth-child(7) {
width: 12%;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-sheet__section--totals {
margin-top: 0.85rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-totals {
max-width: 52%;
font-size: 0.78rem;
}
#bathgiant-intact-doc-print .bathgiant-intact-doc-totals th,
#bathgiant-intact-doc-print .bathgiant-intact-doc-totals td {
padding: 0.4rem 0.5rem;
}
.bathgiant-no-print,
.bathgiant-account-tabs,
.bathgiant-account-drawer,
.site-header,
.site-footer,
#wpadminbar {
display: none !important;
}
#bathgiant-intact-doc-print .bathgiant-intact-table--lines thead th,
.bathgiant-account-quote-detail-table thead th {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print].is-print-active {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 3mm !important;
border: none !important;
background: #fff !important;
color: #111 !important;
display: block !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
z-index: 99999 !important;
clip: auto !important;
white-space: normal !important;
font-family: Georgia, "Times New Roman", Times, serif;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__cover {
margin: 0 0 1.35rem;
padding: 0 0 1rem;
border-bottom: 2.5px solid #1e3a5f;
page-break-after: avoid;
break-after: avoid;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__brand-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 1rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__logo-wrap {
flex: 0 1 auto;
min-width: 0;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__logo {
display: block;
max-width: 200px;
max-height: 52px;
width: auto;
height: auto;
object-fit: contain;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__logo-text {
display: block;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #1e3a5f;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__doc-mark {
flex: 0 0 auto;
text-align: right;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__doc-kicker {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1e3a5f;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__doc-audience {
margin: 0.2rem 0 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__hero {
margin: 0 0 0.9rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__eyebrow {
margin: 0 0 0.25rem;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__title {
margin: 0 0 0.45rem;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1.75rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #0f172a;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__lede {
margin: 0;
max-width: 38rem;
font-size: 0.92rem;
line-height: 1.45;
color: #334155;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__meta-grid {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1.25rem;
margin: 0;
padding: 0.65rem 0.75rem;
border: 1px solid #cbd5e1;
background: #f8fafc;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__meta-item {
margin: 0;
min-width: 5.5rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__meta-item dt {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__meta-item dd {
margin: 0.15rem 0 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.88rem;
font-weight: 700;
color: #0f172a;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__module {
margin: 0 0 1.15rem;
padding-top: 0.15rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__module-title {
display: block;
margin: 0 0 0.7rem;
padding: 0.35rem 0 0.4rem;
border-bottom: 2px solid #1e3a5f;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
page-break-after: avoid;
break-after: avoid-page;
-webkit-column-break-after: avoid;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__module-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
margin-right: 0.45rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__step {
display: table;
width: 100%;
table-layout: fixed;
margin: 0 0 0.85rem;
padding: 0.55rem 0.65rem 0.7rem;
border: 1px solid #e2e8f0;
border-left: 3px solid #1e3a5f;
background: #fff;
break-inside: avoid-page !important;
page-break-inside: avoid !important;
-webkit-column-break-inside: avoid !important;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__step-head {
display: block;
margin-bottom: 0.35rem;
page-break-after: avoid;
break-after: avoid-page;
-webkit-column-break-after: avoid;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__step-num {
display: inline-block;
padding: 0.12rem 0.45rem;
border-radius: 3px;
background: #1e3a5f;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
vertical-align: middle;
margin-right: 0.45rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__step-title {
display: inline;
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.25;
color: #0f172a;
vertical-align: middle;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__hints {
margin: 0 0 0.45rem;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.75rem;
color: #64748b;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body {
font-size: 0.9rem;
line-height: 1.5;
color: #1e293b;
orphans: 3;
widows: 3;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body p,
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body ul,
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body ol {
margin: 0 0 0.45rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body ul,
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body ol {
padding-left: 1.2rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__body strong {
color: #0f172a;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-user-guide-training__tip {
margin: 0.5rem 0;
padding: 0.45rem 0.6rem;
border: 1px solid #94a3b8;
border-left: 3px solid #64748b;
background: #f1f5f9;
page-break-inside: avoid;
break-inside: avoid;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-user-guide-training__tip-label {
display: block;
margin-bottom: 0.15rem;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #475569;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__empty {
margin: 0;
font-size: 0.85rem;
color: #64748b;
font-style: italic;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__figure {
margin: 0.6rem 0 0;
max-width: 100%;
page-break-inside: avoid;
break-inside: avoid;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__figure img {
max-width: 55%;
max-height: 120px;
width: auto;
height: auto;
border: 1px solid #e2e8f0;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__figure:not(:has(img)),
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__figure img[src=""] {
display: none !important;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem 1.25rem;
margin-top: 1.35rem;
padding-top: 0.85rem;
border-top: 2px solid #1e3a5f;
page-break-inside: avoid;
break-inside: avoid;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__footer-brand {
display: flex;
align-items: center;
gap: 0.55rem;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__footer-logo {
display: block;
max-width: 120px;
max-height: 28px;
width: auto;
height: auto;
object-fit: contain;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__footer-name {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.78rem;
font-weight: 700;
color: #1e3a5f;
}
html.bathgiant-printing-training [data-bg-training-print] .bathgiant-training-print__footer-note {
margin: 0;
flex: 1 1 14rem;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.78rem;
line-height: 1.4;
color: #475569;
text-align: right;
}
}
.bathgiant-intact-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.85rem;
}
.bathgiant-intact-contact-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1rem 1.05rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fafbfc;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.bathgiant-intact-contact-card:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.bathgiant-intact-contact-card.is-using {
border-color: #0f766e;
background: #f0fdfa;
box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.18);
}
.bathgiant-intact-contact-card.is-saving {
opacity: 0.72;
pointer-events: none;
}
.bathgiant-intact-contact-card__using-badge {
margin: 0;
align-self: flex-start;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #0f766e;
}
.bathgiant-intact-delivery-sites-feedback {
margin: 0 0 0.85rem;
padding: 0.75rem 0.9rem;
border-radius: 10px;
border: 1px solid #99f6e4;
background: #f0fdfa;
color: #115e59;
font-size: 0.92rem;
line-height: 1.4;
}
.bathgiant-intact-delivery-sites-feedback.is-error {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.bathgiant-intact-contact-card__action .bathgiant-btn.is-using {
cursor: default;
}
.bathgiant-intact-contact-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
}
.bathgiant-intact-contact-card__head-main {
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-intact-contact-card__hide {
margin: 0;
flex: 0 0 auto;
}
.bathgiant-intact-contact-card__hide-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #94a3b8;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.bathgiant-intact-contact-card__hide-btn .bathgiant-cta-icon {
display: inline-flex;
}
.bathgiant-intact-contact-card__hide-btn:hover,
.bathgiant-intact-contact-card__hide-btn:focus-visible {
color: #64748b;
background: #f1f5f9;
}
.bathgiant-intact-contact-card__name {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
line-height: 1.3;
}
.bathgiant-intact-contact-card__company {
margin: 0.15rem 0 0;
font-size: 0.88rem;
color: #64748b;
}
.bathgiant-intact-contact-card__address {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: #334155;
}
.bathgiant-intact-contact-card__meta {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.88rem;
color: #475569;
}
.bathgiant-intact-contact-card__meta li + li {
margin-top: 0.25rem;
}
.bathgiant-intact-contact-card__meta-label {
font-weight: 600;
color: #64748b;
}
.bathgiant-intact-contact-card__foot {
margin-top: auto;
padding-top: 0.35rem;
}
.bathgiant-intact-contact-card__action {
margin: 0;
}
.bathgiant-account-address-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.bathgiant-account-address-card {
margin: 0;
}
.bathgiant-account-address-card .bathgiant-field,
.bathgiant-account-form .bathgiant-field {
margin: 0 0 0.75rem;
}
.bathgiant-field label {
display: block;
margin-bottom: 0.3rem;
font-weight: 600;
font-size: 0.88rem;
color: #334155;
}
.bathgiant-field input {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.bathgiant-field--country {
max-width: 5rem;
text-transform: uppercase;
}
.bathgiant-account-intact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1rem;
margin-bottom: 0.25rem;
}
.bathgiant-account-intact-form-grid .bathgiant-field--wide {
grid-column: 1 / -1;
}
.bathgiant-account-form__actions {
margin: 0.5rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid #eef2f7;
}
.bathgiant-required {
color: #b91c1c;
font-weight: 700;
}
@media (max-width: 900px) {
.bathgiant-intact-account__hero {
flex-direction: column;
}
.bathgiant-intact-account__hero-actions {
align-items: stretch;
width: 100%;
}
.bathgiant-intact-account__code {
align-items: flex-start;
text-align: left;
}
.bathgiant-account-address-columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.bathgiant-account-intact-form-grid {
grid-template-columns: 1fr;
}
.bathgiant-intact-dl__row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
.bathgiant-account-profile__section-head {
flex-direction: column;
}
.bathgiant-account-profile__trade-actions {
align-items: stretch;
width: 100%;
}
.bathgiant-account-profile__code {
align-items: flex-start;
text-align: left;
}
.bathgiant-account-profile-dl__row {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}
.bathgiant-account-tabs-layout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem 1.25rem;
margin: 0.4rem 0 1.25rem;
}
.bathgiant-account-tabs-group {
flex: 0 1 auto;
min-width: 0;
} .bathgiant-account-dashboard-page {
font-family: var(--bathgiant-font-sans);
--bathgiant-dashboard-active-top: var(--bathgiant-brand);
--bathgiant-dashboard-active-bottom: var(--bathgiant-brand-deep);
--bathgiant-dashboard-active-gradient: linear-gradient(
180deg,
var(--bathgiant-dashboard-active-top) 0%,
var(--bathgiant-dashboard-active-bottom) 100%
);
--bathgiant-dashboard-active-shadow: 0 1px 2px color-mix(in srgb, var(--bathgiant-dashboard-active-bottom) 35%, transparent);
--bathgiant-dashboard-soft-bg: var(--bathgiant-brand-wash);
--bathgiant-dashboard-soft-border: color-mix(in srgb, var(--bathgiant-brand) 32%, var(--bathgiant-border));
--bathgiant-dashboard-soft-text: var(--bathgiant-brand-deep);
} .bathgiant-account-dashboard-page code,
.bathgiant-account-dashboard-page kbd,
.bathgiant-account-dashboard-page samp {
font-family: var(--bathgiant-font-sans);
}
.bathgiant-account-dashboard-head {
display: flex;
align-items: center;
gap: 0.75rem 1rem;
margin: 0 0 1.25rem;
}
.bathgiant-account-dashboard-head .bathgiant-account-tabs-layout {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.bathgiant-account-dashboard-head__tools {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
overflow: visible;
}
.bathgiant-account-dashboard-notifications {
display: none;
position: relative;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
color: #475569;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bathgiant-account-dashboard-notifications:hover,
.bathgiant-account-dashboard-notifications:focus-visible {
background: #fff;
color: #1e293b;
border-color: #cbd5e1;
outline: none;
}
body.bathgiant-account-dashboard-focus .bathgiant-account-dashboard-notifications {
display: inline-flex;
}
.bathgiant-account-customer-link {
font-family: var(--bathgiant-font-sans);
color: var(--bathgiant-brand-deep, #1d4ed8);
font-weight: 600;
text-decoration: none;
text-underline-offset: 0.12em;
}
.bathgiant-account-customer-link:hover,
.bathgiant-account-customer-link:focus-visible {
color: var(--bathgiant-brand, #2563eb);
text-decoration: underline;
outline: none;
}
.bathgiant-account-contact-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 100%;
padding: 0.3rem 0.62rem 0.3rem 0.5rem;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #334155;
font-family: var(--bathgiant-font-sans);
font-size: 0.84rem;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
word-break: break-word;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-contact-link:hover,
.bathgiant-account-contact-link:focus-visible {
background: #fff;
border-color: color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 28%, #cbd5e1);
color: var(--bathgiant-brand-deep, var(--bathgiant-brand, #7f1d1d));
text-decoration: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 12%, transparent);
outline: none;
}
.bathgiant-account-contact-link .bathgiant-cta-icon {
flex-shrink: 0;
color: #64748b;
}
.bathgiant-account-contact-link .bathgiant-cta-icon svg {
display: block;
width: 15px;
height: 15px;
}
.bathgiant-account-contact-link:hover .bathgiant-cta-icon,
.bathgiant-account-contact-link:focus-visible .bathgiant-cta-icon {
color: currentColor;
}
.bathgiant-account-contact-link--table {
font-size: 0.8rem;
padding: 0.24rem 0.5rem 0.24rem 0.42rem;
position: relative;
} .bathgiant-account-quotes-table-wrap .bathgiant-tooltip,
.bathgiant-account-data-table-wrap .bathgiant-tooltip,
.bathgiant-account-orders-table-wrap .bathgiant-tooltip,
.bathgiant-branch-orders-table-wrap .bathgiant-tooltip,
.bathgiant-trade-customers-table-wrap .bathgiant-tooltip,
.bathgiant-branch-customers-table-wrap .bathgiant-tooltip,
.bathgiant-branch-quotes-table-wrap .bathgiant-tooltip,
.bathgiant-customer-dashboard__table-wrap .bathgiant-tooltip {
display: none !important;
}
.bathgiant-account-dashboard-page .bathgiant-account-contact-link.bathgiant-has-tooltip,
.bathgiant-account-dashboard-page .bathgiant-account-quotes-actions .bathgiant-has-tooltip,
.bathgiant-account-dashboard-page .bathgiant-trade-customers-actions-cell .bathgiant-has-tooltip {
position: relative;
} .bathgiant-account-dashboard-page .bathgiant-account-contact-link .bathgiant-tooltip {
bottom: auto;
top: calc(100% + 0.4rem);
transform: translateX(-50%) translateY(-4px);
width: max-content;
max-width: min(22rem, 80vw);
white-space: nowrap;
}
.bathgiant-account-dashboard-page .bathgiant-account-contact-link .bathgiant-tooltip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #0f172a;
}
.bathgiant-account-dashboard-page .bathgiant-account-contact-link.bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-dashboard-page .bathgiant-account-contact-link.bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
z-index: 30;
}
@media (hover: none) {
.bathgiant-account-dashboard-page .bathgiant-account-contact-link.bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
} .bathgiant-tooltip-portal {
position: fixed;
z-index: 10060;
left: 0;
top: 0;
max-width: min(22rem, calc(100vw - 1.5rem));
padding: 0.35rem 0.65rem;
border-radius: 8px;
background: #0f172a;
color: #f8fafc;
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
text-align: center;
white-space: normal;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}
.bathgiant-tooltip-portal.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bathgiant-tooltip-portal::after {
content: "";
position: absolute;
left: var(--bathgiant-tooltip-arrow-left, 50%);
transform: translateX(-50%);
border: 5px solid transparent;
}
.bathgiant-tooltip-portal--below::after {
bottom: 100%;
border-bottom-color: #0f172a;
}
.bathgiant-tooltip-portal--above::after {
top: 100%;
border-top-color: #0f172a;
}
.bathgiant-account-contact-link--email {
font-variant-numeric: normal;
}
.bathgiant-quote-detail__meta-value .bathgiant-account-contact-link,
.bathgiant-appointment-detail__contact-item .bathgiant-account-contact-link {
margin-top: 0.05rem;
}
.bathgiant-branch-trade-account-detail__back,
.bathgiant-branch-trade-customer-detail__account {
margin: 0 0 0.75rem;
}
.bathgiant-branch-trade-account-detail__section,
.bathgiant-branch-trade-customer-detail__quotes {
margin-top: 1rem;
}
.bathgiant-branch-trade-account-detail__customer-list,
.bathgiant-branch-trade-customer-detail__quote-list {
margin: 0.5rem 0 0;
padding-left: 1.1rem;
}
.bathgiant-branch-trade-account-detail__section-title,
.bathgiant-branch-trade-customer-detail__section-title {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 700;
}
.bathgiant-customer-dashboard__stats {
margin: 0;
}
.bathgiant-customer-dashboard__section {
margin: 0;
padding: 0.85rem 1rem;
}
.bathgiant-customer-dashboard__section-title {
margin: 0 0 0.65rem;
font-family: var(--bathgiant-font-display);
font-size: 1rem;
font-weight: 700;
}
.bathgiant-customer-dashboard__customer-name {
font-family: var(--bathgiant-font-sans);
font-weight: 600;
color: #0f172a;
}
a.bathgiant-customer-dashboard__customer-name {
color: var(--bathgiant-brand-deep, #1d4ed8);
}
.bathgiant-customer-dashboard__email-subject {
font-family: var(--bathgiant-font-sans);
font-weight: 600;
color: #0f172a;
}
.bathgiant-customer-dashboard__subtitle {
margin: 0.35rem 0 0.75rem;
color: #475569;
font-size: 0.95rem;
}
.bathgiant-customer-dashboard__subtitle a {
font-weight: 600;
}
.bathgiant-customer-dashboard__link-list {
margin: 0;
padding-left: 1.1rem;
} .bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers {
min-width: 36rem;
table-layout: fixed;
}
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers th:nth-child(1),
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers td:nth-child(1) {
width: 22%;
}
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers th:nth-child(2),
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers td:nth-child(2) {
width: 30%;
}
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers th:nth-child(3),
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers td:nth-child(3) {
width: 22%;
}
.bathgiant-customer-dashboard__actions-cell {
width: 11.5rem;
min-width: 11.5rem;
max-width: 12.5rem;
vertical-align: middle;
overflow: visible;
}
.bathgiant-customer-dashboard__actions-row {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.45rem;
width: 100%;
}
.bathgiant-customer-dashboard__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 2.125rem;
box-sizing: border-box;
padding: 0.48rem 0.85rem;
margin: 0;
white-space: nowrap;
overflow: visible;
text-align: center;
text-decoration: none;
font-size: var(--bathgiant-btn-font-size);
line-height: var(--bathgiant-btn-line-height);
font-weight: var(--bathgiant-btn-font-weight);
position: static;
transform: none;
}
.bathgiant-customer-dashboard__action .bathgiant-cta-icon {
flex-shrink: 0;
line-height: 0;
}
.bathgiant-customer-dashboard__action .bathgiant-cta-icon svg {
display: block;
width: 14px;
height: 14px;
}
.bathgiant-customer-dashboard__action--edit {
background: #fff;
color: var(--bathgiant-nav-ink, #17365d);
border: 1px solid color-mix(in srgb, var(--bathgiant-nav-ink, #17365d) 32%, #cbd5e1);
box-shadow: none;
}
.bathgiant-customer-dashboard__action--edit:hover,
.bathgiant-customer-dashboard__action--edit:focus-visible {
background: #f8fafc;
color: var(--bathgiant-brand-deep, #2f68c4);
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 18%, transparent);
transform: none;
}
.bathgiant-customer-dashboard__action--view {
box-shadow: 0 2px 10px var(--bathgiant-btn-shadow);
}
.bathgiant-customer-dashboard__action--view:hover,
.bathgiant-customer-dashboard__action--view:focus-visible {
transform: none;
}
@media (max-width: 720px) {
.bathgiant-customer-dashboard__section--saved-customers .bathgiant-customer-dashboard__table--saved-customers {
min-width: 0;
table-layout: auto;
}
.bathgiant-customer-dashboard__actions-cell {
width: auto;
min-width: 0;
max-width: none;
}
.bathgiant-customer-dashboard__actions-row {
flex-direction: row;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-customer-dashboard__action {
flex: 1 1 calc(50% - 0.25rem);
width: auto;
min-height: 2.75rem;
}
}
.bathgiant-customer-dashboard__muted {
color: #94a3b8;
}
.bathgiant-branch-trade-customer-edit {
margin: 0;
}
.bathgiant-customer-dashboard__empty {
margin: 0;
}
.bathgiant-customer-dashboard__table-wrap {
margin-top: 0.35rem;
}
.bathgiant-trade-customer-dash--quotes {
margin-top: 1rem;
}
.bathgiant-trade-customer-dash--sites {
margin-top: 1rem;
}
.bathgiant-trade-customer-sites__head {
margin: 0 0 0.75rem;
padding: 0;
}
.bathgiant-trade-customer-sites__actions {
margin: 0.75rem 0 0;
}
.bathgiant-trade-customer-sites .bathgiant-intact-contact-card__head {
align-items: flex-start;
gap: 0.75rem;
}
.bathgiant-trade-customer-sites__edit {
flex-shrink: 0;
}
.bathgiant-intact-account--embedded > .bathgiant-trade-customer-dash__back {
margin-bottom: 0.75rem;
}
.bathgiant-trade-customer-dash--quotes .bathgiant-account-panel__head {
margin: 0 0 0.75rem;
padding-top: 0;
}
.bathgiant-account-dashboard-insights-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
height: auto;
padding: calc(3px + 0.35rem) 0.62rem;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
color: #475569;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-dashboard-insights-btn:hover,
.bathgiant-account-dashboard-insights-btn:focus-visible {
background: #fff;
color: #1e293b;
border-color: #cbd5e1;
outline: none;
}
.bathgiant-account-dashboard-insights-btn.is-active {
background: var(--bathgiant-dashboard-active-gradient);
color: #fff;
border-color: transparent;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
.bathgiant-account-dashboard-insights-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bathgiant-account-dashboard-insights-btn__icon svg {
display: block;
width: 15px;
height: 15px;
}
.bathgiant-account-dashboard-training-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
height: auto;
padding: calc(3px + 0.35rem) 0.62rem;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
color: #475569;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-dashboard-training-btn:hover,
.bathgiant-account-dashboard-training-btn:focus-visible {
background: #fff;
color: #1e293b;
border-color: #cbd5e1;
outline: none;
}
.bathgiant-account-dashboard-training-btn.is-active {
background: var(--bathgiant-dashboard-active-gradient);
color: #fff;
border-color: transparent;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
.bathgiant-account-dashboard-training-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bathgiant-account-dashboard-training-btn__icon svg {
display: block;
width: 15px;
height: 15px;
}
.bathgiant-account-tabs__tab--icon-only {
padding: 0.45rem 0.62rem;
min-width: 2.35rem;
justify-content: center;
}
.bathgiant-account-tabs .bathgiant-has-tooltip,
.bathgiant-account-source-tabs .bathgiant-has-tooltip,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip,
.bathgiant-footer-launchers .bathgiant-has-tooltip {
position: relative;
}
.bathgiant-account-tabs .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-tabs .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-source-tabs .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.bathgiant-account-tabs .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
}
.bathgiant-footer-launchers .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-footer-launchers .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-footer-launchers .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.bathgiant-footer-launchers .bathgiant-has-tooltip .bathgiant-tooltip {
bottom: calc(100% + 0.55rem);
top: auto;
left: 0;
right: auto;
width: 15rem;
max-width: min(15rem, calc(100vw - 1.5rem));
transform: translateY(4px);
z-index: 100050;
white-space: normal;
text-align: left;
line-height: 1.45;
}
.bathgiant-footer-launchers .bathgiant-has-tooltip .bathgiant-tooltip::after {
top: 100%;
bottom: auto;
left: 0.85rem;
right: auto;
transform: none;
border-top-color: #0f172a;
border-bottom-color: transparent;
}
.bathgiant-account-dashboard-head .bathgiant-has-tooltip .bathgiant-tooltip {
z-index: 30;
}
.bathgiant-account-tabs .bathgiant-has-tooltip .bathgiant-tooltip,
.bathgiant-account-source-tabs .bathgiant-has-tooltip .bathgiant-tooltip,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip .bathgiant-tooltip {
top: calc(100% + 0.55rem);
bottom: auto;
left: 50%;
right: auto;
width: 14rem;
max-width: min(14rem, calc(100vw - 1.5rem));
transform: translateX(-50%) translateY(-4px);
z-index: 100060;
white-space: normal;
text-align: left;
line-height: 1.45;
}
.bathgiant-account-tabs .bathgiant-has-tooltip .bathgiant-tooltip::after,
.bathgiant-account-source-tabs .bathgiant-has-tooltip .bathgiant-tooltip::after,
.bathgiant-account-dashboard-head .bathgiant-has-tooltip .bathgiant-tooltip::after {
top: auto;
bottom: 100%;
left: 50%;
right: auto;
transform: translateX(-50%);
border-top-color: transparent;
border-bottom-color: #0f172a;
} .bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-child(-n+3) .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:first-child .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:first-child .bathgiant-tooltip {
left: 0;
right: auto;
transform: translateY(-4px);
}
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-child(-n+3) .bathgiant-tooltip::after,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:first-child .bathgiant-tooltip::after,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:first-child .bathgiant-tooltip::after {
left: 0.85rem;
right: auto;
transform: none;
}
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-child(-n+3):hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-child(-n+3):focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:first-child:hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:first-child:focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:first-child:hover .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:first-child:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-child(-n+3):focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:first-child:focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:first-child:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
} .bathgiant-account-dashboard-head__tools .bathgiant-has-tooltip .bathgiant-tooltip,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-last-child(-n+3):not(:nth-child(-n+3)) .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:last-child:not(:first-child) .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:last-child:not(:first-child) .bathgiant-tooltip {
left: auto;
right: 0;
transform: translateY(-4px);
}
.bathgiant-account-dashboard-head__tools .bathgiant-has-tooltip .bathgiant-tooltip::after,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-last-child(-n+3):not(:nth-child(-n+3)) .bathgiant-tooltip::after,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:last-child:not(:first-child) .bathgiant-tooltip::after,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:last-child:not(:first-child) .bathgiant-tooltip::after {
left: auto;
right: 0.85rem;
transform: none;
}
.bathgiant-account-dashboard-head__tools .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-dashboard-head__tools .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-last-child(-n+3):not(:nth-child(-n+3)):hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-last-child(-n+3):not(:nth-child(-n+3)):focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):hover .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-account-dashboard-head__tools .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs > .bathgiant-has-tooltip:nth-last-child(-n+3):not(:nth-child(-n+3)):focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):focus-visible .bathgiant-tooltip,
.bathgiant-account-source-tabs > .bathgiant-has-tooltip:last-child:not(:first-child):focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
} .bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs {
overflow: visible;
} @media (min-width: 721px) {
.bathgiant-account-tabs-layout,
.bathgiant-account-tabs-group,
.bathgiant-account-dashboard-head .bathgiant-account-tabs-layout,
.bathgiant-account-dashboard-head .bathgiant-account-tabs-group,
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__head,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs-group__head,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__head {
overflow: visible;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs {
flex-wrap: wrap;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0;
}
} .bathgiant-account-tabs-group--activity .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip {
left: 0;
right: auto;
transform: translateY(-4px);
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip::after,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip::after {
left: 0.85rem;
right: auto;
transform: none;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs > .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs > .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
} .bathgiant-account-tabs-group--settings .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip {
left: auto;
right: 0;
transform: translateY(-4px);
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs > .bathgiant-has-tooltip .bathgiant-tooltip::after {
left: auto;
right: 0.85rem;
transform: none;
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs > .bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
@media (hover: none) {
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs > .bathgiant-has-tooltip:focus-visible .bathgiant-tooltip {
transform: translateY(0);
}
}
.bathgiant-branch-insights--hide-sales-panels .bathgiant-branch-insights__section--sales,
.bathgiant-branch-insights--hide-sales-panels .bathgiant-branch-insights__section--brand-sales {
display: none;
}
.bathgiant-branch-insights__intro {
margin: 0 0 1.25rem;
font-size: 0.95rem;
line-height: 1.5;
color: #475569;
}
.bathgiant-admin-insights__branch-table-wrap,
.bathgiant-admin-insights__training-table-wrap {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 0.5rem;
}
.bathgiant-admin-insights__branch-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.bathgiant-admin-insights__branch-table th,
.bathgiant-admin-insights__branch-table td {
padding: 0.55rem 0.65rem;
border-bottom: 1px solid #e2e8f0;
text-align: left;
white-space: nowrap;
}
.bathgiant-admin-insights__branch-table thead th {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #64748b;
background: #f8fafc;
}
.bathgiant-admin-insights__branch-table tbody th {
font-weight: 600;
color: #1e293b;
}
.bathgiant-admin-insights__section--training-detail {
margin-top: -0.35rem;
}
.bathgiant-admin-insights__training-chart {
--bi-training-staff: var(--bathgiant-brand, #3d7dd9);
--bi-training-trade: var(--bathgiant-trade, #c41e1e);
margin: 0 0 1rem;
padding: 0.95rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
}
.bathgiant-admin-insights__training-chart-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin: 0 0 0.85rem;
}
.bathgiant-admin-insights__training-chart-title {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-admin-insights__training-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.75rem;
}
.bathgiant-admin-insights__training-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.74rem;
font-weight: 600;
color: #475569;
}
.bathgiant-admin-insights__training-chart-legend-item::before {
content: '';
display: inline-block;
width: 0.72rem;
height: 0.72rem;
border-radius: 3px;
}
.bathgiant-admin-insights__training-chart-legend-item--staff::before {
background: var(--bi-training-staff);
}
.bathgiant-admin-insights__training-chart-legend-item--trade::before {
background: var(--bi-training-trade);
}
.bathgiant-admin-insights__training-chart-body {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.bathgiant-admin-insights__training-chart-row {
display: grid;
grid-template-columns: minmax(5.5rem, 8.5rem) minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: center;
}
.bathgiant-admin-insights__training-chart-values {
opacity: 0;
transition: opacity 0.42s ease;
transition-delay: 0s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-values {
opacity: 1;
}
.bathgiant-admin-insights__training-chart-label {
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bathgiant-admin-insights__training-chart-bar-wrap {
min-width: 0;
height: 1.15rem;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
}
.bathgiant-admin-insights__training-chart-bar {
display: flex;
align-items: stretch;
min-width: 0;
max-width: 100%;
height: 100%;
border-radius: 999px;
overflow: hidden;
width: 0%;
transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 0s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-bar {
width: var(--bi-bar-width, 100%);
}
.bathgiant-admin-insights__training-chart-seg {
display: block;
min-width: 0;
height: 100%;
}
.bathgiant-admin-insights__training-chart-seg--staff {
background: var(--bi-training-staff);
}
.bathgiant-admin-insights__training-chart-seg--trade {
background: var(--bi-training-trade);
}
.bathgiant-admin-insights__training-chart-values {
display: inline-flex;
align-items: baseline;
gap: 0.2rem;
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
}
.bathgiant-admin-insights__training-chart-value--staff {
color: var(--bi-training-staff);
}
.bathgiant-admin-insights__training-chart-value--trade {
color: var(--bi-training-trade);
}
.bathgiant-admin-insights__training-chart-value-sep {
color: #94a3b8;
font-weight: 500;
}
.bathgiant-admin-insights__training-table-wrap {
margin: 0; }
.bathgiant-admin-insights__training-table td strong {
color: #0f172a;
}
.bathgiant-admin-insights__training-count {
appearance: none;
margin: -0.2rem;
padding: 0.2rem;
border: 0;
border-radius: 4px;
color: #175ea8;
background: transparent;
font: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
cursor: pointer;
}
.bathgiant-admin-insights__training-count:hover {
color: #0f3f73;
background: #eff6ff;
}
.bathgiant-admin-insights__training-count:focus-visible {
outline: 2px solid var(--bathgiant-brand, #3d7dd9);
outline-offset: 2px;
}
body.bathgiant-training-dialog-open {
overflow: hidden;
}
.bathgiant-admin-insights__training-dialog {
position: fixed;
z-index: 100050;
inset: 0;
display: grid;
place-items: center;
padding: 1rem;
}
.bathgiant-admin-insights__training-dialog[hidden] {
display: none;
}
.bathgiant-admin-insights__training-dialog-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.62);
}
.bathgiant-admin-insights__training-dialog-panel {
position: relative;
display: flex;
flex-direction: column;
width: min(68rem, 100%);
max-height: min(82vh, 50rem);
overflow: hidden;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #fff;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}
.bathgiant-admin-insights__training-dialog-panel:focus {
outline: none;
}
.bathgiant-admin-insights__training-dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-admin-insights__training-dialog-head-main {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-admin-insights__training-dialog-eyebrow {
margin: 0 0 0.25rem;
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-admin-insights__training-dialog-head h5 {
margin: 0;
font-size: 1.05rem;
color: #172033;
}
.bathgiant-admin-insights__training-dialog-head [data-bg-training-dialog-summary] {
margin: 0.3rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-admin-insights__training-dialog-close {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
background: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.bathgiant-admin-insights__training-dialog-close:hover {
background: #f1f5f9;
}
.bathgiant-admin-insights__training-dialog-close:focus-visible {
outline: 2px solid var(--bathgiant-brand, #3d7dd9);
outline-offset: 2px;
}
.bathgiant-admin-insights__training-dialog-body {
min-height: 7rem;
overflow: auto;
padding: 1rem 1.1rem 1.1rem;
}
.bathgiant-admin-insights__training-dialog-table-wrap {
overflow-x: auto;
}
.bathgiant-admin-insights__training-dialog-table th:last-child,
.bathgiant-admin-insights__training-dialog-table td:last-child {
white-space: normal;
min-width: 10rem;
}
.bathgiant-admin-insights__training-dialog-duration {
white-space: nowrap;
}
.bathgiant-admin-insights__training-dialog-status {
margin: 1.5rem 0;
text-align: center;
color: #64748b;
}
.bathgiant-admin-insights__training-dialog-status--error {
color: #b42318;
}
@media (max-width: 720px) {
.bathgiant-admin-insights__training-chart-row {
grid-template-columns: minmax(0, 1fr);
gap: 0.3rem;
}
.bathgiant-admin-insights__training-chart-values {
justify-content: flex-end;
}
.bathgiant-admin-insights__training-dialog {
padding: 0.5rem;
}
.bathgiant-admin-insights__training-dialog-panel {
max-height: 92vh;
}
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(1) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(1) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.08s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(2) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(2) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.14s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(3) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(3) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.2s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(4) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(4) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.26s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(5) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(5) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.32s;
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(n+6) .bathgiant-admin-insights__training-chart-values,
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-row:nth-child(n+6) .bathgiant-admin-insights__training-chart-bar {
transition-delay: 0.38s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg:nth-child(1) {
transition-delay: 0.08s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg:nth-child(2) {
transition-delay: 0.18s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg:nth-child(3) {
transition-delay: 0.28s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg:nth-child(4) {
transition-delay: 0.38s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg:nth-child(5) {
transition-delay: 0.48s;
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-orders-summary__value {
opacity: 0;
transition: opacity 0.42s ease;
transition-delay: 0s;
}
.bathgiant-branch-insights__stat--has-chart.is-chart-in-view .bathgiant-branch-orders-summary__value {
opacity: 1;
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat--has-chart:nth-child(1).is-chart-in-view .bathgiant-branch-orders-summary__value {
transition-delay: 0.04s;
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat--has-chart:nth-child(2).is-chart-in-view .bathgiant-branch-orders-summary__value {
transition-delay: 0.1s;
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat--has-chart:nth-child(3).is-chart-in-view .bathgiant-branch-orders-summary__value {
transition-delay: 0.16s;
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat--has-chart:nth-child(4).is-chart-in-view .bathgiant-branch-orders-summary__value {
transition-delay: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-branch-insights__chart--donut,
.bathgiant-branch-insights__distribution-seg,
.bathgiant-branch-insights__share-bar > span,
.bathgiant-admin-insights__training-chart-bar,
.bathgiant-admin-insights__training-chart-row,
.bathgiant-branch-insights__sales-chart-bar,
.bathgiant-branch-insights__sales-chart-row,
.bathgiant-branch-insights__stat--has-chart,
.bathgiant-branch-insights__notifications-panel {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
.bathgiant-admin-insights__training-chart-values,
.bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-orders-summary__value,
.bathgiant-branch-insights__notifications-metric-value {
opacity: 1 !important;
}
.bathgiant-branch-insights__chart--donut.is-chart-in-view,
.bathgiant-branch-insights__stat--has-chart.is-chart-in-view .bathgiant-branch-insights__chart--donut,
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__chart--donut {
--bi-pct: var(--bi-pct-target, 0);
--bi-like-pct: var(--bi-like-pct-target, 0);
--bi-dislike-pct: var(--bi-dislike-pct-target, 0);
}
.bathgiant-admin-insights__training-chart-body.is-chart-in-view .bathgiant-admin-insights__training-chart-bar,
.bathgiant-branch-insights .bathgiant-admin-insights__training-chart-bar {
width: var(--bi-bar-width, 100%);
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-bar,
.bathgiant-branch-insights .bathgiant-branch-insights__sales-chart-bar {
width: var(--bi-bar-width, 100%);
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg,
.bathgiant-branch-insights .bathgiant-branch-insights__distribution-seg {
transform: scaleX(1);
}
.bathgiant-branch-insights__distribution,
.bathgiant-branch-insights__sales-chart-row,
.bathgiant-branch-insights__stat--has-chart,
.bathgiant-branch-insights__notifications-panel {
opacity: 1 !important;
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-orders-summary__value,
.bathgiant-branch-insights__notifications-metric-value {
opacity: 1 !important;
}
.bathgiant-branch-insights__stat--has-chart.is-chart-in-view .bathgiant-branch-insights__share-bar > span,
.bathgiant-branch-insights .bathgiant-branch-insights__share-bar > span {
width: calc(var(--bi-pct, 0) * 1%);
}
}
.bathgiant-branch-insights__section {
margin: 0 0 1.75rem;
}
.bathgiant-branch-insights__section-head {
margin: 0 0 0.75rem;
}
.bathgiant-branch-insights__section-head-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.bathgiant-branch-insights__section-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-branch-insights__section-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem 0.85rem;
margin: 0;
margin-left: auto;
}
.bathgiant-branch-insights__section-meta-item {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: #475569;
white-space: nowrap;
}
button.bathgiant-branch-insights__section-meta-item {
cursor: pointer;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--bathgiant-brand, #2563eb) 35%, transparent);
text-underline-offset: 0.12em;
}
button.bathgiant-branch-insights__section-meta-item:hover,
button.bathgiant-branch-insights__section-meta-item:focus-visible {
color: var(--bathgiant-brand-deep, #1d4ed8);
}
button.bathgiant-branch-insights__section-meta-item:focus-visible {
outline: 2px solid var(--bathgiant-brand, #2563eb);
outline-offset: 2px;
}
.bathgiant-branch-insights__section-meta-value {
font-size: 1rem;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
}
.bathgiant-branch-insights__section-meta-label {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
}
.bathgiant-branch-insights__section-lede {
margin: 0.35rem 0 0;
font-size: 0.875rem;
line-height: 1.45;
color: #64748b;
} .bathgiant-branch-insights,
.bathgiant-admin-insights {
max-width: 100%;
min-width: 0;
}
.bathgiant-branch-insights__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
gap: 0.75rem;
margin-bottom: 0;
max-width: 100%;
min-width: 0;
}
.bathgiant-branch-insights__grid:has(.bathgiant-branch-insights__stat--has-chart) {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}
.bathgiant-branch-insights__stat--link {
cursor: pointer;
text-align: left;
width: 100%;
font: inherit;
appearance: none;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bathgiant-branch-insights__stat--link:hover {
border-color: #cbd5e1;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.bathgiant-branch-insights__stat--link:focus-visible {
outline: 2px solid var(--bathgiant-brand, #2563eb);
outline-offset: 2px;
}
.bathgiant-branch-insights__foot {
margin: 0.5rem 0 0;
font-size: 0.8125rem;
color: #64748b;
}
.bathgiant-branch-insights__distribution {
margin: 0.75rem 0 0;
opacity: 0;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bathgiant-branch-insights__distribution.is-chart-in-view {
opacity: 1;
}
.bathgiant-branch-insights__grid + .bathgiant-branch-insights__distribution {
margin-top: 0.85rem;
margin-bottom: 0;
}
.bathgiant-branch-insights__distribution-bar {
display: flex;
align-items: stretch;
gap: 2px;
min-height: 0.45rem;
border-radius: 999px;
overflow: hidden;
background: #e2e8f0;
margin-bottom: 0.15rem;
}
.bathgiant-branch-insights__distribution-seg {
flex: 1 1 0;
min-width: 0.35rem;
background: var(--bi-tone-accent, #94a3b8);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 0s;
}
.bathgiant-branch-insights__distribution.is-chart-in-view .bathgiant-branch-insights__distribution-seg {
transform: scaleX(1);
}
.bathgiant-branch-insights__distribution-legend {
margin: 0.55rem 0 0;
font-size: 0.75rem;
line-height: 1.4;
color: #64748b;
}
.bathgiant-branch-insights__stat--tone-urgent {
--bi-tone-accent: #dc2626;
--bi-tone-bg: color-mix(in srgb, #dc2626 9%, #fff);
--bi-tone-border: color-mix(in srgb, #dc2626 22%, #e2e8f0);
--bi-tone-icon-bg: color-mix(in srgb, #dc2626 14%, #fff);
--bi-tone-icon: #b91c1c;
--bi-tone-value: #991b1b;
}
.bathgiant-branch-insights__stat--tone-warning {
--bi-tone-accent: #d97706;
--bi-tone-bg: color-mix(in srgb, #d97706 9%, #fff);
--bi-tone-border: color-mix(in srgb, #d97706 22%, #e2e8f0);
--bi-tone-icon-bg: color-mix(in srgb, #d97706 14%, #fff);
--bi-tone-icon: #b45309;
--bi-tone-value: #92400e;
}
.bathgiant-branch-insights__stat--tone-success {
--bi-tone-accent: #16a34a;
--bi-tone-bg: color-mix(in srgb, #16a34a 9%, #fff);
--bi-tone-border: color-mix(in srgb, #16a34a 22%, #e2e8f0);
--bi-tone-icon-bg: color-mix(in srgb, #16a34a 14%, #fff);
--bi-tone-icon: #15803d;
--bi-tone-value: #166534;
}
.bathgiant-branch-insights__stat--tone-info {
--bi-tone-accent: #0284c7;
--bi-tone-bg: color-mix(in srgb, #0284c7 9%, #fff);
--bi-tone-border: color-mix(in srgb, #0284c7 22%, #e2e8f0);
--bi-tone-icon-bg: color-mix(in srgb, #0284c7 14%, #fff);
--bi-tone-icon: #0369a1;
--bi-tone-value: #075985;
}
.bathgiant-branch-insights__stat--tone-brand {
--bi-tone-accent: var(--bathgiant-brand-deep, #1d4ed8);
--bi-tone-bg: color-mix(in srgb, var(--bathgiant-brand-deep, #1d4ed8) 9%, #fff);
--bi-tone-border: color-mix(in srgb, var(--bathgiant-brand-deep, #1d4ed8) 22%, #e2e8f0);
--bi-tone-icon-bg: color-mix(in srgb, var(--bathgiant-brand-deep, #1d4ed8) 14%, #fff);
--bi-tone-icon: var(--bathgiant-brand-deep, #1d4ed8);
--bi-tone-value: #1e3a8a;
}
.bathgiant-branch-insights__stat--tone-neutral {
--bi-tone-accent: #64748b;
--bi-tone-bg: #f8fafc;
--bi-tone-border: #e2e8f0;
--bi-tone-icon-bg: color-mix(in srgb, var(--bathgiant-brand-deep) 11%, #fff);
--bi-tone-icon: var(--bathgiant-brand-deep);
--bi-tone-value: var(--bathgiant-ink, #1a1a1a);
}
.bathgiant-branch-insights__stat[class*="--tone-"] {
background: var(--bi-tone-bg);
border-color: var(--bi-tone-border);
}
.bathgiant-branch-insights__stat[class*="--tone-"] .bathgiant-branch-orders-summary__icon {
background: var(--bi-tone-icon-bg);
color: var(--bi-tone-icon);
}
.bathgiant-branch-insights__stat[class*="--tone-"] .bathgiant-branch-orders-summary__value {
color: var(--bi-tone-value);
}
.bathgiant-branch-insights__stat-main,
.bathgiant-branch-insights__stat-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: 0.4rem;
row-gap: 0.3rem;
min-width: 0;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-orders-summary__body {
display: contents;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-orders-summary__icon {
grid-row: 1;
grid-column: 1;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-orders-summary__value {
grid-row: 1;
grid-column: 2;
align-self: center;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-orders-summary__label,
.bathgiant-branch-insights__stat-body .bathgiant-branch-insights__stat-hint {
grid-column: 1 / -1;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-orders-summary__label {
grid-row: 2;
}
.bathgiant-branch-insights__stat-body .bathgiant-branch-insights__stat-hint {
grid-row: 3;
}
.bathgiant-branch-insights__stat[class*="--tone-"] {
display: flex;
align-items: stretch;
gap: 0;
}
.bathgiant-branch-insights__stat--has-chart {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
padding: 0.95rem 0.9rem 0.9rem;
min-height: 7.5rem;
}
.bathgiant-branch-insights__chart-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.7rem 0.5rem 0.8rem;
border-bottom: 1px solid color-mix(in srgb, var(--bi-tone-accent, #94a3b8) 14%, #e2e8f0);
margin-bottom: 0.2rem;
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-insights__stat-body {
flex: 1 1 auto;
align-items: center;
padding-top: 0.1rem;
justify-items: start;
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-orders-summary__icon {
width: 2.15rem;
height: 2.15rem;
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-orders-summary__icon svg {
width: 1.05rem;
height: 1.05rem;
}
.bathgiant-branch-insights__stat-hint {
font-size: 0.72rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-branch-insights__share-bar {
display: block;
width: 100%;
max-width: 7.5rem;
height: 0.28rem;
margin-top: 0.2rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bi-tone-accent) 16%, #e2e8f0);
overflow: hidden;
}
.bathgiant-branch-insights__share-bar > span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: var(--bi-tone-accent);
transition: width 0.95s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 0s;
}
.bathgiant-branch-insights__stat--has-chart.is-chart-in-view .bathgiant-branch-insights__share-bar > span {
width: calc(var(--bi-pct, 0) * 1%);
}
.bathgiant-branch-insights__chart--donut {
--bi-chart-track: color-mix(in srgb, var(--bi-tone-accent) 14%, #e2e8f0);
--bi-pct: 0;
--bi-like-pct: 0;
--bi-dislike-pct: 0;
position: relative;
flex: 0 0 auto;
width: 2.65rem;
height: 2.65rem;
border-radius: 50%;
background: conic-gradient(
var(--bi-tone-accent) 0 calc(var(--bi-pct, 0) * 1%),
var(--bi-chart-track) calc(var(--bi-pct, 0) * 1%) 100%
);
transition:
--bi-pct 1.1s cubic-bezier(0.22, 1, 0.36, 1),
--bi-like-pct 1.1s cubic-bezier(0.22, 1, 0.36, 1),
--bi-dislike-pct 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bathgiant-branch-insights__chart--donut.is-chart-in-view {
--bi-pct: var(--bi-pct-target, 0);
--bi-like-pct: var(--bi-like-pct-target, 0);
--bi-dislike-pct: var(--bi-dislike-pct-target, 0);
}
.bathgiant-branch-insights__stat--has-chart.is-chart-in-view .bathgiant-branch-insights__chart--donut,
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__chart--donut {
--bi-pct: var(--bi-pct-target, 0);
--bi-like-pct: var(--bi-like-pct-target, 0);
--bi-dislike-pct: var(--bi-dislike-pct-target, 0);
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-insights__chart--donut {
width: min(5.25rem, 72%);
height: auto;
aspect-ratio: 1;
max-width: 5.25rem;
}
.bathgiant-branch-insights__chart--donut::after {
content: "";
position: absolute;
inset: 0.42rem;
border-radius: 50%;
background: var(--bi-tone-bg, #fff);
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-insights__chart--donut::after {
inset: 22%;
}
.bathgiant-branch-insights__chart-label {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 700;
line-height: 1;
color: var(--bi-tone-value, #334155);
}
.bathgiant-branch-insights__stat--has-chart .bathgiant-branch-insights__chart-label {
font-size: clamp(0.72rem, 1.6vw, 0.88rem);
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat {
min-height: 5.25rem;
}
.bathgiant-branch-insights__grid .bathgiant-branch-insights__stat--has-chart {
min-height: 9.5rem;
}
.bathgiant-branch-insights__section--notifications {
margin-bottom: 1.75rem;
}
.bathgiant-branch-insights__notifications-panel {
display: grid;
grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr);
gap: 1rem 1.25rem;
align-items: center;
width: 100%;
margin: 0;
padding: 1rem 1.1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #fff 58%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
cursor: pointer;
text-align: left;
font: inherit;
appearance: none;
transition:
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
.bathgiant-branch-insights__notifications-metric-value {
opacity: 0;
transition: opacity 0.42s ease;
transition-delay: 0s;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__notifications-metric-value {
opacity: 1;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__notifications-metric:nth-child(1) .bathgiant-branch-insights__notifications-metric-value {
transition-delay: 0.04s;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__notifications-metric:nth-child(2) .bathgiant-branch-insights__notifications-metric-value {
transition-delay: 0.1s;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__notifications-metric:nth-child(3) .bathgiant-branch-insights__notifications-metric-value {
transition-delay: 0.16s;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view .bathgiant-branch-insights__notifications-metric:nth-child(4) .bathgiant-branch-insights__notifications-metric-value {
transition-delay: 0.22s;
}
.bathgiant-branch-insights__notifications-panel.is-chart-in-view:hover {
border-color: #cbd5e1;
background: #fff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.bathgiant-branch-insights__notifications-panel:focus-visible {
outline: 2px solid var(--bathgiant-brand, #2563eb);
outline-offset: 2px;
}
.bathgiant-branch-insights__notifications-panel-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
}
.bathgiant-branch-insights__notifications-panel-chart .bathgiant-branch-insights__chart--donut {
width: 5.75rem;
height: 5.75rem;
max-width: none;
}
.bathgiant-branch-insights__notifications-panel-chart .bathgiant-branch-insights__chart--donut::after {
inset: 20%;
}
.bathgiant-branch-insights__notifications-panel-chart .bathgiant-branch-insights__chart-label {
font-size: clamp(0.82rem, 1.8vw, 0.98rem);
}
.bathgiant-branch-insights__chart--reactions {
--bi-chart-track: #e2e8f0;
background: conic-gradient(
#22c55e 0 calc(var(--bi-like-pct, 0) * 1%),
#f59e0b calc(var(--bi-like-pct, 0) * 1%) calc((var(--bi-like-pct, 0) + var(--bi-dislike-pct, 0)) * 1%),
var(--bi-chart-track) calc((var(--bi-like-pct, 0) + var(--bi-dislike-pct, 0)) * 1%) 100%
);
}
.bathgiant-branch-insights__notifications-panel-chart-caption {
font-size: 0.72rem;
font-weight: 600;
line-height: 1.25;
color: #64748b;
text-align: center;
}
.bathgiant-branch-insights__notifications-panel-main {
min-width: 0;
}
.bathgiant-branch-insights__notifications-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem 1rem;
margin: 0 0 0.85rem;
padding: 0;
list-style: none;
}
.bathgiant-branch-insights__notifications-metric {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.bathgiant-branch-insights__notifications-metric-value {
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
font-weight: 700;
line-height: 1.1;
color: #0f172a;
}
.bathgiant-branch-insights__notifications-metric-label {
font-size: 0.78rem;
line-height: 1.3;
color: #64748b;
}
.bathgiant-branch-insights__notifications-metric--brand .bathgiant-branch-insights__notifications-metric-value {
color: #1d4ed8;
}
.bathgiant-branch-insights__notifications-metric--info .bathgiant-branch-insights__notifications-metric-value {
color: #0369a1;
}
.bathgiant-branch-insights__notifications-metric--success .bathgiant-branch-insights__notifications-metric-value {
color: #15803d;
}
.bathgiant-branch-insights__notifications-panel .bathgiant-branch-insights__distribution {
margin: 0;
opacity: 1;
transition: none;
}
.bathgiant-branch-insights__notifications-panel-empty {
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
}
@media (max-width: 520px) {
.bathgiant-branch-insights__notifications-panel {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.bathgiant-branch-insights__notifications-panel-main {
width: 100%;
}
}
.bathgiant-branch-insights__sales-panel {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bathgiant-branch-insights__sales-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
}
.bathgiant-branch-insights__sales-summary-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.75rem 0.85rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
}
.bathgiant-branch-insights__sales-summary-item--total {
background: linear-gradient(135deg, color-mix(in srgb, var(--bathgiant-brand-deep, #881337) 6%, #fff) 0%, #fff 100%);
border-color: color-mix(in srgb, var(--bathgiant-brand-deep, #881337) 18%, #e2e8f0);
}
.bathgiant-branch-insights__sales-summary-value {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.1;
color: #0f172a;
letter-spacing: -0.02em;
}
.bathgiant-branch-insights__sales-summary-item--total .bathgiant-branch-insights__sales-summary-value {
color: var(--bathgiant-brand-deep, #881337);
}
.bathgiant-branch-insights__sales-summary-label {
font-size: 0.72rem;
line-height: 1.3;
color: #64748b;
}
.bathgiant-branch-insights__sales-panel-empty {
margin: 0;
}
.bathgiant-branch-insights__sales-chart {
padding: 0.9rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
}
.bathgiant-branch-insights__sales-chart-head {
margin-bottom: 0.65rem;
}
.bathgiant-branch-insights__sales-chart-title {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-branch-insights__sales-chart-body {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.bathgiant-branch-insights__sales-chart-row {
display: grid;
grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: center;
}
.bathgiant-branch-insights__sales-chart-values {
opacity: 0;
transition: opacity 0.42s ease;
transition-delay: 0s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-values {
opacity: 1;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(1) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(1) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.08s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(2) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(2) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.14s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(3) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(3) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.2s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(4) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(4) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.26s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(5) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(5) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.32s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(n+6) .bathgiant-branch-insights__sales-chart-values,
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-row:nth-child(n+6) .bathgiant-branch-insights__sales-chart-bar {
transition-delay: 0.38s;
}
.bathgiant-branch-insights__sales-chart-label {
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bathgiant-branch-insights__sales-chart-bar-wrap {
min-width: 0;
height: 1.15rem;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
}
.bathgiant-branch-insights__sales-chart-bar {
display: flex;
align-items: stretch;
min-width: 0;
max-width: 100%;
height: 100%;
border-radius: 999px;
overflow: hidden;
width: 0%;
transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 0s;
}
.bathgiant-branch-insights__sales-chart.is-chart-in-view .bathgiant-branch-insights__sales-chart-bar {
width: var(--bi-bar-width, 100%);
}
.bathgiant-branch-insights__sales-chart-seg {
display: block;
min-width: 0;
height: 100%;
background: var(--bi-tone-accent, #94a3b8);
}
.bathgiant-branch-insights__sales-chart-values {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.08rem;
min-width: 4.5rem;
}
.bathgiant-branch-insights__sales-chart-amount {
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
}
.bathgiant-branch-insights__sales-chart-orders {
font-size: 0.68rem;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
.bathgiant-branch-insights__sales-chart-cost {
font-size: 0.68rem;
font-weight: 600;
color: #475569;
white-space: nowrap;
}
.bathgiant-branch-insights__sales-chart-note {
margin: 0.2rem 0 0;
font-size: 0.72rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-branch-insights__sales-chart-seg--cost {
background: color-mix(in srgb, #0f172a 72%, var(--bi-tone-accent, #94a3b8));
}
.bathgiant-branch-insights__sales-panel--brands {
margin-top: 0;
}
@media (max-width: 720px) {
.bathgiant-branch-insights__sales-summary {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-branch-insights__sales-chart-row {
grid-template-columns: minmax(0, 1fr);
gap: 0.35rem;
}
.bathgiant-branch-insights__sales-chart-values {
flex-direction: row;
align-items: baseline;
gap: 0.35rem;
min-width: 0;
max-width: 100%;
}
}
.bathgiant-branch-insights__section--training {
margin-top: 0.15rem;
}
.bathgiant-branch-insights__training-panel {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bathgiant-branch-insights__training-overview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.bathgiant-branch-insights__training-group {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem 1.05rem 1.05rem;
min-height: 100%;
}
.bathgiant-branch-insights__training-group--staff {
border-right: 1px solid #e2e8f0;
background: linear-gradient(180deg, color-mix(in srgb, #2563eb 5%, #fff) 0%, #fff 4.5rem);
}
.bathgiant-branch-insights__training-group--trade {
background: linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand-deep, #881337) 5%, #fff) 0%, #fff 4.5rem);
}
.bathgiant-branch-insights__training-group-head {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-height: 2.85rem;
}
.bathgiant-branch-insights__training-group-title {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #475569;
}
.bathgiant-branch-insights__training-group--staff .bathgiant-branch-insights__training-group-title {
color: #1d4ed8;
}
.bathgiant-branch-insights__training-group--trade .bathgiant-branch-insights__training-group-title {
color: var(--bathgiant-brand-deep, #881337);
}
.bathgiant-branch-insights__training-group-note {
margin: 0;
font-size: 0.76rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-branch-insights__training-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.bathgiant-branch-insights__training-metric {
display: flex;
flex-direction: column;
gap: 0.18rem;
padding: 0.72rem 0.8rem;
border-radius: 8px;
border: 1px solid #e8edf3;
background: #f8fafc;
}
.bathgiant-branch-insights__training-metric-value {
font-size: 1.45rem;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-branch-insights__training-metric-label {
font-size: 0.72rem;
line-height: 1.3;
color: #64748b;
}
.bathgiant-branch-insights__training-metric--brand .bathgiant-branch-insights__training-metric-value {
color: var(--bathgiant-brand-deep, #881337);
}
.bathgiant-branch-insights__training-metric--success .bathgiant-branch-insights__training-metric-value {
color: #15803d;
}
.bathgiant-branch-insights__training-metric--info .bathgiant-branch-insights__training-metric-value {
color: #1d4ed8;
}
.bathgiant-branch-insights__training-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.55rem;
margin: 0;
padding: 0.65rem 0.85rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
font-size: 0.8rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-branch-insights__training-meta-label {
font-weight: 700;
color: #475569;
}
.bathgiant-branch-insights__training-meta-value {
font-weight: 600;
color: #0f172a;
}
.bathgiant-branch-insights__training-panel-empty {
margin: 0;
}
.bathgiant-branch-insights__training-log {
margin: 0;
padding: 0.85rem 0.95rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
}
.bathgiant-branch-insights__training-log-title {
margin: 0 0 0.55rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-branch-insights__training-log-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.bathgiant-branch-insights__training-log-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding-top: 0.55rem;
border-top: 1px solid #f1f5f9;
}
.bathgiant-branch-insights__training-log-item:first-child {
padding-top: 0;
border-top: 0;
}
.bathgiant-branch-insights__training-log-main {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
}
.bathgiant-branch-insights__training-log-user {
font-size: 0.86rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-branch-insights__training-log-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.bathgiant-branch-insights__training-log-kind {
display: inline-flex;
align-items: center;
padding: 0.14rem 0.45rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.2;
}
.bathgiant-branch-insights__training-log-kind--branch_staff {
color: #1d4ed8;
background: #eff6ff;
}
.bathgiant-branch-insights__training-log-kind--trade {
color: var(--bathgiant-brand-deep, #881337);
background: var(--bathgiant-brand-wash, #eef4fc);
}
.bathgiant-branch-insights__training-log-guide {
font-size: 0.78rem;
color: #64748b;
}
.bathgiant-branch-insights__training-log-when {
flex: 0 0 auto;
font-size: 0.76rem;
font-weight: 600;
color: #475569;
white-space: nowrap;
}
.bathgiant-branch-insights__training-log-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
flex: 0 0 auto;
}
.bathgiant-branch-insights__training-log-duration {
font-size: 0.76rem;
font-weight: 600;
color: #475569;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.bathgiant-branch-insights__training-overview {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-branch-insights__training-group--staff {
border-right: 0;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-branch-insights__training-metrics {
grid-template-columns: minmax(0, 1fr);
}
}
.bathgiant-account-dashboard-theme-toggle {
display: inline-flex;
align-items: stretch;
padding: 3px;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bathgiant-account-dashboard-theme-toggle__option.bathgiant-has-tooltip,
.bathgiant-account-dashboard-focus-toggle__option.bathgiant-has-tooltip {
position: relative;
}
.bathgiant-account-dashboard-head__tools .bathgiant-account-dashboard-theme-toggle .bathgiant-tooltip,
.bathgiant-account-dashboard-head__tools .bathgiant-account-dashboard-focus-toggle .bathgiant-tooltip {
z-index: 100070;
}
.bathgiant-account-dashboard-theme-toggle__option {
appearance: none;
border: 0;
margin: 0;
padding: 0.35rem 0.7rem;
border-radius: 7px;
background: transparent;
color: #475569;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-dashboard-theme-toggle__option:hover,
.bathgiant-account-dashboard-theme-toggle__option:focus-visible {
color: #1e293b;
outline: none;
}
.bathgiant-account-dashboard-theme-toggle__option.is-active[data-bathgiant-account-dashboard-theme="public"] {
background: var(--bathgiant-dashboard-active-gradient);
color: #fff;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
.bathgiant-account-dashboard-theme-toggle__option.is-active[data-bathgiant-account-dashboard-theme="trade"] {
background: linear-gradient(180deg, var(--bathgiant-brand) 0%, var(--bathgiant-brand-deep) 100%);
color: #fff;
box-shadow: 0 1px 2px color-mix(in srgb, var(--bathgiant-brand-deep) 35%, transparent);
}
.bathgiant-account-dashboard-focus-toggle {
display: inline-flex;
align-items: stretch;
padding: 3px;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bathgiant-account-dashboard-focus-toggle__option {
appearance: none;
border: 0;
margin: 0;
padding: 0.35rem 0.7rem;
border-radius: 7px;
background: transparent;
color: #475569;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-account-dashboard-focus-toggle__option:hover,
.bathgiant-account-dashboard-focus-toggle__option:focus-visible {
color: #1e293b;
outline: none;
}
.bathgiant-account-dashboard-focus-toggle__option.is-active {
background: var(--bathgiant-dashboard-active-gradient);
color: #fff;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
body.bathgiant-account-dashboard-focus > :not(.bathgiant-layout):not(.bathgiant-notifications-drawer):not(.bathgiant-toast-stack):not(.bathgiant-user-guide):not(.bathgiant-user-guide-launcher):not(.bathgiant-user-switch-dock):not(.bathgiant-footer-launchers):not(.bathgiant-issue-report-launcher):not(.bathgiant-issue-report-modal):not(.bathgiant-user-guide-training-modal) {
display: none !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-user-switch-dock {
display: block !important;
z-index: 100080;
} body.bathgiant-account-dashboard-focus .bathgiant-user-guide:not([hidden]) {
display: block !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-user-guide[hidden] {
display: none !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-user-guide-launcher:not([hidden]) {
display: inline-flex !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-user-guide-launcher[hidden] {
display: none !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-footer-launchers,
body.bathgiant-account-dashboard-focus .bathgiant-issue-report-launcher {
display: inline-flex !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-notifications-drawer:not([hidden]) {
display: block !important;
z-index: 100100;
}
body.bathgiant-account-dashboard-focus #wpadminbar {
display: none !important;
}
body.bathgiant-account-dashboard-focus .bathgiant-layout,
body.bathgiant-account-dashboard-focus .bathgiant-layout__body,
body.bathgiant-account-dashboard-focus .bathgiant-layout__body > main {
min-height: 100dvh;
}
body.bathgiant-account-dashboard-focus .bathgiant-layout__body > main.bathgiant-core-route {
padding-top: 0.45rem;
padding-bottom: 1rem;
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__head:not(:has(.bathgiant-account-tabs-group__label)) .bathgiant-account-tabs,
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__head:not(:has(.bathgiant-account-tabs-group__label)) .bathgiant-account-tabs {
border-left: none;
padding-left: 0;
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0.6rem 0.85rem;
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__label {
margin-left: 0;
flex: 0 0 auto;
padding-right: 0.75rem;
border-right: 1px solid #e2e8f0;
}
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs {
flex: 0 1 auto;
justify-content: flex-end;
flex-wrap: nowrap;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.6rem 0.85rem;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__label {
flex: 0 0 auto;
padding-right: 0.75rem;
border-right: 1px solid #e2e8f0;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs {
flex: 0 1 auto;
justify-content: flex-start;
flex-wrap: nowrap;
}
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs-group__head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.6rem 0.85rem;
}
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs-group__label {
flex: 0 0 auto;
padding-right: 0.75rem;
border-right: 1px solid #e2e8f0;
}
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs {
flex: 0 1 auto;
justify-content: flex-start;
flex-wrap: nowrap;
}
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs-group__head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.6rem 0.85rem;
}
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs-group__label {
flex: 0 0 auto;
padding-right: 0.75rem;
border-right: 1px solid #e2e8f0;
}
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs {
flex: 0 1 auto;
justify-content: flex-start;
flex-wrap: wrap;
}
.bathgiant-account-dashboard-page--admin .bathgiant-account-dashboard-head .bathgiant-account-tabs-layout {
display: flex;
flex: 1 1 auto;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin: 0;
}
.bathgiant-account-dashboard-page--admin .bathgiant-account-tabs-group + .bathgiant-account-tabs-group {
margin-top: 0;
}
@media (min-width: 721px) {
.bathgiant-account-tabs-layout {
flex-wrap: nowrap;
gap: 0.75rem 1.15rem;
}
.bathgiant-account-tabs-group--settings {
margin-left: auto;
}
}
.bathgiant-account-tabs-group__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.65rem 1rem;
min-height: 2.35rem;
}
.bathgiant-account-tabs-group__label {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--bathgiant-ink);
flex: 0 0 auto;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.bathgiant-account-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: inherit;
line-height: 0;
}
.bathgiant-account-tabs-group__icon {
color: var(--bathgiant-brand-deep);
opacity: 0.92;
}
.bathgiant-account-tabs-group__head .bathgiant-account-tabs {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-account-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
} @media (min-width: 721px) {
.bathgiant-account-dashboard-head {
align-items: center;
margin-bottom: 0.85rem;
}
.bathgiant-account-dashboard-head .bathgiant-account-tabs-layout {
display: block;
}
.bathgiant-account-dashboard-head .bathgiant-account-tabs-group + .bathgiant-account-tabs-group {
margin-top: 0.55rem;
}
.bathgiant-account-dashboard-page--admin .bathgiant-account-dashboard-head .bathgiant-account-tabs-layout {
display: flex;
}
.bathgiant-account-dashboard-page--admin .bathgiant-account-dashboard-head .bathgiant-account-tabs-group + .bathgiant-account-tabs-group {
margin-top: 0;
}
.bathgiant-account-tabs-group__head {
flex-wrap: nowrap;
align-items: center;
gap: 0.6rem 0.85rem;
min-height: 0;
}
.bathgiant-account-tabs-group__label {
font-size: 0.98rem;
}
.bathgiant-account-tabs-group__head .bathgiant-account-tabs {
flex-wrap: wrap;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
scrollbar-width: none;
gap: 0.35rem;
padding-bottom: 0;
}
.bathgiant-account-tabs-group--branch:not(.bathgiant-account-tabs-group--branch-toolbar) .bathgiant-account-tabs-group__head .bathgiant-account-tabs {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 1px;
}
.bathgiant-account-tabs-group__head .bathgiant-account-tabs::-webkit-scrollbar {
display: none;
}
.bathgiant-account-tabs-group--branch .bathgiant-account-tabs-group__label {
padding-right: 0.85rem;
border-right: 1px solid #e2e8f0;
}
.bathgiant-account-tabs-group--branch .bathgiant-account-tabs__tab {
padding: 0.38rem 0.72rem;
font-size: 0.875rem;
white-space: nowrap;
}
.bathgiant-account-tabs-group--branch .bathgiant-account-tabs__tab-icon {
display: inline-flex;
}
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs-group__label {
display: none;
}
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs {
flex-wrap: wrap;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0;
}
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs__tab--icon-only .bathgiant-account-tabs__tab-icon {
display: inline-flex;
}
}
.bathgiant-account-source-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 1rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-account-source-tabs__tab {
border: 1px solid #d7dbe0;
border-radius: 8px;
padding: 0.4rem 0.75rem;
background: #fff;
color: var(--bathgiant-ink);
font-family: var(--bathgiant-font-sans);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.bathgiant-account-source-tabs__tab-label--short {
display: none;
}
@media (max-width: 640px) {
.bathgiant-account-source-tabs:not(.bathgiant-account-source-tabs--has-mobile-select) {
flex-wrap: nowrap;
}
.bathgiant-account-source-tabs:not(.bathgiant-account-source-tabs--has-mobile-select) .bathgiant-account-source-tabs__tab {
flex: 1 1 0;
justify-content: center;
padding: 0.35rem 0.5rem;
font-size: 0.8125rem;
gap: 0.28rem;
}
.bathgiant-account-source-tabs:not(.bathgiant-account-source-tabs--has-mobile-select) .bathgiant-account-source-tabs__tab-label--full {
display: none;
}
.bathgiant-account-source-tabs:not(.bathgiant-account-source-tabs--has-mobile-select) .bathgiant-account-source-tabs__tab-label--short {
display: inline;
}
}
.bathgiant-account-source-tabs__tab-icon {
opacity: 0.8;
}
.bathgiant-account-panel[data-bathgiant-account-panel="branch-orders"] .bathgiant-account-source-tabs__tab-icon,
.bathgiant-account-panel[data-bathgiant-account-panel="branch-quotes"] .bathgiant-account-source-tabs__tab-icon {
display: none;
}
.bathgiant-account-panel[data-bathgiant-account-panel="branch-orders"] .bathgiant-account-source-tabs__tab,
.bathgiant-account-panel[data-bathgiant-account-panel="branch-quotes"] .bathgiant-account-source-tabs__tab {
padding-left: 0.85rem;
padding-right: 0.85rem;
}
.bathgiant-account-source-tabs__tab.is-active .bathgiant-account-source-tabs__tab-icon {
opacity: 1;
}
.bathgiant-account-source-tabs__tab.is-active {
background: var(--bathgiant-dashboard-soft-bg);
border-color: var(--bathgiant-dashboard-soft-border);
color: var(--bathgiant-dashboard-soft-text);
}
.bathgiant-branch-trade-stats {
margin: 0 0 1rem;
}
.bathgiant-branch-trade-stats__grid {
margin-bottom: 0;
}
.bathgiant-branch-orders-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.75rem), 1fr));
gap: 0.5rem;
margin: 0 0 1.25rem;
max-width: 100%;
min-width: 0;
}
@media (min-width: 1200px) {
.bathgiant-branch-orders-summary--nine-col,
.bathgiant-branch-orders-summary--allocation-cols {
grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}
}
.bathgiant-branch-orders-summary__card.is-active {
border-color: var(--bathgiant-dashboard-soft-border);
background: var(--bathgiant-dashboard-soft-bg);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 24%, transparent);
}
.bathgiant-branch-orders-summary__card.is-active .bathgiant-branch-orders-summary__value {
color: var(--bathgiant-brand-deep);
}
.bathgiant-branch-home-branch-stat__card {
min-width: 0;
}
.bathgiant-branch-home-branch-stat__hint {
display: block;
margin-top: 0.35rem;
font-size: 0.82rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-branch-orders-summary__card {
padding: 0.65rem 0.55rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
min-width: 0;
}
.bathgiant-branch-orders-summary__card--stat {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: 0.4rem;
row-gap: 0.3rem;
}
.bathgiant-branch-orders-summary__card--stat .bathgiant-branch-orders-summary__body {
display: contents;
}
.bathgiant-branch-orders-summary__card--stat .bathgiant-branch-orders-summary__icon {
grid-row: 1;
grid-column: 1;
}
.bathgiant-branch-orders-summary__card--stat .bathgiant-branch-orders-summary__value {
grid-row: 1;
grid-column: 2;
align-self: center;
}
.bathgiant-branch-orders-summary__card--stat .bathgiant-branch-orders-summary__label {
grid-row: 2;
grid-column: 1 / -1;
}
.bathgiant-branch-orders-summary__card--stat:not(:has(.bathgiant-branch-orders-summary__icon)) .bathgiant-branch-orders-summary__value {
grid-column: 1 / -1;
}
.bathgiant-branch-orders-summary__card--stat .bathgiant-branch-home-branch-stat__hint {
grid-row: 3;
grid-column: 1 / -1;
}
.bathgiant-branch-orders-summary__card--filter {
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-branch-orders-summary__card--filter:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #e2e8f0);
background: #fff;
}
.bathgiant-branch-orders-summary__card--filter:focus-visible {
outline: 2px solid var(--bathgiant-brand-deep);
outline-offset: 2px;
}
.bathgiant-branch-orders-summary__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 8px;
background: color-mix(in srgb, var(--bathgiant-brand-deep) 11%, #fff);
color: var(--bathgiant-brand-deep);
opacity: 1;
margin: 0;
}
.bathgiant-branch-orders-summary__icon svg {
display: block;
width: 1rem;
height: 1rem;
}
.bathgiant-branch-orders-summary__card.is-active .bathgiant-branch-orders-summary__icon {
background: color-mix(in srgb, var(--bathgiant-brand-deep) 18%, #fff);
color: var(--bathgiant-brand-deep);
}
.bathgiant-branch-orders-summary__body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.bathgiant-branch-orders-summary__value {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.1;
color: var(--bathgiant-ink, #1a1a1a);
}
.bathgiant-branch-orders-summary__label {
font-size: 0.76rem;
line-height: 1.25;
color: #5b6673;
}
.bathgiant-branch-order-detail__actions {
margin: 0 0 1.25rem;
}
.bathgiant-branch-order-detail__actions .bathgiant-branch-order-collection__all {
margin: 0;
}
.bathgiant-branch-order-detail__intact-refresh,
.bathgiant-account-order-detail__intact-refresh,
.bathgiant-intact-status-live {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin: 0 0 1.25rem;
}
.bathgiant-branch-order-detail__intact-refresh .bathgiant-btn,
.bathgiant-account-order-detail__intact-refresh .bathgiant-btn,
.bathgiant-intact-status-live .bathgiant-btn {
margin: 0;
}
.bathgiant-branch-order-detail__intact-refresh-meta,
.bathgiant-branch-order-detail__intact-refresh .description,
.bathgiant-intact-status-live__meta,
.bathgiant-intact-status-live .description {
margin: 0;
flex: 1 1 12rem;
}
.bathgiant-intact-status-live.is-refreshing .bathgiant-btn {
opacity: 0.75;
}
.bathgiant-branch-order-detail__shipped-email {
margin: 1rem 0 1.25rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.bathgiant-branch-order-detail__shipped-email-title,
.bathgiant-branch-order-email-history__title {
margin: 0 0 0.4rem;
font-size: 1rem;
font-weight: 650;
}
.bathgiant-branch-order-shipped-email__form {
margin: 0.65rem 0 0.35rem;
}
.bathgiant-branch-order-email-history {
margin-top: 0.85rem;
}
.bathgiant-branch-order-email-history__list {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
.bathgiant-branch-order-email-history__item {
padding: 0.65rem 0.75rem;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 8px;
background: rgba(248, 250, 252, 0.85);
}
.bathgiant-branch-order-email-history__item.is-failed {
border-color: rgba(185, 28, 28, 0.28);
background: rgba(254, 242, 242, 0.7);
}
.bathgiant-branch-order-email-history__meta {
margin-bottom: 0.2rem;
}
.bathgiant-branch-order-email-history__status {
font-weight: 600;
}
.bathgiant-branch-status-badge {
display: inline-block;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
vertical-align: middle;
}
.bathgiant-branch-status-badge__meta {
display: block;
margin-top: 0.28rem;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.3;
color: #64748b;
text-transform: none;
letter-spacing: normal;
white-space: normal;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--awaiting-payment,
.bathgiant-branch-status-badge--payment.bathgiant-branch-status-badge--unpaid {
color: #9a3412;
background: #fff7ed;
border-color: #fdba74;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--awaiting-allocation {
color: #1d4ed8;
background: #eff6ff;
border-color: #93c5fd;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--part-allocated {
color: #a16207;
background: #fffbeb;
border-color: #fcd34d;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--payment-cancelled,
.bathgiant-branch-status-badge--payment.bathgiant-branch-status-badge--cancelled {
color: #64748b;
background: #f8fafc;
border-color: #cbd5e1;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--ready,
.bathgiant-branch-status-badge--line.bathgiant-branch-status-badge--none {
color: #b91c1c;
background: #fef2f2;
border-color: #fca5a5;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--partial,
.bathgiant-branch-status-badge--line.bathgiant-branch-status-badge--partial {
color: #a16207;
background: #fffbeb;
border-color: #fcd34d;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--complete,
.bathgiant-branch-status-badge--line.bathgiant-branch-status-badge--complete,
.bathgiant-branch-status-badge--payment.bathgiant-branch-status-badge--paid {
color: #166534;
background: #f0fdf4;
border-color: #86efac;
}
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--cancelled,
.bathgiant-branch-status-badge--collection.bathgiant-branch-status-badge--other {
color: #475569;
background: #f8fafc;
border-color: #e2e8f0;
}
.bathgiant-branch-status-badge--payment.bathgiant-branch-status-badge--pending {
color: #a16207;
background: #fffbeb;
border-color: #fcd34d;
}
.bathgiant-branch-orders-table .bathgiant-branch-status-badge {
font-size: 0.62rem;
padding: 0.16rem 0.5rem;
}
.bathgiant-branch-orders-table td .bathgiant-branch-status-badge__meta {
max-width: 11rem;
}
.bathgiant-branch-collection-status {
display: inline-block;
font-weight: 600;
}
.bathgiant-branch-collection-status--none,
.bathgiant-branch-collection-status--pending {
color: #9a3412;
}
.bathgiant-branch-collection-status--partial {
color: #a16207;
}
.bathgiant-branch-collection-status--complete {
color: #166534;
}
.bathgiant-branch-order-collection__all {
margin: 0 0 1rem;
}
.bathgiant-branch-order-collection-table .bathgiant-branch-order-collection__actions {
min-width: 11rem;
}
.bathgiant-branch-order-collection__line,
.bathgiant-branch-order-collection__undo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin: 0;
}
.bathgiant-branch-order-collection__qty {
width: 4.5rem;
max-width: 100%;
padding: 0.35rem 0.45rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
.bathgiant-branch-collection-line--complete > td:first-child {
box-shadow: inset 3px 0 0 #22c55e;
}
.bathgiant-branch-collection-line--partial > td:first-child {
box-shadow: inset 3px 0 0 #f59e0b;
}
.bathgiant-branch-collection-line--pending > td:first-child {
box-shadow: inset 3px 0 0 #e2e8f0;
}
.bathgiant-branch-collection-line__status {
min-width: 8.5rem;
}
.bathgiant-branch-collection-line__allocated {
white-space: nowrap;
}
.bathgiant-branch-collection-line__intact-status {
margin-top: 0.2rem;
font-size: 0.78rem;
}
.bathgiant-branch-collection-line__status-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.bathgiant-branch-collection-line__progress {
display: block;
width: 100%;
max-width: 7rem;
height: 0.3rem;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.bathgiant-branch-collection-line__progress > span {
display: block;
width: calc(var(--bc-pct, 0) * 1%);
height: 100%;
border-radius: inherit;
background: #f59e0b;
}
.bathgiant-branch-order-collection__undo-btn {
white-space: nowrap;
}
.bathgiant-account-panel__head--with-sources {
margin-bottom: 0.35rem;
} @media (min-width: 721px) {
.bathgiant-account-dashboard-page--ajax .bathgiant-account-panel__head {
display: none;
}
.bathgiant-account-dashboard-page--ajax .bathgiant-trade-customers-panel__intro {
display: none;
}
.bathgiant-account-dashboard-page--ajax .bathgiant-trade-customers-panel__toolbar {
justify-content: flex-start;
align-items: center;
margin-bottom: 0.85rem;
}
} .bathgiant-showroom-booking {
margin: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 3rem);
}
.bathgiant-showroom-booking__header {
margin: 0 0 1.35rem;
text-align: center;
}
.bathgiant-showroom-booking__section-title {
margin: 0;
}
.bathgiant-showroom-booking__split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
min-height: min(36rem, 78vh);
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--bathgiant-shadow-md);
}
.bathgiant-showroom-booking__content {
position: relative;
display: flex;
align-items: stretch;
padding: clamp(1.5rem, 3.5vw, 2.5rem);
background:
linear-gradient(165deg, var(--bathgiant-brand-wash) 0%, #fff 72%),
#fff;
}
.bathgiant-showroom-booking__content--visual {
background-color: #0f172a;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.bathgiant-showroom-booking__content-scrim {
position: absolute;
inset: 0;
background: linear-gradient(165deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.88) 78%);
pointer-events: none;
}
.bathgiant-showroom-booking__content-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 30rem;
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__content-inner {
color: #fff;
}
.bathgiant-showroom-booking__eyebrow {
margin: 0 0 0.55rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__eyebrow {
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-showroom-booking__title {
margin: 0 0 0.55rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
font-weight: 600;
line-height: 1.25;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__title {
color: #fff;
}
.bathgiant-showroom-booking__lede {
margin: 0 0 1.15rem;
font-size: 1.02rem;
line-height: 1.6;
color: var(--bathgiant-ink-muted);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__lede {
color: rgba(255, 255, 255, 0.9);
}
.bathgiant-showroom-booking__hours {
margin: 0 0 1rem;
padding: 0.95rem 1rem;
border-radius: var(--bathgiant-radius-md);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 18%, var(--bathgiant-border));
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(6px);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__hours {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(15, 23, 42, 0.42);
}
.bathgiant-showroom-booking__hours-title {
margin: 0 0 0.65rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__hours-title {
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-showroom-booking__hours-list {
margin: 0;
}
.bathgiant-showroom-booking__hours-row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 0.65rem;
padding: 0.35rem 0;
border-top: 1px solid color-mix(in srgb, var(--bathgiant-border) 80%, transparent);
font-size: 0.95rem;
line-height: 1.4;
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__hours-row {
border-top-color: rgba(255, 255, 255, 0.14);
}
.bathgiant-showroom-booking__hours-row:first-child {
border-top: 0;
padding-top: 0;
}
.bathgiant-showroom-booking__hours-row dt {
margin: 0;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__hours-row dd {
margin: 0;
color: var(--bathgiant-ink-muted);
text-align: right;
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__hours-row dt {
color: #fff;
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__hours-row dd {
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-showroom-booking__branch-meta {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--bathgiant-ink-muted);
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__branch-meta {
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-showroom-booking__branch-meta p {
margin: 0 0 0.35rem;
}
.bathgiant-showroom-booking__phone a {
color: inherit;
font-weight: 700;
text-decoration: none;
}
.bathgiant-showroom-booking__phone a:hover {
color: var(--bathgiant-brand);
text-decoration: underline;
}
.bathgiant-showroom-booking__content--visual .bathgiant-showroom-booking__phone a:hover {
color: #fff;
}
.bathgiant-showroom-booking__form-panel {
display: flex;
align-items: stretch;
padding: clamp(1.35rem, 3vw, 2rem);
background: #fff;
border-left: 1px solid var(--bathgiant-border);
}
.bathgiant-showroom-booking__form {
width: 100%;
margin: 0;
}
.bathgiant-showroom-booking__form-head {
margin: 0 0 1.15rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--bathgiant-border);
}
.bathgiant-showroom-booking__form-title {
margin: 0 0 0.35rem;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-weight: 700;
line-height: 1.2;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__form-lede {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--bathgiant-ink-muted);
}
.bathgiant-showroom-booking__contact {
margin: 0 0 0.15rem;
padding: 0;
border: 0;
min-width: 0;
}
.bathgiant-showroom-booking__contact legend {
margin: 0 0 0.75rem;
padding: 0;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__row {
margin: 0 0 0.9rem;
}
.bathgiant-showroom-booking__row label {
display: block;
margin: 0 0 0.4rem;
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__row input,
.bathgiant-showroom-booking__row textarea {
width: 100%;
max-width: none;
box-sizing: border-box;
padding: 0.58rem 0.72rem;
border: 1px solid var(--bathgiant-store-border-input, #cbd5e1);
border-radius: var(--bathgiant-radius-sm);
font: inherit;
color: var(--bathgiant-ink);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-showroom-booking__date-picker {
position: relative;
}
.bathgiant-showroom-booking__date-trigger {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.7rem;
width: 100%;
min-height: 3rem;
padding: 0.72rem 0.9rem;
border: 1px solid var(--bathgiant-store-border-input, #cbd5e1);
border-radius: var(--bathgiant-radius-sm);
background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
font: inherit;
color: var(--bathgiant-ink);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bathgiant-showroom-booking__date-trigger:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand) 55%, var(--bathgiant-store-border-input, #cbd5e1));
}
.bathgiant-showroom-booking__date-trigger:focus,
.bathgiant-showroom-booking__date-picker.is-open .bathgiant-showroom-booking__date-trigger {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring, color-mix(in srgb, var(--bathgiant-brand) 24%, transparent));
}
.bathgiant-showroom-booking__date-trigger-icon {
position: relative;
flex: 0 0 2.15rem;
width: 2.15rem;
height: 2.15rem;
border-radius: 0.8rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--bathgiant-brand) 12%, #fff) 0%, color-mix(in srgb, var(--bathgiant-brand) 22%, #fff) 100%);
}
.bathgiant-showroom-booking__date-trigger-icon::before,
.bathgiant-showroom-booking__date-trigger-icon::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__date-trigger-icon::before {
top: 0.42rem;
width: 1.05rem;
height: 0.16rem;
border-radius: 999px;
box-shadow: 0.34rem 0 0 var(--bathgiant-brand-deep), -0.34rem 0 0 var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__date-trigger-icon::after {
top: 0.8rem;
width: 1.15rem;
height: 0.82rem;
border: 0.12rem solid var(--bathgiant-brand-deep);
border-top-width: 0.22rem;
border-radius: 0.28rem;
background: transparent;
}
.bathgiant-showroom-booking__date-trigger-text {
min-width: 0;
font-weight: 600;
}
.bathgiant-showroom-booking__date-popover {
position: absolute;
top: calc(100% + 0.55rem);
left: 0;
z-index: 30;
width: min(100%, 20rem);
padding: 0.9rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 14%, var(--bathgiant-border));
border-radius: 1rem;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(10px);
}
.bathgiant-showroom-booking__date-popover-head {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.bathgiant-showroom-booking__date-month {
margin: 0;
text-align: center;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__date-nav {
width: 2.25rem;
height: 2.25rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 18%, var(--bathgiant-border));
border-radius: 999px;
background: #fff;
color: var(--bathgiant-brand-deep);
font: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bathgiant-showroom-booking__date-nav:hover:not(:disabled) {
border-color: var(--bathgiant-brand);
background: color-mix(in srgb, var(--bathgiant-brand) 8%, #fff);
}
.bathgiant-showroom-booking__date-nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.bathgiant-showroom-booking__date-weekdays,
.bathgiant-showroom-booking__date-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.24rem;
}
.bathgiant-showroom-booking__date-weekdays {
margin-bottom: 0.4rem;
}
.bathgiant-showroom-booking__date-weekdays span {
display: block;
padding: 0.2rem 0;
text-align: center;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
}
.bathgiant-showroom-booking__date-day {
min-height: 2.35rem;
border: 0;
border-radius: 0.72rem;
background: transparent;
color: var(--bathgiant-ink);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-showroom-booking__date-day:hover:not(:disabled),
.bathgiant-showroom-booking__date-day:focus-visible:not(:disabled) {
background: color-mix(in srgb, var(--bathgiant-brand) 10%, #fff);
color: var(--bathgiant-brand-deep);
outline: none;
}
.bathgiant-showroom-booking__date-day.is-selected {
background: linear-gradient(180deg, var(--bathgiant-brand) 0%, var(--bathgiant-brand-deep) 100%);
color: #fff;
box-shadow: 0 8px 18px color-mix(in srgb, var(--bathgiant-brand) 28%, transparent);
}
.bathgiant-showroom-booking__date-day.is-today:not(.is-selected) {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 40%, transparent);
}
.bathgiant-showroom-booking__date-day.is-outside-month {
color: color-mix(in srgb, var(--bathgiant-ink-muted) 55%, #fff);
}
.bathgiant-showroom-booking__date-day.is-disabled,
.bathgiant-showroom-booking__date-day:disabled {
color: color-mix(in srgb, var(--bathgiant-ink-muted) 52%, #fff);
background: transparent;
cursor: not-allowed;
opacity: 0.42;
}
.bathgiant-showroom-booking__row input:focus,
.bathgiant-showroom-booking__row textarea:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring, color-mix(in srgb, var(--bathgiant-brand) 24%, transparent));
}
.bathgiant-showroom-booking__row textarea {
min-height: 5.5rem;
resize: vertical;
}
.bathgiant-showroom-booking__grid {
display: grid;
gap: 0 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-showroom-booking__row--phone {
grid-column: 1 / -1;
}
.bathgiant-showroom-booking__slots-wrap {
margin: 0 0 1.1rem;
}
.bathgiant-showroom-booking__slots-label {
margin: 0 0 0.55rem;
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-showroom-booking__slots {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-showroom-booking__slots-placeholder {
margin: 0;
width: 100%;
padding: 0.75rem 0.85rem;
border-radius: var(--bathgiant-radius-sm);
background: var(--bathgiant-light);
color: var(--bathgiant-ink-muted);
font-size: 0.92rem;
}
.bathgiant-showroom-booking__slot {
border: 1px solid var(--bathgiant-border);
border-radius: 999px;
padding: 0.45rem 0.95rem;
background: #fff;
font: inherit;
font-weight: 600;
font-size: 0.92rem;
color: var(--bathgiant-ink);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-showroom-booking__slot:hover {
border-color: var(--bathgiant-brand);
color: var(--bathgiant-brand-deep);
}
.bathgiant-showroom-booking__slot.is-selected {
border-color: var(--bathgiant-brand);
background: var(--bathgiant-brand);
color: #fff;
box-shadow: 0 6px 16px color-mix(in srgb, var(--bathgiant-brand) 34%, transparent);
}
.bathgiant-showroom-booking__actions {
margin: 1.1rem 0 0;
}
.bathgiant-showroom-booking__actions .bathgiant-btn {
width: 100%;
text-align: center;
}
.bathgiant-showroom-booking__actions .bathgiant-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.bathgiant-showroom-booking__notice {
margin-top: 0.85rem;
padding: 0.75rem 0.9rem;
border-radius: var(--bathgiant-radius-sm);
background: #f0fdf4;
color: #14532d;
font-size: 0.95rem;
line-height: 1.45;
}
.bathgiant-showroom-booking__notice.is-error {
background: #fef2f2;
color: #991b1b;
}
.bathgiant-showroom-booking__ics-link {
font-weight: 700;
color: var(--bathgiant-brand-deep);
}
@media (max-width: 960px) {
.bathgiant-showroom-booking__split {
grid-template-columns: 1fr;
min-height: 0;
}
.bathgiant-showroom-booking__content {
min-height: 18rem;
}
.bathgiant-showroom-booking__form-panel {
border-left: 0;
border-top: 1px solid var(--bathgiant-border);
}
.bathgiant-showroom-booking__grid {
grid-template-columns: 1fr;
}
.bathgiant-showroom-booking__row--phone {
grid-column: auto;
}
.bathgiant-showroom-booking__date-popover {
width: min(100%, 18rem);
}
} .bathgiant-branch-appointments__toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin: 0 0 0.85rem;
}
.bathgiant-branch-appointments__toolbar-nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1 auto;
min-width: 0;
justify-content: flex-start;
}
.bathgiant-branch-appointments__toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.55rem 0.65rem;
flex: 0 1 auto;
margin-left: auto;
}
.bathgiant-branch-appointments__month-label {
flex: 1 1 10rem;
min-width: 0;
text-align: center;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bathgiant-branch-cal__view-toggle {
display: inline-flex;
align-items: stretch;
padding: 3px;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bathgiant-branch-cal__view-btn {
appearance: none;
margin: 0;
padding: 0.35rem 0.7rem;
border: 0;
border-radius: 7px;
background: transparent;
color: #475569;
font-family: var(--bathgiant-font-sans);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-branch-cal__view-btn + .bathgiant-branch-cal__view-btn {
border-left: 0;
}
.bathgiant-branch-cal__view-btn.is-active {
background: var(--bathgiant-dashboard-active-gradient);
color: #fff;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
.bathgiant-branch-cal__view-btn:hover,
.bathgiant-branch-cal__view-btn:focus-visible {
color: #1e293b;
outline: none;
}
.bathgiant-branch-cal__view-btn.is-active:hover,
.bathgiant-branch-cal__view-btn.is-active:focus-visible {
color: #fff;
}
.bathgiant-branch-appointments__create-toggle {
margin: 0;
white-space: nowrap;
}
.bathgiant-branch-appointments__create {
margin: 0 0 0.85rem;
}
.bathgiant-branch-cal__head,
.bathgiant-branch-cal__body {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: #e2e8f0;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.bathgiant-branch-cal__dow {
padding: 0.45rem 0.35rem;
background: #f8fafc;
font-size: 0.78rem;
font-weight: 700;
text-align: center;
color: #475569;
}
.bathgiant-branch-cal__cell {
min-height: 5.5rem;
padding: 0.35rem;
background: #fff;
}
.bathgiant-branch-cal__cell--pad {
background: #f8fafc;
}
.bathgiant-branch-cal__date {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
color: #334155;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-branch-cal__date:hover,
.bathgiant-branch-cal__date:focus-visible {
background: #f1f5f9;
color: #0f172a;
outline: none;
}
.bathgiant-branch-cal__date--today {
border-radius: 50%;
background: var(--bathgiant-brand);
color: #fff;
}
.bathgiant-branch-cal__events {
list-style: none;
margin: 0.25rem 0 0;
padding: 0;
}
.bathgiant-branch-cal__event-row {
margin: 0 0 0.28rem;
}
.bathgiant-branch-cal__event-card {
display: block;
border-radius: 5px;
overflow: hidden;
margin: 0;
text-decoration: none;
color: inherit;
}
.bathgiant-branch-cal__event-card--static {
cursor: help;
}
.bathgiant-branch-cal__event-main {
display: block;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
padding: 0.3rem 0.5rem;
text-decoration: none;
color: inherit;
}
a.bathgiant-branch-cal__event-card:hover .bathgiant-branch-cal__event-main,
a.bathgiant-branch-cal__event-card:focus-visible .bathgiant-branch-cal__event-main {
text-decoration: underline;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.45rem;
width: 100%;
box-sizing: border-box;
margin: 0;
border: 0;
border-top: 1px solid #cbd5e1;
border-radius: 0;
padding: 0.3rem 0.5rem 0.34rem;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
color: #0f172a;
background: #f8fafc;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #0f766e;
opacity: 1;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link-ref {
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:hover,
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:focus-visible {
background: #f1f5f9;
color: #0f172a;
text-decoration: none;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:hover .bathgiant-branch-cal__quote-link-label,
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:focus-visible .bathgiant-branch-cal__quote-link-label {
color: #0d9488;
}
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:hover .bathgiant-branch-cal__quote-link-ref,
.bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link:focus-visible .bathgiant-branch-cal__quote-link-ref {
color: #0f172a;
text-decoration: underline;
}
.bathgiant-branch-cal__quote-link {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
color: #0f766e;
background: #ccfbf1;
border-radius: 3px;
padding: 0.1rem 0.3rem;
}
.bathgiant-branch-cal__quote-link:hover,
.bathgiant-branch-cal__quote-link:focus {
color: #115e59;
background: #99f6e4;
text-decoration: underline;
}
.bathgiant-branch-cal__cell--drag-over {
outline: 2px dashed #0f766e;
outline-offset: -2px;
background: #f0fdfa;
}
.bathgiant-branch-cal__event-card--draggable {
cursor: grab;
}
.bathgiant-branch-cal__event-card--dragging {
opacity: 0.55;
cursor: grabbing;
}
.bathgiant-branch-cal__event-card--draggable .bathgiant-branch-cal__quote-link {
cursor: pointer;
}
.bathgiant-branch-appointments__calendar[aria-busy='true'] {
opacity: 0.65;
pointer-events: none;
}
.bathgiant-branch-cal__event,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--web {
background: #fdf2f8;
color: #701a3c;
}
.bathgiant-branch-cal__event--staff,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--staff {
background: #f5f3ff;
color: #4c1d95;
}
.bathgiant-branch-cal__event--external,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--external {
background: #e0f2fe;
color: #0c4a6e;
cursor: help;
}
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--web .bathgiant-branch-cal__event-main {
color: #701a3c;
}
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--staff .bathgiant-branch-cal__event-main {
color: #4c1d95;
}
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--external .bathgiant-branch-cal__event-main {
color: #0c4a6e;
}
.bathgiant-branch-cal__event--has-quote,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--has-quote {
box-shadow: inset 3px 0 0 #0f766e;
}
.bathgiant-branch-cal__event--trade-customer,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--trade-customer {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
}
.bathgiant-branch-cal__event--status-confirmed,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--status-confirmed {
box-shadow: inset 0 -2px 0 #15803d;
}
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--has-quote.bathgiant-branch-cal__event--status-confirmed {
box-shadow: inset 3px 0 0 #0f766e, inset 0 -2px 0 #15803d;
}
.bathgiant-branch-cal__event--status-pending,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--status-pending {
box-shadow: inset 0 -2px 0 #ca8a04;
}
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--has-quote.bathgiant-branch-cal__event--status-pending {
box-shadow: inset 3px 0 0 #0f766e, inset 0 -2px 0 #ca8a04;
}
.bathgiant-branch-cal__event--status-completed,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--status-completed {
opacity: 0.78;
}
.bathgiant-branch-cal__event--status-cancelled,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--status-cancelled {
opacity: 0.55;
}
.bathgiant-branch-cal__event--status-cancelled .bathgiant-branch-cal__event-main,
.bathgiant-branch-cal__event-card.bathgiant-branch-cal__event--status-cancelled .bathgiant-branch-cal__event-main {
text-decoration: line-through;
}
.bathgiant-branch-cal__event {
display: block;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.35;
margin: 0 0 0.2rem;
padding: 0.22rem 0.35rem;
border-radius: 4px;
text-decoration: none;
}
.bathgiant-branch-cal__event--web[data-bathgiant-cal-event],
.bathgiant-branch-cal__event--staff[data-bathgiant-cal-event],
.bathgiant-branch-cal__event-card[data-bathgiant-cal-event] .bathgiant-branch-cal__event-main {
cursor: pointer;
}
.bathgiant-branch-cal__more {
margin: 0.15rem 0 0;
font-size: 0.68rem;
}
.bathgiant-branch-cal__more-btn {
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: inherit;
font-weight: 700;
color: #475569;
text-decoration: underline;
cursor: pointer;
}
.bathgiant-branch-cal__more-btn:hover,
.bathgiant-branch-cal__more-btn:focus-visible {
color: var(--bathgiant-brand, #7a1f2e);
outline: none;
}
.bathgiant-branch-cal__day-view {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
padding: 0.85rem 0.9rem 0.95rem;
}
.bathgiant-branch-cal__day-events {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
.bathgiant-branch-cal__day-event {
display: grid;
grid-template-columns: 4.25rem minmax(0, 1fr);
gap: 0.65rem;
align-items: start;
}
.bathgiant-branch-cal__day-event-time {
display: block;
padding-top: 0.28rem;
font-size: 0.9rem;
font-weight: 700;
color: #334155;
line-height: 1.35;
white-space: nowrap;
}
.bathgiant-branch-cal__day-event-body {
min-width: 0;
}
.bathgiant-branch-cal__day-view .bathgiant-branch-cal__event-card {
border: 1px solid #e2e8f0;
}
.bathgiant-branch-cal__day-view .bathgiant-branch-cal__event-main {
font-size: 0.92rem;
line-height: 1.45;
padding: 0.42rem 0.62rem;
}
.bathgiant-branch-cal__day-view .bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link {
padding: 0.36rem 0.62rem 0.4rem;
font-size: 0.84rem;
}
.bathgiant-branch-cal__day-view .bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link-label {
font-size: 0.76rem;
}
.bathgiant-branch-cal__day-view .bathgiant-branch-cal__event-card .bathgiant-branch-cal__quote-link-ref {
font-size: 0.88rem;
}
.bathgiant-branch-cal__day-event-body .bathgiant-branch-cal__events {
margin: 0;
}
.bathgiant-branch-cal__day-event-body .bathgiant-branch-cal__event-row {
margin: 0;
}
.bathgiant-branch-cal__day-empty {
margin: 0;
padding: 1.25rem 0.5rem;
text-align: center;
color: #64748b;
}
.bathgiant-branch-cal__tooltip-popup {
position: fixed;
z-index: 10050;
max-width: min(21rem, calc(100vw - 1.5rem));
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.16),
0 0 0 1px rgba(15, 23, 42, 0.04);
pointer-events: none;
font-size: 0.8125rem;
line-height: 1.45;
color: #334155;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.bathgiant-branch-cal__tooltip-popup.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bathgiant-branch-cal__tooltip-popup[hidden] {
display: none !important;
}
.bathgiant-branch-cal__tooltip-inner {
padding: 0.8rem 0.9rem 0.9rem;
}
.bathgiant-branch-cal__tooltip-inner--web {
border-top: 3px solid #db2777;
}
.bathgiant-branch-cal__tooltip-inner--staff {
border-top: 3px solid #7c3aed;
}
.bathgiant-branch-cal__tooltip-inner--external {
border-top: 3px solid #0284c7;
}
.bathgiant-branch-cal__tooltip-kind {
display: inline-block;
margin: 0 0 0.45rem;
padding: 0.18rem 0.45rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
}
.bathgiant-branch-cal__tooltip-inner--web .bathgiant-branch-cal__tooltip-kind {
background: #fce7f3;
color: #9d174d;
}
.bathgiant-branch-cal__tooltip-inner--staff .bathgiant-branch-cal__tooltip-kind {
background: #ede9fe;
color: #5b21b6;
}
.bathgiant-branch-cal__tooltip-inner--external .bathgiant-branch-cal__tooltip-kind {
background: #e0f2fe;
color: #075985;
}
.bathgiant-branch-cal__tooltip-title {
margin: 0 0 0.55rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.92rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bathgiant-branch-cal__tooltip-row {
display: grid;
grid-template-columns: minmax(4.75rem, 5.75rem) 1fr;
gap: 0.2rem 0.65rem;
margin: 0 0 0.42rem;
align-items: start;
}
.bathgiant-branch-cal__tooltip-row:last-child {
margin-bottom: 0;
}
.bathgiant-branch-cal__tooltip-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
line-height: 1.35;
}
.bathgiant-branch-cal__tooltip-value {
font-size: 0.8125rem;
color: #1e293b;
white-space: pre-wrap;
word-break: break-word;
}
.bathgiant-branch-appointments__legend {
display: flex;
gap: 1rem;
margin: 0.75rem 0 1rem;
font-size: 0.85rem;
}
.bathgiant-branch-appointments__legend-item--web::before,
.bathgiant-branch-appointments__legend-item--staff::before,
.bathgiant-branch-appointments__legend-item--external::before {
content: '';
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 3px;
margin-right: 0.35rem;
vertical-align: -1px;
}
.bathgiant-branch-appointments__legend-item--web::before {
background: #fdf2f8;
}
.bathgiant-branch-appointments__legend-item--staff::before {
background: #f5f3ff;
}
.bathgiant-branch-appointments__legend-item--external::before {
background: #e0f2fe;
}
.bathgiant-branch-appointments__legend-item--quote::before,
.bathgiant-branch-appointments__legend-item--trade::before,
.bathgiant-branch-appointments__legend-item--confirmed::before {
content: '';
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 3px;
margin-right: 0.35rem;
vertical-align: -1px;
}
.bathgiant-branch-appointments__legend-item--quote::before {
background: #ccfbf1;
box-shadow: inset 3px 0 0 #0f766e;
}
.bathgiant-branch-appointments__legend-item--trade::before {
background: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
}
.bathgiant-branch-appointments__legend-item--confirmed::before {
background: #dcfce7;
box-shadow: inset 0 -2px 0 #15803d;
}
.bathgiant-branch-appointments__feed,
.bathgiant-branch-appointments__external {
margin-top: 1rem;
}
.bathgiant-branch-appointments__create-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-top: 1rem;
}
.bathgiant-branch-appointments__create-toggle {
margin: 0;
}
.bathgiant-branch-appointments__create-wrap .bathgiant-branch-appointments__create {
width: 100%;
margin-top: 0;
}
.bathgiant-branch-appointments__create-form .bathgiant-showroom-booking__actions {
margin-top: 0.5rem;
}
.bathgiant-branch-appointments__create-form .bathgiant-showroom-booking__notice.is-success {
color: #166534;
}
.bathgiant-branch-appointments__create-form .bathgiant-showroom-booking__notice.is-error {
color: #9f1239;
}
@media (max-width: 720px) {
.bathgiant-branch-appointments__toolbar {
flex-direction: column;
align-items: stretch;
}
.bathgiant-branch-appointments__toolbar-nav {
justify-content: center;
}
.bathgiant-branch-appointments__toolbar-actions {
justify-content: stretch;
margin-left: 0;
}
.bathgiant-branch-cal__view-toggle,
.bathgiant-branch-appointments__create-toggle {
flex: 1 1 auto;
}
.bathgiant-branch-appointments__create-toggle {
width: 100%;
text-align: center;
}
.bathgiant-branch-cal__day-event {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.bathgiant-branch-cal__day-event-time {
padding-top: 0;
}
}
.bathgiant-branch-appointments__edit {
margin: 1rem 0 0;
}
.bathgiant-branch-appointments__edit-form .bathgiant-showroom-booking__actions {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-branch-appointments__edit-form .bathgiant-showroom-booking__notice.is-success {
color: #166534;
}
.bathgiant-branch-appointments__edit-form .bathgiant-showroom-booking__notice.is-error {
color: #9f1239;
}
.bathgiant-branch-customers-summary {
margin-bottom: 1rem;
}
.bathgiant-branch-customers-summary__pending {
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
a.bathgiant-branch-customers-summary__pending:hover,
a.bathgiant-branch-customers-summary__pending:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #e2e8f0);
background: #fff;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 18%, transparent);
outline: none;
}
.bathgiant-branch-customers-summary__pending.has-pending {
border-color: color-mix(in srgb, var(--bathgiant-brand) 28%, #e2e8f0);
background: color-mix(in srgb, var(--bathgiant-brand) 6%, #f8fafc);
}
.bathgiant-branch-customers-summary__pending.has-pending .bathgiant-branch-orders-summary__value {
color: var(--bathgiant-brand-deep, #0f172a);
}
.bathgiant-branch-customers-pending {
margin: 0 0 1.35rem;
padding: 0.9rem 0 0;
border-top: 1px solid #e2e8f0;
}
.bathgiant-branch-customers-pending__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem 1rem;
margin: 0 0 0.35rem;
}
.bathgiant-branch-customers-pending__title {
margin: 0;
font-size: 1rem;
font-weight: 650;
line-height: 1.3;
color: #0f172a;
}
.bathgiant-branch-customers-pending__all {
font-size: 0.875rem;
font-weight: 550;
color: var(--bathgiant-brand-deep, #0f4c81);
text-decoration: none;
}
.bathgiant-branch-customers-pending__all:hover,
.bathgiant-branch-customers-pending__all:focus-visible {
text-decoration: underline;
outline: none;
}
.bathgiant-branch-customers-pending__lede {
margin: 0 0 0.75rem;
font-size: 0.875rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-branch-customers-pending__table-wrap {
margin: 0;
}
.bathgiant-branch-customers-pending__table th.bathgiant-account-th-actions,
.bathgiant-branch-customers-pending__table th.bathgiant-account-quotes-actions,
.bathgiant-branch-customers-pending__table td.bathgiant-account-quotes-actions {
width: 7.5rem;
min-width: 7.5rem;
max-width: 7.5rem;
vertical-align: middle;
}
.bathgiant-branch-customers-pending__status {
display: inline-block;
font-size: 0.8125rem;
font-weight: 550;
line-height: 1.3;
}
.bathgiant-branch-customers-table th.bathgiant-account-th-actions,
.bathgiant-branch-customers-table th.bathgiant-account-quotes-actions,
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions {
width: 12.5rem;
min-width: 12.5rem;
max-width: 12.5rem;
vertical-align: middle;
}
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner {
gap: 0.35rem;
}
.bathgiant-branch-customers-table .bathgiant-account-quotes-actions__primary {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.35rem;
}
.bathgiant-branch-customers-table .bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link {
flex: 1 1 0;
width: auto;
min-width: 0;
padding: 0.42rem 0.5rem;
font-size: 0.78rem;
line-height: 1.2;
justify-content: center;
}
.bathgiant-branch-customers-table .bathgiant-account-quotes-actions__edit.bathgiant-btn,
.bathgiant-branch-customers-table .bathgiant-branch-customers-table__view-as.bathgiant-btn {
white-space: nowrap;
}
.bathgiant-branch-customers-table .bathgiant-account-quotes-actions__link .bathgiant-cta-icon svg {
width: 13px;
height: 13px;
}
.bathgiant-branch-customers-table .bathgiant-account-th-sort__stack {
min-width: 0;
}
.bathgiant-branch-customers-table .bathgiant-account-contact-link--table {
max-width: 100%;
}
.bathgiant-branch-customers-table td {
word-break: break-word;
overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
.bathgiant-branch-customers-table th.bathgiant-account-th-actions,
.bathgiant-branch-customers-table th.bathgiant-account-quotes-actions,
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions {
width: auto;
min-width: 0;
max-width: none;
}
}
.bathgiant-branch-customers__search {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.55rem;
margin: 0 0 1.1rem;
padding: 0.7rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 14%, #e2e8f0);
border-radius: var(--bathgiant-radius-md, 12px);
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 4%, #fff);
}
.bathgiant-branch-customers__search-field {
position: relative;
display: flex;
align-items: center;
flex: 1 1 16rem;
min-width: min(100%, 14rem);
}
.bathgiant-branch-customers__search-input {
width: 100%;
min-width: 0;
margin: 0;
padding: 0.65rem 4.5rem 0.65rem 0.85rem;
border: 1px solid #cbd5e1;
border-radius: var(--bathgiant-radius-sm, 8px);
background: #fff;
color: var(--bathgiant-ink, #1f2937);
font-size: 0.92rem;
line-height: 1.3;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.bathgiant-branch-customers__search-input:focus {
outline: none;
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, transparent);
}
.bathgiant-branch-customers__search-clear {
position: absolute;
right: 0.55rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
font-weight: 600;
color: var(--bathgiant-brand-deep, #2f68c4);
text-decoration: none;
}
.bathgiant-branch-customers__search-clear:hover,
.bathgiant-branch-customers__search-clear:focus-visible {
text-decoration: underline;
}
.bathgiant-branch-customers__search-submit {
flex: 0 0 auto;
align-self: stretch;
}
.bathgiant-account-list-toolbar {
display: none;
}
.bathgiant-account-list-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: 1rem;
row-gap: 0.75rem;
margin-top: 1rem;
padding: 0.15rem 0;
overflow: visible;
}
.bathgiant-account-list-pagination__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
flex: 1 1 auto;
gap: 0.5rem 0.85rem;
min-width: 0;
}
.bathgiant-account-list-pagination__per-page {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.86rem;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
.bathgiant-account-list-pagination__summary {
margin: 0;
font-size: 0.86rem;
font-weight: 600;
color: #64748b;
line-height: 1.35;
text-align: left;
flex: 0 1 auto;
min-width: 0;
}
.bathgiant-account-list-pagination__per-page-select {
margin: 0;
min-width: 4.25rem;
padding: 0.28rem 1.75rem 0.28rem 0.55rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-family: var(--bathgiant-font-sans);
font-size: 0.86rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
}
.bathgiant-account-list-pagination__per-page-select:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 55%, #94a3b8);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, transparent);
} .bathgiant-account-list-pagination .nav-links {
justify-content: flex-end;
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
}
.bathgiant-account-list-pagination .nav-links .prev,
.bathgiant-account-list-pagination .nav-links .next {
margin-left: 0;
margin-right: 0;
}
.bathgiant-branch-customers__table-toolbar {
display: none;
}
.bathgiant-branch-customers__pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin-top: 1rem;
padding: 0.15rem 0;
overflow: visible;
}
.bathgiant-branch-customers__pagination-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.85rem;
min-width: 0;
}
.bathgiant-branch-customers__pagination-summary {
margin: 0;
font-size: 0.86rem;
font-weight: 600;
color: #64748b;
text-align: left;
line-height: 1.35;
}
.bathgiant-branch-customers__per-page {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.86rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-branch-customers__per-page-select {
margin: 0;
min-width: 4.25rem;
padding: 0.28rem 1.75rem 0.28rem 0.55rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-family: var(--bathgiant-font-sans);
font-size: 0.86rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
}
.bathgiant-branch-customers__per-page-select:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 55%, #94a3b8);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, transparent);
}
.bathgiant-branch-customers__pagination .nav-links {
justify-content: flex-end;
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
}
.bathgiant-branch-customers__pagination .nav-links .prev,
.bathgiant-branch-customers__pagination .nav-links .next {
margin-left: 0;
margin-right: 0;
} .bathgiant-branch-customers-table-wrap {
max-width: 100%;
max-height: none !important;
overflow: visible;
}
.bathgiant-branch-customers-table-wrap .bathgiant-branch-customers-table,
.bathgiant-branch-customers-table-wrap .bathgiant-account-quotes-table {
width: 100%;
min-width: 0 !important;
table-layout: fixed;
}
.bathgiant-branch-customers-table-wrap .bathgiant-account-quotes-table thead th {
position: static;
white-space: normal;
} .bathgiant-branch-appointments__feed,
.bathgiant-branch-appointments__external {
margin: 0 0 1rem;
padding: 1rem;
}
.bathgiant-branch-appointments__external-row {
display: grid;
grid-template-columns: minmax(120px, 0.35fr) 1fr;
gap: 0.5rem;
margin: 0 0 0.5rem;
}
.bathgiant-branch-appointment-detail__list {
display: grid;
grid-template-columns: minmax(100px, 0.3fr) 1fr;
gap: 0.35rem 1rem;
margin: 0 0 1rem;
}
.bathgiant-branch-appointment-detail__list dt {
font-weight: 700;
margin: 0;
}
.bathgiant-branch-appointment-detail__list dd {
margin: 0;
} .bathgiant-appointment-detail {
margin-top: 0;
max-width: 960px;
}
.bathgiant-appointment-detail__header {
margin: 0 0 1.25rem;
}
.bathgiant-appointment-detail__title {
margin: 0;
}
.bathgiant-appointment-detail__subtitle {
margin: 0.35rem 0 0;
color: #64748b;
font-size: 0.95rem;
}
.bathgiant-appointment-detail__status-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.75rem 0 0;
}
.bathgiant-appointment-detail__panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin: 0 0 1rem;
}
.bathgiant-appointment-detail__panel {
margin: 0;
padding: 1rem 1.1rem;
}
.bathgiant-appointment-detail__panel-title {
margin: 0 0 0.85rem;
font-size: 0.95rem;
}
.bathgiant-appointment-detail__panel-body {
min-width: 0;
}
.bathgiant-appointment-detail__contact {
display: grid;
gap: 0.75rem;
margin: 0;
}
.bathgiant-appointment-detail__contact-item {
margin: 0;
}
.bathgiant-appointment-detail__contact-item dt {
margin: 0 0 0.15rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-appointment-detail__contact-item dd {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
word-break: break-word;
}
.bathgiant-appointment-detail__contact-item a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.bathgiant-appointment-detail__notes {
display: grid;
gap: 0.85rem;
margin: 0 0 1rem;
}
.bathgiant-appointment-detail__panel--note {
background: #fffbeb;
border-color: #fde68a;
}
.bathgiant-appointment-detail__note-body {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: #334155;
white-space: normal;
}
.bathgiant-appointment-detail__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin: 0 0 1rem;
padding-top: 0.25rem;
}
.bathgiant-appointment-detail__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-appointment-detail .bathgiant-quote-detail__meta {
margin-bottom: 1rem;
}
.bathgiant-branch-appointment-detail__insights {
margin: 0 0 1rem;
padding: 1rem;
}
.bathgiant-branch-appointment-detail__insights-title {
margin: 0 0 0.75rem;
}
.bathgiant-branch-appointment-detail__badges {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 0.75rem;
}
.bathgiant-branch-appointment-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.35;
}
.bathgiant-branch-appointment-badge--quote {
background: #ccfbf1;
color: #115e59;
}
.bathgiant-branch-appointment-badge--trade {
background: #ede9fe;
color: #5b21b6;
}
.bathgiant-branch-appointment-badge--status-confirmed {
background: #dcfce7;
color: #166534;
}
.bathgiant-branch-appointment-badge--status-pending {
background: #fef9c3;
color: #854d0e;
}
.bathgiant-branch-appointment-badge--status-completed {
background: #e2e8f0;
color: #334155;
}
.bathgiant-branch-appointment-badge--status-cancelled {
background: #fee2e2;
color: #991b1b;
}
.bathgiant-branch-appointment-detail__relationship {
margin: 0 0 0.75rem;
line-height: 1.5;
}
.bathgiant-appointment-detail__panel-body .bathgiant-branch-appointment-detail__relationship {
font-size: 0.95rem;
}
.bathgiant-appointment-detail__saved-customer {
margin: 0 0 0.75rem;
font-size: 0.9rem;
color: #475569;
}
.bathgiant-branch-appointment-detail__quotes-title {
margin: 0.75rem 0 0.35rem;
font-size: 0.95rem;
}
.bathgiant-branch-appointment-detail__quotes {
margin: 0 0 0.75rem;
padding-left: 1.1rem;
}
.bathgiant-appointment-detail__panel-body .bathgiant-branch-appointment-detail__quotes {
list-style: none;
padding: 0;
margin: 0 0 0.75rem;
}
.bathgiant-appointment-detail__panel-body .bathgiant-branch-appointment-detail__quote-item {
padding: 0.55rem 0.7rem;
border: 1px solid #dbe3ec;
border-radius: 8px;
background: #fff;
margin: 0 0 0.45rem;
line-height: 1.45;
}
.bathgiant-appointment-detail__panel-body .bathgiant-branch-appointment-detail__quote-item:last-child {
margin-bottom: 0;
}
.bathgiant-branch-appointment-detail__quote-stage {
color: #64748b;
font-size: 0.85em;
}
.bathgiant-branch-appointment-detail__quote-actions {
margin-top: 0.75rem;
}
.bathgiant-appointment-detail__panels--single {
grid-template-columns: 1fr;
max-width: 32rem;
}
@media (max-width: 760px) {
.bathgiant-appointment-detail__panels {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.bathgiant-appointment-detail__footer {
flex-direction: column;
align-items: stretch;
}
.bathgiant-appointment-detail__actions {
width: 100%;
}
.bathgiant-appointment-detail__actions .bathgiant-btn {
flex: 1 1 auto;
}
}
.bathgiant-account-tabs__tab {
border: 1px solid var(--bathgiant-border);
border-radius: 999px;
padding: 0.45rem 0.85rem;
background: #fff;
color: var(--bathgiant-ink);
font-family: var(--bathgiant-font-sans);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.bathgiant-account-tabs__tab.is-coming-soon,
.bathgiant-account-tabs__tab.is-disabled,
.bathgiant-account-tabs__tab:disabled {
cursor: not-allowed;
opacity: 0.55;
color: #6b7280;
background: #f3f4f6;
pointer-events: auto;
}
.bathgiant-account-drawer__nav-link.is-coming-soon,
.bathgiant-account-drawer__nav-link.is-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
color: #6b7280;
}
.bathgiant-branch-insights__notifications-panel.is-coming-soon,
.bathgiant-branch-insights__notifications-panel.is-disabled,
.bathgiant-branch-insights__notifications-panel:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.bathgiant-account-panel__coming-soon {
padding: 1.25rem 0;
}
.bathgiant-account-tabs__tab-icon {
opacity: 0.82;
}
.bathgiant-account-tabs__tab.is-active .bathgiant-account-tabs__tab-icon {
opacity: 1;
}
.bathgiant-account-tabs__tab-label {
line-height: 1.2;
}
.bathgiant-account-tabs__tab.is-active {
background: var(--bathgiant-dashboard-active-gradient);
border-color: var(--bathgiant-dashboard-active-bottom);
color: #fff;
box-shadow: var(--bathgiant-dashboard-active-shadow);
}
.bathgiant-account-tabs__tab--action {
white-space: nowrap;
} .bathgiant-account-nav-select {
display: none;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.bathgiant-account-mobile-nav {
display: none;
}
.bathgiant-account-nav-select__control {
appearance: none;
-webkit-appearance: none;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.7rem 2.5rem 0.7rem 0.9rem;
border: 1px solid #d7dbe0;
border-radius: 999px;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 0.75rem 0.5rem;
color: var(--bathgiant-ink);
font-family: var(--bathgiant-font-sans);
font-size: 0.94rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
}
.bathgiant-account-nav-select__control:hover {
border-color: color-mix(in srgb, var(--bathgiant-brand-deep) 35%, #d7dbe0);
}
.bathgiant-account-nav-select__control:focus,
.bathgiant-account-nav-select__control:focus-visible {
outline: none;
border-color: var(--bathgiant-brand-deep);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-account-panel {
border: 1px solid #d7dbe0;
border-radius: 10px;
background: #fbfcfe;
padding: 1.25rem 1.35rem;
margin: 0 0 1rem;
}
.bathgiant-account-panel.is-loading .bathgiant-account-panel__body {
min-height: 12rem;
}
.bathgiant-account-panel__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
min-height: 11rem;
padding: 2rem 1rem;
text-align: center;
color: #5a6d82;
}
.bathgiant-account-panel__loading-spinner {
width: 2.35rem;
height: 2.35rem;
border: 3px solid #dbe4f0;
border-top-color: var(--bathgiant-accent, #2f68c4);
border-radius: 50%;
animation: bg2026-account-panel-spin 0.85s linear infinite;
}
.bathgiant-account-panel__loading-text {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
}
@keyframes bg2026-account-panel-spin {
to {
transform: rotate(360deg);
}
}
.bathgiant-account-panel__placeholder {
margin: 0;
padding: 1.5rem 0;
text-align: center;
}
.bathgiant-account-panel--profile {
padding-top: 1.1rem;
}
.bathgiant-account-profile {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.bathgiant-account-profile__notice {
margin: 0;
}
.bathgiant-account-profile__section {
padding: 1.15rem 1.25rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.bathgiant-account-profile__section-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
}
.bathgiant-account-profile__section-lede {
margin: 0 0 1rem;
max-width: 46rem;
font-size: 0.9rem;
line-height: 1.5;
color: #64748b;
}
.bathgiant-account-profile__section-lede--inline {
margin: -0.35rem 0 0.85rem;
font-size: 0.82rem;
}
.bathgiant-account-profile__section-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-account-profile__trade-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.65rem;
flex-shrink: 0;
}
.bathgiant-account-profile__code {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
text-align: right;
}
.bathgiant-account-profile__code-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #64748b;
}
.bathgiant-account-profile__code-value {
display: inline-block;
padding: 0.3rem 0.6rem;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #cbd5e1;
font-size: 0.92rem;
font-weight: 700;
color: #0f172a;
letter-spacing: 0.04em;
}
.bathgiant-account-profile__subsection {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eef2f7;
}
.bathgiant-account-profile__subsection:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.bathgiant-account-profile__subsection-title {
margin: 0 0 0.65rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.bathgiant-account-profile-dl {
margin: 0;
display: grid;
gap: 0;
}
.bathgiant-account-profile-dl__row {
display: grid;
grid-template-columns: minmax(9rem, 34%) 1fr;
gap: 0.65rem 1.25rem;
padding: 0.55rem 0;
border-bottom: 1px solid #f1f5f9;
}
.bathgiant-account-profile-dl__row:last-child {
border-bottom: 0;
}
.bathgiant-account-profile-dl dt {
margin: 0;
font-size: 0.82rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-account-profile-dl dd {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: #0f172a;
}
.bathgiant-account-profile__readonly-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.82rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-account-profile__readonly-value {
display: block;
font-size: 0.95rem;
color: #0f172a;
}
.bathgiant-account-profile__empty {
margin: 0;
padding: 0.85rem 1rem;
color: #64748b;
background: #f8fafc;
border-radius: 8px;
border: 1px dashed #cbd5e1;
}
.bathgiant-account-profile__form .bathgiant-field input {
width: 100%;
max-width: none;
box-sizing: border-box;
}
.bathgiant-account-dashboard-prefs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.bathgiant-account-dashboard-prefs__item {
margin: 0;
}
.bathgiant-account-dashboard-prefs__label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
.bathgiant-account-dashboard-prefs__label:hover,
.bathgiant-account-dashboard-prefs__input:focus-visible + .bathgiant-account-dashboard-prefs__text {
outline: none;
}
.bathgiant-account-dashboard-prefs__input:focus-visible {
outline: 2px solid var(--bathgiant-brand, #7f1d1d);
outline-offset: 2px;
}
.bathgiant-account-dashboard-prefs__input {
margin-top: 0.2rem;
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
accent-color: var(--bathgiant-brand, #7f1d1d);
}
.bathgiant-account-dashboard-prefs__text {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.bathgiant-account-dashboard-prefs__title {
font-weight: 600;
color: #0f172a;
}
.bathgiant-account-dashboard-prefs__hint {
font-size: 0.9rem;
color: #64748b;
line-height: 1.45;
}
.bathgiant-account-profile__home-branch-notice {
margin: 0 0 0.85rem;
}
.bathgiant-account-profile__home-branch-notice[hidden] {
display: none !important;
}
.bathgiant-account-profile__home-branch-current {
margin: 0 0 1rem;
padding: 0.9rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
}
.bathgiant-account-profile__home-branch-label {
display: block;
margin: 0 0 0.35rem;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-account-profile__home-branch-value {
margin: 0;
font-size: 1.15rem;
font-weight: 600;
color: #0f172a;
}
.bathgiant-account-profile__home-branch-value.is-unset {
font-size: 1rem;
font-weight: 500;
color: #64748b;
}
.bathgiant-account-profile__home-branch-hint {
margin: 0.5rem 0 0;
}
.bathgiant-account-panel > p:not([class]) {
margin: 0 0 0.75rem;
color: #334155;
font-size: 0.95rem;
line-height: 1.5;
}
.bathgiant-account-form p {
margin: 0 0 0.65rem;
}
.bathgiant-account-form label {
font-weight: 600;
}
.bathgiant-account-form input[type="text"],
.bathgiant-account-form input[type="email"],
.bathgiant-account-form input[type="tel"] {
border: 1px solid var(--bathgiant-border);
border-radius: 10px;
padding: 0.55rem 0.65rem;
box-sizing: border-box;
} .bathgiant-trade-customers-panel {
width: 100%;
max-width: none;
}
.bathgiant-trade-customers-panel__toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.25rem;
margin: 0 0 1.25rem;
}
.bathgiant-trade-customers-panel__intro {
flex: 1 1 14rem;
min-width: 0;
}
.bathgiant-trade-customers-panel__intro h3 {
margin: 0 0 0.35rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong);
letter-spacing: -0.01em;
}
.bathgiant-trade-customers-panel__lead {
max-width: 52rem;
margin: 0;
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
}
.bathgiant-trade-customers-panel__notice {
margin: -0.35rem 0 1rem;
}
.bathgiant-trade-customers-toolbar__delivery-sites {
flex: 0 1 auto;
margin: 0;
max-width: min(100%, 22rem);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bathgiant-trade-customers-toolbar__add {
flex: 0 0 auto;
margin: 0 0 0 auto;
}
.bathgiant-trade-customers-list-card {
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 0 0 1.25rem;
padding: 1rem 1.1rem 1.1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.bathgiant-trade-customers-list-card__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem 0.75rem;
margin: 0 0 0.85rem;
}
.bathgiant-trade-customers-list-card__title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.bathgiant-trade-customers-list-card__count {
font-size: 0.82rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-trade-customers-panel__empty {
margin: 0;
color: #64748b;
font-size: 0.92rem;
line-height: 1.5;
}
.bathgiant-trade-customers-table-wrap {
width: 100%;
margin: 0;
overflow-x: auto;
border-radius: 8px;
border: 1px solid #eef2f7;
background: #fafbfc;
}
.bathgiant-trade-customers-table-wrap .bathgiant-trade-customers-table {
margin: 0;
width: 100%;
min-width: 32rem;
border: none;
table-layout: fixed;
}
.bathgiant-trade-customers-table th,
.bathgiant-trade-customers-table td {
padding: 0.65rem 0.75rem;
font-size: 0.88rem;
vertical-align: middle;
}
.bathgiant-trade-customers-table thead th {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #64748b;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-trade-customers-table__th-name {
width: 24%;
}
.bathgiant-trade-customers-table__th-email {
width: 28%;
}
.bathgiant-trade-customers-table__th-phone {
width: 14%;
}
.bathgiant-trade-customers-table__th-delivery {
width: auto;
}
.bathgiant-trade-customers-table th.bathgiant-trade-customers-actions-cell,
.bathgiant-trade-customers-table td.bathgiant-trade-customers-actions-cell {
width: 13.5rem;
min-width: 13.5rem;
max-width: 13.5rem;
}
.bathgiant-trade-customers-table__name {
font-family: var(--bathgiant-font-sans);
font-weight: 600;
color: #0f172a;
text-decoration: none;
}
.bathgiant-trade-customers-table__name:hover,
.bathgiant-trade-customers-table__name:focus-visible {
color: var(--bathgiant-brand, #7a1f2e);
text-decoration: underline;
}
.bathgiant-trade-customers-table__muted {
color: #94a3b8;
}
.bathgiant-trade-customers-table__cell-phone,
.bathgiant-trade-customers-table__cell-delivery {
color: #475569;
}
.bathgiant-trade-customers-table td.bathgiant-trade-customers-actions-cell {
vertical-align: middle;
overflow: visible;
}
.bathgiant-trade-customers-actions-row {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.45rem;
width: 100%;
min-width: 0;
} .bathgiant-trade-customers-actions-primary {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.4rem;
width: 100%;
min-width: 0;
}
.bathgiant-trade-customers-actions-primary > .bathgiant-trade-customers-action {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.bathgiant-trade-customers-action-form {
display: flex;
margin: 0;
min-width: 0;
width: 100%;
}
.bathgiant-trade-customers-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 2.125rem;
box-sizing: border-box;
padding: 0.48rem 0.85rem;
margin: 0;
white-space: nowrap;
overflow: visible;
text-align: center;
text-decoration: none;
font-size: var(--bathgiant-btn-font-size);
line-height: var(--bathgiant-btn-line-height);
font-weight: var(--bathgiant-btn-font-weight);
position: static;
transform: none;
container-type: normal;
}
.bathgiant-trade-customers-action .bathgiant-cta-icon {
flex-shrink: 0;
line-height: 0;
}
.bathgiant-trade-customers-action .bathgiant-cta-icon svg {
display: block;
width: 14px;
height: 14px;
}
.bathgiant-trade-customers-action--edit {
background: #fff;
color: var(--bathgiant-nav-ink, #17365d);
border: 1px solid color-mix(in srgb, var(--bathgiant-nav-ink, #17365d) 32%, #cbd5e1);
box-shadow: none;
}
.bathgiant-trade-customers-action--edit:hover,
.bathgiant-trade-customers-action--edit:focus-visible {
background: #f8fafc;
color: var(--bathgiant-brand-deep, #2f68c4);
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 18%, transparent);
transform: none;
}
.bathgiant-trade-customers-action--view {
box-shadow: 0 2px 10px var(--bathgiant-btn-shadow);
}
.bathgiant-trade-customers-action--view:hover,
.bathgiant-trade-customers-action--view:focus-visible {
transform: none;
}
.bathgiant-trade-customers-action--remove {
width: 100%;
background: #fff;
color: #64748b;
border: 1px solid #cbd5e1;
box-shadow: none;
}
.bathgiant-trade-customers-action--remove:hover,
.bathgiant-trade-customers-action--remove:focus-visible {
background: #f8fafc;
color: var(--bathgiant-brand, #7a1f2e);
border-color: color-mix(in srgb, var(--bathgiant-brand, #7a1f2e) 45%, #cbd5e1);
box-shadow: none;
transform: none;
}
.bathgiant-trade-customers-form__edit-note {
margin: 0 0 1rem;
color: var(--bathgiant-ink-muted);
font-size: 0.875rem;
line-height: 1.45;
}
.bathgiant-account-quotes-actions__delete .bathgiant-btn {
width: 100%;
} body.bathgiant-trade-customers-drawer-open {
overflow: hidden;
}
.bathgiant-trade-customers-drawer {
position: fixed;
inset: 0;
z-index: 550;
font-family: var(--bathgiant-font-sans);
}
.bathgiant-trade-customers-drawer[hidden] {
display: none !important;
}
.bathgiant-trade-customers-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
.bathgiant-trade-customers-drawer__panel {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
width: min(100vw, 26rem);
max-width: 100%;
height: 100%;
background: #fff;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
outline: none;
}
.bathgiant-trade-customers-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-shrink: 0;
padding: 1rem 1.15rem;
border-bottom: 1px solid var(--bathgiant-border, #e2e8f0);
background: #f8fafc;
}
.bathgiant-trade-customers-drawer__title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--bathgiant-ink, #0f172a);
}
.bathgiant-trade-customers-drawer__close {
border: none;
background: transparent;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
color: var(--bathgiant-ink-muted, #64748b);
padding: 0.2rem 0.45rem;
border-radius: 8px;
}
.bathgiant-trade-customers-drawer__close:hover {
background: rgba(15, 23, 42, 0.06);
color: var(--bathgiant-ink, #0f172a);
}
.bathgiant-trade-customers-drawer__body {
flex: 1;
min-height: 0;
overflow: auto;
padding: 1rem 1.15rem 1.5rem;
}
.bathgiant-trade-customers-drawer .bathgiant-trade-customers-form__card {
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
max-width: none;
}
.bathgiant-trade-customers-form__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-trade-customer-dash__back {
margin: 0 0 0.75rem;
}
.bathgiant-trade-customer-dash__back a {
display: inline-block;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
color: var(--bathgiant-store-ink-strong);
text-decoration: none;
}
.bathgiant-trade-customer-dash__back a:hover,
.bathgiant-trade-customer-dash__back a:focus-visible {
color: var(--bathgiant-brand, #7a1f2e);
text-decoration: underline;
}
.bathgiant-trade-customer-dash__notice {
margin: 0 0 0.75rem;
}
.bathgiant-trade-customer-dash {
display: flex;
flex-direction: column;
gap: 1rem;
} .bathgiant-trade-customer-dash > .bathgiant-trade-customer-dash__back,
.bathgiant-trade-customer-dash > .bathgiant-trade-customer-dash__notice,
.bathgiant-trade-customer-dash > .bathgiant-customer-dashboard__stats,
.bathgiant-trade-customer-dash > .bathgiant-branch-orders-summary,
.bathgiant-trade-customer-dash > .bathgiant-customer-dashboard__section {
margin-bottom: 0;
}
.bathgiant-trade-customer-dash__head {
margin: 0;
padding: 0.95rem 1.15rem;
max-width: none;
width: 100%;
box-sizing: border-box;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.bathgiant-trade-customer-dash__head-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 1rem 1.5rem;
align-items: start;
}
.bathgiant-trade-customer-dash__head-grid--compact {
grid-template-columns: minmax(0, 1.15fr) minmax(10rem, 0.82fr) minmax(0, max-content);
gap: 0.85rem 1.15rem;
align-items: center;
}
.bathgiant-trade-customer-dash__head-grid--compact.bathgiant-trade-customer-dash__head-grid--no-meta {
grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
}
.bathgiant-trade-customer-dash__head-grid--compact.bathgiant-trade-customer-dash__head-grid--no-side {
grid-template-columns: minmax(0, 1.15fr) minmax(10rem, 0.82fr);
}
.bathgiant-trade-customer-dash__head-grid--with-map {
grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
gap: 1.15rem 1.5rem;
align-items: stretch;
}
.bathgiant-trade-customer-dash__head-col--main {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.65rem;
align-self: stretch;
}
.bathgiant-trade-customer-dash__head-col--map {
align-self: stretch;
min-height: 16rem;
order: 2;
}
.bathgiant-trade-customer-dash__head-grid--with-map .bathgiant-trade-customer-dash__head-col--main {
order: 1;
}
.bathgiant-trade-customer-dash__head-meta-inline {
width: 100%;
}
.bathgiant-trade-customer-dash__head-meta-inline .bathgiant-quote-detail__meta {
margin: 0;
padding: 0.55rem 0.75rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem 0.7rem;
}
.bathgiant-trade-customer-dash__head-col--main .bathgiant-trade-customer-dash__contact {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.bathgiant-trade-customer-dash__head-col--main .bathgiant-trade-customer-dash__actions {
width: 100%;
justify-content: flex-start;
text-align: left;
flex-wrap: wrap;
gap: 0.55rem;
}
.bathgiant-trade-customer-dash__head-col--main .bathgiant-trade-customer-dash__actions .bathgiant-btn {
flex: 0 1 auto;
width: auto;
min-width: 0;
}
.bathgiant-customer-dashboard-map-wrap {
display: flex;
flex-direction: column;
gap: 0.45rem;
height: 100%;
min-height: 16rem;
}
.bathgiant-customer-dashboard-map {
flex: 1 1 auto;
min-height: 14.5rem;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #f8fafc;
z-index: 0;
}
.bathgiant-customer-dashboard-map .leaflet-control-zoom a {
color: #0f172a;
}
.bathgiant-customer-dashboard-map .bathgiant-branch-area-marker__label {
opacity: 1;
transform: scale(1);
}
.bathgiant-customer-dashboard-map .bathgiant-branch-map-marker--active .bathgiant-branch-map-marker__pulse {
animation: none;
opacity: 0.35;
}
.bathgiant-customer-dashboard-map__legend {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.85rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.72rem;
color: #64748b;
}
.bathgiant-customer-dashboard-map__legend li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.bathgiant-customer-dashboard-map__legend-marker {
display: inline-block;
flex-shrink: 0;
}
.bathgiant-customer-dashboard-map__legend-marker--area,
.bathgiant-customer-dashboard-map__legend-marker--customer {
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
background: var(--bg-map-local-zone-deep, #16a34a);
border: 1.5px solid #fff;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 28%, transparent);
}
.bathgiant-customer-dashboard-map__legend-marker--trade {
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
background: var(--bathgiant-trade, #c41e1e);
border: 1.5px solid #fff;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-trade, #c41e1e) 28%, transparent);
}
.bathgiant-customer-dashboard-map .bathgiant-branch-area-marker--linked-customer .bathgiant-branch-area-marker__dot {
background: var(--bg-map-local-zone-deep, #16a34a);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 32%, transparent);
}
.bathgiant-customer-dashboard-map .bathgiant-branch-area-marker--linked-customer.bathgiant-branch-area-marker--branch-region-visible .bathgiant-branch-area-marker__label {
color: var(--bg-map-local-zone-deep, #16a34a);
border-color: color-mix(in srgb, var(--bg-map-local-zone, #22c55e) 30%, transparent);
}
.bathgiant-customer-dashboard-map .bathgiant-branch-area-marker--trade-account .bathgiant-branch-area-marker__dot {
background: var(--bathgiant-trade, #c41e1e);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bathgiant-trade, #c41e1e) 32%, transparent);
}
.bathgiant-customer-dashboard-map .bathgiant-branch-area-marker--trade-account.bathgiant-branch-area-marker--branch-region-visible .bathgiant-branch-area-marker__label {
color: var(--bathgiant-trade, #c41e1e);
border-color: color-mix(in srgb, var(--bathgiant-trade, #c41e1e) 30%, transparent);
}
.bathgiant-customer-dashboard-map__legend-marker--branch {
width: 1.1rem;
height: 1.1rem;
border-radius: 999px;
background: var(--bg-map-showroom, #3b82f6);
border: 1.5px solid #fff;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
position: relative;
}
.bathgiant-customer-dashboard-map__legend-marker--branch::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.42rem;
height: 0.42rem;
margin: -0.21rem 0 0 -0.21rem;
background: #fff;
clip-path: polygon(50% 8%, 12% 42%, 12% 92%, 38% 92%, 38% 58%, 62% 58%, 62% 92%, 88% 92%, 88% 42%);
}
.bathgiant-customer-dashboard-map__pin {
background: transparent;
border: 0;
}
.bathgiant-customer-dashboard-map__pin-dot {
display: block;
width: 14px;
height: 14px;
margin: 7px;
border-radius: 999px;
border: 2px solid #fff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
}
.bathgiant-customer-dashboard-map__pin--customer .bathgiant-customer-dashboard-map__pin-dot {
background: #9f1239;
}
.bathgiant-customer-dashboard-map__pin--branch .bathgiant-customer-dashboard-map__pin-dot {
background: #3b82f6;
}
.bathgiant-customer-dashboard-map__popup {
font-size: 0.82rem;
line-height: 1.35;
color: #0f172a;
}
.bathgiant-customer-dashboard-map__popup strong {
font-weight: 700;
}
.bathgiant-customer-dashboard-map .leaflet-tooltip.bathgiant-customer-dashboard-map__tooltip-wrap,
.leaflet-tooltip.bathgiant-customer-dashboard-map__tooltip-wrap,
.bathgiant-customer-dashboard-map__tooltip-wrap {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
white-space: normal !important;
min-width: 12rem;
max-width: 18rem;
}
.bathgiant-customer-dashboard-map__tooltip-wrap::before {
display: none;
}
.bathgiant-customer-dashboard-map__tooltip {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.2rem;
box-sizing: border-box;
width: 18rem;
max-width: 18rem;
min-width: 0;
padding: 0.5rem 0.62rem;
border-radius: 8px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
font-size: 0.78rem;
line-height: 1.35;
color: #334155;
white-space: normal;
overflow: hidden;
}
.bathgiant-customer-dashboard-map__tooltip-type {
display: inline-block;
align-self: flex-start;
max-width: 100%;
box-sizing: border-box;
padding: 0.1rem 0.4rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: normal;
}
.bathgiant-customer-dashboard-map__tooltip-type--customer {
background: rgba(34, 197, 94, 0.12);
color: #15803d;
}
.bathgiant-customer-dashboard-map__tooltip-type--trade {
background: rgba(196, 30, 30, 0.1);
color: var(--bathgiant-trade, #c41e1e);
}
.bathgiant-customer-dashboard-map__tooltip-type--branch {
background: rgba(59, 130, 246, 0.12);
color: #1d4ed8;
}
.bathgiant-customer-dashboard-map__tooltip-label {
display: block;
min-width: 0;
max-width: 100%;
font-weight: 700;
color: #0f172a;
white-space: normal;
overflow-wrap: break-word;
}
.bathgiant-customer-dashboard-map__tooltip-address {
display: block;
min-width: 0;
max-width: 100%;
color: #64748b;
white-space: normal !important;
overflow-wrap: break-word;
word-wrap: break-word;
}
.bathgiant-trade-customer-dash__head-main,
.bathgiant-trade-customer-dash__head-side,
.bathgiant-trade-customer-dash__head-col {
min-width: 0;
}
.bathgiant-trade-customer-dash__head-grid:not(:has(.bathgiant-trade-customer-dash__head-side)):not(.bathgiant-trade-customer-dash__head-grid--with-map) {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-trade-customer-dash__head-col--identity {
align-self: center;
}
.bathgiant-trade-customer-dash__head-col--meta .bathgiant-quote-detail__meta {
margin: 0;
padding: 0.6rem 0.8rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem 0.75rem;
}
.bathgiant-trade-customer-dash__head-col--meta .bathgiant-quote-detail__meta-label {
margin-bottom: 0.12rem;
font-size: 0.68rem;
}
.bathgiant-trade-customer-dash__head-col--meta .bathgiant-quote-detail__meta-value {
font-size: 0.9rem;
}
.bathgiant-trade-customer-dash__head-col--side {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 0.55rem;
text-align: right;
}
.bathgiant-trade-customer-dash__title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
}
.bathgiant-trade-customer-dash__contact {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
}
.bathgiant-trade-customer-dash__contact .bathgiant-trade-customer-dash__meta,
.bathgiant-trade-customer-dash__contact .bathgiant-trade-customer-dash__address {
margin: 0;
}
.bathgiant-trade-customer-dash__meta,
.bathgiant-trade-customer-dash__address {
margin: 0;
font-size: 0.92rem;
color: #475569;
line-height: 1.5;
}
.bathgiant-trade-customer-dash__notes {
margin: 0;
padding: 0.85rem 1rem;
border-radius: var(--bathgiant-radius-sm);
background: var(--bathgiant-brand-wash);
border: 1px solid var(--bathgiant-border);
height: 100%;
box-sizing: border-box;
}
.bathgiant-trade-customer-dash__notes-title {
margin: 0 0 0.55rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bathgiant-ink-muted);
}
.bathgiant-trade-customer-dash__notes--compact {
padding: 0.55rem 0.7rem;
max-width: 16rem;
text-align: left;
}
.bathgiant-trade-customer-dash__notes--compact .bathgiant-trade-customer-dash__notes-title {
margin-bottom: 0.35rem;
font-size: 0.72rem;
}
.bathgiant-trade-customer-dash__notes--compact .bathgiant-trade-customer-dash__notes-body {
font-size: 0.84rem;
line-height: 1.45;
}
.bathgiant-trade-customer-dash__notes-body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--bathgiant-ink);
white-space: pre-wrap;
}
.bathgiant-trade-quote-builder__levels {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0 0 0.85rem;
}
.bathgiant-trade-quote-builder__level {
display: flex;
gap: 0.5rem;
align-items: flex-start;
margin: 0;
cursor: pointer;
}
.bathgiant-trade-quote-builder__level input {
margin-top: 0.15rem;
}
.bathgiant-trade-quote-builder__branch-audience {
margin: 0 0 0.5rem;
padding: 0;
border: 0;
}
.bathgiant-trade-quote-builder__trade-account {
margin: 0 0 0.65rem;
}
.bathgiant-trade-quote-builder__trade-account-search {
position: relative;
}
.bathgiant-trade-quote-builder__search-results--trade-account {
z-index: 6;
}
.bathgiant-trade-quote-builder__public-fields,
.bathgiant-trade-quote-builder__trade-contact {
margin-top: 0.15rem;
}
.bathgiant-trade-quote-builder__branch-note {
margin: 0.5rem 0 0;
}
body.bathgiant-trade-quote-builder-open {
overflow: hidden;
}
.bathgiant-trade-quote-builder[hidden] {
display: none !important;
}
.bathgiant-trade-quote-builder {
position: fixed;
inset: 0;
z-index: 600;
}
.bathgiant-trade-quote-builder__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
}
.bathgiant-trade-quote-builder__dialog {
position: relative;
display: flex;
flex-direction: column;
width: min(98vw, 96rem);
height: min(96vh, 100%);
max-height: 96vh;
margin: 2vh auto;
background: #fff;
border-radius: 0.85rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
outline: none;
overflow: hidden;
}
.bathgiant-trade-quote-builder__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--bathgiant-border, #e2e8f0);
background: #f8fafc;
}
.bathgiant-trade-quote-builder__title {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
}
.bathgiant-trade-quote-builder__subtitle {
margin: 0.35rem 0 0;
}
.bathgiant-trade-quote-builder__close {
border: none;
background: transparent;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
color: #64748b;
}
.bathgiant-trade-quote-builder__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
grid-template-rows: minmax(0, 1fr) auto;
column-gap: 1.15rem;
row-gap: 0;
flex: 1 1 auto;
min-height: 0;
padding: 1rem 1.25rem 1.25rem;
overflow: hidden;
align-items: stretch;
}
.bathgiant-trade-quote-builder__scroll {
display: contents;
}
.bathgiant-trade-quote-builder__main {
display: flex;
flex-direction: column;
grid-column: 1;
grid-row: 1 / span 2;
min-width: 0;
min-height: 0;
}
.bathgiant-trade-quote-builder__search-wrap {
position: relative;
margin-bottom: 0.85rem;
}
.bathgiant-trade-quote-builder__search {
width: 100%;
padding: 0.65rem 0.85rem;
border: 1px solid #cbd5e1;
border-radius: 0.55rem;
font-size: 1rem;
}
.bathgiant-trade-quote-builder__search-results {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.25rem);
z-index: 5;
max-height: 16rem;
overflow: auto;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 0.55rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.bathgiant-trade-quote-builder__search-list {
list-style: none;
margin: 0;
padding: 0;
}
.bathgiant-trade-quote-builder__search-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem 1rem;
width: 100%;
padding: 0.65rem 0.85rem;
border: 0;
border-bottom: 1px solid #f1f5f9;
background: #fff;
text-align: left;
cursor: pointer;
}
.bathgiant-trade-quote-builder__search-item--account {
grid-template-columns: minmax(0, 1fr) auto;
}
.bathgiant-trade-quote-builder__search-item:hover {
background: #f8fbff;
}
.bathgiant-trade-quote-builder__search-item:last-child {
border-bottom: 0;
}
.bathgiant-trade-quote-builder__search-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 0.35rem;
flex-shrink: 0;
background: #f1f5f9;
}
.bathgiant-trade-quote-builder__search-thumb--empty {
display: inline-block;
}
.bathgiant-trade-quote-builder__search-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.65rem 1.25rem;
align-items: center;
min-width: 0;
}
.bathgiant-trade-quote-builder__search-copy {
min-width: 0;
}
.bathgiant-trade-quote-builder__search-meta {
flex: 1;
min-width: 0;
}
.bathgiant-trade-quote-builder__search-title {
display: -webkit-box;
font-weight: 600;
font-size: 0.92rem;
line-height: 1.35;
color: var(--bathgiant-ink);
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.bathgiant-trade-quote-builder__search-sku,
.bathgiant-trade-quote-builder__search-details {
display: block;
margin-top: 0.18rem;
font-size: 0.76rem;
line-height: 1.35;
color: #64748b;
word-break: break-word;
}
.bathgiant-trade-quote-builder__search-sku {
font-family: var(--bathgiant-font-sans);
}
.bathgiant-trade-quote-builder__search-price {
justify-self: end;
min-width: 0;
text-align: right;
}
.bathgiant-trade-quote-builder__search-add {
flex-shrink: 0;
padding: 0.38rem 0.8rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 24%, #dbe3ec);
background: color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 8%, #fff);
font-size: 0.78rem;
font-weight: 700;
color: var(--bathgiant-color-primary, #7f1d1d);
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bathgiant-trade-quote-builder__search-item:hover .bathgiant-trade-quote-builder__search-add,
.bathgiant-trade-quote-builder__search-item:focus-visible .bathgiant-trade-quote-builder__search-add {
background: var(--bathgiant-brand, #7f1d1d);
border-color: var(--bathgiant-brand, #7f1d1d);
color: #fff;
}
.bathgiant-trade-quote-builder__search-item.is-added .bathgiant-trade-quote-builder__search-add {
background: color-mix(in srgb, #16a34a 10%, #fff);
border-color: color-mix(in srgb, #16a34a 32%, #dbe3ec);
color: #15803d;
}
.bathgiant-trade-quote-builder__search-item.is-added:hover .bathgiant-trade-quote-builder__search-add,
.bathgiant-trade-quote-builder__search-item.is-added:focus-visible .bathgiant-trade-quote-builder__search-add {
background: #16a34a;
border-color: #16a34a;
color: #fff;
}
.bathgiant-trade-quote-builder__search-empty {
margin: 0;
padding: 0.75rem;
color: #64748b;
font-size: 0.9rem;
}
.bathgiant-trade-quote-builder__table-wrap {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e8edf3;
border-radius: 0.55rem;
}
.bathgiant-trade-quote-builder__lines {
padding: 0.65rem 0.85rem 0.85rem;
}
.bathgiant-trade-quote-builder__lines .bathgiant-cart-category-heading {
margin: 0.85rem 0 0.55rem;
}
.bathgiant-trade-quote-builder__lines .bathgiant-cart-category-heading:first-child {
margin-top: 0;
}
.bathgiant-trade-quote-builder__lines .bathgiant-cart-table + .bathgiant-cart-category-heading {
margin-top: 1.1rem;
}
.bathgiant-trade-quote-builder__lines .bathgiant-cart-line-details {
margin-top: 0.35rem;
}
.bathgiant-trade-quote-builder__line-stock {
margin: 0.25rem 0 0;
font-size: 0.78rem;
line-height: 1.35;
color: #0f766e;
font-weight: 600;
}
.bathgiant-trade-quote-builder__empty {
margin: 0;
padding: 0.75rem;
color: #64748b;
font-size: 0.9rem;
}
.bathgiant-trade-quote-builder__main-footer {
flex: 0 0 auto;
margin-top: 0.65rem;
border: 1px solid #e8edf3;
border-radius: 0.55rem;
background: #f8fafc;
overflow: hidden;
}
.bathgiant-trade-quote-builder__extras {
flex: 0 0 auto;
margin: 0.65rem 0 0;
border: 1px solid #e8edf3;
border-radius: 0.55rem;
background: #fff;
overflow: hidden;
}
.bathgiant-trade-quote-builder__extras[hidden] {
display: none !important;
}
.bathgiant-trade-quote-builder__extras-toggle {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.55rem;
width: 100%;
min-height: 2.75rem;
padding: 0.45rem 0.7rem;
border: 0;
background: #f8fafc;
color: var(--bathgiant-ink);
text-align: left;
cursor: pointer;
}
.bathgiant-trade-quote-builder__extras-toggle:hover {
background: #f1f5f9;
}
.bathgiant-trade-quote-builder__extras-toggle:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid var(--bathgiant-brand);
outline-offset: -2px;
}
.bathgiant-trade-quote-builder__extras-title {
font-size: 0.92rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__extras-count {
justify-self: start;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: #e8eef5;
color: #475569;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__extras-chevron {
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg);
transition: transform 0.16s ease;
}
.bathgiant-trade-quote-builder__extras-toggle[aria-expanded="true"] .bathgiant-trade-quote-builder__extras-chevron {
transform: rotate(-135deg);
}
.bathgiant-trade-quote-builder__extras-panel {
padding: 0.45rem 0.55rem 0.55rem;
border-top: 1px solid #e8edf3;
}
.bathgiant-trade-quote-builder__extras-panel[hidden] {
display: none !important;
}
.bathgiant-trade-quote-builder__extras-hint {
margin: 0 0 0.4rem;
font-size: 0.73rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-trade-quote-builder__extras-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.bathgiant-trade-quote-builder__extras-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 0.45rem 0.6rem;
align-items: center;
width: 100%;
min-width: 0;
padding: 0.35rem 0.45rem;
border: 1px solid #e8edf3;
border-radius: 0.4rem;
background: #f8fafc;
text-align: left;
}
.bathgiant-trade-quote-builder__extras-item.is-added {
border-color: color-mix(in srgb, #16a34a 28%, #dbe3ec);
background: color-mix(in srgb, #16a34a 6%, #fff);
}
.bathgiant-trade-quote-builder__extras-thumb {
width: 34px;
height: 34px;
object-fit: cover;
border-radius: 0.35rem;
background: #f1f5f9;
flex-shrink: 0;
}
.bathgiant-trade-quote-builder__extras-thumb--empty {
display: inline-block;
}
.bathgiant-trade-quote-builder__extras-body {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.35rem 0.75rem;
align-items: center;
}
.bathgiant-trade-quote-builder__extras-copy {
min-width: 0;
}
.bathgiant-trade-quote-builder__extras-title-text {
display: -webkit-box;
font-weight: 600;
font-size: 0.82rem;
line-height: 1.25;
color: var(--bathgiant-ink);
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.bathgiant-trade-quote-builder__extras-sku {
display: block;
margin-top: 0.05rem;
font-size: 0.68rem;
color: #64748b;
word-break: break-word;
}
.bathgiant-trade-quote-builder__extras-price {
min-width: 0;
text-align: right;
}
.bathgiant-trade-quote-builder__extras-add {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
min-width: 3.75rem;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 24%, #dbe3ec);
background: color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 8%, #fff);
font-size: 0.74rem;
font-weight: 700;
color: var(--bathgiant-color-primary, #7f1d1d);
cursor: pointer;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__extras-item.is-added .bathgiant-trade-quote-builder__extras-add {
background: color-mix(in srgb, #16a34a 10%, #fff);
border-color: color-mix(in srgb, #16a34a 32%, #dbe3ec);
color: #15803d;
cursor: default;
}
.bathgiant-trade-quote-builder__savings-bar {
padding: 0.7rem calc(0.85rem + 2rem) 0.7rem 0.85rem;
background: #f0fdf4;
border-bottom: 1px solid #dbe3ec;
}
.bathgiant-trade-quote-builder__savings-bar[hidden] {
display: none !important;
}
.bathgiant-trade-quote-builder__savings-bar .bathgiant-cart-savings-summary__line {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
}
.bathgiant-trade-quote-builder__subtotal-bar {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 0.85rem;
padding: 0.75rem calc(0.85rem + 2rem) 0.75rem 0.85rem;
}
.bathgiant-trade-quote-builder__subtotal-label {
font-size: 0.9rem;
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__subtotal-amount {
font-size: 1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__table {
table-layout: fixed;
width: 100%;
min-width: 38rem;
border-collapse: separate;
border-spacing: 0;
}
.bathgiant-trade-quote-builder__table.bathgiant-cart-table {
margin: 0;
font-size: 0.9rem;
}
.bathgiant-trade-quote-builder__table.bathgiant-cart-table th,
.bathgiant-trade-quote-builder__table.bathgiant-cart-table td {
border-left: 0;
border-right: 0;
border-color: #e8edf3;
padding: 0.65rem 0.7rem;
vertical-align: top;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__qty-cell,
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__remove-cell,
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__unit,
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__line-total {
vertical-align: top;
}
.bathgiant-trade-quote-builder__qty-cell,
.bathgiant-trade-quote-builder__remove-cell {
display: table-cell;
}
.bathgiant-trade-quote-builder__qty-cell {
text-align: center;
}
.bathgiant-trade-quote-builder__qty-cell .bathgiant-trade-quote-builder__qty {
margin-inline: auto;
}
.bathgiant-trade-quote-builder__remove-cell {
text-align: center;
vertical-align: top;
}
.bathgiant-trade-quote-builder__remove-cell .bathgiant-trade-quote-builder__remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
min-width: 2.75rem;
}
.bathgiant-trade-quote-builder__table.bathgiant-cart-table thead th {
background: #f8fafc;
border-bottom: 1px solid #dbe3ec;
font-size: 0.74rem;
letter-spacing: 0.05em;
}
.bathgiant-trade-quote-builder__table tbody tr:not(.bathgiant-trade-quote-builder__category-row):not(.bathgiant-trade-quote-builder__empty) td {
border-top: 1px solid #eef2f6;
}
.bathgiant-trade-quote-builder__table thead th {
padding: 0.45rem 0.6rem;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__table tbody td {
padding: 0.45rem 0.6rem;
vertical-align: top;
}
.bathgiant-trade-quote-builder__category-row td {
padding: 0.85rem 0.6rem 0.35rem;
background: #fff;
border-bottom: 0;
}
.bathgiant-trade-quote-builder__category-row + tr td {
border-top: 0;
}
.bathgiant-trade-quote-builder__category-row .bathgiant-cart-category-heading {
margin: 0;
}
.bathgiant-trade-quote-builder__category-row .bathgiant-heading-rule__text {
font-size: 0.92rem;
}
.bathgiant-trade-quote-builder__line-product {
align-items: center;
gap: 0.55rem;
}
.bathgiant-trade-quote-builder__table .bathgiant-pkg-line__thumb {
width: 2.75rem;
height: 2.75rem;
margin: 0;
flex-shrink: 0;
}
.bathgiant-trade-quote-builder__line-title {
display: -webkit-box;
font-weight: 600;
font-size: 0.92rem;
line-height: 1.35;
color: var(--bathgiant-ink);
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.bathgiant-trade-quote-builder__line-sku {
display: block;
margin-top: 0.2rem;
font-size: 0.76rem;
line-height: 1.3;
color: var(--bathgiant-ink-muted);
word-break: break-word;
}
.bathgiant-trade-quote-builder__product {
width: 44%;
min-width: 13rem;
white-space: normal;
}
.bathgiant-trade-quote-builder__sku {
display: none;
}
.bathgiant-trade-quote-builder__unit,
.bathgiant-trade-quote-builder__line-total {
font-size: 0.88rem;
font-variant-numeric: tabular-nums;
white-space: normal;
}
.bathgiant-trade-quote-builder__th-unit,
.bathgiant-trade-quote-builder__unit {
width: 24%;
min-width: 9.5rem;
text-align: left;
}
.bathgiant-trade-quote-builder__th-line,
.bathgiant-trade-quote-builder__line-total {
width: 14%;
min-width: 5.5rem;
text-align: right;
}
.bathgiant-trade-quote-builder__th-qty,
.bathgiant-trade-quote-builder__qty-cell {
width: 4.75rem;
text-align: center;
}
.bathgiant-trade-quote-builder__price-cell {
max-width: none;
}
.bathgiant-trade-quote-builder__price-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.12rem;
}
.bathgiant-trade-quote-builder__price-row {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0.55rem;
width: 100%;
font-size: 0.8rem;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.bathgiant-trade-quote-builder__price-row-label {
flex: 0 0 2.85rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-trade-quote-builder__price-row-value {
font-weight: 600;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__price-row--muted .bathgiant-trade-quote-builder__price-row-label,
.bathgiant-trade-quote-builder__price-row--muted .bathgiant-trade-quote-builder__price-row-value {
opacity: 0.58;
font-weight: 500;
}
.bathgiant-trade-quote-builder__price-row--active .bathgiant-trade-quote-builder__price-row-value {
font-weight: 700;
}
.bathgiant-trade-quote-builder__price-row--saved .bathgiant-trade-quote-builder__price-row-value {
color: #166534;
font-weight: 700;
}
.bathgiant-trade-quote-builder__line-total-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
min-height: 100%;
}
.bathgiant-trade-quote-builder__line-total-amount {
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-ink);
font-variant-numeric: tabular-nums;
}
.bathgiant-trade-quote-builder--trade-pricing .bathgiant-trade-quote-builder__line-total-amount,
.bathgiant-trade-quote-builder--trade-pricing .bathgiant-trade-quote-builder__price-row--active .bathgiant-trade-quote-builder__price-row-value {
color: #166534;
}
.bathgiant-trade-quote-builder__summary-row {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 0.75rem;
width: 100%;
max-width: 14rem;
margin-left: auto;
font-size: 0.84rem;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.bathgiant-trade-quote-builder__summary-label {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
text-align: right;
}
.bathgiant-trade-quote-builder__summary-value {
font-weight: 600;
color: var(--bathgiant-ink);
text-align: right;
}
.bathgiant-trade-quote-builder__summary-row--active .bathgiant-trade-quote-builder__summary-value {
font-weight: 700;
}
.bathgiant-trade-quote-builder__summary-row--saved .bathgiant-trade-quote-builder__summary-value {
color: #166534;
font-weight: 700;
}
.bathgiant-trade-quote-builder__summary-row--muted .bathgiant-trade-quote-builder__summary-label,
.bathgiant-trade-quote-builder__summary-row--muted .bathgiant-trade-quote-builder__summary-value {
opacity: 0.58;
font-weight: 500;
}
.bathgiant-trade-quote-builder--public-pricing .bathgiant-trade-quote-builder__line-total-amount,
.bathgiant-trade-quote-builder--public-pricing .bathgiant-trade-quote-builder__price-row--active .bathgiant-trade-quote-builder__price-row-value,
.bathgiant-trade-quote-builder--public-pricing .bathgiant-trade-quote-builder__summary-row--active .bathgiant-trade-quote-builder__summary-value {
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__search-price-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 0.3rem 0.55rem;
font-size: 0.76rem;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.bathgiant-trade-quote-builder__search-price-bit {
display: inline-flex;
align-items: baseline;
gap: 0.2rem;
white-space: nowrap;
}
.bathgiant-trade-quote-builder__search-price-bit-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-trade-quote-builder__search-price-bit--active {
font-weight: 700;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__search-price-bit--muted {
opacity: 0.58;
font-weight: 500;
}
.bathgiant-trade-quote-builder__search-price-bit--saved {
color: #166534;
font-weight: 700;
}
.bathgiant-trade-quote-builder__search-price-sep {
color: #cbd5e1;
font-weight: 700;
user-select: none;
}
.bathgiant-trade-quote-builder__table thead th:nth-child(4),
.bathgiant-trade-quote-builder__qty-cell {
width: 4.75rem;
}
.bathgiant-trade-quote-builder__table thead th:nth-child(5) {
width: 14%;
}
.bathgiant-trade-quote-builder__table .bathgiant-trade-quote-builder__qty {
width: 4rem;
}
.bathgiant-trade-quote-builder__empty td {
text-align: center;
color: #64748b;
padding: 1.25rem;
}
.bathgiant-trade-quote-builder__remove {
border: none;
background: transparent;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
color: #94a3b8;
padding: 0.15rem 0.35rem;
}
.bathgiant-trade-quote-builder__remove-cell {
width: 2rem;
text-align: center;
}
.bathgiant-trade-quote-builder__aside {
display: flex;
flex-direction: column;
gap: 0.85rem;
grid-column: 2;
grid-row: 1;
min-height: 0;
max-height: 100%;
padding: 1.1rem 1.15rem 0.75rem;
border: 1px solid var(--bathgiant-border);
border-bottom: 0;
border-radius: var(--bathgiant-radius-md) var(--bathgiant-radius-md) 0 0;
background: #f8fafc;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.bathgiant-trade-quote-builder__aside > fieldset,
.bathgiant-trade-quote-builder__aside > label.bathgiant-trade-quote-builder__field {
flex: 0 0 auto;
min-width: 0;
}
.bathgiant-trade-quote-builder__branch-audience[hidden],
.bathgiant-trade-quote-builder__customer[hidden],
.bathgiant-trade-quote-builder__payment[hidden],
.bathgiant-trade-quote-builder__aside > label.bathgiant-trade-quote-builder__field[hidden] {
display: none !important;
}
.bathgiant-trade-quote-builder__customer,
.bathgiant-trade-quote-builder__payment,
.bathgiant-trade-quote-builder__branch-audience {
margin: 0;
padding: 0.9rem 0.95rem;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
background: #fff;
min-width: 0;
}
.bathgiant-trade-quote-builder__aside > .bathgiant-trade-quote-builder__field[data-bathgiant-tqb-branch-wrap] {
padding: 0.9rem 0.95rem;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
background: #fff;
}
.bathgiant-trade-quote-builder__aside fieldset > legend {
display: block;
float: none;
width: 100%;
padding: 0;
margin: 0 0 0.65rem;
border: 0;
}
.bathgiant-trade-quote-builder__section-title {
margin: 0 0 0.65rem;
padding: 0;
font-family: var(--bathgiant-font-display);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__customer-mode {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0 0 0.85rem;
}
.bathgiant-trade-quote-builder__trade-approval {
margin: 0;
padding: 0.75rem 0 0;
border-top: 1px solid rgba(226, 232, 240, 1);
}
.bathgiant-trade-quote-builder__trade-approval-mode {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-trade-quote-builder__mode {
display: inline-flex;
align-items: center;
margin: 0;
cursor: pointer;
}
.bathgiant-trade-quote-builder__mode input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bathgiant-trade-quote-builder__mode span {
display: inline-block;
padding: 0.42rem 0.8rem;
border: 1px solid var(--bathgiant-border);
border-radius: 999px;
background: var(--bathgiant-light);
color: var(--bathgiant-ink-muted);
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-trade-quote-builder__mode input:checked + span {
border-color: var(--bathgiant-brand);
background: var(--bathgiant-brand-wash);
color: var(--bathgiant-brand-deep);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bathgiant-brand) 18%, transparent);
}
.bathgiant-trade-quote-builder__mode input:focus-visible + span {
outline: 2px solid var(--bathgiant-brand);
outline-offset: 2px;
}
.bathgiant-trade-quote-builder__panel {
margin: 0;
}
.bathgiant-trade-quote-builder__form-grid {
display: grid;
gap: 0.75rem 0.75rem;
grid-template-columns: 1fr;
}
.bathgiant-trade-quote-builder__field {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
.bathgiant-trade-quote-builder__field--half {
grid-column: span 1;
}
@media (min-width: 420px) {
.bathgiant-trade-quote-builder__form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-trade-quote-builder__field:not(.bathgiant-trade-quote-builder__field--half) {
grid-column: 1 / -1;
}
}
.bathgiant-trade-quote-builder__label {
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
color: var(--bathgiant-ink);
}
.bathgiant-trade-quote-builder__aside input[type="text"],
.bathgiant-trade-quote-builder__aside input[type="email"],
.bathgiant-trade-quote-builder__aside input[type="tel"],
.bathgiant-trade-quote-builder__aside input[type="date"],
.bathgiant-trade-quote-builder__aside select,
.bathgiant-trade-quote-builder__aside textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 2.65rem;
margin: 0;
border: 1px solid var(--bathgiant-store-border-input, #cbd5e1);
border-radius: var(--bathgiant-radius-sm);
padding: 0.62rem 0.72rem;
font: inherit;
font-size: 0.92rem;
line-height: 1.35;
color: var(--bathgiant-ink);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-trade-quote-builder__aside input:focus,
.bathgiant-trade-quote-builder__aside select:focus,
.bathgiant-trade-quote-builder__aside textarea:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring, color-mix(in srgb, var(--bathgiant-brand) 24%, transparent));
}
.bathgiant-trade-quote-builder__new-customer,
.bathgiant-trade-quote-builder__public-fields.bathgiant-trade-quote-builder__panel,
.bathgiant-trade-quote-builder__trade-contact.bathgiant-trade-quote-builder__panel {
margin: 0;
padding: 0.85rem;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-sm);
background: var(--bathgiant-light);
}
.bathgiant-trade-quote-builder__panel-note {
margin: 0 0 0.65rem;
font-size: 0.84rem;
}
.bathgiant-trade-quote-builder__status {
margin: 0;
font-size: 0.88rem;
font-weight: 600;
color: #0f766e;
}
.bathgiant-trade-quote-builder__status.is-error {
color: #b91c1c;
}
.bathgiant-trade-quote-builder__foot {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
padding: 0.35rem 1.15rem 1.1rem;
border: 1px solid var(--bathgiant-border);
border-top: 0;
border-radius: 0 0 var(--bathgiant-radius-md) var(--bathgiant-radius-md);
background: #f8fafc;
}
.bathgiant-trade-quote-builder__actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding-top: 0.15rem;
flex: 0 0 auto;
}
.bathgiant-trade-quote-builder__actions .bathgiant-btn {
width: 100%;
margin: 0;
justify-content: center;
text-align: center;
}
.bathgiant-trade-quote-builder__note {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-trade-quote-builder-toolbar {
margin-bottom: 1.25rem;
}
.bathgiant-trade-quote-builder-toolbar--trade {
padding: 0;
border: 1px solid var(--bathgiant-store-border, #e2e8f0);
border-radius: var(--bathgiant-radius-md, 12px);
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 52%, #fff 100%);
box-shadow:
0 1px 0 rgba(15, 23, 42, 0.03),
0 10px 28px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
body.bathgiant-has-trade-pricing .bathgiant-trade-quote-builder-toolbar--trade {
background: linear-gradient(135deg, #fdf8f9 0%, #f8fafc 46%, #fff 100%);
border-color: color-mix(in srgb, var(--bathgiant-brand) 16%, #e2e8f0);
}
.bathgiant-trade-quote-builder-toolbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
padding: 1.2rem 1.4rem;
}
.bathgiant-trade-quote-builder-toolbar__content {
flex: 1 1 14rem;
min-width: 0;
}
.bathgiant-trade-quote-builder-toolbar__action {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
}
.bathgiant-trade-quote-builder-toolbar__title {
margin: 0 0 0.35rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--bathgiant-store-ink-strong, #1f2937);
letter-spacing: -0.01em;
}
.bathgiant-trade-quote-builder-toolbar__lede {
margin: 0;
max-width: 38rem;
font-size: 0.92rem;
line-height: 1.5;
color: #64748b;
}
.bathgiant-trade-quote-builder-toolbar__action .bathgiant-trade-quote-builder-launcher {
margin: 0;
}
.bathgiant-trade-quote-builder-toolbar__action .bathgiant-btn {
padding: 0.68rem 1.4rem;
white-space: nowrap;
}
.bathgiant-trade-quote-builder-launcher {
margin: 0;
}
.bathgiant-account-quote-detail-actions--builder {
display: block;
margin: 0;
padding: 0;
}
.bathgiant-account-quote-edit-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.25rem;
width: 100%;
}
.bathgiant-account-quote-edit-option {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
min-width: 0;
}
.bathgiant-account-quote-edit-option.bathgiant-has-tooltip {
position: relative;
}
.bathgiant-account-quote-edit-option.bathgiant-has-tooltip:hover .bathgiant-tooltip,
.bathgiant-account-quote-edit-option.bathgiant-has-tooltip:focus-within .bathgiant-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.bathgiant-account-quote-edit-option.bathgiant-has-tooltip .bathgiant-tooltip {
max-width: 16rem;
z-index: 20;
}
.bathgiant-account-quote-edit-option__btn,
.bathgiant-account-quote-edit-option .bathgiant-trade-quote-builder-launcher .bathgiant-btn {
width: 100%;
box-sizing: border-box;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
.bathgiant-account-quote-edit-option__btn--catalogue {
background: #fff;
color: #64748b;
border: 1px solid #cbd5e1;
box-shadow: none;
font-weight: 600;
}
.bathgiant-account-quote-edit-option__btn--catalogue:hover,
.bathgiant-account-quote-edit-option__btn--catalogue:focus-visible {
background: #f8fafc;
color: #475569;
border-color: #94a3b8;
box-shadow: none;
}
.bathgiant-account-quote-edit-option__btn--builder {
box-shadow: 0 2px 10px var(--bathgiant-btn-shadow, rgba(139, 21, 56, 0.18));
}
.bathgiant-account-quote-edit-option__btn-label,
.bathgiant-account-quote-edit-option .bathgiant-trade-quote-builder-launcher__btn-label {
width: 100%;
}
.bathgiant-account-quote-edit-option .bathgiant-trade-quote-builder-launcher {
margin: 0;
}
.bathgiant-account-quote-detail-actions__archive {
margin: 0;
}
@media (max-width: 720px) {
.bathgiant-account-quote-edit-options {
grid-template-columns: 1fr;
}
.bathgiant-quote-detail-footer__summary {
align-items: stretch;
}
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total--trade,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-total--customer {
max-width: none;
margin-left: 0;
text-align: left;
}
.bathgiant-quote-detail-footer__summary .bathgiant-quote-legal-footer,
.bathgiant-quote-detail-footer__summary .bathgiant-account-quote-detail-vat-note {
max-width: none;
text-align: left;
}
.bathgiant-quote-detail-footer__summary .bathgiant-quote-live-trade-inline {
align-self: stretch;
}
.bathgiant-quote-detail-footer__tools {
padding: 1rem;
}
.bathgiant-account-quote-detail-actions--checkout {
justify-content: stretch;
}
.bathgiant-quote-magic-review__actions.bathgiant-account-quote-detail-actions--checkout {
flex-direction: column;
align-items: stretch;
}
.bathgiant-quote-magic-review__actions.bathgiant-account-quote-detail-actions--checkout .bathgiant-btn {
width: 100%;
text-align: center;
box-sizing: border-box;
}
.bathgiant-quote-magic-review__footer .bathgiant-quote-detail-footer__summary .bathgiant-quote-legal-footer {
max-width: none;
margin-left: 0;
text-align: left;
}
}
@media (max-width: 640px) {
.bathgiant-trade-quote-builder-toolbar__inner {
align-items: flex-start;
}
.bathgiant-trade-quote-builder-toolbar__action {
width: 100%;
justify-content: stretch;
}
.bathgiant-trade-quote-builder-toolbar__action .bathgiant-trade-quote-builder-launcher,
.bathgiant-trade-quote-builder-toolbar__action .bathgiant-btn {
width: 100%;
text-align: center;
}
} .bathgiant-trade-quote-builder__photos {
margin: 0;
padding: 0.9rem 0.95rem;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
background: #fff;
min-width: 0;
}
.bathgiant-trade-quote-builder__photos > legend {
display: block;
float: none;
width: 100%;
padding: 0;
margin: 0 0 0.45rem;
border: 0;
}
.bathgiant-trade-quote-builder__photos > .description {
margin: 0 0 0.6rem;
font-size: 0.84rem;
color: #64748b;
}
.bathgiant-trade-quote-builder__photo-grid {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin: 0 0 0.65rem;
}
.bathgiant-trade-quote-builder__photo-thumb {
position: relative;
width: 5rem;
height: 5rem;
border-radius: 0.45rem;
border: 1px solid #e2e8f0;
overflow: hidden;
background: #f8fafc;
flex-shrink: 0;
}
.bathgiant-trade-quote-builder__photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-trade-quote-builder__photo-remove {
position: absolute;
top: 0;
right: 0;
width: 1.4rem;
height: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: rgba(15,23,42,0.55);
color: #fff;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
border-radius: 0 0.35rem 0 0.35rem;
opacity: 0;
transition: opacity 0.15s ease;
}
.bathgiant-trade-quote-builder__photo-thumb:hover .bathgiant-trade-quote-builder__photo-remove,
.bathgiant-trade-quote-builder__photo-thumb:focus-within .bathgiant-trade-quote-builder__photo-remove {
opacity: 1;
}
.bathgiant-trade-quote-builder__photo-remove:hover {
background: rgba(185,28,28,0.8);
}
.bathgiant-trade-quote-builder__photo-actions {
display: flex;
gap: 0.55rem;
align-items: center;
}
.bathgiant-trade-quote-builder__photo-label {
display: inline-flex;
align-items: center;
cursor: pointer;
margin: 0;
}
.bathgiant-trade-quote-builder__photo-label input[type="file"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.bathgiant-trade-quote-builder__photo-label .bathgiant-btn__label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.bathgiant-trade-quote-builder__photo-label .bathgiant-btn__label::before {
content: "+";
font-size: 1.1em;
font-weight: 700;
line-height: 1;
}
.bathgiant-trade-quote-builder__photo-status {
margin: 0.45rem 0 0;
font-size: 0.84rem;
font-weight: 600;
color: #0f766e;
}
.bathgiant-trade-quote-builder__photo-status.is-error {
color: #b91c1c;
} .bathgiant-quote-detail__photos {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.bathgiant-quote-detail__photo-link {
display: block;
width: 4rem;
height: 4rem;
border-radius: 0.35rem;
border: 1px solid #e2e8f0;
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-quote-detail__photo-link:hover {
border-color: var(--bathgiant-brand, #7f1d1d);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--bathgiant-brand, #7f1d1d) 20%, transparent);
}
.bathgiant-quote-detail__photo-thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.bathgiant-trade-quote-builder__dialog {
width: 100%;
height: 100%;
height: var(--bathgiant-tqb-viewport-height, 100dvh);
max-height: none;
max-height: var(--bathgiant-tqb-viewport-height, 100dvh);
margin: 0;
border-radius: 0;
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
.bathgiant-trade-quote-builder__head {
flex: 0 0 auto;
position: relative;
z-index: 3;
padding: 0.85rem 0.95rem;
padding-right: max(0.95rem, env(safe-area-inset-right, 0px));
}
.bathgiant-trade-quote-builder__close {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
margin: -0.35rem -0.25rem 0 0;
padding: 0;
border-radius: 0.45rem;
}
.bathgiant-trade-quote-builder__body {
display: flex;
flex-direction: column;
grid-template-columns: none;
grid-template-rows: none;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
gap: 0;
padding: 0;
}
.bathgiant-trade-quote-builder__scroll {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 0.85rem 0.85rem 1rem;
}
.bathgiant-trade-quote-builder__main {
display: block;
grid-column: auto;
grid-row: auto;
flex: 0 0 auto;
min-height: auto;
}
.bathgiant-trade-quote-builder__table-wrap {
flex: none;
overflow: visible;
min-height: 0;
}
.bathgiant-trade-quote-builder__aside {
grid-column: auto;
grid-row: auto;
flex: 0 0 auto;
max-height: none;
overflow: visible;
margin-top: 0.85rem;
padding: 1.1rem 1.15rem;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-md);
}
.bathgiant-trade-quote-builder__foot {
grid-column: auto;
grid-row: auto;
flex: 0 0 auto;
z-index: 4;
margin: 0;
padding: 0.75rem 0.85rem;
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
border: 0;
border-top: 1px solid #e2e8f0;
border-radius: 0;
background: #f8fafc;
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}
.bathgiant-trade-quote-builder__actions {
position: static;
margin: 0;
padding: 0;
background: none;
}
.bathgiant-trade-quote-builder__actions .bathgiant-btn {
min-height: 2.75rem;
} .bathgiant-trade-quote-builder__table {
min-width: 32rem;
}
} @media (max-width: 720px) {
.bathgiant-trade-quote-builder__table-wrap {
border: none;
border-radius: 0;
overflow: visible;
}
.bathgiant-trade-quote-builder__lines {
padding: 0.15rem 0 0.35rem;
}
.bathgiant-trade-quote-builder__table,
.bathgiant-trade-quote-builder__table.bathgiant-cart-table {
display: block;
width: 100%;
min-width: 0;
margin: 0;
border: none;
table-layout: auto;
}
.bathgiant-trade-quote-builder__table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
.bathgiant-trade-quote-builder__table tbody {
display: block;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0 0 0.75rem;
padding: 0.85rem 0.95rem 0.95rem;
border: 1px solid #e4ebf3;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row:last-child {
margin-bottom: 0;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td {
display: grid;
grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr);
column-gap: 0.75rem;
align-items: center;
width: auto;
min-width: 0;
padding: 0.4rem 0;
border: none;
border-bottom: 1px solid #eef2f7;
text-align: left;
white-space: normal;
vertical-align: middle;
background: transparent;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td::before {
display: block;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
line-height: 1.3;
min-width: 0;
} .bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-cart-cell-product,
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-trade-quote-builder__product {
display: block;
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
padding: 0 0 0.55rem;
margin: 0 0 0.1rem;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-cart-cell-product::before,
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-trade-quote-builder__product::before {
content: none;
display: none;
}
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-product,
.bathgiant-trade-quote-builder__table .bathgiant-trade-quote-builder__line-product {
width: 100%;
min-width: 0;
align-items: flex-start;
}
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-product__body,
.bathgiant-trade-quote-builder__table .bathgiant-cart-title,
.bathgiant-trade-quote-builder__table .bathgiant-trade-quote-builder__line-title {
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
min-width: 0;
-webkit-line-clamp: unset;
} .bathgiant-trade-quote-builder__table .bathgiant-cart-line-product__body .bathgiant-cart-line-details,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-details {
width: 100%;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
}
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branches,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branches__collect-now,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branch-card,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branches__disclosure,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branches__list,
.bathgiant-trade-quote-builder__table .bathgiant-cart-line-branches__list li {
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
}
.bathgiant-trade-quote-builder__table .bathgiant-pkg-line__thumb {
width: 3.5rem;
height: 3.5rem;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__unit::before {
content: "Unit price";
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__unit,
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__line-total {
grid-template-columns: 1fr;
align-items: start;
justify-items: stretch;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__unit::before,
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__line-total::before {
margin-bottom: 0.2rem;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__qty-cell {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.65rem;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__qty-cell::before {
content: "Qty";
flex: 0 0 auto;
margin: 0;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__qty-cell .bathgiant-trade-quote-builder__qty {
margin: 0;
width: 4.75rem;
max-width: 100%;
min-height: 2.5rem;
font-size: 1rem;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__line-total::before {
content: "Line total";
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__line-total .bathgiant-trade-quote-builder__line-total-wrap {
align-items: flex-start;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-trade-quote-builder__remove-cell {
display: flex;
justify-content: stretch;
padding-top: 0.55rem;
margin-top: 0.1rem;
border-top: 1px solid #eef2f7;
border-bottom: none;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-cart-row td.bathgiant-trade-quote-builder__remove-cell::before {
content: none;
display: none;
}
.bathgiant-trade-quote-builder__table td.bathgiant-trade-quote-builder__remove-cell .bathgiant-trade-quote-builder__remove {
width: 100%;
min-height: 2.5rem;
min-width: 0;
border-radius: 8px;
border: 1px solid #cbd5e1;
background: #fff;
color: #64748b;
font-size: 1.15rem;
line-height: 1;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-trade-quote-builder__empty {
display: block;
margin: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-trade-quote-builder__empty td {
display: block;
grid-template-columns: none;
padding: 0.85rem 0.75rem;
border: 1px dashed #cbd5e1;
border-radius: 10px;
text-align: center;
background: #f8fafc;
}
.bathgiant-trade-quote-builder__table tbody tr.bathgiant-trade-quote-builder__empty td::before {
content: none;
display: none;
}
.bathgiant-trade-quote-builder__main-footer {
border-radius: 10px;
margin-top: 0.55rem;
}
.bathgiant-trade-quote-builder__extras {
margin-top: 0.55rem;
padding: 0;
}
.bathgiant-trade-quote-builder__extras-toggle {
min-height: 2.75rem;
padding: 0.5rem 0.7rem;
}
.bathgiant-trade-quote-builder__extras-panel {
padding: 0.5rem 0.6rem 0.6rem;
}
.bathgiant-trade-quote-builder__extras-item {
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
padding: 0.5rem;
}
.bathgiant-trade-quote-builder__extras-thumb {
width: 40px;
height: 40px;
}
.bathgiant-trade-quote-builder__extras-body {
grid-template-columns: minmax(0, 1fr);
gap: 0.3rem;
}
.bathgiant-trade-quote-builder__extras-price {
text-align: left;
}
.bathgiant-trade-quote-builder__extras-price .bathgiant-trade-quote-builder__search-price-line {
justify-content: flex-start;
}
.bathgiant-trade-quote-builder__extras-add {
grid-column: 1 / -1;
width: 100%;
min-height: 2.75rem;
border-radius: 8px;
}
.bathgiant-trade-quote-builder__subtotal-bar,
.bathgiant-trade-quote-builder__savings-bar {
padding-right: 0.85rem;
padding-left: 0.85rem;
}
.bathgiant-trade-quote-builder__search-item {
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
min-height: 2.75rem;
} .bathgiant-trade-quote-builder__main
.bathgiant-trade-quote-builder__search-wrap
> .bathgiant-trade-quote-builder__search-results:not(.bathgiant-trade-quote-builder__search-results--trade-account) {
position: static;
width: 100%;
max-height: min(18rem, 45dvh);
margin: 0.3rem 0 0.75rem;
overflow-y: auto;
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
}
.bathgiant-trade-quote-builder__main
.bathgiant-trade-quote-builder__search-results:not(.bathgiant-trade-quote-builder__search-results--trade-account)
.bathgiant-trade-quote-builder__search-item {
gap: 0.4rem 0.6rem;
padding: 0.55rem 0.65rem;
}
.bathgiant-trade-quote-builder__main
.bathgiant-trade-quote-builder__search-results:not(.bathgiant-trade-quote-builder__search-results--trade-account)
.bathgiant-trade-quote-builder__search-title {
font-size: 0.9rem;
line-height: 1.28;
}
.bathgiant-trade-quote-builder__main
.bathgiant-trade-quote-builder__search-results:not(.bathgiant-trade-quote-builder__search-results--trade-account)
.bathgiant-trade-quote-builder__search-sku {
margin-top: 0.1rem;
font-size: 0.72rem;
}
.bathgiant-trade-quote-builder__search-body {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.bathgiant-trade-quote-builder__search-price {
justify-self: start;
text-align: left;
}
.bathgiant-trade-quote-builder__search-price-line {
justify-content: flex-start;
}
.bathgiant-trade-quote-builder__search-add {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 2.75rem;
max-height: 2.75rem;
min-height: 2.75rem;
align-self: start;
text-align: center;
border-radius: 8px;
padding: 0.45rem 0.75rem;
line-height: 1.2;
box-sizing: border-box;
}
.bathgiant-trade-quote-builder__search-item.is-added .bathgiant-trade-quote-builder__search-add,
.bathgiant-trade-quote-builder__search-item.is-added:hover .bathgiant-trade-quote-builder__search-add,
.bathgiant-trade-quote-builder__search-item.is-added:focus-visible .bathgiant-trade-quote-builder__search-add {
background: #f0fdf4;
border-color: #bbf7d0;
color: #15803d;
}
.bathgiant-trade-quote-builder__price-stack {
align-items: stretch;
gap: 0.2rem;
width: 100%;
min-width: 0;
}
.bathgiant-trade-quote-builder__price-row {
flex-wrap: wrap;
gap: 0.25rem 0.55rem;
}
.bathgiant-trade-quote-builder__mode {
max-width: 100%;
min-width: 0;
}
.bathgiant-trade-quote-builder__mode > input + span {
min-height: 2.75rem;
height: auto;
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 0.35rem 0.75rem;
border-radius: 0.65rem;
box-sizing: border-box;
line-height: 1.2;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
} .bathgiant-trade-quote-builder__mode > .bathgiant-quote-payment-coming-soon {
min-height: 0;
width: auto;
padding: 0.1rem 0.4rem;
border: 0;
border-radius: 999px;
font-size: 0.66rem;
line-height: 1.25;
}
.bathgiant-trade-quote-builder__customer-mode,
.bathgiant-trade-quote-builder__payment-mode,
.bathgiant-trade-quote-builder__trade-approval-mode,
.bathgiant-trade-quote-builder__levels {
gap: 0.4rem;
}
.bathgiant-trade-quote-builder__customer-mode {
margin-bottom: 0.65rem;
}
.bathgiant-trade-quote-builder__trade-approval {
padding-top: 0.6rem;
}
.bathgiant-trade-quote-builder__trade-approval-mode {
align-items: flex-start;
} .bathgiant-trade-quote-builder__level {
min-height: 2.75rem;
align-items: center;
padding: 0.25rem 0.2rem;
box-sizing: border-box;
}
.bathgiant-trade-quote-builder__level input {
flex: 0 0 auto;
margin-top: 0;
}
.bathgiant-trade-quote-builder__aside select,
.bathgiant-trade-quote-builder__aside input[type="text"],
.bathgiant-trade-quote-builder__aside input[type="email"],
.bathgiant-trade-quote-builder__aside input[type="tel"],
.bathgiant-trade-quote-builder__aside input[type="search"],
.bathgiant-trade-quote-builder__search {
min-height: 2.75rem;
}
.bathgiant-trade-quote-builder__actions {
position: static;
margin: 0;
padding: 0;
background: none;
} .bathgiant-trade-quote-builder__photo-thumb {
width: 3.75rem;
height: 3.75rem;
}
}
.bathgiant-trade-customer-dash__actions {
margin: 0;
padding: 0;
border-top: 0;
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
justify-content: flex-end;
}
.bathgiant-trade-customer-dash__head .bathgiant-trade-customer-dash__actions {
margin: 0;
padding: 0;
border-top: 0;
}
.bathgiant-trade-customer-dash__actions .bathgiant-btn {
margin: 0;
}
.bathgiant-trade-customer-dash .bathgiant-account-panel__head {
margin: 0 0 0.75rem;
padding-top: 0;
}
.bathgiant-trade-customer-dash .bathgiant-account-panel__title {
margin-bottom: 0.35rem;
}
.bathgiant-trade-customer-dash .bathgiant-account-panel__lede {
margin-top: 0.1rem;
}
.bathgiant-trade-customer-dash .bathgiant-account-quotes-table-wrap {
margin-top: 0.25rem;
} .bathgiant-account-panel:has(.bathgiant-trade-customer-dash__back),
.bathgiant-account-panel:has(> .bathgiant-account-panel__body .bathgiant-customer-dashboard) {
padding-top: 0.85rem;
} .bathgiant-trade-customers-form__card {
max-width: 34rem;
margin: 0;
padding: 1.15rem 1.25rem;
border: 1px solid #d7dbe0;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.bathgiant-trade-customers-form__title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bathgiant-trade-customers-form__subhead {
margin: 1rem 0 0.65rem;
padding-bottom: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-trade-customers-form .bathgiant-field {
margin: 0 0 0.85rem;
}
.bathgiant-trade-customers-form__grid {
display: grid;
gap: 0 1rem;
}
.bathgiant-trade-customers-form__grid--contact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-trade-customers-form__grid--stack {
grid-template-columns: 1fr;
}
.bathgiant-trade-customers-form__grid--locality {
grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 9rem) minmax(4.25rem, 5rem);
align-items: end;
}
.bathgiant-trade-customers-form .bathgiant-field--span-2 {
grid-column: 1 / -1;
}
.bathgiant-trade-customers-form .bathgiant-field--max-md {
max-width: 18rem;
}
.bathgiant-trade-customers-form .bathgiant-field--country {
max-width: none;
}
.bathgiant-trade-customers-form .bathgiant-field--country input {
max-width: 4.25rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bathgiant-trade-customers-form .bathgiant-field--postcode input {
max-width: 100%;
}
.bathgiant-trade-customers-form .bathgiant-field--notes textarea {
display: block;
width: 100%;
min-height: 5.5rem;
margin-top: 0.35rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--bathgiant-border);
border-radius: var(--bathgiant-radius-sm);
font-family: var(--bathgiant-font-sans);
font-size: 0.9375rem;
line-height: 1.45;
resize: vertical;
box-sizing: border-box;
}
.bathgiant-trade-customers-form .bathgiant-field--notes .description {
display: block;
margin-top: 0.35rem;
color: var(--bathgiant-ink-muted);
font-size: 0.8125rem;
line-height: 1.4;
}
.bathgiant-trade-customers-form__actions {
margin-top: 0.25rem;
padding-top: 1rem;
border-top: 1px solid #eef2f7;
}
@media (max-width: 560px) {
.bathgiant-trade-customers-form__grid--contact {
grid-template-columns: 1fr;
}
.bathgiant-trade-customers-form__grid--locality {
grid-template-columns: 1fr;
}
.bathgiant-trade-customers-form .bathgiant-field--max-md {
max-width: none;
}
} @media (max-width: 720px) { body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-account-dashboard-page),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-trade-customers-panel),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-cart-page),
body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-archive-products,
body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-archive-packages,
body.bg-breadcrumbs-off #main-content.bathgiant-wrap.bathgiant-tax-archive:not(.bathgiant-tax-archive--with-hero) {
padding-top: 0.35rem;
}
body.bathgiant-account-dashboard-focus .bathgiant-layout__body > main.bathgiant-core-route:has(.bathgiant-account-dashboard-page) {
padding-top: 0.3rem;
padding-bottom: 0.85rem;
}
#main-content.bathgiant-wrap:has(.bathgiant-account-dashboard-page),
#main-content.bathgiant-wrap:has(.bathgiant-trade-customers-panel) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.bathgiant-account-dashboard-page,
.bathgiant-trade-customers-panel,
.bathgiant-cart-page.bathgiant-core {
overflow-x: hidden;
}
.bathgiant-account-dashboard-page {
background: #fff;
}
.bathgiant-account-tabs-layout {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
.bathgiant-account-tabs-group--settings {
margin-left: 0;
}
.bathgiant-account-dashboard-head {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
margin: 0 0 0.55rem;
}
.bathgiant-account-dashboard-head__tools {
align-self: stretch;
flex-wrap: wrap;
justify-content: flex-start;
}
.bathgiant-account-dashboard-theme-toggle,
.bathgiant-account-dashboard-focus-toggle,
.bathgiant-account-dashboard-insights-btn,
.bathgiant-account-dashboard-training-btn {
max-width: 100%;
}
.bathgiant-account-tabs-group {
width: 100%;
flex: 1 1 100%;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.65rem 0.75rem;
background: #fff;
box-sizing: border-box;
}
.bathgiant-account-tabs-group__head {
align-items: stretch;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.5rem;
min-height: 0;
}
.bathgiant-account-tabs-group__label {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
padding-right: 0;
border-right: none;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__label,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs-group__label,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__label,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs-group__label,
.bathgiant-account-tabs-group--branch .bathgiant-account-tabs-group__label {
padding-right: 0;
border-right: none;
}
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs-group__head,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs-group__head,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs-group__head,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs-group__head {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
.bathgiant-account-tabs,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs,
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
gap: 0.4rem;
margin: 0 -0.2rem;
padding: 0.1rem 0.2rem 0.35rem;
}
.bathgiant-account-tabs--has-mobile-select,
.bathgiant-account-tabs-group--branch-toolbar .bathgiant-account-tabs--has-mobile-select,
.bathgiant-account-tabs-group--activity .bathgiant-account-tabs--has-mobile-select,
.bathgiant-account-tabs-group--customers .bathgiant-account-tabs--has-mobile-select,
.bathgiant-account-tabs-group--settings .bathgiant-account-tabs--has-mobile-select,
.bathgiant-account-tabs-group--admin .bathgiant-account-tabs--has-mobile-select {
flex-wrap: wrap;
overflow: visible;
-webkit-overflow-scrolling: auto;
margin: 0;
padding: 0;
gap: 0.45rem;
}
.bathgiant-account-tabs--has-mobile-select > [data-bathgiant-account-tab]:not(.bathgiant-account-tabs__tab--icon-only),
.bathgiant-account-source-tabs--has-mobile-select > [data-bathgiant-account-source-tab] {
display: none !important;
}
.bathgiant-account-tabs--has-mobile-select .bathgiant-account-nav-select,
.bathgiant-account-source-tabs--has-mobile-select .bathgiant-account-nav-select {
display: block;
flex: 1 1 100%;
width: 100%;
order: -1;
}
.bathgiant-account-source-tabs--has-mobile-select {
flex-wrap: wrap;
overflow: visible;
border-bottom: none;
padding-bottom: 0;
gap: 0.45rem;
} .bathgiant-account-mobile-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
width: 100%;
}
.bathgiant-account-tabs-layout--has-mobile-nav > .bathgiant-account-mobile-nav {
display: flex;
}
.bathgiant-account-tabs-layout--has-mobile-nav > .bathgiant-account-tabs-group {
display: none;
}
.bathgiant-account-mobile-nav .bathgiant-account-nav-select--dashboard {
display: block;
width: 100%;
}
.bathgiant-account-mobile-nav__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-account-mobile-nav__actions .bathgiant-account-tabs__tab--action {
flex: 1 1 auto;
justify-content: center;
}
.bathgiant-account-tabs .bathgiant-tooltip {
display: none !important;
}
.bathgiant-account-tabs::-webkit-scrollbar {
display: none;
}
.bathgiant-account-tabs__tab {
flex: 0 0 auto;
white-space: nowrap;
padding: 0.5rem 0.9rem;
font-size: 0.88rem;
}
.bathgiant-account-panel {
padding: 0.15rem 0 1rem;
margin-bottom: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-account-panel__head {
margin: 0 0 0.75rem;
padding: 0 0 0.75rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-account-profile__section,
.bathgiant-intact-card,
.bathgiant-account-dashboard-prefs__label {
border-radius: 0;
box-shadow: none;
}
.bathgiant-account-profile__section,
.bathgiant-intact-card {
padding: 0.9rem 0;
border: none;
border-top: 1px solid #e2e8f0;
background: transparent;
}
.bathgiant-account-dashboard-prefs__label {
padding: 0.75rem 0;
border: none;
border-top: 1px solid #e2e8f0;
background: transparent;
}
.bathgiant-customer-dashboard__section {
padding: 0.75rem 0;
border-top: 1px solid #e2e8f0;
}
.bathgiant-account-form input[type="text"],
.bathgiant-account-form input[type="email"],
.bathgiant-account-form input[type="tel"],
.bathgiant-account-form select,
.bathgiant-account-form textarea {
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
}
.bathgiant-account-notice {
font-size: 0.92rem;
line-height: 1.45;
}
.bathgiant-account-table-sort-bar {
display: flex;
margin: 0 0 0.55rem;
padding: 0 0 0.55rem;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
border-bottom: 1px solid #eef2f7;
}
.bathgiant-account-quotes-table-wrap,
.bathgiant-account-data-table-wrap,
.bathgiant-account-orders-table-wrap,
.bathgiant-trade-customers-table-wrap,
.bathgiant-branch-customers-table-wrap,
.bathgiant-customer-dashboard__table-wrap {
overflow: visible;
border: none;
background: transparent;
box-shadow: none;
}
.bathgiant-account-quotes-table-wrap .bathgiant-account-quotes-table,
.bathgiant-account-data-table-wrap .bathgiant-intact-table,
.bathgiant-account-orders-table-wrap .bathgiant-account-orders-table,
.bathgiant-trade-customers-table-wrap .bathgiant-trade-customers-table,
.bathgiant-customer-dashboard__table-wrap .bathgiant-customer-dashboard__table {
min-width: 0;
display: block;
width: 100%;
}
.bathgiant-account-quotes-table thead,
.bathgiant-account-orders-table thead,
.bathgiant-trade-customers-table thead,
.bathgiant-customer-dashboard__table thead {
display: none;
}
tr[data-bathgiant-account-filter-empty] {
display: block;
margin: 0 0 0.75rem;
}
tr[data-bathgiant-account-filter-empty] td {
display: block;
border: 1px dashed #cbd5e1;
border-radius: 10px;
}
.bathgiant-account-quotes-table tbody,
.bathgiant-account-orders-table tbody,
.bathgiant-trade-customers-table tbody,
.bathgiant-customer-dashboard__table tbody {
display: block;
} .bathgiant-account-quotes-table tbody tr,
.bathgiant-account-orders-table tbody tr,
.bathgiant-trade-customers-table tbody tr,
.bathgiant-customer-dashboard__table tbody tr,
.bathgiant-account-quotes-table.bathgiant-cart-table tbody tr,
.bathgiant-account-orders-table.bathgiant-cart-table tbody tr,
.bathgiant-trade-customers-table.bathgiant-cart-table tbody tr {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0.55rem 0 0.65rem;
border: none;
border-bottom: 1px solid #e2e8f0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
grid-template-columns: none;
column-gap: normal;
row-gap: normal;
}
.bathgiant-account-quotes-table tbody tr:last-child,
.bathgiant-account-orders-table tbody tr:last-child,
.bathgiant-trade-customers-table tbody tr:last-child,
.bathgiant-customer-dashboard__table tbody tr:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bathgiant-account-quotes-table tbody tr:hover td,
.bathgiant-account-orders-table tbody tr:hover td,
.bathgiant-trade-customers-table tbody tr:hover td {
background: transparent;
}
.bathgiant-account-quotes-table tbody td,
.bathgiant-account-orders-table tbody td,
.bathgiant-trade-customers-table tbody td,
.bathgiant-customer-dashboard__table tbody td,
.bathgiant-account-quotes-table.bathgiant-cart-table tbody td,
.bathgiant-account-orders-table.bathgiant-cart-table tbody td,
.bathgiant-trade-customers-table.bathgiant-cart-table tbody td {
display: grid;
grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr);
column-gap: 0.75rem;
row-gap: 0.15rem;
align-items: center;
padding: 0.38rem 0;
border: none;
border-bottom: 1px solid #eef2f7;
text-align: left;
white-space: normal;
min-width: 0;
vertical-align: top;
}
.bathgiant-account-quotes-table tbody td:last-child,
.bathgiant-account-orders-table tbody td:last-child,
.bathgiant-trade-customers-table tbody td:last-child,
.bathgiant-customer-dashboard__table tbody td:last-child {
border-bottom: none;
}
.bathgiant-account-quotes-table tbody td::before,
.bathgiant-account-orders-table tbody td::before,
.bathgiant-trade-customers-table tbody td::before,
.bathgiant-customer-dashboard__table tbody td::before {
content: attr(data-label);
display: block;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
line-height: 1.3;
min-width: 0;
}
.bathgiant-account-quotes-table tbody td:not([data-label])::before,
.bathgiant-account-orders-table tbody td:not([data-label])::before,
.bathgiant-trade-customers-table tbody td:not([data-label])::before,
.bathgiant-customer-dashboard__table tbody td:not([data-label])::before {
content: none;
display: none;
}
.bathgiant-account-quotes-table td.bathgiant-cart-cell-product,
.bathgiant-account-orders-table td.bathgiant-cart-cell-product {
grid-template-columns: 1fr;
}
.bathgiant-account-quotes-table td.bathgiant-cart-cell-product::before,
.bathgiant-account-orders-table td.bathgiant-cart-cell-product::before {
margin-bottom: 0.15rem;
} .bathgiant-trade-customers-table td.bathgiant-trade-customers-table__cell-name {
grid-template-columns: 1fr;
padding-top: 0.15rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid #eef2f7;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
}
.bathgiant-trade-customers-table td.bathgiant-trade-customers-table__cell-name::before {
content: none;
display: none;
} .bathgiant-branch-customers-table tbody td:nth-child(2) {
order: -2;
grid-template-columns: 1fr;
padding: 0.1rem 0 0.2rem;
border-bottom: none;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
}
.bathgiant-branch-customers-table tbody td:nth-child(2)::before {
content: none;
display: none;
}
.bathgiant-branch-customers-table tbody td:nth-child(1) {
order: -1;
grid-template-columns: 1fr;
gap: 0.12rem;
padding: 0 0 0.45rem;
border-bottom: 1px solid #eef2f7;
color: #475569;
font-size: 0.88rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.bathgiant-branch-customers-table tbody td:nth-child(1)::before {
font-size: 0.62rem;
font-weight: 700;
color: #94a3b8;
}
.bathgiant-branch-customers-table .bathgiant-branch-customers-table__name,
.bathgiant-branch-customers-table .bathgiant-account-customer-link {
font-weight: 700;
text-decoration: none;
}
.bathgiant-account-quotes-table td.bathgiant-account-quotes-actions,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions,
.bathgiant-trade-customers-table td.bathgiant-trade-customers-actions-cell,
.bathgiant-customer-dashboard__table--saved-customers td.bathgiant-customer-dashboard__actions-cell {
grid-template-columns: 1fr;
padding-top: 0.5rem;
padding-bottom: 0.1rem;
border-bottom: none;
}
.bathgiant-account-quotes-table td.bathgiant-account-quotes-actions::before,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions::before,
.bathgiant-trade-customers-table td.bathgiant-trade-customers-actions-cell::before,
.bathgiant-customer-dashboard__table--saved-customers td.bathgiant-customer-dashboard__actions-cell::before {
content: none;
display: none;
}
.bathgiant-account-quotes-actions {
min-width: 0;
} .bathgiant-account-quotes-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner,
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 0.45rem;
}
.bathgiant-account-quotes-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary,
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary {
flex: 1 1 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.5rem;
min-width: 0;
width: 100%;
}
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__link,
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link,
.bathgiant-customer-dashboard__action {
flex: 1 1 0;
min-width: calc(50vw - 16px);
width: auto;
max-width: none;
box-sizing: border-box;
justify-content: center;
padding-inline: 0.85rem;
container-type: normal;
white-space: normal;
text-align: center;
}
.bathgiant-branch-customers-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary > .bathgiant-account-quotes-actions__link:only-child {
flex: 1 1 100%;
} .bathgiant-trade-customers-table td.bathgiant-trade-customers-actions-cell {
width: auto;
min-width: 0;
max-width: none;
}
.bathgiant-trade-customers-actions-row {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.45rem;
width: 100%;
min-width: 0;
}
.bathgiant-trade-customers-actions-primary {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.5rem;
min-width: 0;
width: 100%;
}
.bathgiant-trade-customers-action-form {
display: flex;
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
}
.bathgiant-trade-customers-table .bathgiant-trade-customers-action,
.bathgiant-trade-customers-table .bathgiant-trade-customers-action.bathgiant-btn,
.bathgiant-trade-customers-action.bathgiant-trade-customers-action {
flex: 1 1 0;
width: auto;
max-width: none;
min-width: 0;
min-height: 2.75rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
padding-inline: 0.85rem;
position: static;
transform: none;
container-type: normal;
white-space: normal;
text-align: center;
}
.bathgiant-trade-customers-table .bathgiant-trade-customers-action--remove,
.bathgiant-trade-customers-table .bathgiant-trade-customers-action--remove.bathgiant-btn {
flex: 1 1 auto;
width: 100%;
max-width: none;
min-width: 0;
}
.bathgiant-trade-customers-action--remove .bathgiant-trade-customers-action__label {
display: inline;
}
.bathgiant-customer-dashboard__actions-row {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 0.45rem;
}
.bathgiant-account-quote-subtotal-cell {
min-width: 0;
max-width: none;
}
.bathgiant-account-quote-subtotal-cell__label {
display: none;
}
.bathgiant-account-quote-subtotal-cell__stack {
gap: 0.2rem;
}
.bathgiant-account-quotes-actions__link,
.bathgiant-account-quotes-actions__trade-btn,
.bathgiant-account-quote-detail-actions .bathgiant-btn,
.bathgiant-quote-edit-panel .bathgiant-btn,
.bathgiant-trade-customers-toolbar__add {
min-height: 2.75rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
}
.bathgiant-trade-customers-toolbar__delivery-sites {
min-height: 2.75rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
width: 100%;
max-width: none;
text-align: center;
box-sizing: border-box;
white-space: normal;
}
.bathgiant-trade-customers-panel__toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
margin: 0 0 0.55rem;
padding: 0 0 0.65rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-trade-customers-panel__intro {
order: -1;
}
.bathgiant-trade-customers-toolbar__add {
width: 100%;
margin-left: 0;
text-align: center;
box-sizing: border-box;
}
.bathgiant-trade-customers-list-card {
padding: 0.35rem 0 0;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-trade-customers-list-card__head {
margin: 0 0 0.4rem;
padding: 0 0 0.4rem;
border-bottom: 1px solid #eef2f7;
} .bathgiant-account-panel--training .bathgiant-account-panel__head,
.bathgiant-account-panel:has(.bathgiant-user-guide-training) .bathgiant-account-panel__head,
.bathgiant-account-panel:has(.bathgiant-user-guide-profile-guides) .bathgiant-account-panel__head {
margin-bottom: 0.7rem;
}
.bathgiant-user-guide-profile-guides {
margin-bottom: 0.35rem;
}
.bathgiant-user-guide-profile-guides__head {
margin-bottom: 0.65rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e2e8f0;
gap: 0.65rem;
}
.bathgiant-user-guide-profile-guides__stat {
width: 100%;
min-width: 0;
margin: 0;
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-top: 1px solid #e2e8f0;
background: transparent;
box-shadow: none;
}
.bathgiant-user-guide-training {
gap: 0.85rem;
}
.bathgiant-user-guide-training__print-bar {
margin: 0;
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-top: 1px solid #e2e8f0;
background: transparent;
}
.bathgiant-user-guide-training__module {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
border-top: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__module + .bathgiant-user-guide-training__module {
margin-top: 0;
}
.bathgiant-user-guide-training__module-header {
padding: 0.75rem 0;
}
.bathgiant-user-guide-training__module-header:hover,
.bathgiant-user-guide-training__module-header:focus-visible {
background: transparent;
}
.bathgiant-user-guide-training__module-body {
padding: 0 0 0.85rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-overview-open .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-overview-open.is-current .bathgiant-user-guide-training__card {
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #eef2f7;
background: transparent;
box-shadow: none;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__item {
padding: 0;
}
.bathgiant-trade-customer-dash__head {
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0.75rem 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #e2e8f0;
background: transparent;
box-shadow: none;
}
.bathgiant-trade-customer-dash__head-grid,
.bathgiant-trade-customer-dash__head-grid--compact,
.bathgiant-trade-customer-dash__head-grid--with-map {
grid-template-columns: 1fr;
align-items: stretch;
}
.bathgiant-trade-customer-dash__head-col--map {
min-height: 14rem;
}
.bathgiant-customer-dashboard-map {
min-height: 13rem;
}
.bathgiant-trade-customer-dash__head-col--side {
align-items: flex-start;
text-align: left;
}
.bathgiant-trade-customer-dash__head-col--meta .bathgiant-quote-detail__meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-trade-customer-dash__contact {
flex-direction: column;
align-items: flex-start;
} .bathgiant-account-quote-detail-table-wrap:has(.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table)) {
margin: 0;
overflow: visible;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) {
min-width: 0;
width: 100%;
display: block;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
table-layout: auto;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) thead {
display: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody {
display: block;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody tr {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0 0 0.75rem;
padding: 0.85rem 0.95rem 0.95rem;
border: 1px solid #e4ebf3;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
grid-template-columns: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody tr:last-child {
margin-bottom: 0;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody tr:nth-child(even) td {
background: transparent;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td {
display: grid;
grid-template-columns: minmax(5.75rem, 38%) minmax(0, 1fr);
column-gap: 0.75rem;
align-items: center;
padding: 0.4rem 0;
border: none;
border-bottom: 1px solid #eef2f7;
text-align: left !important;
white-space: normal !important;
min-width: 0;
vertical-align: top;
background: transparent !important;
color: inherit;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td::before {
content: attr(data-label);
display: block;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
line-height: 1.3;
min-width: 0;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td:not([data-label])::before {
content: none;
display: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-cart-cell-product {
grid-template-columns: 1fr;
padding: 0 0 0.55rem;
margin: 0 0 0.1rem;
border-bottom: 1px solid #eef2f7;
font-weight: 400;
font-variant-numeric: normal;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-cart-cell-product::before {
content: none;
display: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) .bathgiant-cart-line-product {
width: 100%;
min-width: 0;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) .bathgiant-cart-line-product__body,
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) .bathgiant-cart-title {
overflow-wrap: break-word;
word-break: normal;
hyphens: manual;
white-space: normal;
min-width: 0;
}
.bathgiant-account-quote-detail-table--dual-pricing:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-quote-pricing-col--trade,
.bathgiant-account-quote-detail-table--dual-pricing:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-quote-pricing-col--customer {
border-left: none;
border-radius: 6px;
margin: 0.12rem 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.bathgiant-account-quote-detail-table--dual-pricing:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-quote-pricing-col--trade {
background: var(--bathgiant-quote-trade-bg, #fff1f2) !important;
color: var(--bathgiant-quote-trade-text, #9f1239);
}
.bathgiant-account-quote-detail-table--dual-pricing:not(.bathgiant-branch-order-collection-table) tbody td.bathgiant-quote-pricing-col--customer {
background: var(--bathgiant-quote-customer-bg, #eff6ff) !important;
color: var(--bathgiant-quote-customer-text, #1d4ed8);
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tr[data-bathgiant-account-filter-empty] {
display: block;
margin: 0 0 0.75rem;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tr[data-bathgiant-account-filter-empty] td {
display: block;
grid-template-columns: none;
border: 1px dashed #cbd5e1;
border-radius: 10px;
padding: 1rem 0.85rem;
text-align: center !important;
font-weight: 500;
font-variant-numeric: normal;
background: #f8fafc !important;
}
.bathgiant-account-quote-detail-table:not(.bathgiant-branch-order-collection-table) tr[data-bathgiant-account-filter-empty] td::before {
content: none;
display: none;
} .bathgiant-account-quote-detail-table-wrap:has(.bathgiant-branch-order-collection-table) {
margin: 0 -0.15rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
}
.bathgiant-branch-order-collection-table.bathgiant-account-quote-detail-table {
min-width: 34rem;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
.bathgiant-account-quote-detail-lines .bathgiant-quote-live-trade-inline {
flex-direction: column;
align-items: stretch;
}
.bathgiant-account-quote-detail-lines .bathgiant-quote-live-trade-inline__trigger {
width: 100%;
box-sizing: border-box;
}
.bathgiant-account-quote-detail-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: stretch;
}
.bathgiant-account-quote-detail-actions .bathgiant-btn {
display: block;
width: 100%;
margin: 0;
box-sizing: border-box;
text-align: center;
}
.bathgiant-quote-edit-banner {
padding: 0.9rem 0.85rem;
}
.bathgiant-quote-edit-banner__title {
font-size: 1rem;
line-height: 1.35;
}
.bathgiant-quote-edit-panel {
padding: 1rem 0.85rem;
}
.bathgiant-quote-edit-panel .bathgiant-btn {
width: 100%;
box-sizing: border-box;
}
.bathgiant-cart-page .bathgiant-cart-journey fieldset {
padding: 0.85rem 0.75rem;
}
.bathgiant-cart-page .bathgiant-cart-journey input[type="text"],
.bathgiant-cart-page .bathgiant-cart-journey select,
.bathgiant-cart-page .bathgiant-cart-journey .bathgiant-btn {
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
}
.bathgiant-cart-page .bathgiant-fulfillment-toggle {
flex-direction: column;
align-items: stretch;
}
.bathgiant-cart-page .bathgiant-fulfillment-option {
width: 100%;
box-sizing: border-box;
text-align: center;
}
}
@media (max-width: 720px) {
.bathgiant-account-quotes-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions {
width: 100%;
min-width: 0;
max-width: none;
box-sizing: border-box;
}
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(7.25rem, 100%), 1fr));
gap: 0.5rem;
align-items: stretch;
width: 100%;
min-width: 0;
}
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__primary,
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__link {
width: 100%;
min-width: 0;
}
.bathgiant-account-orders-table td.bathgiant-account-quotes-actions .bathgiant-account-quotes-actions__link {
min-height: 44px;
box-sizing: border-box;
align-items: center;
justify-content: center;
text-align: center;
}
.bathgiant-account-quotes-actions__primary {
flex: 1 1 100%;
}
.bathgiant-account-quotes-actions__trade {
flex: 1 1 100%;
}
.bathgiant-account-quote-delete-form {
flex: 1 1 100%;
}
.bathgiant-account-quotes-actions__archive.bathgiant-account-quotes-actions__link {
flex: 1 1 100%;
}
} .bathgiant-header-mnav-trigger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--bathgiant-radius-md, 12px);
background: rgba(255, 255, 255, 0.97);
color: var(--bathgiant-header-secondary);
cursor: pointer;
box-shadow: 0 2px 10px rgba(15, 30, 50, 0.13);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.bathgiant-header-mnav-trigger:hover,
.bathgiant-header-mnav-trigger:focus-visible {
background: #fff;
border-color: #fff;
color: var(--bathgiant-brand-deep);
outline: none;
}
.bathgiant-header-mnav-trigger__bars {
display: inline-flex;
flex-direction: column;
gap: 4px;
width: 22px;
align-items: stretch;
}
.bathgiant-header-mnav-trigger__bar {
display: block;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 0.22s ease, opacity 0.22s ease;
transform-origin: center;
}
.bathgiant-header-mnav-trigger.is-active .bathgiant-header-mnav-trigger__bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.bathgiant-header-mnav-trigger.is-active .bathgiant-header-mnav-trigger__bar:nth-child(2) {
opacity: 0;
}
.bathgiant-header-mnav-trigger.is-active .bathgiant-header-mnav-trigger__bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 899px) {
.bathgiant-header-mnav-trigger {
display: inline-flex;
}
}
body.bathgiant-mnav-open {
overflow: hidden;
}
.bathgiant-mnav {
position: fixed;
inset: 0;
z-index: 1200;
visibility: hidden;
pointer-events: none;
overflow: hidden;
touch-action: pan-y;
overscroll-behavior: none;
}
.bathgiant-mnav[hidden] {
display: none;
}
.bathgiant-mnav.is-open {
visibility: visible;
pointer-events: auto;
}
.bathgiant-mnav__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 18, 32, 0.55);
opacity: 0;
transition: opacity 0.24s ease;
}
.bathgiant-mnav.is-open .bathgiant-mnav__backdrop {
opacity: 1;
}
.bathgiant-mnav__panel {
position: absolute;
top: 0;
bottom: 0;
right: 0; width: 86vw;
max-width: 100%;
background: #fff;
color: var(--bathgiant-header-secondary, #243d5c);
box-shadow: -18px 0 36px rgba(8, 18, 32, 0.18);
transform: translateX(100%);
transition:
transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex;
flex-direction: column;
overflow: hidden;
overflow-x: hidden;
touch-action: pan-y;
overscroll-behavior-x: none;
overscroll-behavior-y: contain;
}
.bathgiant-mnav.is-open .bathgiant-mnav__panel {
transform: translateX(0);
}
.bathgiant-mnav.has-drill .bathgiant-mnav__panel,
.bathgiant-mnav[data-mnav-depth]:not([data-mnav-depth="1"]) .bathgiant-mnav__panel {
width: 100%;
}
.bathgiant-mnav__header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.95rem 1rem;
background: linear-gradient(135deg, var(--bathgiant-brand-deep, #2f68c4) 0%, var(--bathgiant-header-secondary, #243d5c) 100%);
color: #fff;
flex-shrink: 0;
}
.bathgiant-mnav--trade .bathgiant-mnav__header {
background: linear-gradient(135deg, var(--bathgiant-brand-deep) 0%, var(--bathgiant-header-secondary) 100%);
}
.bathgiant-mnav__header-title {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.bathgiant-mnav__eyebrow {
font-family: var(--bathgiant-font-display);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.78;
}
.bathgiant-mnav__title {
font-family: var(--bathgiant-font-display);
font-size: 1.05rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-mnav__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.bathgiant-mnav__close:hover,
.bathgiant-mnav__close:focus-visible {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.6);
outline: none;
}
.bathgiant-mnav__levels {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
overflow-x: hidden;
touch-action: pan-y;
overscroll-behavior-x: none; --bathgiant-mnav-peek: 20%;
} .bathgiant-mnav__levels.has-drill::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--bathgiant-mnav-peek);
z-index: 60;
cursor: pointer; touch-action: manipulation;
}
.bathgiant-mnav__level {
position: absolute;
inset: 0;
margin: 0;
padding: 0.5rem 0 1.5rem;
list-style: none;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-x: none;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
visibility: hidden;
box-sizing: border-box;
max-width: 100%;
}
.bathgiant-mnav__level[hidden] {
display: none !important;
}
.bathgiant-mnav__level--root {
transform: translateX(0);
visibility: visible;
}
.bathgiant-mnav__level.is-active {
transform: translateX(0);
visibility: visible;
} .bathgiant-mnav__level.is-parent {
transform: translateX(calc(var(--bathgiant-mnav-peek) * -1));
visibility: visible;
pointer-events: none;
filter: brightness(0.94);
}
.bathgiant-mnav__levels.has-drill .bathgiant-mnav__level.is-active {
left: var(--bathgiant-mnav-peek);
box-shadow: -14px 0 28px rgba(8, 18, 32, 0.16);
}
.bathgiant-mnav__level-head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.95rem 0.55rem;
border-bottom: 1px solid rgba(36, 61, 92, 0.08);
margin-bottom: 0.25rem;
background: rgba(247, 250, 254, 0.85);
position: sticky;
top: 0;
z-index: 2;
}
.bathgiant-mnav--trade .bathgiant-mnav__level-head {
background: rgba(254, 247, 247, 0.92);
}
.bathgiant-mnav__back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.55rem;
border: 1px solid rgba(36, 61, 92, 0.18);
border-radius: 999px;
background: #fff;
color: var(--bathgiant-brand-deep, #2f68c4);
font-family: var(--bathgiant-font-display);
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bathgiant-mnav--trade .bathgiant-mnav__back {
color: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__back:hover,
.bathgiant-mnav__back:focus-visible {
background: var(--bathgiant-brand-deep, #2f68c4);
border-color: var(--bathgiant-brand-deep, #2f68c4);
color: #fff;
outline: none;
}
.bathgiant-mnav--trade .bathgiant-mnav__back:hover,
.bathgiant-mnav--trade .bathgiant-mnav__back:focus-visible {
background: var(--bathgiant-brand-deep);
border-color: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__level-title {
font-family: var(--bathgiant-font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-header-secondary, #243d5c);
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bathgiant-mnav__level li {
margin: 0;
list-style: none;
}
.bathgiant-mnav__heading {
padding: 0.75rem 1rem 0.2rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6b7d92;
}
.bathgiant-mnav__heading span {
display: block;
} .bathgiant-mnav__promo {
margin: 0;
padding: 0.65rem 1rem 0.25rem;
list-style: none;
}
.bathgiant-mnav__promo + .bathgiant-mnav__promo {
padding-top: 0.35rem;
}
.bathgiant-mnav__promo-link {
display: block;
text-decoration: none;
color: inherit;
}
.bathgiant-mnav__promo-wrap {
position: relative;
border: 1px solid #d8e3ef;
border-radius: 10px;
overflow: hidden;
}
.bathgiant-mnav__promo-wrap--has-ribbon .bg-nav-sale-ribbon {
z-index: 6;
}
.bathgiant-mnav__promo-wrap .bathgiant-mnav__promo-link--image-only {
display: block;
min-height: 11.5rem;
border: none;
border-radius: 0;
}
.bathgiant-mnav__promo-link--image-only {
position: relative;
min-height: 11.5rem;
border: 1px solid #d8e3ef;
border-radius: 10px;
overflow: hidden;
background: #f1f5f9;
}
.bathgiant-mnav__promo-media--full {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
background-color: #f1f5f9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bathgiant-mnav__promo-cta {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 0.6rem 1.1rem;
background: var(--bathgiant-brand-deep, #2f68c4);
color: #fff;
font-family: var(--bathgiant-font-display);
font-size: 0.88rem;
font-weight: 700;
line-height: 1.2;
border-radius: 999px;
text-align: center;
box-shadow: 0 6px 18px rgba(15, 30, 50, 0.28);
}
.bathgiant-mnav--trade .bathgiant-mnav__promo-cta {
background: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__promo-link--card {
border: 1px solid #d8e3ef;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.bathgiant-mnav__promo-media--card {
display: block;
width: 100%;
min-height: 10rem;
background: #f1f5f9;
}
.bathgiant-mnav__promo-media--card img {
display: block;
width: 100%;
height: 100%;
min-height: 10rem;
object-fit: cover;
object-position: center;
}
.bathgiant-mnav__promo-label {
display: block;
padding: 0.75rem 0.85rem;
font-family: var(--bathgiant-font-display);
font-size: 0.92rem;
font-weight: 700;
color: var(--bathgiant-header-secondary, #243d5c);
text-align: center;
}
.bathgiant-mnav__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 0.85rem 1rem;
border: 0;
background: transparent;
color: var(--bathgiant-header-secondary, #243d5c);
text-align: left;
text-decoration: none;
font-family: var(--bathgiant-font-display);
font-size: 0.97rem;
font-weight: 600;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
line-height: 1.25;
}
.bathgiant-mnav__item--brand {
justify-content: flex-start;
gap: 0.75rem;
}
.bathgiant-mnav__brand-thumb {
flex: 0 0 3.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 2.25rem;
padding: 0.2rem 0.35rem;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(36, 61, 92, 0.12);
box-sizing: border-box;
}
.bathgiant-mnav__brand-logo {
display: block;
max-width: 100%;
max-height: 1.85rem;
width: auto;
height: auto;
object-fit: contain;
}
.bathgiant-mnav__brand-fallback {
font-size: 0.85rem;
font-weight: 700;
line-height: 1;
color: var(--bathgiant-header-secondary, #243d5c);
}
.bathgiant-mnav__item--brand .bathgiant-mnav__item-label {
flex: 1 1 auto;
min-width: 0;
}
.bathgiant-mnav__item:hover,
.bathgiant-mnav__item:focus-visible {
background: var(--bathgiant-brand-tint-08);
color: var(--bathgiant-brand-deep, #2f68c4);
outline: none;
}
.bathgiant-mnav--trade .bathgiant-mnav__item:hover,
.bathgiant-mnav--trade .bathgiant-mnav__item:focus-visible {
background: var(--bathgiant-brand-tint-08);
color: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__item--feature {
font-size: 1.02rem;
font-weight: 700;
}
.bathgiant-mnav__item--all {
color: var(--bathgiant-brand-deep, #2f68c4);
font-weight: 700;
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
.bathgiant-mnav--trade .bathgiant-mnav__item--all {
color: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__item--cta { width: auto;
box-sizing: border-box;
margin: 0.75rem 0.85rem 0.25rem;
padding: 0.85rem 1rem;
border-radius: 10px;
background: var(--bathgiant-brand-deep, #2f68c4);
color: #fff !important;
text-align: center;
justify-content: center;
font-weight: 700;
letter-spacing: 0.02em;
}
.bathgiant-mnav__item--cta-with-code {
justify-content: space-between;
text-align: left;
gap: 0.65rem;
min-width: 0;
}
.bathgiant-mnav__item--cta-with-code .bathgiant-mnav__item-label {
flex: 1 1 auto;
min-width: 0;
} .bathgiant-mnav__item--cta .bathgiant-mnav__trade-code {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
justify-content: center;
max-width: 42%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0.18rem 0.5rem;
border-radius: 999px;
font-family: var(--bathgiant-font-sans, system-ui, sans-serif);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
background: var(--bathgiant-trade, #c41e1e);
color: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.bathgiant-mnav--trade .bathgiant-mnav__item--cta {
background: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__item--cta:hover,
.bathgiant-mnav__item--cta:focus-visible {
background: var(--bathgiant-header-secondary, #243d5c);
color: #fff !important;
}
.bathgiant-mnav--trade .bathgiant-mnav__item--cta:hover,
.bathgiant-mnav--trade .bathgiant-mnav__item--cta:focus-visible {
background: var(--bathgiant-brand);
}
.bathgiant-mnav__chevron {
flex-shrink: 0;
color: rgba(36, 61, 92, 0.55);
transition: transform 0.15s ease, color 0.15s ease;
}
.bathgiant-mnav__item-label {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.bathgiant-mnav__item:hover .bathgiant-mnav__chevron,
.bathgiant-mnav__item:focus-visible .bathgiant-mnav__chevron {
transform: translateX(2px);
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-mnav--trade .bathgiant-mnav__item:hover .bathgiant-mnav__chevron,
.bathgiant-mnav--trade .bathgiant-mnav__item:focus-visible .bathgiant-mnav__chevron {
color: var(--bathgiant-brand-deep);
}
.bathgiant-mnav__sep {
height: 1px;
margin: 0.4rem 1rem;
background: rgba(36, 61, 92, 0.1);
} .bathgiant-mnav__footer {
flex-shrink: 0;
border-top: 1px solid rgba(36, 61, 92, 0.12);
background: #f8fafc;
padding: 0.65rem 1rem 0.85rem;
}
.bathgiant-mnav__footer-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin: 0;
padding: 0.2rem 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
color: #6b7280;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.bathgiant-mnav__footer-title:hover,
.bathgiant-mnav__footer-title:focus-visible {
color: var(--bathgiant-header-secondary, #243d5c);
outline: none;
}
.bathgiant-mnav__footer-title:focus-visible {
box-shadow: 0 0 0 2px rgba(47, 136, 239, 0.35);
border-radius: 4px;
}
.bathgiant-mnav__footer-chevron {
flex: 0 0 auto;
color: currentColor;
transition: transform 0.22s ease;
}
.bathgiant-mnav__footer.is-open .bathgiant-mnav__footer-chevron {
transform: rotate(180deg);
}
.bathgiant-mnav__footer-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s ease;
}
.bathgiant-mnav__footer.is-open .bathgiant-mnav__footer-panel {
grid-template-rows: 1fr;
}
.bathgiant-mnav__footer-panel-inner {
overflow: hidden;
min-height: 0;
}
.bathgiant-mnav__footer.is-open .bathgiant-mnav__footer-panel-inner {
padding-top: 0.55rem;
}
.bathgiant-mnav__branches {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.bathgiant-mnav__branch {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.65rem;
background: #fff;
border: 1px solid rgba(36, 61, 92, 0.14);
border-radius: 10px;
color: var(--bathgiant-header-secondary, #243d5c);
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.15;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.bathgiant-mnav__branch:hover,
.bathgiant-mnav__branch:focus-visible {
background: var(--bathgiant-brand, #2f88ef);
border-color: var(--bathgiant-brand, #2f88ef);
color: #fff;
outline: none;
transform: translateY(-1px);
}
.bathgiant-mnav--trade .bathgiant-mnav__branch:hover,
.bathgiant-mnav--trade .bathgiant-mnav__branch:focus-visible {
background: var(--bathgiant-brand);
border-color: var(--bathgiant-brand);
color: #fff;
}
.bathgiant-mnav__branch-icon {
flex: 0 0 auto;
color: var(--bathgiant-brand, #2f88ef);
transition: color 0.18s ease;
}
.bathgiant-mnav--trade .bathgiant-mnav__branch-icon {
color: var(--bathgiant-brand);
}
.bathgiant-mnav__branch:hover .bathgiant-mnav__branch-icon,
.bathgiant-mnav__branch:focus-visible .bathgiant-mnav__branch-icon {
color: #fff;
}
.bathgiant-mnav__branch-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-mnav__panel,
.bathgiant-mnav__level,
.bathgiant-mnav__backdrop,
.bathgiant-mnav__footer-panel,
.bathgiant-mnav__footer-chevron {
transition: none !important;
}
} @media (max-width: 899px) {
#bathgiant-store-mega {
display: none !important;
}
} .bathgiant-cathub {
margin: 0 0 2.5rem;
}
.bathgiant-cathub__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
}
.bathgiant-cathub__item {
margin: 0;
list-style: none;
}
.bathgiant-cathub__card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 14px;
overflow: hidden;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
box-shadow: 0 1px 3px rgba(15, 30, 50, 0.04);
}
.bathgiant-cathub__card:hover,
.bathgiant-cathub__card:focus-within {
transform: translateY(-2px);
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 10px 28px rgba(15, 30, 50, 0.12);
}
.bathgiant-cathub__media-link {
display: block;
text-decoration: none;
color: inherit;
}
.bathgiant-cathub__media-link:focus-visible {
outline: 2px solid var(--bathgiant-brand-deep, #2f68c4);
outline-offset: -2px;
}
.bathgiant-cathub__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #f4f8ff 0%, #eaeef5 100%);
overflow: hidden;
}
.bathgiant-cathub__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.bathgiant-cathub__card:hover .bathgiant-cathub__img,
.bathgiant-cathub__card:focus-within .bathgiant-cathub__img {
transform: scale(1.04);
}
.bathgiant-cathub__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bathgiant-font-display);
font-size: 3rem;
font-weight: 700;
color: var(--bathgiant-brand-focus-ring-strong);
background: linear-gradient(135deg, var(--bathgiant-brand-wash) 0%, #eaeef5 100%);
}
.bathgiant-cathub__body {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.85rem 1rem 0.85rem;
flex: 1 1 auto;
}
.bathgiant-cathub__title-link {
text-decoration: none;
color: inherit;
}
.bathgiant-cathub__title-link:hover .bathgiant-cathub__title,
.bathgiant-cathub__title-link:focus-visible .bathgiant-cathub__title {
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-cathub__title-link:focus-visible {
outline: none;
}
.bathgiant-cathub__title {
display: block;
font-family: var(--bathgiant-font-display);
font-size: 1.02rem;
font-weight: 700;
color: var(--bathgiant-header-secondary, #243d5c);
line-height: 1.25;
transition: color 0.15s ease;
}
.bathgiant-cathub__meta {
font-size: 0.82rem;
color: rgba(36, 61, 92, 0.65);
}
.bathgiant-cathub__children {
list-style: none;
margin: 0.45rem 0 0.55rem;
padding: 0.55rem 0 0;
border-top: 1px solid rgba(36, 61, 92, 0.08);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.bathgiant-cathub__children li {
margin: 0;
list-style: none;
}
.bathgiant-cathub__child {
display: flex;
align-items: baseline;
gap: 0.35rem;
padding: 0.18rem 0;
color: var(--bathgiant-header-secondary, #243d5c);
text-decoration: none;
font-size: 0.88rem;
line-height: 1.35;
transition: color 0.15s ease;
}
.bathgiant-cathub__child:hover,
.bathgiant-cathub__child:focus-visible {
color: var(--bathgiant-brand-deep, #2f68c4);
outline: none;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.bathgiant-cathub__child-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
.bathgiant-cathub__child-count {
flex: 0 0 auto;
font-size: 0.78rem;
color: rgba(36, 61, 92, 0.55);
font-variant-numeric: tabular-nums;
}
.bathgiant-cathub__child--more {
margin-top: 0.1rem;
font-weight: 700;
font-size: 0.8rem;
color: var(--bathgiant-brand-deep, #2f68c4);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bathgiant-cathub__cta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
align-self: flex-start;
margin-top: auto;
padding: 0.4rem 0;
font-family: var(--bathgiant-font-display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep, #2f68c4);
text-decoration: none;
transition: gap 0.15s ease;
}
.bathgiant-cathub__cta:hover,
.bathgiant-cathub__cta:focus-visible {
gap: 0.55rem;
outline: none;
}
.bathgiant-cathub__card--has-children .bathgiant-cathub__cta {
margin-top: 0.2rem;
}
.bathgiant-cathub__all {
margin: 1.5rem 0 0;
text-align: center;
}
.bathgiant-cathub__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin: 0 0 1rem;
}
.bathgiant-cathub__lede {
margin: 0;
font-size: 0.92rem;
color: rgba(36, 61, 92, 0.72);
}
.bathgiant-cathub__all-top {
flex: 0 0 auto;
font-size: 0.85rem;
padding: 0.45rem 0.9rem;
}
.bathgiant-cathub__filter {
margin: 0 0 1rem;
}
.bathgiant-cathub__filter-input {
width: 100%;
max-width: 28rem;
padding: 0.65rem 0.9rem;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
font: inherit;
font-size: 0.95rem;
color: var(--bathgiant-header-secondary, #243d5c);
background: #fff;
box-shadow: 0 1px 2px rgba(15, 30, 50, 0.04);
}
.bathgiant-cathub__filter-input:focus {
outline: 2px solid var(--bathgiant-brand-focus-ring-strong, rgba(47, 104, 196, 0.35));
outline-offset: 1px;
border-color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-cathub--compact .bathgiant-cathub__grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.55rem;
}
.bathgiant-cathub__compact-card {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 3.25rem;
padding: 0.55rem 0.75rem;
border: 1px solid var(--bathgiant-border, #e2e8f0);
border-radius: 10px;
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bathgiant-cathub__compact-card:hover,
.bathgiant-cathub__compact-card:focus-visible {
border-color: var(--bathgiant-brand-deep, #2f68c4);
box-shadow: 0 4px 14px rgba(15, 30, 50, 0.08);
transform: translateY(-1px);
outline: none;
}
.bathgiant-cathub__compact-initial,
.bathgiant-cathub__compact-thumb {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
border-radius: 8px;
overflow: hidden;
}
.bathgiant-cathub__compact-initial {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bathgiant-font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--bathgiant-brand-deep, #2f68c4);
background: var(--bathgiant-brand-wash, #eef4ff);
}
.bathgiant-cathub__compact-thumb {
display: block;
background: var(--bathgiant-brand-wash, #eef4ff);
}
.bathgiant-cathub__compact-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-cathub__compact-body {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-cathub__compact-title {
min-width: 0;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.3;
color: var(--bathgiant-header-secondary, #243d5c);
}
.bathgiant-cathub__compact-meta {
flex: 0 0 auto;
font-size: 0.78rem;
font-weight: 600;
color: rgba(36, 61, 92, 0.55);
font-variant-numeric: tabular-nums;
}
.bathgiant-cathub__item[hidden] {
display: none;
}
@media (max-width: 600px) {
.bathgiant-cathub__grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.85rem;
}
.bathgiant-cathub__title {
font-size: 0.95rem;
}
.bathgiant-cathub--compact .bathgiant-cathub__grid {
grid-template-columns: 1fr;
}
.bathgiant-cathub__head {
flex-direction: column;
align-items: stretch;
}
.bathgiant-cathub__all-top {
width: 100%;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-cathub__card,
.bathgiant-cathub__img,
.bathgiant-cathub__cta {
transition: none !important;
}
} html.bathgiant-branch-screen-page,
body.bathgiant-branch-screen-page,
body.bathgiant-branch-screen-body {
margin: 0;
padding: 0;
width: 100%;
max-width: none;
min-height: 100%;
min-height: 100dvh;
height: 100%;
overflow: hidden;
overflow-x: clip;
display: block !important;
background: #0a0f1a;
}
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen {
width: 100%;
height: 100%;
background: #0a0f1a;
}
html:fullscreen body.bathgiant-branch-screen-body,
html:-webkit-full-screen body.bathgiant-branch-screen-body,
html:-moz-full-screen body.bathgiant-branch-screen-body {
width: 100%;
height: 100%;
}
html.bathgiant-branch-screen--display-mode-fs,
html.bathgiant-branch-screen--display-mode-fs body.bathgiant-branch-screen-body {
width: 100%;
height: 100%;
} html.bathgiant-branch-screen--admin-preview,
html.bathgiant-branch-screen--admin-preview body.bathgiant-branch-screen-body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100vh;
height: 100dvh;
overflow: hidden;
background: #0f1419;
}
.bathgiant-branch-screen-preview-toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
padding: 0.625rem 1.25rem;
background: #1e293b;
color: #e2e8f0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.875rem;
line-height: 1.4;
border-bottom: 1px solid #334155;
z-index: 100;
}
.bathgiant-branch-screen-preview-toolbar__label {
flex: 0 1 auto;
min-width: 12rem;
}
.bathgiant-branch-screen-preview-toolbar__tv-link {
color: #93c5fd;
text-decoration: none;
white-space: nowrap;
}
.bathgiant-branch-screen-preview-toolbar__tv-link:hover {
color: #bfdbfe;
text-decoration: underline;
}
.bathgiant-branch-screen-preview-toolbar__carousel {
flex: 1 1 auto;
display: flex;
justify-content: center;
min-width: 0;
}
.bathgiant-branch-screen-preview-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.bathgiant-branch-screen-preview-controls__pause {
margin: 0 !important;
min-height: 30px;
line-height: 1.2;
padding: 0.2rem 0.65rem !important;
font-size: 0.8125rem !important;
}
.bathgiant-branch-screen-preview-controls__slides {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.bathgiant-branch-screen-preview-controls__slide {
appearance: none;
border: 1px solid #475569;
background: #0f172a;
color: #e2e8f0;
border-radius: 999px;
min-width: 2rem;
height: 2rem;
padding: 0 0.55rem;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.bathgiant-branch-screen-preview-controls__slide.is-active,
.bathgiant-branch-screen-preview-controls__slide:hover {
border-color: #93c5fd;
background: #1d4ed8;
color: #fff;
}
.bathgiant-branch-screen-preview-stage {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
overflow: auto;
padding: 0;
box-sizing: border-box;
}
html.bathgiant-branch-screen--admin-preview .bathgiant-branch-screen {
position: relative;
inset: auto;
width: 1920px;
height: 1080px;
flex: 0 0 auto;
transform: scale(var(--bg-bs-preview-fit-scale, 1));
transform-origin: top center;
--bg-bs-ui-scale: 1;
--bg-bs-preview-fit-scale: 1;
}
html.bathgiant-branch-screen--admin-preview .bathgiant-hero-banner--branch-screen,
html.bathgiant-branch-screen--admin-preview .bathgiant-branch-screen__viewport,
html.bathgiant-branch-screen--admin-preview .bathgiant-branch-screen__slide {
min-height: 1080px;
height: 1080px;
max-height: 1080px;
}
html.bathgiant-branch-screen--admin-preview .bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__viewport,
html.bathgiant-branch-screen--admin-preview .bathgiant-branch-screen__viewport {
--bathgiant-hero-fixed-height: 1080px;
min-height: 1080px;
height: 1080px;
max-height: 1080px;
}
.bathgiant-branch-screen { --bg-bs-ref-w: 1920;
--bg-bs-ref-h: 1080;
--bg-bs-ui-scale: min(1, min(100vw / 1920, 100vh / 1080));
--bg-bs-screen-inset: 45px;
--bg-bs-brand-size: 135px;
--bg-bs-tile-thumb: var(--bg-bs-tile-size);
--bg-bs-tile-size: 270px;
--bg-bs-card-height: 389px;
--bg-bs-tile-gap: 11px;
--bg-bs-image-only-pad: 11px;
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
height: 100dvh;
height: 100svh;
overflow: hidden;
z-index: 1;
}
.bathgiant-branch-screen__slide-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.bathgiant-branch-screen__ui-canvas {
position: relative;
flex: 0 0 auto;
width: 1920px;
height: 1080px;
transform: scale(var(--bg-bs-ui-scale));
transform-origin: bottom center;
box-sizing: border-box;
pointer-events: none;
}
.bathgiant-branch-screen__empty {
position: fixed;
inset: 0;
display: grid;
place-items: center;
margin: 0;
padding: 2rem;
color: #e2e8f0;
font-size: clamp(1.1rem, 2.5vw, 1.75rem);
text-align: center;
}
.bathgiant-hero-banner--branch-screen {
position: absolute;
inset: 0;
left: 0;
right: 0;
margin: 0;
width: 100% !important;
max-width: 100% !important;
height: 100%;
min-height: 100dvh;
min-height: 100svh;
color: #fff;
box-sizing: border-box;
}
.bathgiant-hero-banner--branch-screen::after {
display: none;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__accent-overlay,
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__accent-fx {
display: none !important;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media-shell:has(.bathgiant-hero-banner__accent-overlay) .bathgiant-hero-banner__media--responsive::after {
display: none;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__viewport,
.bathgiant-branch-screen__viewport {
--bathgiant-hero-fixed-height: 100dvh;
--bathgiant-hero-fixed-height: 100svh;
--bathgiant-hero-toolbar-reserve: 0;
display: block;
width: 100% !important;
max-width: 100% !important;
container-type: normal;
min-height: 100dvh;
min-height: 100svh;
height: 100dvh;
height: 100svh;
}
.bathgiant-hero-banner--branch-screen .bathgiant-branch-screen__viewport.owl-carousel:not(.owl-loaded) {
display: block;
}
.bathgiant-hero-banner--branch-screen .bathgiant-branch-screen__viewport.owl-carousel:not(.owl-loaded) .bathgiant-branch-screen__slide:not(.is-slide-active) {
display: none;
}
.bathgiant-hero-banner--branch-screen .bathgiant-branch-screen__viewport .owl-stage-outer,
.bathgiant-hero-banner--branch-screen .bathgiant-branch-screen__viewport .owl-stage {
position: relative;
width: 100% !important;
max-width: 100% !important;
height: 100%;
left: 0;
right: 0;
}
.bathgiant-hero-banner--branch-screen .bathgiant-branch-screen__viewport.owl-loaded .owl-item {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
float: none;
}
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-stage-outer {
position: relative;
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden;
}
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-stage {
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: 100%;
left: 0 !important;
}
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
float: none !important;
opacity: 0;
transition: opacity 0.95s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item.active {
opacity: 1;
z-index: 2;
pointer-events: auto;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__slide,
.bathgiant-branch-screen__slide {
position: relative;
width: 100%;
height: 100%;
min-height: 100dvh;
min-height: 100svh;
padding: 0;
overflow: hidden;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media-shell {
position: absolute;
inset: -2px;
z-index: 0;
min-height: calc(100% + 4px);
width: calc(100% + 4px);
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media,
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media img,
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media picture {
width: 100%;
height: 100%;
min-height: 100%;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media img,
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media picture img {
object-fit: cover;
transform: scale(1.08);
transform-origin: center center;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__media img,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__media picture img {
animation: bg2026-bs-ken-burns 22s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__video {
width: 100%;
height: 100%;
object-fit: cover;
}
.bathgiant-branch-screen__brochure-layout--with-products {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 36px;
min-height: 100%;
}
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__brochure-panel--showcase {
position: relative;
top: auto;
right: auto;
z-index: auto;
align-self: center;
justify-self: end;
flex: 0 0 auto;
width: auto;
max-width: none;
min-width: 0;
min-height: auto;
overflow: hidden;
align-items: flex-end;
}
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__products,
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__products--strip,
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__slide-products-wrap--inline {
width: auto;
max-width: none;
}
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__products--strip {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__products-heading {
text-align: right;
}
.bathgiant-branch-screen__brochure-layout--with-products.bathgiant-branch-screen__brochure-layout--products-left,
.bathgiant-branch-screen__brochure-layout--products.bathgiant-branch-screen__brochure-layout--products-left {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
justify-items: start;
gap: 28px;
min-height: 100%;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__brochure-panel--copy {
grid-column: 1;
grid-row: 1;
align-self: start;
max-width: min(72rem, 100%);
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__brochure-panel--showcase {
grid-column: 1;
grid-row: 2;
align-self: start;
justify-self: start;
margin-top: 0;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__brochure-panel--copy .bathgiant-branch-screen__content .bathgiant-hero-banner__delivery {
margin-top: 14px;
margin-bottom: 0;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__brochure-panel--copy .bathgiant-branch-screen__trust-anchor {
margin-top: 12px;
margin-bottom: 0;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__products--strip {
align-items: flex-start;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__products-heading {
text-align: left;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__product-grid--row,
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__slide-products-wrap--inline .bathgiant-branch-screen__product-grid {
justify-content: flex-start;
align-items: flex-end;
}
.bathgiant-branch-screen__slide:has(.bathgiant-branch-screen__brochure-layout--products-left) .bathgiant-branch-screen__slide-scrim {
background:
linear-gradient(105deg, rgba(8, 12, 22, 0.78) 0%, rgba(8, 12, 22, 0.48) 42%, rgba(8, 12, 22, 0.12) 72%, transparent 88%),
linear-gradient(0deg, rgba(8, 12, 22, 0.5) 0%, transparent 28%);
}
.bathgiant-branch-screen__product-grid--row,
.bathgiant-branch-screen__slide-products-wrap--inline .bathgiant-branch-screen__product-grid {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: flex-end;
width: auto;
max-width: none;
overflow: visible;
gap: var(--bg-bs-tile-gap);
}
.bathgiant-branch-screen__product-rotator {
--bg-bs-products-visible: 3;
position: relative;
flex: 0 0 auto;
width: calc((var(--bg-bs-tile-size) * var(--bg-bs-products-visible)) + (var(--bg-bs-tile-gap) * (var(--bg-bs-products-visible) - 1)));
max-width: 100%;
overflow: hidden;
}
.bathgiant-branch-screen__product-rotator--fade .bathgiant-branch-screen__product-page {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.65s;
}
.bathgiant-branch-screen__product-rotator--fade .bathgiant-branch-screen__product-page.is-product-page-active {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: none;
transition:
opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.bathgiant-branch-screen__product-rotator--fade .bathgiant-branch-screen__product-page:not(.is-product-page-active) .bathgiant-product-card--branch-screen-strip,
.bathgiant-branch-screen__product-rotator--fade .bathgiant-branch-screen__product-page:not(.is-product-page-active) .bathgiant-product-card--branch-screen-showcase {
opacity: 1;
transform: none;
animation: none !important;
}
.bathgiant-branch-screen__product-grid--row > .bathgiant-product-card--branch-screen-strip,
.bathgiant-branch-screen__slide-products-wrap--inline .bathgiant-product-card--branch-screen-strip {
flex: 0 0 var(--bg-bs-tile-size);
width: var(--bg-bs-tile-size);
max-width: var(--bg-bs-tile-size);
min-width: 0;
}
.bathgiant-branch-screen__slide-products-wrap--inline {
position: relative;
left: auto;
right: auto;
bottom: auto;
max-height: none;
padding: 0;
background: transparent;
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__slide-products-wrap--inline {
animation: bg2026-bs-products-strip-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}
.bathgiant-branch-screen__brochure-layout--products .bathgiant-branch-screen__brochure-panel--showcase {
width: auto;
max-width: none;
align-items: flex-end;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products .bathgiant-branch-screen__brochure-panel--showcase {
width: 100%;
align-items: stretch;
}
.bathgiant-branch-screen__slide-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(105deg, rgba(8, 12, 22, 0.78) 0%, rgba(8, 12, 22, 0.42) 34%, rgba(8, 12, 22, 0.08) 58%, transparent 78%),
linear-gradient(0deg, rgba(8, 12, 22, 0.42) 0%, transparent 34%);
}
.bathgiant-branch-screen__slide:has(.bathgiant-branch-screen__slide-products-wrap) .bathgiant-branch-screen__slide-scrim {
background:
linear-gradient(105deg, rgba(8, 12, 22, 0.72) 0%, rgba(8, 12, 22, 0.34) 32%, transparent 54%),
linear-gradient(0deg, rgba(8, 12, 22, 0.55) 0%, transparent 22%);
}
.bathgiant-branch-screen__brand {
position: absolute;
top: var(--bg-bs-screen-inset);
right: var(--bg-bs-screen-inset);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: var(--bg-bs-brand-size);
height: var(--bg-bs-brand-size);
padding: 12px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(8, 12, 22, 0.22);
pointer-events: none;
}
.bathgiant-branch-screen__brand-logo {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: none;
}
.bathgiant-branch-screen__brochure-layout {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: center;
align-content: end;
gap: 36px;
width: 100%;
max-width: none;
min-height: 100%;
padding: var(--bg-bs-screen-inset);
box-sizing: border-box;
}
.bathgiant-branch-screen__brochure-layout--content-top {
align-content: start;
}
.bathgiant-branch-screen__brochure-layout--content-middle {
align-content: center;
}
.bathgiant-branch-screen__brochure-layout--content-bottom {
align-content: end;
}
.bathgiant-branch-screen__brochure-layout--products {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
min-height: 100%;
}
.bathgiant-branch-screen__brochure-panel--copy {
align-self: center;
max-width: 690px;
}
.bathgiant-branch-screen__brochure-layout--with-products .bathgiant-branch-screen__brochure-panel--copy {
max-width: 660px;
}
.bathgiant-branch-screen__brochure-panel--showcase {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-self: center;
justify-self: end;
width: auto;
max-width: none;
min-height: 0;
}
.bathgiant-branch-screen__brochure-panel--showcase:has(.bathgiant-branch-screen__products--image-only) {
justify-content: flex-start;
}
.bathgiant-branch-screen__content {
max-width: none;
}
.bathgiant-branch-screen__eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 0 0 15px;
font-family: var(--bathgiant-font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.bathgiant-branch-screen__display-title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 75px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 18ch;
color: #fff;
text-wrap: balance;
overflow: visible;
}
.bathgiant-branch-screen__display-title .bathgiant-hero-anim__word {
overflow: visible;
margin-right: 0.14em;
padding-bottom: 0.1em;
vertical-align: baseline;
}
.bathgiant-branch-screen__display-title .bathgiant-hero-anim__word-inner {
line-height: 1.08;
overflow: visible;
padding-bottom: 0.06em;
}
.bathgiant-branch-screen__content .bathgiant-hero-anim__word {
overflow: visible;
padding-bottom: 0.08em;
vertical-align: baseline;
}
.bathgiant-branch-screen__content .bathgiant-hero-anim__word-inner {
overflow: visible;
line-height: 1.08;
padding-bottom: 0.06em;
}
.bathgiant-branch-screen__content .bathgiant-hero-anim__eyebrow-text {
line-height: 1.35;
padding-bottom: 0.05em;
}
.bathgiant-branch-screen__lede {
margin: 18px 0 0;
max-width: 42ch;
font-family: var(--bathgiant-font-sans);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
padding-bottom: 0.08em;
}
.bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__lede {
max-width: 52ch;
}
.bathgiant-branch-screen__content .bathgiant-hero-banner__delivery {
margin-top: 22px;
margin-bottom: 16px;
}
.bathgiant-branch-screen__content .bathgiant-branch-screen__cta-labels {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 0.85rem;
margin: 16px 0 0;
pointer-events: none;
}
.bathgiant-branch-screen__content .bathgiant-branch-screen__cta-labels .bathgiant-btn {
pointer-events: none;
cursor: default;
}
.bathgiant-branch-screen__content .bathgiant-branch-screen__trust-anchor {
justify-content: flex-start;
margin-top: 20px;
}
.bathgiant-branch-screen__content .bathgiant-branch-screen__trust {
pointer-events: none;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--trust {
animation: bg2026-hero-anim-reveal-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item.bathgiant-hero-anim__reveal {
animation-delay: calc(1.1s + (var(--bg-hero-reveal-i, 0) * 0.09s));
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action {
animation-delay: calc(1.38s + (var(--bg-hero-reveal-i, 0) * 0.12s));
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--trust {
animation: bg2026-hero-anim-reveal-in 0.88s cubic-bezier(0.22, 1, 0.36, 1) 1.62s forwards;
}
.bathgiant-branch-screen__slide:not(.is-slide-active):not(.is-slide-leaving) .bathgiant-hero-anim__reveal {
opacity: 0;
transform: translate3d(0, 1.15rem, 0);
animation: none !important;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line {
animation-duration: 1.4s;
animation-delay: 0.25s;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__word-inner {
animation-duration: 1.35s;
animation-delay: calc(0.5s + (var(--bg-hero-word-i, 0) * 0.14s));
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__lede {
animation-duration: 1.35s;
animation-delay: 1s;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__slide-scrim {
background:
linear-gradient(105deg, rgba(8, 12, 22, 0.72) 0%, rgba(8, 12, 22, 0.34) 32%, transparent 54%),
linear-gradient(0deg, rgba(8, 12, 22, 0.55) 0%, transparent 22%);
}
.bathgiant-branch-screen__slide-products-wrap:not(.bathgiant-branch-screen__slide-products-wrap--inline) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
max-height: clamp(8.5rem, 20vh, 12rem);
padding:
clamp(0.65rem, 1.6vw, 1rem)
clamp(1rem, 3vw, 2.5rem)
clamp(0.85rem, 2vw, 1.35rem);
box-sizing: border-box;
pointer-events: none;
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
background: linear-gradient(0deg, rgba(8, 12, 22, 0.82) 0%, rgba(8, 12, 22, 0.45) 58%, transparent 100%);
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__slide-products-wrap:not(.bathgiant-branch-screen__slide-products-wrap--inline) {
animation: bg2026-bs-products-strip-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}
.bathgiant-branch-screen__products {
pointer-events: none;
position: relative;
width: auto;
max-width: none;
}
.bathgiant-branch-screen__products-heading {
margin: 0 0 0.45rem;
font-family: var(--bathgiant-font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.bathgiant-branch-screen__product-grid {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
gap: var(--bg-bs-tile-gap);
width: auto;
max-width: none;
overflow: visible;
scrollbar-width: none;
}
.bathgiant-branch-screen__product-grid::-webkit-scrollbar {
display: none;
}
.bathgiant-product-card--branch-screen-strip {
flex: 0 0 var(--bg-bs-tile-size);
width: var(--bg-bs-tile-size);
max-width: var(--bg-bs-tile-size);
min-height: var(--bg-bs-card-height);
height: auto;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(8, 12, 22, 0.22);
opacity: 0;
transform: translate3d(0, 0.85rem, 0) scale(0.98);
display: flex;
flex-direction: column;
position: relative;
}
.bathgiant-product-card--branch-screen-strip:has(.bathgiant-branch-screen__product-badge) {
overflow: visible;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-product-card--branch-screen-strip {
animation: bg2026-bs-product-card-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(1.2s + (var(--bg-bs-product-i, 0) * 0.14s));
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media {
flex: 0 0 auto;
display: block;
position: relative;
width: 100%;
height: var(--bg-bs-tile-thumb);
max-height: none;
aspect-ratio: auto;
border-radius: 0;
background: #fff;
overflow: visible;
isolation: isolate;
z-index: 0;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media picture,
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media img,
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media .bathgiant-product-card__img {
position: relative;
z-index: 1;
background-color:#FFF;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-sale-badge--overlay.bathgiant-sale-badge--branch-screen {
top: 0.45rem;
left: 0.45rem;
z-index: 4;
padding: 0.28rem 0.47rem;
font-size: 10.5px;
letter-spacing: 0.04em;
box-shadow: 0 2px 10px rgba(127, 29, 29, 0.35);
}
.bathgiant-product-card--branch-screen-strip .bathgiant-branch-screen__product-badge--overlay {
position: absolute;
right: 0.45rem;
bottom: 0.45rem;
left: auto;
top: auto;
z-index: 6;
}
.bathgiant-branch-screen__product-badge,
.bathgiant-branch-screen__product-badge--overlay {
position: absolute;
right: 0.45rem;
bottom: 0.45rem;
z-index: 50;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
padding: 0.28rem 0.5rem;
border-radius: 999px;
color: #fff;
font-family: var(--bathgiant-font-sans);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.03em;
line-height: 1.1;
pointer-events: none;
}
.bathgiant-branch-screen__product-badge--blue,
.bathgiant-branch-screen__product-badge--overlay.bathgiant-branch-screen__product-badge--blue {
background: linear-gradient(150deg, #1e3a8a 0%, #1d4ed8 55%, #1e40af 100%);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.28);
}
.bathgiant-branch-screen__product-badge--red,
.bathgiant-branch-screen__product-badge--overlay.bathgiant-branch-screen__product-badge--red {
background: linear-gradient(150deg, #9f1239 0%, #7f1d3c 40%, #65122f 70%, #4a0d22 100%);
box-shadow: 0 2px 10px rgba(127, 29, 29, 0.35);
}
.bathgiant-branch-screen__product-badge--white,
.bathgiant-branch-screen__product-badge--overlay.bathgiant-branch-screen__product-badge--white {
background: #fff;
color: #0f172a;
border: 1px solid rgba(15, 23, 42, 0.14);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
}
.bathgiant-product-card--branch-screen-strip.bathgiant-product-card--branch-screen-image-only {
min-height: 0;
height: auto;
padding: var(--bg-bs-image-only-pad);
box-sizing: border-box;
justify-content: flex-start;
overflow: visible;
}
.bathgiant-product-card--branch-screen-strip.bathgiant-product-card--branch-screen-image-only .bathgiant-product-card__media {
flex: 0 0 auto;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
overflow: visible;
background: transparent;
isolation: isolate;
}
.bathgiant-product-card--branch-screen-strip.bathgiant-product-card--branch-screen-image-only .bathgiant-product-card__media img {
display: block;
width: 100%;
height: auto;
max-height: calc(var(--bg-bs-tile-size) - (2 * var(--bg-bs-image-only-pad)));
object-fit: contain;
object-position: center;
}
.bathgiant-branch-screen__products--image-only .bathgiant-branch-screen__product-grid {
align-items: flex-start;
}
.bathgiant-branch-screen__products--image-only .bathgiant-branch-screen__products-heading {
display: none;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__media img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__title {
margin: 0.3rem 0.5rem 0.15rem;
font-size: 13.2px;
line-height: 1.3;
font-weight: 700;
color: #0f172a;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
flex: 1 1 auto;
padding-bottom: 0.1em;
max-height: calc(1.3em * 2 + 0.1em);
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__footer {
margin: 0;
margin-top: auto;
padding: 0 0.5rem 0.45rem;
border: 0;
background: transparent;
flex-shrink: 0;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__prices {
margin: 0;
font-size: clamp(14px, 1.85vh, 18px);
font-weight: 800;
line-height: 1.2;
gap: 0.12rem 0.25rem;
width: 100%;
max-width: 100%;
overflow: visible;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__prices--inline {
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
overflow: visible;
white-space: normal;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-piece--rrp {
flex-shrink: 0;
white-space: nowrap;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-piece--sale {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.1rem 0.2rem;
min-width: 0;
max-width: 100%;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-label {
font-size: clamp(10.5px, 1.35vh, 13px);
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price {
margin: 0;
font-size: inherit;
line-height: inherit;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price--now,
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price--now {
font-weight: 700;
color: var(--bathgiant-ink);
white-space: nowrap;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price--rrp,
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price--rrp {
text-decoration: line-through;
color: #94a3b8;
font-weight: 600;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-product-card__price-label,
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price-label {
color: #94a3b8;
font-weight: 600;
text-decoration: none;
}
.bathgiant-product-card--branch-screen-strip .bathgiant-price-vat-label {
font-size: clamp(10.2px, 1.3vh, 12.5px);
font-weight: 500;
color: var(--bathgiant-ink-muted, #64748b);
white-space: nowrap;
} .bathgiant-branch-screen__slide--products { --bg-bs-showcase-card-h: min(820px, calc(1080px - (2 * var(--bg-bs-screen-inset)) - 40px));
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products {
grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
align-items: end;
align-content: end;
gap: clamp(20px, 2.5vw, 44px);
min-height: 100%;
box-sizing: border-box;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products.bathgiant-branch-screen__brochure-layout--content-top {
align-content: start;
align-items: start;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products.bathgiant-branch-screen__brochure-layout--content-middle {
align-content: center;
align-items: center;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products.bathgiant-branch-screen__brochure-layout--content-bottom {
align-content: end;
align-items: end;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products.bathgiant-branch-screen__brochure-layout--content-bottom .bathgiant-branch-screen__brochure-panel--copy {
align-self: end;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-panel--showcase {
align-self: end;
justify-content: flex-end;
align-items: stretch;
width: 100%;
min-width: 0;
height: auto;
max-height: none;
min-height: 0;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-panel--showcase:has(.bathgiant-branch-screen__products--showcase-hero) {
height: var(--bg-bs-showcase-card-h);
max-height: var(--bg-bs-showcase-card-h);
min-height: 0;
}
.bathgiant-branch-screen__products--showcase-hero {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
width: 100%;
height: 100%;
min-height: 0;
max-height: 100%;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__products-heading {
font-size: 12px;
margin-bottom: 0.65rem;
text-align: center;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-rotator--showcase-hero,
.bathgiant-branch-screen__products--showcase-hero > .bathgiant-branch-screen__product-grid--showcase-hero {
width: 100%;
max-width: 100%;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-rotator--showcase-hero {
--bg-bs-products-visible: 1;
position: relative;
flex: 1 1 auto;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 0;
overflow: hidden;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-rotator--showcase-hero .bathgiant-branch-screen__product-page,
.bathgiant-branch-screen__products--showcase-hero > .bathgiant-branch-screen__product-grid--showcase-hero {
height: 100%;
min-height: 0;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-rotator--showcase-hero .bathgiant-branch-screen__product-page {
display: flex;
flex-direction: column;
}
.bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-grid--showcase-hero {
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
align-items: stretch;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
min-height: 0;
}
.bathgiant-branch-screen__product-grid--showcase-hero > .bathgiant-product-card--branch-screen-showcase {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-width: 0;
height: 100%;
max-height: 100%;
min-height: 0;
}
.bathgiant-product-card--branch-screen-showcase {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 18px 48px rgba(8, 12, 22, 0.28);
background: #fff;
opacity: 0;
transform: translate3d(0, 0.85rem, 0) scale(0.98);
position: relative;
}
.bathgiant-product-card--branch-screen-showcase.bathgiant-product-card--branch-screen-image-only {
height: 100%;
max-height: 100%;
min-height: 0;
padding: clamp(14px, 1.8vh, 22px);
box-sizing: border-box;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__media {
flex: 1 1 0;
width: 100%;
min-height: 0;
max-height: none;
overflow: hidden;
display: flex;
align-items: stretch;
justify-content: center;
position: relative;
background: #fff;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__media picture {
display: flex;
flex: 1 1 auto;
width: 100%;
height: 100%;
min-height: 0;
align-items: center;
justify-content: center;
}
.bathgiant-product-card--branch-screen-showcase.bathgiant-product-card--branch-screen-image-only .bathgiant-product-card__media {
flex: 1 1 auto;
height: 100%;
}
.bathgiant-product-card--branch-screen-showcase.bathgiant-product-card--branch-screen-image-only .bathgiant-product-card__media img {
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__media img,
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__media picture,
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__media .bathgiant-product-card__img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: none;
object-fit: contain;
object-position: center;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__title {
flex: 0 0 auto;
margin: clamp(0.85rem, 1.8vh, 1.15rem) clamp(1rem, 2vw, 1.35rem) 0.35rem;
font-size: clamp(1.15rem, 2.6vh, 1.85rem);
font-weight: 700;
line-height: 1.25;
color: #0f172a;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
padding-bottom: 0.15em;
max-height: none;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__footer {
flex: 0 0 auto;
flex-shrink: 0;
margin: 0;
margin-top: 0;
padding: 0 clamp(1rem, 2vw, 1.35rem) clamp(0.9rem, 1.8vh, 1.25rem);
border: 0;
background: transparent;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__prices {
margin: 0;
font-size: clamp(1.25rem, 3vh, 2.15rem);
font-weight: 800;
line-height: 1.15;
gap: 0.22rem 0.4rem;
width: 100%;
max-width: 100%;
overflow: visible;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__prices--inline {
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
overflow: visible;
white-space: normal;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price-label {
font-size: clamp(0.95rem, 2.2vh, 1.45rem);
font-weight: 600;
color: #94a3b8;
text-decoration: none;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price--now {
font-weight: 800;
color: var(--bathgiant-ink);
white-space: nowrap;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-product-card__price--rrp {
text-decoration: line-through;
color: #94a3b8;
font-weight: 600;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-price-vat-label {
font-size: clamp(0.82rem, 1.9vh, 1.25rem);
font-weight: 500;
color: var(--bathgiant-ink-muted, #64748b);
white-space: nowrap;
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-sale-badge--overlay.bathgiant-sale-badge--branch-screen {
top: 0.75rem;
left: 0.75rem;
z-index: 4;
padding: 0.4rem 0.65rem;
font-size: clamp(11px, 1.4vh, 14px);
letter-spacing: 0.04em;
box-shadow: 0 2px 10px rgba(127, 29, 29, 0.35);
}
.bathgiant-product-card--branch-screen-showcase .bathgiant-branch-screen__product-badge--overlay {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
left: auto;
top: auto;
z-index: 6;
padding: 0.38rem 0.62rem;
font-size: clamp(11px, 1.4vh, 14px);
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products-left {
grid-template-rows: auto minmax(0, 1fr);
align-content: stretch;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__brochure-panel--showcase {
justify-content: center;
align-items: stretch;
min-height: 0;
}
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-grid--showcase-hero,
.bathgiant-branch-screen__slide--products .bathgiant-branch-screen__brochure-layout--products-left .bathgiant-branch-screen__products--showcase-hero .bathgiant-branch-screen__product-rotator--showcase-hero {
width: 100%;
max-width: min(100%, 1180px);
height: 100%;
max-height: 100%;
}
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-product-card--branch-screen-showcase {
animation: bg2026-bs-product-card-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(1.2s + (var(--bg-bs-product-i, 0) * 0.14s));
}
@keyframes bg2026-bs-ken-burns {
from {
transform: scale(1.06);
}
to {
transform: scale(1.14);
}
}
@keyframes bg2026-bs-products-strip-in {
from {
opacity: 0;
transform: translate3d(0, 2rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes bg2026-bs-product-card-enter {
from {
opacity: 0;
transform: translate3d(0, 1.5rem, 0) scale(0.97);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (min-width: 1400px) {
.bathgiant-product-card--branch-screen-strip {
flex-basis: var(--bg-bs-tile-size);
}
}
@media (max-width: 960px) {
.bathgiant-branch-screen__brochure-layout,
.bathgiant-branch-screen__brochure-layout--products {
grid-template-columns: 1fr;
align-items: end;
}
.bathgiant-branch-screen__display-title {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__media img,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__media picture img,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__eyebrow-line,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__type-word-inner,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__lede,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-line,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__eyebrow-text,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__word-inner,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__lede,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-banner__delivery-item,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--action,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--trust,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-hero-anim__reveal--products-heading,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-branch-screen__slide-products-wrap,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-product-card--branch-screen-strip,
.bathgiant-branch-screen__slide.is-slide-active .bathgiant-product-card--branch-screen-showcase,
.bathgiant-branch-screen__viewport--fade.owl-loaded .owl-item {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
.bathgiant-branch-screen__eyebrow-line,
.bathgiant-branch-screen__type-word-inner,
.bathgiant-hero-anim__eyebrow-line,
.bathgiant-hero-anim__eyebrow-text,
.bathgiant-hero-anim__word-inner {
opacity: 1;
transform: none;
}
.bathgiant-hero-anim__eyebrow-line {
width: clamp(2.5rem, 6vw, 4.5rem);
}
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media img,
.bathgiant-hero-banner--branch-screen .bathgiant-hero-banner__media picture img {
transform: scale(1.08);
}
}
.bathgiant-branch-screen-slide-extras {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-branch-screen-slide-extras__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.75rem 1.25rem;
}
.bathgiant-branch-screen-admin__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.75rem 1.25rem;
margin-bottom: 1rem;
}
.bathgiant-branch-screen-admin__tv-url {
margin-top: 1rem;
padding: 0.85rem 1rem;
border: 1px solid #c7d2fe;
border-radius: 8px;
background: #eef2ff;
}
.bathgiant-branch-screen-admin__tv-link {
font-size: 0.95rem;
word-break: break-all;
}
.bathgiant-branch-screen-slides-intro {
margin: 0 0 1rem;
}
.bathgiant-branch-screen-slides-summary {
margin: 0.35rem 0 0;
}
.bathgiant-branch-screen-slide-wrap {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #e2e8f0;
}
.bathgiant-branch-screen-slide-wrap__bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.bathgiant-branch-screen-slide-drag {
flex: 0 0 auto;
appearance: none;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #64748b;
border-radius: 6px;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 0.85rem;
line-height: 1;
cursor: grab;
}
.bathgiant-branch-screen-slide-drag:active {
cursor: grabbing;
}
.bathgiant-branch-screen-slide-toggle {
flex: 1 1 auto;
appearance: none;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
border-radius: 6px;
min-height: 2rem;
padding: 0.35rem 0.75rem;
text-align: left;
font-weight: 600;
cursor: pointer;
}
.bathgiant-branch-screen-slide-wrap.is-expanded .bathgiant-branch-screen-slide-toggle {
border-color: #93c5fd;
background: #eff6ff;
}
.bathgiant-branch-screen-slide-wrap__body[hidden] {
display: none !important;
}
.bathgiant-branch-screen-slide-wrap.ui-sortable-helper {
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
background: #fff;
}
.bathgiant-branch-screen-product-drag-col,
.bathgiant-branch-screen-product-drag-cell {
width: 2rem;
padding-left: 0.35rem !important;
padding-right: 0.35rem !important;
vertical-align: middle;
}
.bathgiant-branch-screen-product-drag {
appearance: none;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #64748b;
border-radius: 4px;
width: 1.75rem;
height: 1.75rem;
padding: 0;
font-size: 0.75rem;
line-height: 1;
cursor: grab;
}
.bathgiant-branch-screen-product-drag:active {
cursor: grabbing;
}
.bathgiant-branch-screen-product-body tr.ui-sortable-helper {
background: #fff;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}
.bathgiant-branch-screen-slide-status {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
align-items: baseline;
margin: 0 0 0.75rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
font-size: 0.92rem;
}
.bathgiant-branch-screen-slide-status--live {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.bathgiant-branch-screen-slide-status--hidden {
background: #fff7ed;
border: 1px solid #fdba74;
color: #9a3412;
}
.bathgiant-branch-screen-categories__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.35rem 1rem;
max-height: 14rem;
overflow: auto;
padding: 0.5rem 0;
}
.bathgiant-branch-screen-product-results {
border: 1px solid #d7dbe0;
border-radius: 6px;
max-height: 280px;
overflow-y: auto;
background: #fff;
}
.bathgiant-branch-screen-product-results__empty {
padding: 0.65rem 0.75rem;
color: #64748b;
font-size: 13px;
}
.bathgiant-branch-screen-product-hit {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid #eef2f6;
background: #fff;
padding: 0.6rem 0.75rem;
cursor: pointer;
}
.bathgiant-branch-screen-product-hit:last-child {
border-bottom: 0;
}
.bathgiant-branch-screen-product-hit__main {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-branch-screen-product-hit__title {
font-weight: 600;
color: #0f172a;
line-height: 1.35;
}
.bathgiant-branch-screen-product-hit__sku {
font-size: 12px;
color: #64748b;
line-height: 1.3;
}
.bathgiant-branch-screen-product-hit__price {
flex: 0 0 auto;
max-width: 46%;
text-align: right;
}
.bathgiant-branch-screen-product-hit__price-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 0.3rem 0.55rem;
font-size: 12px;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.bathgiant-branch-screen-product-hit__price-bit {
display: inline-flex;
align-items: baseline;
gap: 0.2rem;
white-space: nowrap;
}
.bathgiant-branch-screen-product-hit__price-bit-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #64748b;
}
.bathgiant-branch-screen-product-hit__price-bit--active {
font-weight: 700;
color: #0f172a;
}
.bathgiant-branch-screen-product-hit__price-bit--muted {
opacity: 0.58;
font-weight: 500;
}
.bathgiant-branch-screen-product-hit__price-bit--saved {
color: #166534;
font-weight: 700;
}
.bathgiant-branch-screen-product-hit__price-sep {
color: #cbd5e1;
font-weight: 700;
}
.bathgiant-branch-screen-product-hit:hover,
.bathgiant-branch-screen-product-hit:focus-visible {
background: #f8fafc;
outline: none;
}
.bathgiant-branch-screen-product-hit.is-added {
background: #f0fdf4;
}
.bathgiant-branch-screen-product-hit.is-added:hover,
.bathgiant-branch-screen-product-hit.is-added:focus-visible {
background: #dcfce7;
}
.bathgiant-branch-screen-product-hit.is-added .bathgiant-branch-screen-product-hit__title::after {
content: ' (added)';
color: #166534;
font-weight: 600;
} @property --bi-pct {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --bi-like-pct {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --bi-dislike-pct {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --ug-pct {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
html.bathgiant-user-guide-open {
overflow: hidden;
} html.bathgiant-user-guide-open.bathgiant-user-guide-click-target,
html.bathgiant-user-guide-open.bathgiant-user-guide--product-target,
html.bathgiant-user-guide-open.bathgiant-user-guide--page-scroll {
overflow: auto;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) {
position: relative;
z-index: 100055;
align-self: start;
height: auto;
} html.bathgiant-user-guide-open.bathgiant-user-guide-click-target.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) {
z-index: 100070;
pointer-events: auto !important;
}
html.bathgiant-user-guide-open.bathgiant-user-guide-click-target.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) .bathgiant-product-card__price-toggle,
html.bathgiant-user-guide-open.bathgiant-user-guide-click-target.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) .bathgiant-product-card__price-toggle-btn,
html.bathgiant-user-guide-open.bathgiant-user-guide-click-target.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) .bathgiant-product-card__fetch-trade,
html.bathgiant-user-guide-open.bathgiant-user-guide-click-target.bathgiant-user-guide--product-target .bathgiant-product-card:has([data-bg-user-guide-target]) .bathgiant-product-card__footer-trade-prices {
pointer-events: auto !important;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--product-target .bathgiant-site-chrome {
z-index: 100055;
} html.bathgiant-user-guide-open .bathgiant-account-drawer:not([hidden]) {
z-index: 100055;
} html.bathgiant-user-guide-open.bathgiant-user-guide--shop-menu .bathgiant-site-chrome {
z-index: 100055;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--shop-menu .bathgiant-header-tabs-drop:not([hidden]) {
z-index: 100055;
} html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder {
overflow: auto;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder .bathgiant-trade-quote-builder:not([hidden]) {
z-index: 100055;
pointer-events: auto;
} html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-user-guide {
z-index: 100070;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-user-guide__backdrop {
display: none !important;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder:not([hidden]) {
z-index: 100064 !important;
pointer-events: auto !important;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__dialog,
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__body,
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__main,
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__head .bathgiant-trade-quote-builder__close,
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__search-wrap,
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive #bathgiant-tqb-search {
pointer-events: auto !important;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-user-guide__spotlight {
z-index: 100071;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-user-guide__card {
z-index: 100072;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--quote-builder-interactive .bathgiant-trade-quote-builder__search-results:not([hidden]) {
z-index: 8;
}
.bathgiant-user-guide {
position: fixed;
inset: 0;
z-index: 100060;
pointer-events: none;
isolation: isolate;
overflow: visible;
}
.bathgiant-user-guide[hidden] {
display: none !important;
}
.bathgiant-user-guide__backdrop {
position: absolute;
inset: 0; background: transparent;
pointer-events: auto;
backdrop-filter: none;
} .bathgiant-user-guide:not(.has-spotlight) .bathgiant-user-guide__backdrop {
background: rgba(15, 23, 42, 0.34);
} .bathgiant-user-guide.is-click-target .bathgiant-user-guide__backdrop {
pointer-events: none;
background: transparent !important;
backdrop-filter: none;
}
.bathgiant-user-guide__spotlight {
--bg-guide-spot-accent: #2f88ef;
--bg-guide-spot-accent-soft: rgba(47, 136, 239, 0.2);
--bg-guide-spot-accent-ring: rgba(47, 136, 239, 0.62);
--bg-guide-spot-dim: rgba(15, 23, 42, 0.34);
position: fixed;
border-radius: 14px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.96);
box-shadow:
0 0 0 1px var(--bg-guide-spot-accent-ring),
0 0 0 8px var(--bg-guide-spot-accent-soft),
0 10px 28px rgba(15, 23, 42, 0.16),
0 0 0 9999px var(--bg-guide-spot-dim);
pointer-events: none;
z-index: 1;
opacity: 0;
transform: scale(0.985);
transition:
top 0.2s ease,
left 0.2s ease,
width 0.2s ease,
height 0.2s ease,
opacity 0.18s ease,
transform 0.2s ease,
border-radius 0.2s ease;
}
.bathgiant-user-guide__spotlight.is-active {
opacity: 1;
transform: scale(1);
}
.bathgiant-user-guide__spotlight.is-compact {
border-radius: 999px;
}
.bathgiant-user-guide__spotlight.is-wide.is-compact {
border-radius: 12px;
}
.bathgiant-user-guide__spotlight.is-snapping {
transition: none;
}
body.bathgiant-has-trade-pricing .bathgiant-user-guide__spotlight {
--bg-guide-spot-accent: #9f1239;
--bg-guide-spot-accent-soft: rgba(159, 18, 57, 0.2);
--bg-guide-spot-accent-ring: rgba(159, 18, 57, 0.58);
}
@media (prefers-reduced-motion: no-preference) {
.bathgiant-user-guide__spotlight.is-active:not(.is-snapping)::after {
content: '';
position: absolute;
inset: -5px;
border-radius: inherit;
border: 2px solid var(--bg-guide-spot-accent-ring);
opacity: 0.65;
animation: bathgiant-user-guide-spot-pulse 2.6s ease-in-out infinite;
pointer-events: none;
}
.bathgiant-user-guide__spotlight.is-compact.is-active:not(.is-snapping)::after {
inset: -4px;
}
}
@keyframes bathgiant-user-guide-spot-pulse {
0%, 100% {
opacity: 0.45;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.015);
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-user-guide__spotlight {
transition: none;
}
.bathgiant-user-guide__spotlight.is-active:not(.is-snapping)::after {
content: none;
animation: none;
}
}
html.bathgiant-user-guide-open.bathgiant-user-guide--cart-clear .bathgiant-cart-page,
html.bathgiant-user-guide-open.bathgiant-user-guide--cart-clear .bathgiant-cart-page .bathgiant-cart-update-form,
html.bathgiant-user-guide-open.bathgiant-user-guide--cart-clear .bathgiant-cart-page button[name="bg_remove_item"] {
position: relative;
z-index: 100055;
pointer-events: auto !important;
}
.bathgiant-user-guide__card {
position: fixed;
z-index: 10;
display: flex;
flex-direction: column;
width: min(26.5rem, calc(100vw - 1.5rem));
max-height: calc(100dvh - 2rem);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 7%, #fff) 0,
#fff 4.5rem
);
color: var(--bathgiant-ink, #1f2937);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 16%, #e2e8f0);
border-radius: var(--bathgiant-radius-md, 12px);
box-shadow:
0 1px 0 color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, transparent),
0 18px 48px rgba(15, 23, 42, 0.2);
padding: 1.25rem 1.35rem 0;
pointer-events: auto;
isolation: isolate;
}
.bathgiant-user-guide__card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: var(--bathgiant-radius-md, 12px) var(--bathgiant-radius-md, 12px) 0 0;
background: linear-gradient(
90deg,
var(--bathgiant-brand-deep, #2f68c4),
var(--bathgiant-brand, #3d7dd9)
);
pointer-events: none;
}
.bathgiant-user-guide__card.is-centered {
width: min(28rem, calc(100vw - 1.5rem));
max-width: 28rem;
}
.bathgiant-user-guide__card.is-docked-top {
top: 1rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
max-width: min(28rem, calc(100vw - 1.5rem));
}
.bathgiant-user-guide__card.is-docked-bottom {
top: auto !important;
bottom: 1rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
max-width: min(28rem, calc(100vw - 1.5rem));
} html.bathgiant-user-guide-open.bathgiant-user-guide--menu-target .bathgiant-account-dashboard-head,
html.bathgiant-user-guide-open.bathgiant-user-guide--menu-target .bathgiant-site-chrome {
position: relative;
z-index: 100055;
} html.bathgiant-user-guide-open.bathgiant-user-guide--menu-target .bathgiant-account-dashboard-page .bathgiant-account-dashboard-head,
html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-account-dashboard-page .bathgiant-account-dashboard-head {
position: relative;
z-index: 100055;
}
html.bathgiant-user-guide-open.bathgiant-user-guide--menu-target #bathgiant-add-to-cart-btn.is-added {
position: relative;
z-index: 100055;
} html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-account-source-tabs,
html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-branch-orders-summary,
html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-branch-appointments__toolbar,
html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-trade-customers-panel__toolbar,
html.bathgiant-user-guide-open.bathgiant-user-guide--account-panel .bathgiant-account-quotes-actions {
position: relative;
z-index: 100055;
}
.bathgiant-user-guide.is-positioning .bathgiant-user-guide__spotlight {
visibility: hidden;
pointer-events: none;
}
.bathgiant-user-guide__header {
margin: 0 0 0.85rem;
padding: 0.15rem 0 0;
}
.bathgiant-user-guide__eyebrow,
.bathgiant-user-guide__progress {
margin: 0 0 0.4rem;
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-user-guide__title {
margin: 0;
font-family: var(--bathgiant-font-display, "Zilla Slab", Georgia, serif);
font-size: clamp(1.2rem, 2.4vw, 1.4rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--bathgiant-dark, #0f1419);
}
.bathgiant-user-guide__duration {
margin: 0.45rem 0 0;
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.8rem;
line-height: 1.35;
color: var(--bathgiant-ink-muted, #5c6673);
}
.bathgiant-user-guide__duration[hidden] {
display: none;
}
.bathgiant-user-guide__figure {
margin: 0 0 0.95rem;
border-radius: var(--bathgiant-radius-sm, 8px);
overflow: hidden;
background: var(--bathgiant-brand-wash, #eef4fc);
height: min(34vh, 220px);
position: relative;
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e2e8f0);
}
.bathgiant-user-guide__image {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: left center;
}
.bathgiant-user-guide__figure.is-image-fit-contain .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-fit-contain {
object-fit: contain;
}
.bathgiant-user-guide__figure.is-image-fit-cover .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-fit-cover {
object-fit: cover;
}
.bathgiant-user-guide__figure.is-image-pos-center .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-center { object-position: center center; }
.bathgiant-user-guide__figure.is-image-pos-top .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-top { object-position: center top; }
.bathgiant-user-guide__figure.is-image-pos-bottom .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-bottom { object-position: center bottom; }
.bathgiant-user-guide__figure.is-image-pos-left .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-left { object-position: left center; }
.bathgiant-user-guide__figure.is-image-pos-right .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-right { object-position: right center; }
.bathgiant-user-guide__figure.is-image-pos-top-left .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-top-left { object-position: left top; }
.bathgiant-user-guide__figure.is-image-pos-top-right .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-top-right { object-position: right top; }
.bathgiant-user-guide__figure.is-image-pos-bottom-left .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-bottom-left { object-position: left bottom; }
.bathgiant-user-guide__figure.is-image-pos-bottom-right .bathgiant-user-guide__image,
.bathgiant-user-guide__image.is-image-pos-bottom-right { object-position: right bottom; }
.bathgiant-user-guide__card.has-image {
width: min(28rem, calc(100vw - 1.5rem));
}
.bathgiant-user-guide__content {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 1.5rem;
}
.bathgiant-user-guide__body {
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.92rem;
line-height: 1.55;
color: var(--bathgiant-ink, #1f2937);
max-height: min(46vh, 22rem);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 0.15rem;
margin-bottom:12px;
}
.bathgiant-user-guide__body p:last-child {
margin-bottom: 0;
}
.bathgiant-user-guide__body strong,
.bathgiant-user-guide__body b {
font-weight: 700;
color: var(--bathgiant-dark, #0f1419);
}
.bathgiant-user-guide__body em,
.bathgiant-user-guide__body i {
font-style: italic;
}
.bathgiant-user-guide__body a {
color: var(--bathgiant-brand-deep, #2f68c4);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.bathgiant-user-guide__body p {
display: block;
margin: 0 0 0.55rem;
}
.bathgiant-user-guide__body ul {
margin: 0 0 0.55rem;
padding-left: 1.15rem;
}
.bathgiant-user-guide__body li {
margin: 0 0 0.25rem;
}
.bathgiant-user-guide__hint {
margin: 0.85rem 0 0;
padding: 0.55rem 0.7rem;
border-radius: var(--bathgiant-radius-sm, 8px);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, #e2e8f0);
background: var(--bathgiant-brand-wash, #eef4fc);
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.82rem;
line-height: 1.4;
color: var(--bathgiant-brand-deep, #2f68c4);
font-weight: 600;
}
.bathgiant-user-guide__extra {
margin: 0.85rem 0 0;
}
.bathgiant-user-guide__extra[hidden] {
display: none !important;
}
.bathgiant-user-guide__btn--clear-cart {
width: 100%;
justify-content: center;
text-align: center;
margin-top: 0.15rem;
}
.bathgiant-user-guide__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem 1rem;
margin-top: 0;
position: sticky;
bottom: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #fff 35%);
border-top: 1px solid color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 12%, #e2e8f0);
margin-left: -1.35rem;
margin-right: -1.35rem;
padding: 1rem 1.35rem 1.25rem;
}
.bathgiant-user-guide__actions-start {
flex: 1 1 8rem;
min-width: 0;
}
.bathgiant-user-guide__actions-end {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
margin-left: auto;
}
.bathgiant-user-guide__dismiss {
appearance: none;
border: 0;
background: transparent;
color: var(--bathgiant-ink-muted, #5c6673);
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.35;
padding: 0.35rem 0;
cursor: pointer;
text-align: left;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--bathgiant-ink-muted, #5c6673) 40%, transparent);
text-underline-offset: 0.18em;
}
.bathgiant-user-guide__dismiss:hover,
.bathgiant-user-guide__dismiss:focus-visible {
color: var(--bathgiant-ink, #1f2937);
text-decoration-color: color-mix(in srgb, var(--bathgiant-ink, #1f2937) 55%, transparent);
}
.bathgiant-user-guide__btn {
appearance: none;
border: 1px solid var(--bathgiant-brand-deep, #2f68c4);
background: var(--bathgiant-brand-deep, #2f68c4);
color: #fff;
border-radius: var(--bathgiant-radius-sm, 8px);
padding: 0.55rem 0.95rem;
font-family: var(--bathgiant-font-sans, "Open Sans", system-ui, sans-serif);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
box-shadow: 0 1px 0 color-mix(in srgb, var(--bathgiant-brand-deep, #2f68c4) 35%, transparent);
}
.bathgiant-user-guide__btn--primary {
border-color: var(--bathgiant-brand-deep, #2f68c4);
background: var(--bathgiant-brand-deep, #2f68c4);
color: #fff;
}
.bathgiant-user-guide__btn--ghost {
background: #fff;
color: var(--bathgiant-ink, #1f2937);
border-color: #cbd5e1;
box-shadow: none;
}
.bathgiant-user-guide__btn:hover,
.bathgiant-user-guide__btn:focus-visible {
filter: brightness(1.05);
}
.bathgiant-user-guide__btn--ghost:hover,
.bathgiant-user-guide__btn--ghost:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 35%, #cbd5e1);
color: var(--bathgiant-brand-deep, #2f68c4);
filter: none;
background: color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 6%, #fff);
}
body.bathgiant-has-trade-pricing .bathgiant-user-guide__eyebrow,
body.bathgiant-has-trade-pricing .bathgiant-user-guide__progress {
color: var(--bathgiant-brand-deep, #881337);
}
body.bathgiant-has-trade-pricing .bathgiant-user-guide__card::before {
background: linear-gradient(
90deg,
var(--bathgiant-brand-deep, #881337),
var(--bathgiant-brand, #9f1239)
);
}
body.bathgiant-has-trade-pricing .bathgiant-user-guide__btn--primary,
body.bathgiant-has-trade-pricing .bathgiant-user-guide__btn:not(.bathgiant-user-guide__btn--ghost) {
border-color: var(--bathgiant-brand-deep, #881337);
background: var(--bathgiant-brand-deep, #881337);
} .bathgiant-user-guide-target {
position: relative;
z-index: 1;
pointer-events: auto !important;
}
.bathgiant-user-guide.is-click-target .bathgiant-user-guide-target,
.bathgiant-user-guide.is-click-target .bathgiant-user-guide-target * {
pointer-events: auto !important;
} html.bathgiant-user-guide-click-target .bathgiant-user-guide-target {
pointer-events: auto !important;
}
.bathgiant-user-guide-launcher {
position: fixed;
left: 1rem;
right: auto;
bottom: 1rem;
z-index: 100040;
display: inline-flex;
align-items: center;
gap: 0.35rem;
appearance: none;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 0.85rem 0.45rem 0.55rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
font-weight: 600;
cursor: pointer;
}
html.bathgiant-branch-screen-page .bathgiant-user-guide-launcher,
body.bathgiant-branch-screen-body .bathgiant-user-guide-launcher {
display: none !important;
} body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded .bathgiant-user-guide-launcher {
bottom: auto;
top: calc(1rem + env(safe-area-inset-top, 0px));
left: 1rem;
right: auto;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded.admin-bar .bathgiant-user-guide-launcher {
top: calc(1rem + 32px + env(safe-area-inset-top, 0px));
} body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-collapsed .bathgiant-user-guide-launcher {
bottom: 1rem;
top: auto;
left: 1rem;
right: auto;
}
.bathgiant-user-guide-launcher:hover,
.bathgiant-user-guide-launcher:focus-visible {
border-color: #2563eb;
color: #1d4ed8;
}
.bathgiant-user-guide-launcher__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-weight: 700;
}
.bathgiant-user-guide-prefs__toggle {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-weight: 500;
}
.bathgiant-user-guide-prefs__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bathgiant-user-guide-prefs__status {
margin-top: 0.5rem;
color: #166534;
font-weight: 600;
} .bathgiant-user-guide-step {
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 0.65rem;
background: #fff;
}
.bathgiant-user-guide-step__bar {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid #eef2f6;
}
.bathgiant-user-guide-step__drag {
flex: 0 0 auto;
appearance: none;
border: 1px solid #cbd5e1;
background: #f8fafc;
border-radius: 6px;
width: 2rem;
height: 2rem;
cursor: grab;
}
.bathgiant-user-guide-step__toggle {
flex: 1 1 auto;
appearance: none;
border: 1px solid #cbd5e1;
background: #fff;
border-radius: 6px;
min-height: 2rem;
padding: 0.35rem 0.75rem;
text-align: left;
font-weight: 600;
cursor: pointer;
}
.bathgiant-user-guide-step.is-expanded .bathgiant-user-guide-step__toggle {
border-color: #93c5fd;
background: #eff6ff;
}
.bathgiant-user-guide-step__body {
padding: 0.75rem;
}
.bathgiant-user-guide-step__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.5rem 1rem;
} .bathgiant-user-guide-audience-badge {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #fff;
background: var(--bg-audience, #334155);
}
.bathgiant-user-guide-outline {
margin: 0;
padding: 0;
list-style: none;
counter-reset: bg-guide-step;
}
.bathgiant-user-guide-outline__item {
display: flex;
gap: 0.65rem;
align-items: flex-start;
padding: 0.55rem 0.65rem;
margin-bottom: 0.35rem;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.bathgiant-user-guide-outline__num,
.bathgiant-user-guide-step__num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
.bathgiant-user-guide-outline__main {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.bathgiant-user-guide-outline__title {
font-size: 0.92rem;
}
.bathgiant-user-guide-outline__body {
font-size: 0.85rem;
color: #475569;
line-height: 1.4;
}
.bathgiant-user-guide-outline__meta {
font-size: 0.78rem;
color: #64748b;
}
.bathgiant-user-guide-outline__meta code {
font-size: 0.75rem;
background: #e2e8f0;
padding: 0.05rem 0.35rem;
border-radius: 4px;
}
.bathgiant-user-guide-outline--profile .bathgiant-user-guide-outline__item {
background: #fff;
}
.bathgiant-user-guide-profile-guides {
margin-bottom: 1rem;
}
.bathgiant-user-guide-training__print-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
margin: 0 0 1rem;
padding: 0.75rem 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
}
.bathgiant-user-guide-training__print-btn {
flex: 0 0 auto;
}
.bathgiant-user-guide-training__print-note {
margin: 0;
flex: 1 1 14rem;
font-size: 0.875rem;
line-height: 1.4;
color: #475569;
}
.bathgiant-training-print {
position: absolute;
left: -99999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
.bathgiant-user-guide-profile-guides__guide {
--ug-guide-accent: var(--bathgiant-brand, #3d7dd9);
--ug-guide-accent-deep: var(--bathgiant-brand-deep, #2f68c4);
--ug-guide-accent-wash: var(--bathgiant-brand-wash, #eef4fc);
}
.bathgiant-user-guide-profile-guides__guide--audience-branch {
--ug-guide-accent: var(--bathgiant-brand, #3d7dd9);
--ug-guide-accent-deep: var(--bathgiant-brand-deep, #2f68c4);
--ug-guide-accent-wash: var(--bathgiant-brand-wash, #eef4fc);
}
.bathgiant-user-guide-profile-guides__guide + .bathgiant-user-guide-profile-guides__guide {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-user-guide-profile-guides__head {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--ug-guide-accent-wash, #eef4fc);
}
.bathgiant-user-guide-profile-guides__intro {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.bathgiant-user-guide-profile-guides__header {
margin: 0;
}
.bathgiant-user-guide-profile-guides__eyebrow {
margin: 0 0 0.35rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ug-guide-accent, var(--bathgiant-brand, #3d7dd9));
}
.bathgiant-user-guide-profile-guides__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-user-guide-profile-guides__intro [data-bg-user-guide-status] {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-user-guide-profile-guides__stat {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-width: 7rem;
padding: 0.8rem 0.9rem;
text-align: center;
border: 1px solid #dbe3ec;
border-radius: 0.9rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--ug-guide-accent-wash, #eef4fc) 42%, #fff) 0%, #fff 100%);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.bathgiant-user-guide-profile-guides__stat-eyebrow {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ug-guide-accent-deep, var(--bathgiant-brand-deep, #2f68c4));
}
.bathgiant-user-guide-profile-guides__stat-chart-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.1rem 0;
}
.bathgiant-user-guide-profile-guides__stat-chart {
--ug-chart-track: color-mix(in srgb, var(--ug-guide-accent, #3d7dd9) 16%, #e2e8f0);
--ug-pct: 0;
position: relative;
width: 5rem;
height: 5rem;
border-radius: 50%;
background: conic-gradient(
var(--ug-guide-accent, #3d7dd9) 0 calc(var(--ug-pct, 0) * 1%),
var(--ug-chart-track) calc(var(--ug-pct, 0) * 1%) 100%
);
transition: --ug-pct 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bathgiant-user-guide-profile-guides__stat-chart.is-chart-in-view {
--ug-pct: var(--ug-pct-target, 0);
}
.bathgiant-user-guide-profile-guides__stat-chart::after {
content: "";
position: absolute;
inset: 0.62rem;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ug-guide-accent, #3d7dd9) 12%, #e2e8f0);
}
.bathgiant-user-guide-profile-guides__stat-chart-label {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
color: var(--ug-guide-accent-deep, var(--bathgiant-brand-deep, #2f68c4));
}
.bathgiant-user-guide-profile-guides__stat-caption {
margin: 0;
font-size: 0.74rem;
line-height: 1.35;
font-weight: 600;
color: #475569;
max-width: 8rem;
}
@media (max-width: 640px) {
.bathgiant-user-guide-profile-guides__head {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
.bathgiant-user-guide-profile-guides__stat {
position: relative;
width: 100%;
flex: 1 1 100%;
margin-left: 0;
min-width: 0;
align-items: stretch;
text-align: left;
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-top: 1px solid #e2e8f0;
background: transparent;
box-shadow: none;
}
.bathgiant-user-guide-profile-guides__stat-chart-wrap {
width: 100%;
margin-top: 0.35rem;
}
.bathgiant-user-guide-profile-guides__stat-chart {
width: 100%;
height: 1.65rem;
border-radius: 999px;
background: linear-gradient(
to right,
var(--ug-guide-accent, #3d7dd9) 0 calc(var(--ug-pct, 0) * 1%),
var(--ug-chart-track) calc(var(--ug-pct, 0) * 1%) 100%
);
}
.bathgiant-user-guide-profile-guides__stat-chart::after {
display: none;
}
.bathgiant-user-guide-profile-guides__stat-chart-label {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: flex-start;
width: auto;
max-width: 100%;
height: auto;
padding: 0 0.65rem;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
color: #fff;
pointer-events: none;
} .bathgiant-user-guide-profile-guides__stat-chart.is-pct-low .bathgiant-user-guide-profile-guides__stat-chart-label {
left: calc(var(--ug-pct, 0) * 1%);
padding-left: 0.45rem;
color: var(--ug-guide-accent-deep, var(--bathgiant-brand-deep, #2f68c4));
}
.bathgiant-user-guide-profile-guides__stat-caption {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-user-guide-profile-guides__stat-chart {
transition: none;
}
}
.bathgiant-user-guide-profile-guides__done {
font-weight: 600;
color: var(--ug-guide-accent-deep, var(--bathgiant-brand-deep));
}
.bathgiant-user-guide-training {
--ug-timeline-accent: var(--bathgiant-brand, #3d7dd9);
--ug-timeline-accent-deep: var(--bathgiant-brand-deep, #2f68c4);
--ug-timeline-accent-wash: var(--bathgiant-brand-wash, #eef4fc);
--ug-timeline-line-done: var(--ug-timeline-accent);
--ug-timeline-line-pending: #e2e8f0;
--ug-timeline-dot-pending-bg: #f1f5f9;
--ug-timeline-dot-pending-color: #94a3b8;
display: flex;
flex-direction: column;
gap: 1.35rem;
container-type: inline-size;
container-name: ug-training;
}
.bathgiant-user-guide-training--audience-trade {
--ug-timeline-accent: var(--bathgiant-brand);
--ug-timeline-accent-deep: var(--bathgiant-brand-deep);
--ug-timeline-accent-wash: var(--bathgiant-nav-card-hover-bg, var(--bathgiant-brand-wash));
--ug-timeline-line-done: var(--bathgiant-brand);
}
.bathgiant-user-guide-training__module {
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.bathgiant-user-guide-training__module + .bathgiant-user-guide-training__module {
margin-top: 0.55rem;
padding-top: 0;
border-top: none;
}
.bathgiant-user-guide-training__module-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0rem;
width: 100%;
margin: 0;
padding: 0.85rem 1rem;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.bathgiant-user-guide-training__module-header:hover,
.bathgiant-user-guide-training__module-header:focus-visible {
background: #f8fafc;
outline: none;
}
.bathgiant-user-guide-training__module-header:focus-visible {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ug-timeline-accent, var(--bathgiant-brand, #3d7dd9)) 35%, transparent);
}
.bathgiant-user-guide-training__module-header-main {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-user-guide-training__module-chevron {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
color: #64748b;
background: #f1f5f9;
transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.bathgiant-user-guide-training__module-chevron::before {
content: "";
display: block;
width: 0.42rem;
height: 0.42rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -0.2rem;
transition: transform 0.2s ease;
}
.bathgiant-user-guide-training__module.is-open .bathgiant-user-guide-training__module-chevron::before {
transform: rotate(-135deg);
margin-top: 0.15rem;
}
.bathgiant-user-guide-training__module.is-open .bathgiant-user-guide-training__module-chevron {
color: var(--ug-timeline-accent-deep, var(--bathgiant-brand-deep, #2f68c4));
background: var(--ug-timeline-accent-wash, var(--bathgiant-brand-wash, #eef4fc));
}
.bathgiant-user-guide-training__module-body {
padding: 0 0.85rem 0.9rem;
}
.bathgiant-user-guide-training__module:not(.is-open) .bathgiant-user-guide-training__module-body {
display: none;
}
.bathgiant-user-guide-training__module-eyebrow {
margin: 0;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ug-timeline-accent, var(--bathgiant-brand, #9f1239));
}
.bathgiant-user-guide-training__module-title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
text-transform: none;
color: #0f172a;
}
.bathgiant-user-guide-training__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.bathgiant-user-guide-training__carousel {
display: block;
gap: 0;
}
.bathgiant-user-guide-training__carousel.owl-carousel .owl-stage {
display: flex;
align-items: flex-start;
}
.bathgiant-user-guide-training__carousel.owl-carousel .owl-stage-outer {
overflow: visible;
padding-bottom: 0.75rem;
}
.bathgiant-user-guide-training__carousel.owl-carousel.owl-loaded .owl-stage-outer {
height: auto !important;
}
.bathgiant-user-guide-training__carousel.owl-carousel .owl-item {
display: flex;
height: auto;
align-items: stretch;
}
.bathgiant-user-guide-training__carousel.owl-carousel .owl-item > .bathgiant-user-guide-training__item {
width: 100%;
}
.bathgiant-user-guide-training__item {
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr);
gap: 0 1rem;
align-items: stretch;
position: relative;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__item {
display: block;
padding: 0.2rem 0.1rem 0.65rem;
height: auto;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__timeline-marker {
display: none;
}
.bathgiant-user-guide-training__item + .bathgiant-user-guide-training__item {
margin-top: 0;
}
.bathgiant-user-guide-training__timeline-marker {
position: relative;
display: flex;
justify-content: center;
padding-top: 0.35rem;
}
.bathgiant-user-guide-training__timeline-marker::after {
content: "";
position: absolute;
top: calc(0.35rem + 1.05rem);
left: 50%;
width: 2px;
transform: translateX(-50%);
bottom: -0.35rem;
background: var(--ug-timeline-line-pending);
border-radius: 1px;
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__timeline-marker::after {
background: var(--ug-timeline-line-done);
}
.bathgiant-user-guide-training__item:last-child .bathgiant-user-guide-training__timeline-marker::after {
display: none;
}
.bathgiant-user-guide-training__step-num {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
background: var(--ug-timeline-dot-pending-bg);
color: var(--ug-timeline-dot-pending-color);
border: 2px solid #e2e8f0;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 0 0 4px #fff;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-user-guide-training__timeline-content {
min-width: 0;
padding: 0 0 1.35rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__timeline-content {
padding: 0;
height: auto;
}
.bathgiant-user-guide-training__item:last-child .bathgiant-user-guide-training__timeline-content {
padding-bottom: 0.15rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__item:last-child .bathgiant-user-guide-training__timeline-content {
padding-bottom: 0;
}
.bathgiant-user-guide-training__card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
overflow: hidden;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card {
min-height: 0;
padding: 0.85rem 0.95rem;
border-color: #e2e8f0;
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
overflow: visible;
}
.bathgiant-user-guide-training__card-layout {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem 1rem;
min-width: 0;
}
.bathgiant-user-guide-training__card-leading {
display: flex;
align-items: flex-start;
gap: 0.7rem;
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-user-guide-training__card-step {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 2.65rem;
width: 2.65rem;
min-height: 2.65rem;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #64748b;
}
.bathgiant-user-guide-training__card-step-label {
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.1;
}
.bathgiant-user-guide-training__card-step-num {
font-family: var(--bathgiant-font-display);
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: #0f172a;
}
.bathgiant-user-guide-training__card-leading-main {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.bathgiant-user-guide-training__carousel.owl-carousel.owl-loaded {
position: relative;
padding-bottom: 3.15rem;
}
@media (min-width: 1680px) {
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card {
padding: 0.75rem 0.8rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card-layout {
gap: 0.65rem 0.75rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__toolbar {
width: min(8.25rem, 40%);
min-width: 7rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__toolbar .bathgiant-btn {
min-height: 1.9rem;
padding: 0.36rem 0.5rem;
font-size: 0.68rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__title {
font-size: 0.92rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__excerpt {
font-size: 0.78rem;
line-height: 1.4;
}
}
@media (min-width: 1920px) {
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card-step {
flex-basis: 2.35rem;
width: 2.35rem;
min-height: 2.35rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card-step-num {
font-size: 0.92rem;
}
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.35rem;
border-radius: 999px;
background: #fff;
border: 1px solid #cbd5e1;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"] {
margin: 0;
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
border: 1px solid #dbe3ec;
background: #fff;
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
line-height: 1;
padding: 0;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"] span[aria-hidden="true"] {
display: none;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav .owl-prev::before,
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav .owl-next::before {
content: "";
display: block;
width: 0.5rem;
height: 0.5rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav .owl-prev::before {
transform: rotate(-135deg);
margin-left: 0.12rem;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav .owl-next::before {
transform: rotate(45deg);
margin-right: 0.12rem;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"]:hover,
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"]:focus-visible {
background: color-mix(in srgb, var(--ug-timeline-accent-wash) 88%, #fff);
border-color: color-mix(in srgb, var(--ug-timeline-accent) 55%, #cbd5e1);
color: var(--ug-timeline-accent-deep);
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ug-timeline-accent) 18%, transparent);
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"].disabled {
opacity: 0.38;
pointer-events: none;
box-shadow: none;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.65rem;
margin: 0;
padding: 0.5rem 0.9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--ug-timeline-accent) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--ug-timeline-accent-deep) 42%, transparent);
box-shadow: 0 4px 18px color-mix(in srgb, var(--ug-timeline-accent-deep) 28%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: fit-content;
text-align: left;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot {
display: inline-flex;
align-items: center;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot span {
display: block;
width: 0.72rem;
height: 0.72rem;
margin: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.42);
transition: width 0.28s ease, height 0.28s ease, background 0.28s ease;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot.active span {
width: 2.75rem;
height: 0.72rem;
background: #fff;
transform: none;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot:hover span {
background: rgba(255, 255, 255, 0.68);
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot.active:hover span {
background: #fff;
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots .owl-dot span {
transition: none;
}
}
@container ug-training (max-width: 28rem) {
.bathgiant-user-guide-training__carousel.owl-carousel.owl-loaded {
padding-bottom: 3.45rem;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-dots {
max-width: calc(100% - 6.5rem);
padding: 0.42rem 0.7rem;
gap: 0.5rem;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav {
padding: 0.28rem;
gap: 0.28rem;
}
.bathgiant-user-guide-training__carousel.owl-theme .owl-nav [class*="owl-"] {
width: 1.95rem;
height: 1.95rem;
}
}
.bathgiant-user-guide-training__card-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem 0.85rem;
padding: 0.15rem 0 0.55rem;
}
.bathgiant-user-guide-training__card-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.bathgiant-user-guide-training__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
color: #0f172a;
overflow-wrap: anywhere;
}
.bathgiant-user-guide-training__excerpt {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: #64748b;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.bathgiant-user-guide-training__status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.bathgiant-user-guide-training__body {
font-size: 0.84rem;
line-height: 1.45;
color: #64748b;
}
.bathgiant-user-guide-training__hints {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.bathgiant-user-guide-training__hint {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
color: #64748b;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__done-badge,
.bathgiant-user-guide-training__current-badge {
flex: 0 0 auto;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.bathgiant-user-guide-training__done-badge {
color: var(--ug-timeline-accent-deep);
background: var(--ug-timeline-accent-wash);
border: 1px solid color-mix(in srgb, var(--ug-timeline-accent) 24%, transparent);
}
.bathgiant-user-guide-training__current-badge {
color: var(--ug-timeline-accent-deep);
background: var(--ug-timeline-accent-wash);
border: 1px solid color-mix(in srgb, var(--ug-timeline-accent) 28%, transparent);
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__step-num {
background: var(--ug-timeline-accent);
border-color: var(--ug-timeline-accent);
color: #fff;
box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--ug-timeline-accent) 18%, transparent);
}
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__step-num {
background: #fff;
border-color: var(--ug-timeline-accent);
color: var(--ug-timeline-accent-deep);
box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--ug-timeline-accent) 22%, transparent);
}
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__card {
padding: 0.9rem 1rem;
border-color: color-mix(in srgb, var(--ug-timeline-accent) 22%, #e2e8f0);
background: linear-gradient(180deg, var(--ug-timeline-accent-wash) 0%, #fff 100%);
box-shadow: 0 4px 18px color-mix(in srgb, var(--ug-timeline-accent) 8%, transparent);
}
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__card-step {
border-color: color-mix(in srgb, var(--ug-timeline-accent) 30%, #e2e8f0);
background: #fff;
color: var(--ug-timeline-accent-deep);
}
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__card-step-num {
color: var(--ug-timeline-accent-deep);
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__card-step {
background: var(--ug-timeline-accent-wash);
border-color: color-mix(in srgb, var(--ug-timeline-accent) 24%, transparent);
color: var(--ug-timeline-accent-deep);
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__card-step-num {
color: var(--ug-timeline-accent-deep);
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__title {
color: #334155;
}
.bathgiant-user-guide-training__item.is-upcoming .bathgiant-user-guide-training__title {
color: #475569;
}
.bathgiant-user-guide-training__toolbar {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.4rem;
flex: 0 0 auto;
width: min(9.5rem, 38%);
min-width: 7.75rem;
padding: 0;
}
.bathgiant-user-guide-training__toolbar .bathgiant-btn {
flex: 0 0 auto;
width: 100%;
min-width: 0;
min-height: 2rem;
padding: 0.42rem 0.65rem;
font-size: 0.72rem;
line-height: 1.25;
box-shadow: none;
border-radius: 8px;
white-space: normal;
text-align: center;
}
.bathgiant-user-guide-training__toolbar .bathgiant-btn-secondary {
background: #fff;
color: #475569;
border: 1px solid #cbd5e1;
}
.bathgiant-user-guide-training__toolbar .bathgiant-btn-secondary:hover,
.bathgiant-user-guide-training__toolbar .bathgiant-btn-secondary:focus-visible {
background: #f8fafc;
color: #334155;
border-color: #94a3b8;
box-shadow: none;
}
.bathgiant-user-guide-training__toolbar .bathgiant-user-guide-training__action--continue {
background: var(--ug-timeline-accent);
border-color: var(--ug-timeline-accent);
color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--ug-timeline-accent) 28%, transparent);
}
.bathgiant-user-guide-training__toolbar .bathgiant-user-guide-training__action--continue:hover,
.bathgiant-user-guide-training__toolbar .bathgiant-user-guide-training__action--continue:focus-visible {
background: var(--ug-timeline-accent-deep);
border-color: var(--ug-timeline-accent-deep);
color: #fff;
}
.bathgiant-user-guide-training__action--try {
white-space: nowrap;
}
.bathgiant-user-guide-training__action--overview.is-active {
background: var(--ug-timeline-accent-wash);
border-color: color-mix(in srgb, var(--ug-timeline-accent) 35%, #cbd5e1);
color: var(--ug-timeline-accent-deep);
}
.bathgiant-user-guide-training__item.is-overview-open .bathgiant-user-guide-training__card {
padding: 0.9rem 1rem;
border-color: #e2e8f0;
background: #fff;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}
.bathgiant-user-guide-training__item.is-overview-open .bathgiant-user-guide-training__card-layout {
flex-wrap: wrap;
}
.bathgiant-user-guide-training__item.is-overview-open.is-current .bathgiant-user-guide-training__card {
border-color: color-mix(in srgb, var(--ug-timeline-accent) 24%, #cbd5e1);
background: linear-gradient(180deg, var(--ug-timeline-accent-wash) 0%, #fff 100%);
}
.bathgiant-user-guide-training__overview {
border-top: 1px solid #e2e8f0;
margin-top: 0.75rem;
padding: 0.95rem 0 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
background: transparent;
}
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__overview {
border-top-color: color-mix(in srgb, var(--ug-timeline-accent) 16%, #e2e8f0);
padding-left: 0;
padding-right: 0;
}
.bathgiant-user-guide-training__overview-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
align-items: start;
}
.bathgiant-user-guide-training__overview-layout--split {
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
gap: 1rem;
}
.bathgiant-user-guide-training__overview-copy {
min-width: 0;
padding: 0.95rem 1.05rem;
border-radius: 10px;
background: #fff;
border: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__overview[hidden] {
display: none;
}
.bathgiant-user-guide-training__overview-meta {
margin: 0;
font-size: 0.8rem;
line-height: 1.4;
color: #64748b;
}
.bathgiant-user-guide-training__overview-meta--pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0.28rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
color: #475569;
background: #fff;
border: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__overview-figure {
margin: 0;
min-width: 0;
border-radius: 10px;
overflow: hidden;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 0;
height: min(34vh, 220px);
}
.bathgiant-user-guide-training__overview-image {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: left center;
border-radius: 0;
}
.bathgiant-user-guide-training__overview-figure.is-image-fit-contain .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-fit-contain {
object-fit: contain;
}
.bathgiant-user-guide-training__overview-figure.is-image-pos-top .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-top { object-position: center top; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-bottom .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-bottom { object-position: center bottom; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-left .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-left { object-position: left center; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-right .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-right { object-position: right center; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-top-left .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-top-left { object-position: left top; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-top-right .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-top-right { object-position: right top; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-bottom-left .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-bottom-left { object-position: left bottom; }
.bathgiant-user-guide-training__overview-figure.is-image-pos-bottom-right .bathgiant-user-guide-training__overview-image,
.bathgiant-user-guide-training__overview-image.is-image-pos-bottom-right { object-position: right bottom; }
@media (max-width: 720px) {
.bathgiant-user-guide-training__overview-layout--split {
grid-template-columns: minmax(0, 1fr);
}
}
.bathgiant-user-guide-training__overview-body {
width: 100%;
min-width: 0;
font-size: 0.9rem;
line-height: 1.6;
color: #334155;
}
.bathgiant-user-guide-training__overview-body > :first-child {
margin-top: 0;
}
.bathgiant-user-guide-training__overview-body p {
display: block;
margin: 0 0 0.7rem;
}
.bathgiant-user-guide-training__overview-body p:last-child {
margin-bottom: 0;
}
.bathgiant-user-guide-training__section-label {
margin: 1rem 0 0.45rem !important;
padding-top: 0.15rem;
font-family: var(--bathgiant-font-display);
font-size: 0.92rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
text-transform: none;
color: #0f172a !important;
}
.bathgiant-user-guide-training__section-label strong,
.bathgiant-user-guide-training__section-label b {
font-weight: inherit;
color: inherit;
}
.bathgiant-user-guide-training__overview-body > .bathgiant-user-guide-training__section-label:first-child {
margin-top: 0 !important;
}
.bathgiant-user-guide-training__overview-body ul {
display: block;
list-style: disc outside;
margin: 0 0 0.85rem;
padding-left: 1.25rem;
}
.bathgiant-user-guide-training__overview-body ol {
display: block;
list-style: decimal outside;
margin: 0 0 0.85rem;
padding-left: 1.25rem;
}
.bathgiant-user-guide-training__overview-body li {
display: list-item;
margin: 0 0 0.45rem;
padding-left: 0.15rem;
}
.bathgiant-user-guide-training__overview-body li:last-child {
margin-bottom: 0;
}
.bathgiant-user-guide-training__overview-body strong,
.bathgiant-user-guide-training__overview-body b {
font-weight: 700;
color: #0f172a;
}
.bathgiant-user-guide-training__overview-body a {
color: var(--bathgiant-brand-deep, #881337);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.12em;
}
.bathgiant-user-guide-training__tip,
.bathgiant-user-guide-training__note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem 0.75rem;
align-items: start;
margin: 0.95rem 0 0;
padding: 0.85rem 0.95rem;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__tip {
background: linear-gradient(135deg, var(--bathgiant-brand-wash, #eef4fc) 0%, #fff 100%);
border-left: 3px solid var(--bathgiant-brand-deep, #881337);
}
.bathgiant-user-guide-training__note {
background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
border-left: 3px solid #d97706;
}
.bathgiant-user-guide-training__tip-label,
.bathgiant-user-guide-training__note-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
padding: 0.2rem 0.45rem;
border-radius: 6px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
}
.bathgiant-user-guide-training__tip-label {
color: var(--bathgiant-brand-deep, #881337);
background: color-mix(in srgb, var(--bathgiant-brand-deep, #881337) 12%, #fff);
}
.bathgiant-user-guide-training__note-label {
color: #92400e;
background: #fef3c7;
}
.bathgiant-user-guide-training__tip-text,
.bathgiant-user-guide-training__note-text {
min-width: 0;
font-size: 0.86rem;
line-height: 1.55;
color: #334155;
}
.bathgiant-user-guide-training__tip-text p,
.bathgiant-user-guide-training__note-text p {
margin: 0;
}
.bathgiant-user-guide-training__overview-empty {
margin: 0;
font-size: 0.84rem;
line-height: 1.45;
color: #64748b;
font-style: italic;
}
.bathgiant-user-guide-training__overview-store {
display: none !important;
} @media (max-width: 720px) {
.bathgiant-user-guide-profile-guides {
margin-bottom: 0.35rem;
}
.bathgiant-user-guide-profile-guides__head {
margin-bottom: 0.65rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e2e8f0;
gap: 0.65rem;
}
.bathgiant-user-guide-profile-guides__stat {
width: 100%;
min-width: 0;
margin: 0;
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-top: 1px solid #e2e8f0;
background: transparent;
box-shadow: none;
}
.bathgiant-user-guide-training__print-bar {
margin: 0;
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-top: 1px solid #e2e8f0;
background: transparent;
}
.bathgiant-user-guide-training {
gap: 0.85rem;
}
.bathgiant-user-guide-training__module {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
border-top: 1px solid #e2e8f0;
}
.bathgiant-user-guide-training__module + .bathgiant-user-guide-training__module {
margin-top: 0;
}
.bathgiant-user-guide-training__module-header {
padding: 0.75rem 0;
}
.bathgiant-user-guide-training__module-header:hover,
.bathgiant-user-guide-training__module-header:focus-visible {
background: transparent;
}
.bathgiant-user-guide-training__module-body {
padding: 0 0 0.85rem;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-overview-open .bathgiant-user-guide-training__card,
.bathgiant-user-guide-training__item.is-overview-open.is-current .bathgiant-user-guide-training__card {
padding: 0.7rem 0;
border: none;
border-radius: 0;
border-bottom: 1px solid #eef2f7;
background: transparent;
box-shadow: none;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__item {
padding: 0;
}
.bathgiant-user-guide-training__item.is-done .bathgiant-user-guide-training__step-num,
.bathgiant-user-guide-training__item.is-current .bathgiant-user-guide-training__step-num {
box-shadow: 0 0 0 4px #fff;
}
}
.bathgiant-user-guide-training-modal[hidden] {
display: none !important;
}
.bathgiant-user-guide-training-modal {
position: fixed;
inset: 0;
z-index: 100085;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 6vh 1rem 1.5rem;
overflow-y: auto;
}
.bathgiant-user-guide-training-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
}
.bathgiant-user-guide-training-modal__dialog {
position: relative;
z-index: 1;
width: min(44rem, calc(100vw - 2rem));
max-height: min(84vh, 44rem);
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.bathgiant-user-guide-training-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem 1rem;
padding: 1rem 1.1rem 0.85rem;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.bathgiant-user-guide-training-modal__head-main {
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-user-guide-training-modal__step {
margin: 0 0 0.25rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-brand, #3d7dd9);
}
.bathgiant-user-guide-training-modal__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.1rem, 2.4vw, 1.35rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-user-guide-training-modal__close {
appearance: none;
flex: 0 0 auto;
border: 0;
margin: 0;
padding: 0.15rem 0.35rem;
background: transparent;
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
color: #64748b;
border-radius: 6px;
}
.bathgiant-user-guide-training-modal__close:hover,
.bathgiant-user-guide-training-modal__close:focus-visible {
color: #0f172a;
background: #f1f5f9;
outline: none;
}
.bathgiant-user-guide-training-modal__body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bathgiant-user-guide-training-modal__body .bathgiant-user-guide-training__overview-layout {
gap: 1rem;
}
.bathgiant-user-guide-training-modal__body .bathgiant-user-guide-training__overview-copy {
padding: 0.85rem 0.95rem;
}
.bathgiant-user-guide-training-modal__body .bathgiant-user-guide-training__overview-figure {
height: min(28vh, 200px);
}
.bathgiant-user-guide-training-modal__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.85rem 1.1rem 1rem;
border-top: 1px solid #e2e8f0;
background: #fbfcfe;
}
body.bathgiant-user-guide-training-modal-open {
overflow: hidden;
}
@container ug-training (min-width: 34rem) {
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem 1.1rem;
align-items: start;
}
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) .bathgiant-user-guide-training__item {
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0 0.75rem;
padding: 0.6rem 0;
}
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) .bathgiant-user-guide-training__item.is-overview-open {
grid-column: 1 / -1;
}
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) .bathgiant-user-guide-training__timeline-marker::after {
display: none;
}
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) .bathgiant-user-guide-training__timeline-content {
padding: 0.2rem 0 0.55rem;
}
.bathgiant-user-guide-training__list:not(.bathgiant-user-guide-training__carousel) .bathgiant-user-guide-training__item:last-child .bathgiant-user-guide-training__timeline-content {
padding-bottom: 0.55rem;
}
}
@container ug-training (max-width: 28rem) {
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__card-layout {
flex-direction: column;
align-items: stretch;
}
.bathgiant-user-guide-training__carousel .bathgiant-user-guide-training__toolbar {
width: 100%;
min-width: 0;
}
}
@media (max-width: 640px) {
.bathgiant-user-guide-training__item {
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0 0.75rem;
}
.bathgiant-user-guide-training__step-num {
width: 1.9rem;
height: 1.9rem;
font-size: 0.74rem;
}
.bathgiant-user-guide-training__card-leading {
gap: 0.6rem;
}
.bathgiant-user-guide-training__title {
font-size: 1.02rem;
}
}
.bathgiant-user-guide.is-preview .bathgiant-user-guide__spotlight {
opacity: 0 !important;
pointer-events: none;
}
.bathgiant-user-guide.is-preview .bathgiant-user-guide__backdrop {
background: rgba(15, 23, 42, 0.34);
}
.bathgiant-user-guide.is-preview .bathgiant-user-guide__card {
max-width: 44rem;
}
.bathgiant-user-guide.is-preview .bathgiant-user-guide__actions-start {
display: none;
}
.bathgiant-user-guide-overview__settings {
margin: 0 0 1.5rem;
padding: 1rem 1.1rem;
max-width: 42rem;
border-radius: 12px;
border: 2px solid #fcd34d;
background: linear-gradient(180deg, #fffbeb 0%, #fff 3rem);
}
.bathgiant-user-guide-overview__settings h2 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.bathgiant-user-guide-overview__settings-form {
margin-top: 0.75rem;
}
.bathgiant-user-guide-overview__preview {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #fde68a;
}
.bathgiant-user-guide-overview__preview h3 {
margin: 0 0 0.35rem;
font-size: 0.95rem;
}
.bathgiant-user-guide-overview__preview-list {
margin: 0.5rem 0 0.75rem;
padding: 0;
list-style: none;
}
.bathgiant-user-guide-overview__preview-list li {
margin: 0.35rem 0;
}
.bathgiant-user-guide-overview__preview-add select {
min-width: 16rem;
max-width: 100%;
}
.bathgiant-user-guide-overview__role {
margin: 1.75rem 0 2rem;
padding: 1rem 1.1rem 1.1rem;
border-radius: 12px;
border: 2px solid #e2e8f0;
background: #fff;
}
.bathgiant-user-guide-overview__role--trade {
border-color: #fecaca;
background: linear-gradient(180deg, #fff5f5 0%, #fff 3rem);
}
.bathgiant-user-guide-overview__role--branch {
border-color: #bfdbfe;
background: linear-gradient(180deg, #eff6ff 0%, #fff 3rem);
}
.bathgiant-user-guide-overview__role--both {
border-color: #ddd6fe;
background: linear-gradient(180deg, #f5f3ff 0%, #fff 3rem);
}
.bathgiant-user-guide-overview__role-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-bottom: 1rem;
}
.bathgiant-user-guide-overview__role-head h2 {
margin: 0;
font-size: 1.15rem;
}
.bathgiant-user-guide-overview__count {
font-size: 0.85rem;
color: #64748b;
}
.bathgiant-user-guide-overview__guide {
margin-bottom: 1.25rem;
padding: 0.85rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #fafafa;
}
.bathgiant-user-guide-overview__guide.is-inactive {
opacity: 0.72;
}
.bathgiant-user-guide-overview__guide-title {
margin: 0 0 0.65rem;
font-size: 1rem;
}
.bathgiant-user-guide-overview__inactive {
color: #b45309;
font-size: 0.8rem;
font-weight: 600;
}
.bathgiant-user-guide-overview__version,
.bathgiant-user-guide-overview__step-count {
font-size: 0.78rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-user-guide-list-steps__ol {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
font-size: 0.82rem;
color: #475569;
}
.bathgiant-user-guide-step__toggle {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.bathgiant-user-guide-step__selector-preview {
font-size: 0.72rem;
font-weight: 400;
color: #64748b;
background: #f1f5f9;
padding: 0.1rem 0.35rem;
border-radius: 4px;
} .bathgiant-header-account:hover,
.bathgiant-header-icon:hover,
.bathgiant-header-tabs__nav-link--image-only:hover .bathgiant-header-tabs__nav-link-cta,
.bathgiant-header-tabs__nav-link--image-only:focus-visible .bathgiant-header-tabs__nav-link-cta,
.bathgiant-store-mega__card:hover,
.bathgiant-btn:hover,
.bathgiant-pkg-display-at__badge--link:hover,
.bathgiant-pkg-display-at__badge--link:focus-visible,
a.bathgiant-product-single__colour-chip:hover,
a.bathgiant-product-single__colour-chip:focus-visible,
.bathgiant-directory-hub-card:hover,
.bathgiant-dir-card__link:hover,
.bathgiant-trade-cta__btn--primary:hover,
.bathgiant-trade-cta__btn--primary:focus-visible,
.bathgiant-branch-insights__stat--link:hover,
.bathgiant-branch-insights__notifications-panel.is-chart-in-view:hover,
.bathgiant-mnav__branch:hover,
.bathgiant-mnav__branch:focus-visible,
.bathgiant-cathub__card:hover,
.bathgiant-cathub__card:focus-within,
.bathgiant-cathub__compact-card:hover,
.bathgiant-cathub__compact-card:focus-visible {
transform: none;
} .bathgiant-footer-launchers {
position: fixed;
left: max(0.75rem, env(safe-area-inset-left, 0px));
bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
z-index: 100040;
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
max-width: calc(100% - 1.5rem);
box-sizing: border-box;
}
.bathgiant-footer-launchers .bathgiant-user-guide-launcher,
.bathgiant-footer-launchers .bathgiant-issue-report-launcher {
position: static;
left: auto;
right: auto;
bottom: auto;
top: auto;
z-index: auto;
display: inline-flex;
align-items: center;
gap: 0.35rem;
appearance: none;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 0.85rem 0.45rem 0.55rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
font-family: var(--bathgiant-font-sans);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
min-height: 2.55rem;
cursor: pointer;
white-space: nowrap;
}
.bathgiant-footer-launchers .bathgiant-user-guide-launcher__text,
.bathgiant-footer-launchers .bathgiant-issue-report-launcher__text {
font: inherit;
line-height: 1;
}
.bathgiant-footer-launchers .bathgiant-user-guide-launcher__icon {
width: 1.65rem;
height: 1.65rem;
flex-shrink: 0;
font-size: 0.95rem;
line-height: 1;
}
.bathgiant-footer-launchers .bathgiant-issue-report-launcher__icon,
.bathgiant-footer-launchers .bathgiant-issue-report-launcher .bathgiant-account-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
flex-shrink: 0;
line-height: 0;
}
.bathgiant-footer-launchers .bathgiant-issue-report-launcher__icon svg,
.bathgiant-footer-launchers .bathgiant-issue-report-launcher .bathgiant-account-icon svg {
width: 1rem;
height: 1rem;
}
.bathgiant-footer-launchers .bathgiant-issue-report-launcher:hover,
.bathgiant-footer-launchers .bathgiant-issue-report-launcher:focus-visible {
border-color: #94a3b8;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.bathgiant-footer-launchers .bathgiant-user-guide-launcher:hover,
.bathgiant-footer-launchers .bathgiant-user-guide-launcher:focus-visible {
border-color: #2563eb;
color: #1d4ed8;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded .bathgiant-footer-launchers {
bottom: auto;
top: calc(1rem + env(safe-area-inset-top, 0px));
left: 1rem;
right: auto;
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-expanded.admin-bar .bathgiant-footer-launchers {
top: calc(1rem + 32px + env(safe-area-inset-top, 0px));
}
body.bathgiant-user-switch-dock-active.bathgiant-user-switch-dock-collapsed .bathgiant-footer-launchers {
bottom: 1rem;
top: auto;
left: 1rem;
right: auto;
}
.bathgiant-issue-report-launcher {
display: inline-flex;
align-items: center;
gap: 0.35rem;
appearance: none;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 0.85rem 0.45rem 0.55rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
font-weight: 600;
cursor: pointer;
}
.bathgiant-issue-report-launcher:hover,
.bathgiant-issue-report-launcher:focus-visible {
border-color: #94a3b8;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.bathgiant-issue-report-launcher__icon {
display: inline-flex;
color: #b45309;
}
.bathgiant-account-dashboard-issue-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid #cbd5e1;
border-radius: 0.5rem;
background: #fff;
color: #b45309;
cursor: pointer;
}
.bathgiant-account-dashboard-issue-btn:hover,
.bathgiant-account-dashboard-issue-btn:focus-visible {
border-color: #94a3b8;
background: #f8fafc;
}
.bathgiant-issue-report-modal[hidden] {
display: none !important;
}
.bathgiant-issue-report-modal {
position: fixed;
inset: 0;
z-index: 100090;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 6vh 1rem 1.5rem;
overflow-y: auto;
}
.bathgiant-issue-report-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
}
.bathgiant-issue-report-modal__dialog {
position: relative;
z-index: 1;
width: min(34rem, calc(100vw - 2rem));
max-height: min(88vh, 40rem);
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.bathgiant-issue-report-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem 1rem;
padding: 1rem 1.1rem 0.9rem;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}
.bathgiant-issue-report-modal__head-main {
min-width: 0;
flex: 1 1 auto;
}
.bathgiant-issue-report-modal__eyebrow {
margin: 0 0 0.25rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-issue-report-modal__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.1rem, 2.4vw, 1.3rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-issue-report-modal__lede {
margin: 0.45rem 0 0;
font-size: 0.88rem;
line-height: 1.5;
color: #64748b;
}
.bathgiant-issue-report-modal__close {
appearance: none;
flex: 0 0 auto;
border: 0;
margin: 0;
padding: 0.15rem 0.35rem;
background: transparent;
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
color: #64748b;
border-radius: 6px;
}
.bathgiant-issue-report-modal__close:hover,
.bathgiant-issue-report-modal__close:focus-visible {
color: #0f172a;
background: #f1f5f9;
outline: none;
}
.bathgiant-issue-report-modal__form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: 1rem 1.1rem 1.1rem;
overflow: auto;
}
.bathgiant-issue-report-modal__field {
margin: 0 0 0.85rem;
}
.bathgiant-issue-report-modal__field label {
display: block;
margin: 0 0 0.35rem;
font-size: 0.84rem;
font-weight: 600;
color: #334155;
}
.bathgiant-issue-report-modal__input,
.bathgiant-issue-report-modal__textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 0.62rem 0.75rem;
font: inherit;
font-size: 0.92rem;
line-height: 1.45;
color: #0f172a;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-issue-report-modal__textarea {
min-height: 8.5rem;
resize: vertical;
}
.bathgiant-issue-report-modal__input::placeholder,
.bathgiant-issue-report-modal__textarea::placeholder {
color: #94a3b8;
}
.bathgiant-issue-report-modal__input:focus,
.bathgiant-issue-report-modal__textarea:focus {
outline: none;
border-color: var(--bathgiant-brand, #3d7dd9);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bathgiant-brand, #3d7dd9) 18%, transparent);
}
.bathgiant-issue-report-modal__input--readonly {
background: #f8fafc;
color: #475569;
font-size: 0.8rem;
word-break: break-all;
}
.bathgiant-issue-report-modal__field--url {
margin-bottom: 0.65rem;
}
.bathgiant-issue-report-modal__hint {
margin: 0.35rem 0 0;
font-size: 0.78rem;
line-height: 1.4;
color: #94a3b8;
}
.bathgiant-issue-report-modal__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.35rem;
padding-top: 0.85rem;
border-top: 1px solid #e2e8f0;
}
.bathgiant-issue-report-modal__btn-cancel {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.58rem 1.05rem;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
color: #475569;
font-family: var(--bathgiant-font-sans);
font-size: var(--bathgiant-btn-font-size);
font-weight: var(--bathgiant-btn-font-weight);
line-height: var(--bathgiant-btn-line-height);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bathgiant-issue-report-modal__btn-cancel:hover,
.bathgiant-issue-report-modal__btn-cancel:focus-visible {
background: #f8fafc;
border-color: #94a3b8;
color: #0f172a;
outline: none;
}
.bathgiant-issue-report-modal__notice {
margin: 0 0 0.5rem;
font-size: 0.88rem;
line-height: 1.45;
}
.bathgiant-issue-report-modal__notice.is-error {
color: #b91c1c;
}
.bathgiant-issue-report-modal__notice.is-success {
color: #047857;
}
body.bathgiant-issue-report-modal-open {
overflow: hidden;
}
.bathgiant-issue-report-list {
display: grid;
gap: 0.85rem;
}
.bathgiant-issue-report-card {
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 14%, #e2e8f0);
border-radius: 0.75rem;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bathgiant-issue-report-card:hover,
.bathgiant-issue-report-card:focus-within {
border-color: color-mix(in srgb, var(--bathgiant-brand) 42%, #e2e8f0);
box-shadow: 0 8px 24px color-mix(in srgb, var(--bathgiant-brand) 10%, transparent);
}
.bathgiant-issue-report-card__toggle,
.bathgiant-issue-report-board-card__toggle {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 1rem 2.1rem 0.9rem 1.1rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.bathgiant-issue-report-board-card__toggle {
padding: 0.75rem 1.85rem 0.7rem 0.8rem;
}
.bathgiant-issue-report-card__toggle:focus-visible,
.bathgiant-issue-report-board-card__toggle:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--bathgiant-brand-focus-ring);
}
.bathgiant-issue-report-card__chevron,
.bathgiant-issue-report-board-card__chevron {
position: absolute;
top: 1rem;
right: 0.85rem;
width: 0.55rem;
height: 0.55rem;
border-right: 2px solid #94a3b8;
border-bottom: 2px solid #94a3b8;
transform: rotate(45deg);
transition: transform 0.15s ease;
pointer-events: none;
}
.bathgiant-issue-report-board-card__chevron {
top: 0.85rem;
right: 0.7rem;
}
.bathgiant-issue-report-card:not(.is-collapsed) .bathgiant-issue-report-card__chevron,
.bathgiant-issue-report-board-card:not(.is-collapsed) .bathgiant-issue-report-board-card__chevron {
transform: rotate(225deg);
top: 1.15rem;
}
.bathgiant-issue-report-board-card:not(.is-collapsed) .bathgiant-issue-report-board-card__chevron {
top: 1rem;
}
.bathgiant-issue-report-card__body,
.bathgiant-issue-report-board-card__body {
padding: 0 1.1rem 0.95rem;
}
.bathgiant-issue-report-board-card__body {
padding: 0 0.8rem 0.75rem;
}
.bathgiant-issue-report-card.is-collapsed .bathgiant-issue-report-card__body,
.bathgiant-issue-report-board-card.is-collapsed .bathgiant-issue-report-board-card__body {
display: none;
}
.bathgiant-issue-report-card__link {
display: block;
padding: 1rem 1.1rem 0.9rem;
color: inherit;
text-decoration: none;
}
.bathgiant-issue-report-card__link:hover,
.bathgiant-issue-report-card__link:focus-visible {
text-decoration: none;
}
.bathgiant-issue-report-card__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.bathgiant-issue-report__ref {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.12rem 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
background: var(--bathgiant-brand-wash);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 22%, transparent);
}
.bathgiant-issue-report__resolve-duration {
margin: 0.35rem 0 0;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.35;
color: #047857;
}
.bathgiant-issue-report-card__message {
margin: 0 0 0.45rem;
font-size: 1.02rem;
line-height: 1.45;
font-weight: 500;
color: #0f172a;
}
.bathgiant-issue-report-card__subject {
margin: 0 0 0.55rem;
font-size: 0.88rem;
line-height: 1.35;
color: #64748b;
}
.bathgiant-issue-report-card__subject--toggle {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #0f172a;
}
.bathgiant-issue-report-card__meta {
margin: 0;
color: #94a3b8;
font-size: 0.82rem;
line-height: 1.35;
}
.bathgiant-issue-report-card__cta,
.bathgiant-issue-report-board-card__link {
display: inline-flex;
align-items: center;
margin-top: 0.7rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--bathgiant-brand-deep);
text-decoration: none;
}
.bathgiant-issue-report-board-card__link {
margin-top: 0.45rem;
}
.bathgiant-issue-report-card__cta::after,
.bathgiant-issue-report-board-card__link::after {
content: "→";
margin-left: 0.35rem;
transition: transform 0.15s ease;
}
.bathgiant-issue-report-card__cta:hover::after,
.bathgiant-issue-report-card__cta:focus-visible::after,
.bathgiant-issue-report-board-card__link:hover::after,
.bathgiant-issue-report-board-card__link:focus-visible::after {
transform: translateX(0.15rem);
}
.bathgiant-issue-report__status {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.15rem 0.55rem;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.bathgiant-issue-report__status--logged {
background: #fef3c7;
color: #92400e;
}
.bathgiant-issue-report__status--under_review {
background: #dbeafe;
color: #1d4ed8;
}
.bathgiant-issue-report__status--complete {
background: #d1fae5;
color: #047857;
}
.bathgiant-issue-report__status--coming_soon {
background: #ede9fe;
color: #6d28d9;
}
.bathgiant-issue-report-detail__back {
margin: 0 0 0.85rem;
}
.bathgiant-issue-report-detail__back a {
color: var(--bathgiant-brand-deep);
font-weight: 600;
text-decoration: none;
}
.bathgiant-issue-report-detail__back a:hover,
.bathgiant-issue-report-detail__back a:focus-visible {
text-decoration: underline;
}
.bathgiant-issue-report-detail__head {
margin-bottom: 1rem;
}
.bathgiant-issue-report-detail__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.55rem;
}
.bathgiant-issue-report-detail__title {
margin: 0;
font-size: 1.15rem;
line-height: 1.35;
color: #334155;
}
.bathgiant-issue-report-detail__message {
margin: 0 0 1rem;
padding: 1rem 1.05rem;
border-radius: 0.75rem;
background: var(--bathgiant-brand-wash);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 18%, #e2e8f0);
}
.bathgiant-issue-report-detail__message-label {
margin: 0 0 0.45rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bathgiant-brand-deep);
}
.bathgiant-issue-report-detail__message-body {
font-size: 1.02rem;
line-height: 1.55;
color: #0f172a;
}
.bathgiant-issue-report-detail__facts,
.bathgiant-issue-report-detail__manage {
margin: 0 0 1rem;
padding: 0.85rem 1rem;
border-radius: 0.65rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.bathgiant-issue-report-detail__manage-title,
.bathgiant-issue-report-thread__title {
margin: 0 0 0.65rem;
font-size: 0.92rem;
font-weight: 700;
color: #334155;
}
.bathgiant-issue-report-detail__meta {
display: grid;
gap: 0.55rem;
margin: 0;
}
.bathgiant-issue-report-detail__meta > div {
display: grid;
grid-template-columns: minmax(6rem, 8rem) 1fr;
gap: 0.5rem;
align-items: baseline;
}
.bathgiant-issue-report-detail__meta dt {
margin: 0;
font-weight: 600;
color: #64748b;
font-size: 0.84rem;
}
.bathgiant-issue-report-detail__meta dd {
margin: 0;
color: #0f172a;
font-size: 0.92rem;
word-break: break-word;
}
.bathgiant-issue-report-detail__meta-url dd a {
color: var(--bathgiant-brand-deep);
}
.bathgiant-issue-report-detail__meta-empty {
color: #94a3b8;
font-style: italic;
}
.bathgiant-issue-report-card__page-url {
margin: 0.35rem 0 0;
font-size: 0.8rem;
line-height: 1.4;
color: #64748b;
word-break: break-word;
}
.bathgiant-issue-report-card__page-url-label {
font-weight: 600;
color: #64748b;
}
.bathgiant-issue-report-card__page-url a {
color: var(--bathgiant-brand-deep);
}
.bathgiant-issue-report-detail__status-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.bathgiant-issue-report-detail__manage-label {
margin: 0 0 0.55rem;
font-size: 0.84rem;
font-weight: 600;
color: #64748b;
}
.bathgiant-issue-report-status-picker {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.bathgiant-issue-report-status-picker__option {
appearance: none;
border: 1px solid #cbd5e1;
border-radius: 999px;
padding: 0.42rem 0.85rem;
background: #fff;
color: #334155;
font: inherit;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-issue-report-status-picker__option:hover,
.bathgiant-issue-report-status-picker__option:focus-visible {
border-color: color-mix(in srgb, var(--bathgiant-brand) 45%, #cbd5e1);
color: var(--bathgiant-brand-deep);
outline: none;
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-issue-report-status-picker__option.is-active {
border-color: transparent;
color: #fff;
cursor: default;
}
.bathgiant-issue-report-status-picker__option--logged.is-active {
background: #64748b;
}
.bathgiant-issue-report-status-picker__option--under_review.is-active {
background: #d97706;
}
.bathgiant-issue-report-status-picker__option--complete.is-active {
background: #16a34a;
}
.bathgiant-issue-report-status-picker__option--coming_soon.is-active {
background: #2563eb;
}
.bathgiant-issue-report-status-picker__option:disabled {
opacity: 0.65;
cursor: wait;
}
.bathgiant-issue-report-detail__status-note.is-success,
.bathgiant-issue-report-reply__note.is-success {
color: #047857;
}
.bathgiant-issue-report-detail__status-note.is-error,
.bathgiant-issue-report-reply__note.is-error {
color: #b91c1c;
}
.bathgiant-issue-report-board {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
align-items: start;
}
.bathgiant-issue-report-board__column {
display: flex;
flex-direction: column;
gap: 0.55rem;
min-width: 0;
padding: 0.65rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.bathgiant-issue-report-board__column-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.bathgiant-issue-report-board__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.35rem;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: 0.76rem;
font-weight: 700;
}
.bathgiant-issue-report-board__cards {
display: grid;
gap: 0.55rem;
min-height: 3rem;
}
.bathgiant-issue-report-board__empty {
margin: 0;
padding: 0.65rem 0.5rem;
border-radius: 0.55rem;
border: 1px dashed #cbd5e1;
background: #fff;
color: #94a3b8;
font-size: 0.84rem;
text-align: center;
}
.bathgiant-issue-report-board-card {
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-issue-report-board-card:hover,
.bathgiant-issue-report-board-card:focus-within {
border-color: color-mix(in srgb, var(--bathgiant-brand) 35%, #e2e8f0);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.bathgiant-issue-report-board-card__toolbar {
margin-bottom: 0.45rem;
}
.bathgiant-issue-report-board-card__title {
margin: 0;
font-size: 0.92rem;
line-height: 1.35;
font-weight: 700;
color: #0f172a;
}
.bathgiant-issue-report-board-card__toggle .bathgiant-issue-report__resolve-duration {
margin-top: 0.3rem;
font-size: 0.72rem;
}
.bathgiant-issue-report-board-card__message {
margin: 0 0 0.45rem;
font-size: 0.82rem;
line-height: 1.4;
color: #64748b;
}
.bathgiant-issue-report-board-card__admin-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.65rem;
padding-top: 0.55rem;
border-top: 1px solid #eef2f7;
}
.bathgiant-issue-report-board-card__admin-actions .bathgiant-btn {
font-size: 0.78rem;
}
.bathgiant-issue-report-board-card__btn-delete {
color: #991b1b;
border-color: #fecaca;
}
.bathgiant-issue-report-board-card__btn-delete:hover,
.bathgiant-issue-report-board-card__btn-delete:focus-visible {
color: #7f1d1d;
border-color: #fca5a5;
background: #fef2f2;
}
.bathgiant-issue-report-board-card .bathgiant-issue-report-card__meta {
font-size: 0.76rem;
}
@media (max-width: 1100px) {
.bathgiant-issue-report-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.bathgiant-issue-report-board {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.35rem;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.bathgiant-issue-report-board__column {
flex: 0 0 min(18rem, 82vw);
scroll-snap-align: start;
}
}
.bathgiant-issue-report-thread {
margin-top: 0.25rem;
}
.bathgiant-issue-report-thread__empty {
margin: 0 0 0.75rem;
padding: 0.75rem 0.85rem;
border-radius: 0.55rem;
background: #f8fafc;
border: 1px dashed #cbd5e1;
color: #64748b;
font-size: 0.9rem;
}
.bathgiant-issue-report-thread__messages {
display: grid;
gap: 0.65rem;
max-height: 24rem;
overflow: auto;
margin-bottom: 0.75rem;
}
.bathgiant-issue-report-message {
border-radius: 0.55rem;
padding: 0.65rem 0.75rem;
}
.bathgiant-issue-report-message--reporter {
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.bathgiant-issue-report-message--admin {
background: color-mix(in srgb, var(--bathgiant-brand) 8%, #fff);
border: 1px solid color-mix(in srgb, var(--bathgiant-brand) 24%, #bfdbfe);
}
.bathgiant-issue-report-message__head {
margin-bottom: 0.35rem;
font-size: 0.88rem;
color: #64748b;
}
.bathgiant-issue-report-message__body {
font-size: 0.95rem;
line-height: 1.5;
color: #0f172a;
}
.bathgiant-issue-report-reply textarea {
width: 100%;
border-radius: 0.55rem;
border: 1px solid #cbd5e1;
padding: 0.65rem 0.75rem;
font: inherit;
}
.bathgiant-issue-report-reply textarea:focus {
outline: none;
border-color: var(--bathgiant-brand);
box-shadow: 0 0 0 3px var(--bathgiant-brand-focus-ring);
}
.bathgiant-issue-report-reply__actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.bathgiant-admin-insights__issue-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
gap: 0.6rem;
margin: 0 0 0.75rem;
max-width: 100%;
min-width: 0;
}
.bathgiant-admin-insights__issue-metric {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.7rem 0.8rem;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
background: #fff;
min-width: 0;
max-width: 100%;
}
.bathgiant-admin-insights__issue-metric-value {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: #0f172a;
}
.bathgiant-admin-insights__issue-metric-label {
font-size: 0.72rem;
line-height: 1.3;
color: #64748b;
}
.bathgiant-admin-insights__issue-metric--brand .bathgiant-admin-insights__issue-metric-value {
color: var(--bathgiant-brand-deep, #881337);
}
.bathgiant-admin-insights__issue-metric--success .bathgiant-admin-insights__issue-metric-value {
color: #15803d;
}
.bathgiant-admin-insights__issue-metric--info .bathgiant-admin-insights__issue-metric-value {
color: #1d4ed8;
}
.bathgiant-admin-insights__issue-summary {
margin: 0 0 1rem;
} @media (max-width: 899px) {
.bathgiant-account-dashboard-page,
.bathgiant-branch-insights,
.bathgiant-admin-insights {
max-width: 100%;
min-width: 0;
overflow-x: clip;
}
.bathgiant-account-panel,
.bathgiant-account-panel__body {
max-width: 100%;
min-width: 0;
}
.bathgiant-admin-insights__issue-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .bathgiant-branch-insights__section-head-row {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.bathgiant-branch-insights__section-meta {
margin-left: 0;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
width: 100%;
}
.bathgiant-branch-insights__section-meta-item {
justify-content: flex-start;
text-align: left;
}
.bathgiant-branch-insights__grid,
.bathgiant-branch-insights__grid:has(.bathgiant-branch-insights__stat--has-chart),
.bathgiant-branch-orders-summary {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.bathgiant-branch-insights__sales-chart-row {
grid-template-columns: minmax(0, 1fr);
gap: 0.35rem;
}
.bathgiant-branch-insights__sales-chart-values {
min-width: 0;
max-width: 100%;
flex-direction: row;
align-items: baseline;
gap: 0.35rem;
}
.bathgiant-admin-insights__training-chart-row {
grid-template-columns: minmax(0, 1fr);
gap: 0.3rem;
}
.bathgiant-branch-insights__notifications-panel {
grid-template-columns: minmax(0, 1fr);
justify-items: stretch;
}
}
@media (max-width: 899px) and (min-width: 721px) {
.bathgiant-branch-insights__sales-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-branch-insights__sales-summary-item--total {
grid-column: 1 / -1;
}
} .bathgiant-account-order-detail-layout {
display: grid;
gap: 1.25rem;
margin-top: 0.85rem;
}
.bathgiant-account-order-detail-layout__main {
min-width: 0;
}
.bathgiant-account-order-detail-layout__aside {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.bathgiant-account-order-detail__addresses {
margin: 0;
}
.bathgiant-account-order-detail__map {
margin: 0;
}
.bathgiant-account-order-detail__map .bathgiant-customer-dashboard-map,
.bathgiant-customer-dashboard-map--order-locations {
min-height: 320px;
}
.bathgiant-account-order-detail__map .bathgiant-customer-dashboard-map-wrap {
min-height: 320px;
}
@media (min-width: 1100px) {
.bathgiant-account-order-detail-layout--with-map {
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
align-items: start;
}
.bathgiant-account-order-detail-layout__aside {
position: sticky;
top: 1rem;
}
.bathgiant-account-order-detail__map .bathgiant-customer-dashboard-map,
.bathgiant-customer-dashboard-map--order-locations {
min-height: 420px;
}
.bathgiant-account-order-detail__map .bathgiant-customer-dashboard-map-wrap {
min-height: 420px;
}
}
@media (max-width: 1099px) {
.bathgiant-account-order-detail-layout--with-map {
grid-template-columns: 1fr;
}
.bathgiant-account-order-detail-layout__aside {
position: static;
}
} .bathgiant-page-404 {
padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
overflow-x: clip;
}
.bathgiant-404 {
display: grid;
gap: clamp(1.75rem, 4.5vw, 3rem);
align-items: center;
max-width: 78rem;
margin-inline: auto;
}
@media (min-width: 860px) {
.bathgiant-404 {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
gap: clamp(2rem, 4.5vw, 3.5rem);
align-items: center;
}
}
.bathgiant-404__stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; min-height: clamp(28rem, 78vh, 46rem);
overflow: visible;
}
@media (max-width: 859px) {
.bathgiant-404__stage {
min-height: clamp(24rem, 68vw, 34rem);
}
}
.bathgiant-404__code {
margin: 0;
line-height: 0.85;
text-align: center;
pointer-events: none;
z-index: 1;
}
.bathgiant-404__digit {
display: block;
font-family: var(--bathgiant-font-display);
font-weight: 700;
font-size: clamp(6.5rem, 22vw, 12rem);
letter-spacing: -0.04em;
} .bathgiant-404__digit--gradient {
color: var(--bathgiant-public-brand-deep, #2f68c4);
background-image: linear-gradient(
125deg,
#1a2f4a 0%,
#243d5c 18%,
var(--bathgiant-public-brand-deep, #2f68c4) 42%,
var(--bathgiant-public-brand, #3d7dd9) 58%,
#4a7eb8 72%,
var(--bathgiant-trade, #c41e1e) 92%,
#1a2f4a 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
}
@media (prefers-reduced-motion: no-preference) {
.bathgiant-404__digit--gradient {
animation: bg2026-showcase-price-gradient-shift 12s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-404__digit--gradient {
animation: none;
background-position: 40% 50%;
}
}
.bathgiant-404__visual {
position: relative; width: min(100%, 52rem);
margin-top: -2.25rem;
z-index: 2;
}
@media (min-width: 860px) {
.bathgiant-404__visual {
width: 100%;
max-width: none;
margin-top: -3rem;
}
}
.bathgiant-404__sink {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.bathgiant-404__piece {
position: absolute;
width: clamp(3.5rem, 11vw, 6.5rem);
height: auto;
filter: drop-shadow(0 8px 14px rgba(15, 20, 25, 0.2));
will-change: transform;
}
.bathgiant-404__piece--spout {
top: 4%;
right: -4%;
width: clamp(6.25rem, 18vw, 9.5rem);
transform: rotate(28deg);
}
.bathgiant-404__piece--handle {
top: 26%;
left: -6%;
width: clamp(4.75rem, 13vw, 7rem);
transform: rotate(-18deg);
}
.bathgiant-404__piece--plug {
bottom: 16%;
right: 0%;
width: clamp(3.75rem, 11vw, 5.75rem);
transform: rotate(12deg);
}
.bathgiant-404__piece--shard {
top: 40%;
right: 6%;
width: clamp(3.15rem, 9.5vw, 4.75rem);
transform: rotate(-32deg);
}
.bathgiant-404__piece--washer {
bottom: 26%;
left: 4%;
width: clamp(2.75rem, 8vw, 3.85rem);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes bg2026-404-piece-float {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(var(--bg404-rot, 0deg));
}
50% {
transform: translate3d(var(--bg404-dx, 0), var(--bg404-dy, -8px), 0) rotate(calc(var(--bg404-rot, 0deg) + var(--bg404-wobble, 4deg)));
}
}
@keyframes bg2026-404-piece-shake {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(var(--bg404-rot, 0deg));
}
25% {
transform: translate3d(-1px, 1px, 0) rotate(calc(var(--bg404-rot, 0deg) - 2deg));
}
75% {
transform: translate3d(1px, -1px, 0) rotate(calc(var(--bg404-rot, 0deg) + 2deg));
}
}
@keyframes bg2026-404-drip {
0%,
100% {
opacity: 0.35;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 0.95;
transform: translateY(6px) scaleY(1.08);
}
}
@keyframes bg2026-404-drop {
0% {
opacity: 0;
transform: translateY(-6px) scale(0.6);
}
40% {
opacity: 0.85;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(14px) scale(0.5);
}
}
@keyframes bg2026-404-puddle {
0%,
100% {
transform: scaleX(1);
opacity: 0.18;
}
50% {
transform: scaleX(1.06);
opacity: 0.28;
}
}
.bathgiant-404__piece--spout {
--bg404-rot: 28deg;
--bg404-dx: 10px;
--bg404-dy: -16px;
--bg404-wobble: 6deg;
animation: bg2026-404-piece-float 4.8s ease-in-out infinite;
}
.bathgiant-404__piece--handle {
--bg404-rot: -18deg;
--bg404-dx: -8px;
--bg404-dy: -12px;
--bg404-wobble: -5deg;
animation: bg2026-404-piece-float 5.6s ease-in-out infinite 0.4s;
}
.bathgiant-404__piece--plug {
--bg404-rot: 12deg;
--bg404-dx: 7px;
--bg404-dy: -14px;
--bg404-wobble: 5deg;
animation: bg2026-404-piece-float 5.2s ease-in-out infinite 0.8s;
}
.bathgiant-404__piece--shard {
--bg404-rot: -32deg;
animation: bg2026-404-piece-shake 3.2s ease-in-out infinite 0.2s;
}
.bathgiant-404__piece--washer {
--bg404-rot: 0deg;
--bg404-dx: -5px;
--bg404-dy: -10px;
--bg404-wobble: 8deg;
animation: bg2026-404-piece-float 6s ease-in-out infinite 1s;
}
.bathgiant-404__drip {
transform-origin: 210px 88px;
animation: bg2026-404-drip 2.4s ease-in-out infinite;
}
.bathgiant-404__drop {
transform-box: fill-box;
transform-origin: center;
animation: bg2026-404-drop 2.4s ease-in infinite;
}
.bathgiant-404__puddle {
transform-origin: center;
animation: bg2026-404-puddle 3.6s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-404__piece,
.bathgiant-404__drip,
.bathgiant-404__drop,
.bathgiant-404__puddle {
animation: none !important;
}
}
.bathgiant-404__copy {
text-align: center;
}
@media (min-width: 860px) {
.bathgiant-404__copy {
text-align: left;
}
}
.bathgiant-404__eyebrow {
margin: 0 0 0.4rem;
font-family: var(--bathgiant-font-sans);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bathgiant-nav-ink-muted, #2f4f73);
}
.bathgiant-404__title {
margin: 0;
font-family: var(--bathgiant-font-display);
font-size: clamp(1.55rem, 3.4vw, 2.15rem);
font-weight: 700;
line-height: 1.2;
color: var(--bathgiant-header-secondary, #243d5c);
}
.bathgiant-404__lede {
margin: 0.75rem 0 0;
max-width: 38ch;
font-family: var(--bathgiant-font-sans);
font-size: 1.02rem;
line-height: 1.6;
color: var(--bathgiant-ink-muted, #5c6673);
}
@media (min-width: 860px) {
.bathgiant-404__lede {
margin-left: 0;
}
}
.bathgiant-404__lede,
.bathgiant-404__search,
.bathgiant-404__actions {
margin-inline: auto;
}
@media (min-width: 860px) {
.bathgiant-404__lede,
.bathgiant-404__search,
.bathgiant-404__actions {
margin-inline: 0;
}
}
.bathgiant-404__search {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1.35rem;
max-width: 28rem;
}
.bathgiant-404__search-input {
flex: 1 1 12rem;
min-width: 0;
height: var(--bathgiant-header-control-h, 42px);
padding: 0 1rem;
border: 1px solid var(--bathgiant-border, #e4e9f0);
border-radius: var(--bathgiant-header-pill, 999px);
background: #fff;
color: var(--bathgiant-ink, #1f2937);
font-family: var(--bathgiant-font-sans);
font-size: 0.95rem;
box-sizing: border-box;
}
.bathgiant-404__search-input:focus {
outline: 2px solid color-mix(in srgb, var(--bathgiant-brand) 55%, transparent);
outline-offset: 2px;
border-color: var(--bathgiant-brand-deep, #2f68c4);
}
.bathgiant-404__search-btn {
flex: 0 0 auto;
height: var(--bathgiant-header-control-h, 42px);
} .bathgiant-decor-circle {
--bathgiant-decor-circle-size: clamp(22rem, 34vw, 34rem);
--bathgiant-decor-circle-top: auto;
--bathgiant-decor-circle-bottom: auto;
--bathgiant-decor-circle-offset: clamp(-14rem, -11vw, -8rem);
--bathgiant-decor-circle-line: rgba(47, 104, 196, 0.075);
--bathgiant-decor-circle-ring-one: rgba(47, 104, 196, 0.022);
--bathgiant-decor-circle-ring-two: rgba(7, 29, 59, 0.014);
--bathgiant-decor-circle-ring-step: clamp(2.5rem, 5vw, 5rem);
--bathgiant-decor-circle-opacity: 1; --bathgiant-decor-circle-bg: #fff;
--bathgiant-decor-circle-highlight: rgba(47, 104, 196, 0.12);
--bathgiant-decor-circle-highlight-mid: rgba(61, 125, 217, 0.05);
position: relative;
isolation: isolate;
overflow: hidden;
}
.bathgiant-decor-circle::after {
position: absolute;
z-index: 0;
top: var(--bathgiant-decor-circle-top);
bottom: var(--bathgiant-decor-circle-bottom);
width: var(--bathgiant-decor-circle-size);
aspect-ratio: 1;
border: 1px solid var(--bathgiant-decor-circle-line);
border-radius: 50%;
box-shadow:
0 0 0 var(--bathgiant-decor-circle-ring-step) var(--bathgiant-decor-circle-ring-one),
0 0 0 calc(var(--bathgiant-decor-circle-ring-step) * 2) var(--bathgiant-decor-circle-ring-two);
background: radial-gradient(
circle at 32% 28%,
var(--bathgiant-decor-circle-highlight) 0%,
var(--bathgiant-decor-circle-highlight-mid) 40%,
transparent 70%
);
background-size: 140% 140%;
background-position: 28% 30%;
content: "";
opacity: var(--bathgiant-decor-circle-opacity);
pointer-events: none;
}
.bathgiant-decor-circle--left::after {
left: var(--bathgiant-decor-circle-offset);
}
.bathgiant-decor-circle--right::after {
right: var(--bathgiant-decor-circle-offset);
} .bathgiant-decor-circle > * {
position: relative;
z-index: 1;
} @keyframes bathgiant-decor-circle-wash-pulse {
0%,
100% {
opacity: calc(var(--bathgiant-decor-circle-opacity, 1) * 0.42);
background: radial-gradient(
circle at 32% 28%,
color-mix(in srgb, var(--bathgiant-decor-circle-bg) 82%, rgba(47, 104, 196, 0.28)) 0%,
color-mix(in srgb, var(--bathgiant-decor-circle-bg) 94%, transparent) 45%,
transparent 72%
);
}
50% {
opacity: var(--bathgiant-decor-circle-opacity, 1);
background: radial-gradient(
circle at 32% 28%,
var(--bathgiant-decor-circle-highlight) 0%,
var(--bathgiant-decor-circle-highlight-mid) 40%,
transparent 70%
);
}
} @keyframes bathgiant-corner-wash-pulse {
0%,
100% {
opacity: 0.88;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: no-preference) {
.bathgiant-decor-circle::after {
will-change: opacity, background;
animation: bathgiant-decor-circle-wash-pulse 12s ease-in-out infinite;
}
.bathgiant-decor-circle--right::after {
animation-duration: 14s;
animation-delay: -3s;
}
.bathgiant-home-categories__intro::before {
will-change: opacity;
animation: bathgiant-corner-wash-pulse 16s ease-in-out infinite;
}
.bathgiant-home-staff-picks__layout::before {
will-change: opacity;
animation: bathgiant-corner-wash-pulse 18s ease-in-out infinite;
animation-delay: -4s;
} .bathgiant-home-staff-picks__intro::after {
will-change: opacity, background;
animation: bathgiant-staff-picks-intro-ring-pulse 14s ease-in-out infinite;
animation-delay: -3s;
}
}
@keyframes bathgiant-staff-picks-intro-ring-pulse {
0%,
100% {
opacity: 0.55;
background: radial-gradient(
circle at 32% 28%,
color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 72%, rgba(47, 104, 196, 0.32)) 0%,
color-mix(in srgb, var(--bathgiant-brand-wash, #eef4fc) 90%, transparent) 45%,
transparent 72%
);
}
50% {
opacity: 1;
background: radial-gradient(
circle at 32% 28%,
rgba(47, 104, 196, 0.18) 0%,
rgba(61, 125, 217, 0.08) 40%,
transparent 70%
);
}
} .bathgiant-decor-circle--home-categories {
--bathgiant-decor-circle-size: clamp(28rem, 42vw, 38rem);
--bathgiant-decor-circle-top: clamp(-19rem, -17vw, -12rem);
--bathgiant-decor-circle-offset: clamp(-16rem, -12vw, -9rem);
--bathgiant-decor-circle-line: rgba(47, 104, 196, 0.07);
--bathgiant-decor-circle-ring-one: rgba(47, 104, 196, 0.024);
--bathgiant-decor-circle-ring-two: rgba(7, 29, 59, 0.012);
--bathgiant-decor-circle-bg: #fff;
--bathgiant-decor-circle-highlight: rgba(47, 104, 196, 0.11);
--bathgiant-decor-circle-highlight-mid: rgba(61, 125, 217, 0.045);
} .bathgiant-decor-circle--home-catalogue {
--bathgiant-decor-circle-size: clamp(24rem, 36vw, 34rem);
--bathgiant-decor-circle-top: clamp(-16rem, -14vw, -10rem);
--bathgiant-decor-circle-offset: clamp(-15rem, -11vw, -8rem);
--bathgiant-decor-circle-line: rgba(47, 104, 196, 0.065);
--bathgiant-decor-circle-ring-one: rgba(47, 104, 196, 0.02);
--bathgiant-decor-circle-ring-two: rgba(7, 29, 59, 0.01);
--bathgiant-decor-circle-opacity: 0.9;
--bathgiant-decor-circle-bg: var(--bathgiant-brand-wash, #eef4fc);
--bathgiant-decor-circle-highlight: rgba(47, 104, 196, 0.1);
--bathgiant-decor-circle-highlight-mid: rgba(61, 125, 217, 0.04);
} .bathgiant-decor-circle--home-staff-picks::after {
content: none;
animation: none;
}
.bathgiant-decor-circle--home-staff-picks {
--bathgiant-decor-circle-bg: var(--bathgiant-brand-wash, #eef4fc);
--bathgiant-decor-circle-highlight: rgba(47, 104, 196, 0.16);
--bathgiant-decor-circle-highlight-mid: rgba(61, 125, 217, 0.07);
}
.bathgiant-decor-circle--branches-directory {
--bathgiant-decor-circle-size: clamp(21rem, 31vw, 29rem);
--bathgiant-decor-circle-top: -10rem;
--bathgiant-decor-circle-offset: -11rem;
--bathgiant-decor-circle-line: rgba(47, 104, 196, 0.075);
--bathgiant-decor-circle-ring-one: rgba(47, 104, 196, 0.02);
--bathgiant-decor-circle-ring-two: rgba(7, 29, 59, 0.013);
--bathgiant-decor-circle-ring-step: clamp(2.25rem, 4vw, 3.75rem);
--bathgiant-decor-circle-bg: #fff; padding-bottom: 0.35rem;
}
@media (max-width: 900px) {
.bathgiant-decor-circle {
--bathgiant-decor-circle-opacity: 0.68;
}
.bathgiant-decor-circle--home-categories {
--bathgiant-decor-circle-size: 25rem;
--bathgiant-decor-circle-top: -14rem;
--bathgiant-decor-circle-offset: -12rem;
}
.bathgiant-home-staff-picks__intro {
--bathgiant-staff-picks-ring-size: 18rem;
--bathgiant-staff-picks-ring-top: -4.5rem;
--bathgiant-staff-picks-ring-offset: -3.5rem;
}
.bathgiant-decor-circle--home-catalogue {
--bathgiant-decor-circle-size: 22rem;
--bathgiant-decor-circle-top: -12rem;
--bathgiant-decor-circle-offset: -11rem;
}
.bathgiant-decor-circle--branches-directory {
--bathgiant-decor-circle-size: 20rem;
}
}
@media (max-width: 600px) {
.bathgiant-decor-circle {
--bathgiant-decor-circle-opacity: 0.48;
--bathgiant-decor-circle-ring-step: 2rem;
}
.bathgiant-decor-circle--home-categories {
--bathgiant-decor-circle-size: 19rem;
--bathgiant-decor-circle-top: -11rem;
--bathgiant-decor-circle-offset: -10rem;
}
.bathgiant-home-staff-picks__intro {
--bathgiant-staff-picks-ring-size: 15rem;
--bathgiant-staff-picks-ring-top: -3.75rem;
--bathgiant-staff-picks-ring-offset: -2.75rem;
}
.bathgiant-decor-circle--home-catalogue {
--bathgiant-decor-circle-size: 18rem;
--bathgiant-decor-circle-top: -10rem;
--bathgiant-decor-circle-offset: -9.5rem;
}
.bathgiant-decor-circle--branches-directory {
--bathgiant-decor-circle-size: 17rem;
--bathgiant-decor-circle-top: -8rem;
--bathgiant-decor-circle-offset: -9rem;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-decor-circle::after,
.bathgiant-home-categories__intro::before,
.bathgiant-home-staff-picks__layout::before,
.bathgiant-home-staff-picks__intro::after {
animation: none !important;
transition: none;
will-change: auto;
transform: none;
filter: none;
}
} .bathgiant-marketing-page:has(.bathgiant-contact) {
background: transparent;
margin-top: 0;
margin-bottom: 0;
}
.bathgiant-page-default:has(.bathgiant-contact) {
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-contact),
body #main-content.bathgiant-wrap:has(.bathgiant-contact) {
padding-top: 0;
}
.bathgiant-contact {
--contact-navy: #071d3b;
--contact-blue: var(--bathgiant-public-brand-deep, #2f68c4);
--contact-pale: var(--bathgiant-brand-wash, #eef4fc);
--contact-line: var(--bathgiant-store-panel-border, #d9e4f2);
width: 100vw;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
color: var(--bathgiant-ink, #1f2937);
font-family: var(--bathgiant-font-sans);
overflow-x: clip;
}
.bathgiant-contact *,
.bathgiant-contact *::before,
.bathgiant-contact *::after {
box-sizing: border-box;
}
.bathgiant-contact a:focus-visible,
.bathgiant-contact button:focus-visible,
.bathgiant-contact input:focus-visible,
.bathgiant-contact select:focus-visible,
.bathgiant-contact textarea:focus-visible {
outline: 3px solid #f2a900;
outline-offset: 3px;
}
.bathgiant-contact h1,
.bathgiant-contact h2,
.bathgiant-contact h3,
.bathgiant-contact p {
margin-top: 0;
}
.bathgiant-contact h1,
.bathgiant-contact h2 {
font-family: var(--bathgiant-font-display);
font-weight: 700;
letter-spacing: -0.025em;
overflow-wrap: break-word;
text-wrap: balance;
}
.bathgiant-contact h3 {
font-family: var(--bathgiant-font-sans);
font-weight: 700;
letter-spacing: normal;
}
.bathgiant-contact-route > div,
.bathgiant-contact-branch,
.bathgiant-contact-support__details,
.bathgiant-contact-form-wrap,
.bathgiant-contact-accordion__item {
min-width: 0;
}
.bathgiant-contact-eyebrow {
margin-bottom: 0.5rem;
color: var(--contact-blue);
font-family: var(--bathgiant-font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-contact-section-head {
max-width: 46rem;
margin-bottom: clamp(1.35rem, 2.5vw, 2rem);
}
.bathgiant-contact-section-head h2 {
max-width: 18ch;
margin-bottom: 0.55rem;
color: var(--contact-navy);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.12;
}
.bathgiant-contact-section-head > p:last-child,
.bathgiant-contact-section-head > div > p:last-child {
margin-bottom: 0;
color: #56657a;
font-size: clamp(0.98rem, 1.5vw, 1.05rem);
line-height: 1.65;
}
.bathgiant-contact-section-head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
max-width: none;
}
.bathgiant-contact-section-head--split > div {
min-width: 0;
max-width: 46rem;
}
.bathgiant-contact-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(115deg, rgba(4, 18, 42, 0.98), rgba(8, 49, 92, 0.96) 58%, rgba(20, 105, 190, 0.9)),
radial-gradient(circle at 80% 25%, #1f75ca, transparent 45%);
color: #fff;
}
.bathgiant-contact-hero::before {
position: absolute;
z-index: -1;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 44px 44px;
content: "";
mask-image: linear-gradient(to right, transparent, #000);
}
.bathgiant-contact-hero__glow {
position: absolute;
z-index: -1;
width: 25rem;
height: 25rem;
border-radius: 50%;
background: rgba(63, 156, 255, 0.24);
filter: blur(1px);
}
.bathgiant-contact-hero__glow--one {
top: -14rem;
right: 5%;
}
.bathgiant-contact-hero__glow--two {
right: -11rem;
bottom: -17rem;
background: rgba(255, 255, 255, 0.1);
}
.bathgiant-contact-hero__inner {
display: flex;
align-items: center;
min-height: clamp(25rem, 43vw, 31rem);
padding-top: clamp(3.25rem, 6vw, 5rem);
padding-bottom: clamp(3.25rem, 6vw, 5rem);
}
.bathgiant-contact-hero__copy {
width: min(100%, 50rem);
min-width: 0;
}
.bathgiant-contact-hero .bathgiant-contact-eyebrow {
color: #8cc6ff;
}
.bathgiant-contact-hero h1 {
max-width: 12ch;
color: #fff;
}
.bathgiant-contact-hero__lede {
max-width: 42rem;
margin-bottom: 1.7rem;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(1rem, 1.6vw, 1.08rem);
line-height: 1.65;
}
.bathgiant-contact-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
.bathgiant-contact .bathgiant-contact-btn--light {
border-color: #fff;
background: #fff;
color: var(--contact-navy);
}
.bathgiant-contact .bathgiant-contact-btn--light:hover {
border-color: #d9eaff;
background: #d9eaff;
color: var(--contact-navy);
}
.bathgiant-contact .bathgiant-contact-btn--outline {
border-color: rgba(255, 255, 255, 0.48);
background: transparent;
color: #fff;
}
.bathgiant-contact .bathgiant-contact-btn--outline:hover,
.bathgiant-contact .bathgiant-contact-btn--outline:focus-visible {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.bathgiant-contact-hero__text-link {
color: #fff;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: color 0.15s ease;
}
.bathgiant-contact-hero__text-link:hover {
color: #b7dcff;
}
.bathgiant-contact-band,
.bathgiant-contact-branches,
.bathgiant-contact-faq,
.bathgiant-contact-close {
position: relative;
isolation: isolate;
overflow: hidden;
}
.bathgiant-contact-band {
padding: clamp(2.75rem, 5vw, 5rem) 0;
}
.bathgiant-contact-band > .bathgiant-wrap,
.bathgiant-contact-branches > .bathgiant-wrap,
.bathgiant-contact-faq > .bathgiant-wrap,
.bathgiant-contact-close > .bathgiant-wrap {
position: relative;
z-index: 1;
}
.bathgiant-contact-band--routes {
background: #fff;
}
.bathgiant-contact-band--support {
background:
radial-gradient(circle at 100% 10%, rgba(47, 104, 196, 0.055), transparent 32rem),
#f8fafc;
scroll-margin-top: 5rem;
}
.bathgiant-contact-band--routes::after {
position: absolute;
right: clamp(-14rem, -10vw, -7rem);
bottom: clamp(-17rem, -15vw, -10rem);
width: clamp(22rem, 34vw, 34rem);
aspect-ratio: 1;
border: clamp(2.5rem, 5vw, 5rem) solid rgba(47, 104, 196, 0.045);
border-radius: 50%;
content: "";
pointer-events: none;
}
.bathgiant-contact-branches::before {
position: absolute;
inset: 0 0 0 52%;
background-image:
linear-gradient(rgba(47, 104, 196, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(47, 104, 196, 0.045) 1px, transparent 1px);
background-size: 48px 48px;
content: "";
mask-image: linear-gradient(90deg, transparent, #000);
pointer-events: none;
}
.bathgiant-contact-band--support::after {
position: absolute;
top: -11rem;
left: -11rem;
width: 23rem;
aspect-ratio: 1;
border: 1px solid rgba(136, 19, 55, 0.09);
border-radius: 50%;
box-shadow:
0 0 0 3rem rgba(136, 19, 55, 0.018),
0 0 0 6rem rgba(47, 104, 196, 0.018);
content: "";
pointer-events: none;
}
.bathgiant-contact-routes,
.bathgiant-contact-support {
padding-top: 0;
padding-bottom: 0;
}
.bathgiant-contact-routes__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--contact-line);
border-left: 1px solid var(--contact-line);
border-radius: 14px;
overflow: hidden;
background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--contact-blue) 3.5%, #fff) 100%);
box-shadow: 0 10px 28px rgba(15, 39, 72, 0.05);
}
.bathgiant-contact-route {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
min-height: 12.5rem;
padding: clamp(1.25rem, 2.4vw, 1.65rem);
border-right: 1px solid var(--contact-line);
border-bottom: 1px solid var(--contact-line);
background: transparent;
}
.bathgiant-contact-route__number {
padding-top: 0.18rem;
color: #8da1b8;
font-size: 0.72rem;
font-weight: 800;
}
.bathgiant-contact-route h3 {
margin-bottom: 0.6rem;
color: var(--contact-navy);
font-size: clamp(1.02rem, 1.6vw, 1.12rem);
font-weight: 800;
line-height: 1.3;
}
.bathgiant-contact-route p {
margin-bottom: 1.25rem;
color: #657287;
font-size: 0.95rem;
line-height: 1.65;
}
.bathgiant-contact-route__links {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-top: auto;
}
.bathgiant-contact-route__links a,
.bathgiant-contact-branch__actions a,
.bathgiant-contact-faq__all a {
color: var(--contact-blue);
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
transition: color 0.15s ease;
}
.bathgiant-contact-route__links a:hover,
.bathgiant-contact-branch__actions a:hover,
.bathgiant-contact-faq__all a:hover {
text-decoration: underline;
text-underline-offset: 0.18em;
}
.bathgiant-contact-route__links .bathgiant-contact-route__secondary {
color: #657287;
font-weight: 600;
}
.bathgiant-contact-branches {
padding: clamp(2.75rem, 5vw, 5rem) 0;
background: var(--contact-pale);
}
.bathgiant-contact-branches__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
}
.bathgiant-contact-branch {
display: flex;
flex-direction: column;
min-width: 0;
padding: clamp(1.25rem, 2.4vw, 1.55rem);
border: 1px solid var(--contact-line);
border-radius: 14px;
background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--contact-blue) 3%, #fff) 100%);
box-shadow: 0 10px 28px rgba(15, 39, 72, 0.05);
}
.bathgiant-contact-branch__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.bathgiant-contact-branch__head p {
margin-bottom: 0.1rem;
color: #7b899b;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bathgiant-contact-branch__head h3 {
margin-bottom: 0;
color: var(--contact-navy);
font-size: 1.08rem;
font-weight: 800;
line-height: 1.3;
}
.bathgiant-contact-branch__marker.bathgiant-branch-map-marker {
position: relative;
flex: 0 0 auto;
display: block;
width: 2.75rem;
height: 2.75rem;
}
.bathgiant-contact-branch:hover .bathgiant-branch-map-marker__icon,
.bathgiant-contact-branch:focus-within .bathgiant-branch-map-marker__icon {
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
background: var(--bg-map-showroom-deep, #2563eb);
}
.bathgiant-contact-branch address,
.bathgiant-contact-branch__hours {
margin-bottom: 0.8rem;
color: #637187;
font-size: 0.9rem;
font-style: normal;
line-height: 1.5;
}
.bathgiant-contact-branch__phone {
margin-bottom: 1rem;
}
.bathgiant-contact-branch__phone a {
color: var(--contact-navy);
font-weight: 800;
text-decoration: none;
}
.bathgiant-contact-branch__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.8rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #e7edf4;
} .bathgiant-contact-support,
.bathgiant-contact-faq__inner {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.bathgiant-contact-support__details {
position: sticky;
top: 7rem;
padding-top: 1rem;
}
.bathgiant-contact-support__details h2,
.bathgiant-contact-form-wrap > h2 {
margin-bottom: 0.8rem;
color: var(--contact-navy);
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.18;
}
.bathgiant-contact-support__details > p:not(.bathgiant-contact-eyebrow) {
color: #5c6b80;
font-size: 1rem;
line-height: 1.7;
}
.bathgiant-contact-support__details > .bathgiant-contact-eyebrow {
margin-bottom: 0.5rem;
color: var(--contact-blue);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-contact-support__email {
margin: 2rem 0;
padding: 1.2rem 0;
border-top: 1px solid var(--contact-line);
border-bottom: 1px solid var(--contact-line);
}
.bathgiant-contact-support__email .bathgiant-contact-eyebrow,
.bathgiant-contact-support__email span {
display: block;
margin-bottom: 0.3rem;
color: var(--contact-blue);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.bathgiant-contact-support__email a {
color: var(--contact-blue);
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 800;
overflow-wrap: anywhere;
}
.bathgiant-contact-support__note {
padding-left: 1rem;
border-left: 3px solid var(--contact-blue);
font-size: 0.92rem;
}
.bathgiant-contact-form-wrap {
padding: clamp(1.4rem, 4vw, 2.5rem);
border: 1px solid var(--contact-line);
border-radius: var(--bathgiant-radius-lg, 16px);
background:
radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--contact-blue) 7%, transparent) 0%, transparent 55%),
linear-gradient(165deg, #fff 0%, #f8fbff 55%, #f2f7fd 100%);
box-shadow: 0 14px 36px rgba(12, 41, 77, 0.07);
}
.bathgiant-contact-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.bathgiant-contact-form p {
margin-bottom: 0;
}
.bathgiant-contact-form__wide {
grid-column: 1 / -1;
}
.bathgiant-contact-form label {
display: block;
margin-bottom: 0.35rem;
color: #26374d;
font-size: 0.9rem;
font-weight: 600;
}
.bathgiant-contact-form input,
.bathgiant-contact-form select,
.bathgiant-contact-form textarea {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0.7rem 0.8rem;
border: 1px solid #cdd9e6;
border-radius: var(--bathgiant-radius-sm, 8px);
background: #fff;
color: #17243a;
font: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bathgiant-contact-form input,
.bathgiant-contact-form select {
min-height: 3rem;
}
.bathgiant-contact-form textarea {
resize: vertical;
}
.bathgiant-contact-form input:focus,
.bathgiant-contact-form select:focus,
.bathgiant-contact-form textarea:focus {
outline: none;
border-color: var(--contact-blue);
background: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--contact-blue) 18%, transparent);
}
.bathgiant-contact-form input:focus-visible,
.bathgiant-contact-form select:focus-visible,
.bathgiant-contact-form textarea:focus-visible {
outline: none;
outline-offset: 0;
}
.bathgiant-contact-form__privacy {
margin: 1rem 0 !important;
color: #6e7b8d;
font-size: 0.85rem;
line-height: 1.55;
}
.bathgiant-contact-form__honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.bathgiant-contact-notice {
margin-bottom: 1.2rem;
padding: 0.9rem 1rem;
border-left: 4px solid;
border-radius: 0 8px 8px 0;
font-size: 0.9rem;
line-height: 1.5;
}
.bathgiant-contact-notice--success {
border-color: #18794e;
background: #edf9f3;
color: #125d3d;
}
.bathgiant-contact-notice--error {
border-color: #b4232d;
background: #fff1f2;
color: #8b1821;
}
.bathgiant-contact-faq {
padding: clamp(2.75rem, 5vw, 5rem) 0;
background: #fff;
}
.bathgiant-contact-faq .bathgiant-contact-eyebrow {
color: var(--contact-blue);
}
.bathgiant-contact-faq .bathgiant-contact-section-head h2 {
color: var(--contact-navy);
}
.bathgiant-contact-accordion {
display: grid;
gap: 0.75rem;
}
.bathgiant-contact-accordion__item {
min-width: 0;
overflow: hidden;
border: 1px solid var(--contact-line);
border-left: 3px solid var(--contact-blue);
border-radius: var(--bathgiant-radius-md, 12px);
background: #fff;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.bathgiant-contact-accordion__item:hover,
.bathgiant-contact-accordion__item:focus-within {
border-color: color-mix(in srgb, var(--contact-blue) 28%, var(--contact-line));
border-left-color: var(--contact-blue);
box-shadow: 0 8px 22px color-mix(in srgb, var(--contact-blue) 8%, transparent);
}
.bathgiant-contact-accordion__item.is-open {
border-color: color-mix(in srgb, var(--contact-blue) 32%, var(--contact-line));
border-left-color: var(--contact-blue);
background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--contact-blue) 4%, #fff) 100%);
}
.bathgiant-contact-accordion__item h3 {
margin: 0;
}
.bathgiant-contact-accordion__item button {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: clamp(1.05rem, 2.1vw, 1.35rem) clamp(1.1rem, 2.3vw, 1.5rem);
border: 0;
background: transparent;
color: var(--contact-navy);
font-family: var(--bathgiant-font-sans);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 800;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.bathgiant-contact-accordion__item button:hover {
background: color-mix(in srgb, var(--contact-blue) 4%, transparent);
}
.bathgiant-contact-accordion__item button:focus-visible {
outline: none;
outline-offset: 0;
background: color-mix(in srgb, var(--contact-blue) 6%, transparent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--contact-blue) 42%, transparent);
}
.bathgiant-contact-accordion__plus {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin-top: 0.1rem;
border-radius: 999px;
color: var(--contact-blue);
background: color-mix(in srgb, var(--contact-blue) 10%, #fff);
transition: background 0.15s ease, color 0.15s ease;
}
.bathgiant-contact-accordion__plus::before {
display: block;
width: 0.42rem;
height: 0.42rem;
margin-top: -0.2rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
content: "";
transform: rotate(45deg);
transition: transform 180ms ease;
}
.bathgiant-contact-accordion__plus::after {
content: none;
}
.bathgiant-contact-accordion__item.is-open .bathgiant-contact-accordion__plus {
color: #fff;
background: linear-gradient(135deg, var(--contact-blue) 0%, var(--bathgiant-public-brand-deep, #2f68c4) 100%);
}
.bathgiant-contact-accordion__item.is-open .bathgiant-contact-accordion__plus::before {
margin-top: 0.15rem;
transform: rotate(-135deg);
}
.bathgiant-contact-accordion__panel[hidden] {
display: none;
}
.bathgiant-contact-accordion__panel p {
margin: 0;
padding: 0 clamp(1.1rem, 2.3vw, 1.5rem) clamp(1.05rem, 2vw, 1.3rem);
color: #56657a;
font-size: 0.96rem;
line-height: 1.65;
}
.bathgiant-contact-accordion__panel a,
.bathgiant-contact-faq__all a {
color: var(--contact-blue);
}
.bathgiant-contact-faq__all {
grid-column: 2;
margin: 0.9rem 0 0;
}
.bathgiant-contact-trade {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: 0;
margin-bottom: 0;
color: #fff;
}
.bathgiant-contact-band--trade {
background:
radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.08), transparent 22rem),
linear-gradient(115deg, #4b1028, #761c42);
color: #fff;
}
.bathgiant-contact-trade > div:first-child {
max-width: 46rem;
}
.bathgiant-contact-trade .bathgiant-contact-eyebrow {
color: #f2a9c8;
}
.bathgiant-contact-trade h2 {
margin-bottom: 0.6rem;
color: #fff;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.18;
}
.bathgiant-contact-trade p:last-child {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.76);
line-height: 1.6;
}
.bathgiant-contact-trade__actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 0.65rem;
}
.bathgiant-contact-trade .bathgiant-btn {
border-color: #fff;
background: #fff;
color: #4b1028;
}
.bathgiant-contact-trade .bathgiant-contact-btn--trade-outline {
border-color: rgba(255, 255, 255, 0.5);
background: transparent;
color: #fff;
}
.bathgiant-contact-trade .bathgiant-contact-btn--trade-outline:hover,
.bathgiant-contact-trade .bathgiant-contact-btn--trade-outline:focus-visible {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.bathgiant-contact-close {
padding: clamp(2.75rem, 5vw, 5rem) 0;
background: #eef5fc;
text-align: center;
}
.bathgiant-contact-close__inner {
max-width: 52rem;
}
.bathgiant-contact-close h2 {
margin-bottom: 0.7rem;
color: var(--contact-navy);
font-size: clamp(1.6rem, 3vw, 2.35rem);
line-height: 1.15;
}
.bathgiant-contact-close p:not(.bathgiant-contact-eyebrow) {
margin-bottom: 1.5rem;
color: #5f6d80;
}
.bathgiant-contact-close__inner > div {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.bathgiant-contact-close__inner > div > a:not(.bathgiant-btn) {
color: var(--contact-blue);
font-weight: 800;
text-decoration: none;
}
.bathgiant-contact-editor-content {
margin-top: 3rem;
margin-bottom: 3rem;
padding: 1.5rem;
border: 1px solid var(--contact-line);
border-radius: 0.8rem;
}
@media (max-width: 1000px) {
.bathgiant-contact-routes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-contact-branches__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bathgiant-contact-trade {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 760px) {
.bathgiant-contact-hero__inner,
.bathgiant-contact-support,
.bathgiant-contact-faq__inner {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-contact-hero__inner {
min-height: 0;
}
.bathgiant-contact-section-head--split {
align-items: flex-start;
flex-direction: column;
}
.bathgiant-contact-support__details {
position: static;
}
.bathgiant-contact-faq__all {
grid-column: 1;
}
}
@media (max-width: 560px) {
.bathgiant-contact-routes__grid,
.bathgiant-contact-branches__grid,
.bathgiant-contact-form__grid {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-contact-form__wide {
grid-column: 1;
}
.bathgiant-contact-route {
min-height: 0;
}
.bathgiant-contact-hero__actions,
.bathgiant-contact-trade__actions {
align-items: stretch;
flex-direction: column;
}
.bathgiant-contact-hero__actions .bathgiant-btn,
.bathgiant-contact-trade__actions .bathgiant-btn {
justify-content: center;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-contact-hero__text-link,
.bathgiant-contact-route__links a,
.bathgiant-contact-branch__actions a,
.bathgiant-contact-faq__all a,
.bathgiant-contact-accordion__item,
.bathgiant-contact-accordion__item button,
.bathgiant-contact-accordion__plus,
.bathgiant-contact-accordion__plus::before,
.bathgiant-contact-accordion__plus::after {
transition: none;
}
} .bathgiant-marketing-page:has(.bathgiant-faqs) {
background: transparent;
margin-top: 0;
margin-bottom: 0;
}
.bathgiant-page-default:has(.bathgiant-faqs) {
max-width: none;
padding-right: 0;
padding-left: 0;
}
body.bg-breadcrumbs-off #main-content.bathgiant-wrap:has(.bathgiant-faqs),
body #main-content.bathgiant-wrap:has(.bathgiant-faqs) {
padding-top: 0;
}
.bathgiant-faqs {
--contact-navy: #071d3b;
--contact-blue: var(--bathgiant-public-brand-deep, #2f68c4);
--contact-pale: var(--bathgiant-brand-wash, #eef4fc);
--contact-line: var(--bathgiant-store-panel-border, #d9e4f2);
width: 100vw;
max-width: 100vw;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
color: var(--bathgiant-ink, #1f2937);
font-family: var(--bathgiant-font-sans);
overflow-x: clip;
}
.bathgiant-faqs *,
.bathgiant-faqs *::before,
.bathgiant-faqs *::after {
box-sizing: border-box;
}
.bathgiant-faqs a:focus-visible,
.bathgiant-faqs button:focus-visible {
outline: 3px solid #f2a900;
outline-offset: 3px;
}
.bathgiant-faqs h1,
.bathgiant-faqs h2,
.bathgiant-faqs h3,
.bathgiant-faqs p {
margin-top: 0;
}
.bathgiant-faqs-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.75rem, 5vw, 4.5rem);
background:
radial-gradient(circle at 12% 18%, rgba(47, 104, 196, 0.22), transparent 28rem),
radial-gradient(circle at 88% 8%, rgba(136, 19, 55, 0.16), transparent 24rem),
linear-gradient(145deg, #071d3b 0%, #0d2f5c 48%, #153f73 100%);
color: #fff;
}
.bathgiant-faqs-hero__glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(2px);
}
.bathgiant-faqs-hero__glow--one {
top: -8rem;
right: -4rem;
width: 22rem;
height: 22rem;
background: rgba(47, 104, 196, 0.28);
}
.bathgiant-faqs-hero__glow--two {
bottom: -10rem;
left: -6rem;
width: 18rem;
height: 18rem;
background: rgba(242, 169, 0, 0.12);
}
.bathgiant-faqs-hero__inner {
position: relative;
z-index: 1;
}
.bathgiant-faqs-hero__copy {
max-width: 42rem;
}
.bathgiant-faqs-hero .bathgiant-contact-eyebrow {
color: #9ec4f0;
}
.bathgiant-faqs-hero h1 {
margin-bottom: 0.85rem;
color: #fff;
font-size: clamp(2rem, 4.4vw, 3.15rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
}
.bathgiant-faqs-hero__lede {
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(1.02rem, 1.7vw, 1.15rem);
line-height: 1.65;
}
.bathgiant-faqs-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bathgiant-faqs-band {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2.75rem, 5vw, 5rem) 0;
background:
radial-gradient(circle at 100% 0%, rgba(47, 104, 196, 0.05), transparent 28rem),
#fff;
}
.bathgiant-faqs-band__inner {
display: grid;
grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.bathgiant-faqs-band__head {
max-width: 22rem;
}
.bathgiant-faqs-band .bathgiant-contact-eyebrow {
color: var(--contact-blue);
}
.bathgiant-faqs-band .bathgiant-contact-section-head h2 {
color: var(--contact-navy);
}
.bathgiant-faqs-accordion-shell {
min-width: 0;
max-width: 46rem;
}
.bathgiant-faqs-empty {
margin: 0;
color: #657287;
}
.bathgiant-faqs-close {
padding: clamp(2.75rem, 5vw, 4.5rem) 0;
background:
radial-gradient(circle at 0% 100%, rgba(47, 104, 196, 0.06), transparent 26rem),
#f8fafc;
}
.bathgiant-faqs-close__inner {
max-width: 40rem;
}
.bathgiant-faqs-close .bathgiant-contact-eyebrow {
color: var(--contact-blue);
}
.bathgiant-faqs-close h2 {
margin-bottom: 0.65rem;
color: var(--contact-navy);
font-size: clamp(1.45rem, 2.6vw, 1.95rem);
line-height: 1.18;
}
.bathgiant-faqs-close p {
margin-bottom: 1.25rem;
color: #657287;
line-height: 1.65;
}
.bathgiant-faqs-close__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.bathgiant-faqs-close__actions a:not(.bathgiant-btn) {
color: var(--contact-blue);
font-weight: 800;
text-decoration: none;
}
.bathgiant-faqs-editor-content {
margin-top: 3rem;
margin-bottom: 3rem;
padding: 1.5rem;
border: 1px solid var(--contact-line, #d9e4f2);
border-radius: 0.8rem;
}
@media (max-width: 760px) {
.bathgiant-faqs-band__inner {
grid-template-columns: minmax(0, 1fr);
}
.bathgiant-faqs-band__head {
max-width: none;
}
.bathgiant-faqs-accordion-shell {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bathgiant-faqs-hero__glow {
display: none;
}
}
.bathgiant-404__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
justify-content: center;
margin-top: 1.15rem;
}
@media (min-width: 860px) {
.bathgiant-404__actions {
justify-content: flex-start;
}
}