/* ==========================================================================
   Base / reset – values copied from the reference base stylesheet
   ========================================================================== */

/* Optional licensed brand webfont (not bundled).
@font-face { font-family: "Human BBY Digital"; font-weight: 400; font-display: swap; src: url(../fonts/human-400.woff2) format("woff2"); }
@font-face { font-family: "Human BBY Digital"; font-weight: 500 600; font-display: swap; src: url(../fonts/human-500.woff2) format("woff2"); }
@font-face { font-family: "Human BBY Digital"; font-weight: 700; font-display: swap; src: url(../fonts/human-700.woff2) format("woff2"); }
*/

*, :after, :before { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 8px; /* reference root size: 1rem = 8px */
}

body {
	background-color: var(--color-unstable-pure-white);
	color: var(--color-fg-base);
	font-family: var(--family);
	font-size: 13px;
	line-height: 1.2;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
body.bby-ghp { background-color: var(--colorBgDefaultSubdued); }

hr { border: 0; border-top: 1px solid var(--color-unstable-light-gray); box-sizing: content-box; height: 0; margin: 20px 0; }
p { margin: 0 0 var(--size-100); }
img { vertical-align: middle; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--color-unstable-link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a.no-underline, a.no-underline:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0; padding: 0; }
.h6, .heading-6, h6 { font-size: 17px; }
strong { font-weight: 700; }

input, select, textarea {
	background-color: var(--color-unstable-pure-white);
	border-color: var(--color-unstable-tech-gray);
	border-radius: var(--size-round-base);
	border-style: solid;
	border-width: var(--size-border-base);
	color: var(--color-fg-base);
	font-family: inherit;
	font-size: 15px;
	line-height: inherit;
}
input:focus, input:hover, select:focus, select:hover, textarea:focus, textarea:hover { border-color: var(--color-unstable-human-blue); }
input::placeholder, textarea::placeholder { color: var(--color-unstable-hint-gray); opacity: 1; }
button { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; text-transform: none; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--colorOutlineFocus); outline-offset: 2px; }
svg { display: inline-block; }

/* Screen-reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Skip links (reference: .visibility-hidden / -focusable) */
.visibility-hidden { position: absolute; top: -1px; left: -1px; height: 1px; width: 1px; overflow: hidden; z-index: 1000; }
.visibility-hidden-focusable:active, .visibility-hidden-focusable:focus { left: 0; top: 0; padding: 0 2px; margin: 0; width: auto; height: auto; overflow: visible; background: #fff; clip: auto; }

/* --------------------------------------------------------------------------
   Typography styles (reference "text-style-*")
   -------------------------------------------------------------------------- */
.text-style-title-lg-500 { font-size: 28px; line-height: 32px; font-weight: 500; }
.text-style-title-md-500 { font-size: 24px; line-height: 28px; font-weight: 500; }
.text-style-title-sm-500 { font-size: 20px; line-height: 24px; font-weight: 500; }
.text-style-body-lg-400 { font-size: 16px; line-height: 20px; font-weight: 400; }
.text-style-body-lg-500 { font-size: 16px; line-height: 20px; font-weight: 500; }
.text-style-body-md-400 { font-size: 14px; line-height: 18px; font-weight: 400; }
.text-style-body-md-500 { font-size: 14px; line-height: 18px; font-weight: 500; }
.text-style-body-sm-400 { font-size: 12px; line-height: 16px; font-weight: 400; }
.text-style-body-sm-500 { font-size: 12px; line-height: 16px; font-weight: 500; }
.text-style-body-xs-400 { font-size: 10px; line-height: 12px; font-weight: 400; }
.body-copy-lg { font-size: 15px; }
.body-copy { font-size: 13px; }
.body-copy-sm, .disclaimer { font-size: 11px; }
.font-sans { font-family: var(--fontFamilySansSerif); }
.text-default { color: var(--colorFgDefault); }
.text-default-subdued { color: var(--colorFgDefaultSubdued); }
.text-default-muted { color: var(--colorFgDefaultMuted); }
.text-primary { color: var(--colorFgPrimary); }
.text-danger { color: var(--colorFgDanger); }
.text-success { color: var(--colorFgSuccess); }
.line-clamp-1, .line-clamp-2, .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* --------------------------------------------------------------------------
   Buttons – "dct-be-btn" (homepage) and "c-button" (legacy header/footer/forms)
   -------------------------------------------------------------------------- */
.dct-be-btn { position: relative; display: flex; align-self: flex-start; justify-content: center; align-items: center; border-style: solid; border-width: 1px; border-radius: 8px; cursor: pointer; box-shadow: rgba(0,0,0,.05) 0 2px 3px 0; text-decoration: none; }
.dct-be-btn:hover { text-decoration: none; }
.dct-be-btn-sm { min-width: 64px; min-height: 32px; }
.dct-be-btn-md { min-width: 80px; min-height: 40px; }
.dct-be-btn-lg { min-width: 170px; min-height: 48px; }
.dct-be-btn-primary { border-color: #018cf7; background: #025ccc; color: #fbfbfb; }
.dct-be-btn-primary:hover { background: #0072de; }
.dct-be-btn-secondary { border-color: #f4c138; background: #ffe200; color: #030303; }
.dct-be-btn-secondary:hover { background: #fff200; }
.dct-be-btn-outline { background: #fff; color: unset; border-color: #c4c8cf; }
.dct-be-btn-outline:hover { background: #f6f6f7; }

.c-button { align-items: center; border-radius: var(--size-round-base); border-style: solid; border-width: 0; display: inline-flex; font-size: 15px; font-weight: 600; height: 35px; justify-content: center; padding-left: 28px; padding-right: 28px; transition: all .3s ease-out 0s; text-decoration: none; }
a.c-button, a.c-button:hover, a.c-button:focus { text-decoration: none; }
.c-button-block { justify-content: center; padding-left: 0; padding-right: 0; width: 100%; }
.c-button-sm { font-size: 13px; height: 30px; padding: 0 var(--size-100); }
.c-button-lg { height: 45px; padding: 0 var(--size-150); }
.c-button-primary { background-color: var(--color-unstable-button-yellow); color: var(--color-fg-base); }
.c-button-primary:hover, .c-button-primary:focus { background-color: var(--color-unstable-tech-yellow); }
.c-button-secondary { background-color: var(--color-unstable-human-blue); color: var(--color-unstable-pure-white); }
.c-button-secondary:hover, .c-button-secondary:focus { background-color: var(--color-unstable-dark-blue); color: #fff; }
.c-button-outline { background-color: #fff; border-color: var(--color-unstable-human-blue); border-width: 1px; color: var(--color-unstable-human-blue); }
.c-button-outline:hover, .c-button-outline:focus { background-color: var(--color-unstable-dark-blue); border-color: var(--color-unstable-dark-blue); color: #fff; }
.c-button-link { background: none; border: 0; padding: 0; color: var(--color-unstable-link-blue); height: auto; text-decoration: none; font-size: inherit; font-weight: inherit; }
.c-button-link:hover, .c-button-link:focus { color: var(--color-unstable-dark-blue); text-decoration: underline; }
.c-button:disabled, .c-button[aria-disabled="true"] { background-color: var(--color-unstable-light-gray); border-color: var(--color-unstable-light-gray); color: var(--color-unstable-dark-gray); cursor: not-allowed; }

/* Human DS button (header chips, PDP add-to-cart) */
.hbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-family: var(--fontFamilySansSerif); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none; padding: 0 16px; min-height: 40px; }
.hbtn:hover { text-decoration: none; }
.hbtn--sm { min-height: 32px; padding: 0 12px; font-size: 12px; line-height: 16px; }
.hbtn--lg { min-height: 48px; padding: 0 24px; font-size: 16px; line-height: 20px; }
.hbtn--primary { background: var(--colorBgCompSurfacePrimaryEmphasis); border-color: var(--colorBgCompSurfacePrimaryEmphasis); color: var(--colorFgDefaultOnEmphasis); }
.hbtn--primary:hover { background: var(--colorBgPrimaryEmphasisHover); }
.hbtn--secondary { background: var(--colorBgCompSurfaceSecondaryEmphasis); border-color: var(--colorBorderSecondary); color: var(--colorFgDefault); }
.hbtn--secondary:hover { background: var(--colorBgSecondaryHover); }
.hbtn--outline { background: #fff; border-color: var(--colorBorderCompOutlineDefaultMuted); color: var(--colorFgDefault); }
.hbtn--outline:hover { background: var(--colorBgDefaultHover); }
.hbtn--block { width: 100%; }
.hbtn:disabled, .hbtn[aria-disabled="true"] { background: var(--colorBgCompTrackDefault); border-color: var(--colorBgCompTrackDefault); color: var(--colorFgDefaultSubdued); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Form controls (legacy "tb-input")
   -------------------------------------------------------------------------- */
.tb-input-wrapper { display: flex; flex-direction: column; margin: var(--size-300) 0; position: relative; width: fit-content; }
.tb-input-wrapper-full-width { width: 100%; }
.tb-input { height: 45px; line-height: 18px; padding: 0 var(--size-150); transition: border .2s, color .2s, background-color .2s; width: 100%; }
.tb-input-small > .tb-input { height: var(--size-400); }
.tb-label { font-size: 15px; }

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */
/* Homepage main content: px 16 / 24 (≥640) / 40 (≥960) / 64 (≥1280) */
.mc-content { width: 100%; display: flex; justify-content: center; margin: 0 auto; background: var(--colorBgDefaultSubdued); }
.mc-content__inner { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; }
.mc-content__col { display: flex; align-items: stretch; flex-direction: column; width: 100%; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .mc-content__col { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 960px) { .mc-content__col { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1280px) { .mc-content__col { padding-left: 64px; padding-right: 64px; } }

/* Generic page container used by PLP / PDP / cart / pages (legacy grid-margin) */
.bb-container { width: 100%; max-width: 1600px; margin: 0 auto; padding-left: var(--grid-margin); padding-right: var(--grid-margin); }

/* Legacy flex grid (992px switch) */
.col-12 { flex: 0 0 auto; width: 100%; }
.flex-xs-col { flex-direction: column; }
@media (min-width: 992px) {
	.flex-md-row { flex-direction: row; }
	.col-md-4 { flex: 0 0 auto; width: 33.33%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Rounded story card */
.rounded-border-lv { border-radius: 16px; overflow: hidden; }
.bg-default { background-color: var(--colorBgDefault); }
.bg-default-subdued { background-color: var(--colorBgDefaultSubdued); }

/* Skeleton shimmer (used while deferred content loads) */
@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--colorBgCompTrackDefault) 25%, var(--colorBgCompTrackShimmer) 50%, var(--colorBgCompTrackDefault) 75%); background-size: 200% 100%; animation: skeleton-shimmer 3s linear infinite; border-radius: 4px; }

/* Star rating */
.bb-stars { display: inline-flex; align-items: center; gap: 0; color: #ffe200; vertical-align: middle; }
.bb-stars .bb-icon { color: #ffce00; }
.bb-stars__count { margin-left: 4px; color: var(--colorFgDefaultSubdued); font-size: 12px; line-height: 16px; }

/* Carousel primitive (horizontal scroll with arrow buttons) */
.bb-carousel { position: relative; }
.bb-carousel__track { display: flex; flex-direction: row; list-style: none; padding: 0; margin: 0; overflow-x: auto; scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; }
.bb-carousel__track::-webkit-scrollbar { display: none; }
.bb-carousel__item { flex-shrink: 0; scroll-snap-align: start; }
.bb-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #fff !important; border: 1px solid #e0e6ef !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bb-carousel__arrow svg { fill: #030303; color: #030303; }
.bb-carousel__arrow:hover { box-shadow: 0 4px 12px rgba(0,0,0,.16) !important; border-color: #c3cdd5 !important; }
.bb-carousel__arrow--prev { left: -8px; }
.bb-carousel__arrow--next { right: -8px; }
.bb-carousel.has-overflow:hover .bb-carousel__arrow.is-enabled,
.bb-carousel.has-overflow:focus-within .bb-carousel__arrow.is-enabled { opacity: 1; pointer-events: auto; }
@media (hover: none) { .bb-carousel__arrow { display: none; } }

/* --------------------------------------------------------------------------
   Utilities (subset of the reference "Brix" utility classes; md__ = 640px, lg__ = 960px, xl__ = 1280px)
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.block { display: block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-0 { width: 0; }
.min-w-0 { min-width: 0; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }
.self-stretch { align-self: stretch; }
.self-start { align-self: flex-start; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center, .justify-content-center { justify-content: center; }
.justify-between, .justify-content-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.list-none { list-style: none; }
.cursor-pointer { cursor: pointer; }
.rounded-lg { border-radius: 8px; }
.rounded-md { border-radius: 4px; }
.rounded-full { border-radius: 9999px; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.overflow-x-scroll { overflow-x: scroll; }
.z-10 { z-index: 10; }
.opacity-0 { opacity: 0; }
.bg-transparent { background: transparent; }
.text-default-inverse { color: var(--colorFgDefaultInverse); }
.text-default-on-emphasis { color: var(--colorFgDefaultOnEmphasis); }
.text-default-fixed { color: var(--colorFgDefaultFixed); }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-700 { font-weight: 700; }
.text-1 { font-size: var(--sizeFont1); line-height: var(--sizeLineHeight1); }
.text-2 { font-size: var(--sizeFont2); line-height: var(--sizeLineHeight2); }
.text-3 { font-size: var(--sizeFont3); line-height: var(--sizeLineHeight3); }
.text-4 { font-size: var(--sizeFont4); line-height: var(--sizeLineHeight4); }
.text-5 { font-size: var(--sizeFont5); line-height: var(--sizeLineHeight5); }
.text-6 { font-size: var(--sizeFont6); line-height: var(--sizeLineHeight6); }
.text-7 { font-size: var(--sizeFont7); line-height: var(--sizeLineHeight7); }
.text-8 { font-size: var(--sizeFont8); line-height: var(--sizeLineHeight8); }
.text-11 { font-size: var(--sizeFont11); line-height: var(--sizeLineHeight10); }
.leading-3 { line-height: var(--sizeLineHeight3); }
.w-icon-sm, .h-icon-sm { width: 16px; height: 16px; }
.w-icon-md, .h-icon-md { width: 24px; height: 24px; }
.w-icon-lg, .h-icon-lg { width: 32px; height: 32px; }

/* Spacing scale: 25=2 50=4 100=8 150=12 200=16 300=24 400=32 500=40 600=48 700=56 800=64 */
.p-100{padding:8px}.p-150{padding:12px}.p-200{padding:16px}.p-300{padding:24px}.p-400{padding:32px}
.px-100{padding-left:8px;padding-right:8px}.px-150{padding-left:12px;padding-right:12px}.px-200{padding-left:16px;padding-right:16px}.px-300{padding-left:24px;padding-right:24px}.px-400{padding-left:32px;padding-right:32px}
.py-50{padding-top:4px;padding-bottom:4px}.py-100{padding-top:8px;padding-bottom:8px}.py-150{padding-top:12px;padding-bottom:12px}.py-200{padding-top:16px;padding-bottom:16px}.py-300{padding-top:24px;padding-bottom:24px}.py-400{padding-top:32px;padding-bottom:32px}
.pt-100{padding-top:8px}.pt-150{padding-top:12px}.pt-200{padding-top:16px}.pt-300{padding-top:24px}.pt-400{padding-top:32px}
.pb-0{padding-bottom:0}.pb-100{padding-bottom:8px}.pb-150{padding-bottom:12px}.pb-200{padding-bottom:16px}.pb-300{padding-bottom:24px}.pb-400{padding-bottom:32px}.pb-500{padding-bottom:40px}
.pl-100{padding-left:8px}.pl-200{padding-left:16px}.pl-300{padding-left:24px}.pr-100{padding-right:8px}.pr-150{padding-right:12px}.pr-200{padding-right:16px}.pr-300{padding-right:24px}
.m-100{margin:8px}.mx-200{margin-left:16px;margin-right:16px}.mx-300{margin-left:24px;margin-right:24px}
.mt-50{margin-top:4px}.mt-100{margin-top:8px}.mt-150{margin-top:12px}.mt-200{margin-top:16px}.mt-300{margin-top:24px}.mt-400{margin-top:32px}
.mb-100{margin-bottom:8px}.mb-200{margin-bottom:16px}.mb-300{margin-bottom:24px}.mb-400{margin-bottom:32px}.mb-800{margin-bottom:64px}
.ml-100{margin-left:8px}.ml-200{margin-left:16px}.ml-300{margin-left:24px}.mr-50{margin-right:4px}.mr-100{margin-right:8px}.mr-200{margin-right:16px}.mr-300{margin-right:24px}
.my-100{margin-top:8px;margin-bottom:8px}
.gap-25{gap:2px}.gap-50{gap:4px}.gap-100{gap:8px}.gap-150{gap:12px}.gap-200{gap:16px}.gap-300{gap:24px}
.last__mr-300:last-child { margin-right: 24px; }
@media (min-width: 640px) {
	.md__block{display:block}.md__p-300{padding:24px}.md__px-300{padding-left:24px;padding-right:24px}.md__py-300{padding-top:24px;padding-bottom:24px}
	.md__pt-200{padding-top:16px}.md__pb-400{padding-bottom:32px}.md__pb-500{padding-bottom:40px}.md__pl-300{padding-left:24px}
	.md__mx-300{margin-left:24px;margin-right:24px}.md__mt-300{margin-top:24px}.md__mb-300{margin-bottom:24px}.md__ml-0{margin-left:0}
	.md__text-2{font-size:var(--sizeFont2);line-height:var(--sizeLineHeight2)}
}
@media (min-width: 960px) {
	.lg__text-3{font-size:var(--sizeFont3);line-height:var(--sizeLineHeight3)}.lg__text-4{font-size:var(--sizeFont4);line-height:var(--sizeLineHeight4)}.lg__text-5{font-size:var(--sizeFont5);line-height:var(--sizeLineHeight5)}
	.lg__w-icon-lg{width:32px;height:32px}
}
@media (min-width: 1280px) { .xl__ml-100{margin-left:8px} }

/* WordPress admin bar offset for sticky header */
.admin-bar .bb-header--stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-header--stuck { top: 46px; } }

/* WooCommerce notices (restyled to the reference alert look) */
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 18px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.woocommerce-message { background: var(--colorBgSuccess); color: var(--colorFgSuccess); }
.woocommerce-info { background: var(--colorBgPrimary); color: var(--colorFgPrimary); }
.woocommerce-error { background: var(--colorBgDanger); color: var(--colorFgDanger); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; order: 2; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Breadcrumb (PLP / PDP) */
.plp-breadcrumb { margin-bottom: 8px; }
.plp-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 11px; line-height: 16px; }
.plp-breadcrumb__list li { display: inline-flex; align-items: center; color: var(--colorFgDefault); }
.plp-breadcrumb__list li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; background: #c5cbd5; margin: 0 8px; }
.plp-breadcrumb__list a { color: var(--colorFgPrimary); text-decoration: none; }
.plp-breadcrumb__list a:hover { text-decoration: underline; }

/* --- Sale badges (sitewide 40% off) --- */
.bb-deal-badge { display: inline-flex; align-items: center; background: #d7373f; color: #fff; font-weight: 700; font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 4px; letter-spacing: .02em; }
.bb-deal-badge--lg { font-size: 15px; padding: 5px 9px; vertical-align: middle; margin-left: 8px; }
.bb-deal-badge--card { position: absolute; top: 8px; left: 8px; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pc__image, .sku-item__image .image-link { position: relative; display: block; }

/* Hero badge pill (when no badge image is set) */
.hero-v2__badge-pill { display: inline-block; background: #ffe300; color: #001e73; font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 7px 14px; border-radius: 999px; }