:root {
	--hot-color: oklch(30.044% 0.04918 10.384);
	--hot-color: oklch(41.159% 0.09173 13.385);
	--button-color: var(--hot-color);
	--button-hover-color: color-mix(in oklch, black 20%, var(--button-color));
	--button-text-color: color-mix(in oklch, white 95%, var(--hot-color));
	--button-disabled-color: color-mix(in oklch, #bababa 65%, var(--button-color));
	--button-disabled-text-color: color-mix(in oklch, white 85%, var(--button-disabled-color));
	--border-radius: 2pt;
	--disabled_color: #999;
	--underline-color: color-mix(in oklch, white 55%, var(--hot-color));
	--success-color: white /*#a9cfaa*/;
	--failure-color: #e09894;
	--info-box-color: #fdfdf0;
	--info-box-text-color: #281f1a;
	--underline-thickness: 1pt;
	--sheet-color: color-mix(in oklch, white 95%, var(--hot-color));/*#f1f0f7*/
	--navbar-height: clamp(10ex, 15vh, 14ex);
}

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

/* Begin more reset */
a {
	text-decoration: none;
	/* text-decoration-color: #aea8d3; */
	color: inherit;
	/* font-weight: 400; */
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	border: 0;
	padding: 0;
}

/* End more reset */

p {
	margin-top: 2ex;
	margin-bottom: 2ex;
}

h2 {
	font-size: 120%;
	margin-top: 3ex;
	margin-bottom: 2ex;
}

h3 {
	font-size: 110%;
	margin-top: 3ex;
	margin-bottom: 2ex;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

main {
	flex: 1;
}

ul { list-style-type: "• "; }

p {
	hyphens: auto;
	/* http://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179 */

	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 6 3 3;
	/* hyphenate-limit-lines: 2; Future */

	-ms-hyphenate-limit-lines: 2;
	-webkit-hyphenate-limit-lines: 2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
}

body {
	/* background-color: antiquewhite; */
	background-color: white;
}

div {
	/* background-color: white; */
}


html,
body {
	font-family: "League Spartan", monospace;
	font-weight: 300;
	font-size: 16pt;
	line-height: 20pt;
	width: 100%;
	/* user-select: none; */
	/* -webkit-user-select: none; */
	/* -ms-user-select: none; */
	cursor: default;
}

b {
	font-weight: 500;
}

th {
	font-weight: 300;
}

/* table, */
th,
td {
	padding: 4pt 8pt 1pt 0;
	text-align: center;
}

/* body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
} */

details>summary {
	/* text-transform: uppercase; */
	cursor: pointer;
	list-style: none;
	/*"> ";*/
	list-style-position: inside;
	font-weight: 300;
}

details>summary:hover {
	text-decoration: underline;
	text-decoration-color: var(--underline-color);
	text-decoration-thickness: var(--underline-thickness);
}

/* details > p {
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
} */

/* details[open] > summary { */
/* list-style: "v "; */
/* list-style-position: inside; */
/* font-weight: 500; */
/* } */

details summary::-webkit-details-marker {
	display: none;
}

p {
	text-align: justify;
	text-justify: inter-word;
}

/*
details summary::before {
  content:"▸ ";
  font-family: monospace;
}

details[open] summary::before {
  content:"▾ ";
  content: none;
  font-family: monospace;
} */

/* details summary::after {
  content:" + ";
  font-family: monospace;
}

details[open] summary::after {
  content:" - ";
  font-family: monospace;
} */

.Class_logo {
	/* margin-top: 8pt; */
	margin-left: calc(var(--navbar-height) * 0.2);
	height: calc(var(--navbar-height) * 0.8);
}

details > summary::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3 L5 6 L8 3' stroke='currentColor' stroke-width='1' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
	/* transition: transform 0.2s ease; */
	vertical-align: 0%;
	/* color: var(--underline-color); */
}

details[open] > summary::before {
	transform: rotate(0deg);
}

details > p {
	font-size: 90%;
	margin-left: 1.1em;
}

hr {
	border-top: .25pt solid #8b8b8b;
}

.Class_selected {
	font-weight: 500;
	/* -webkit-text-stroke: 1px; */
}

.Class_option {
	cursor: pointer;
	margin-right: 1.4em;
	/* background-color: bisque; */
}

.Class_option:hover {
	text-decoration: underline;
	text-decoration-color: var(--underline-color);
	text-decoration-thickness: var(--underline-thickness);
}

.Class_option:last-child {
	margin-right: 0
}

.Class_picker {
	/* width: 100%; */
	display: flex;
	flex-direction: row;
	align-items: center;
}

footer {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.Navbar_navbar {
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--navbar-height);
}

.Class_product_img_viewer {
	grid-area: img;
	/* width: 100%; */
	/* display: inline-block; */
}

.Class_main_product_img {
	margin-bottom: 4pt;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	background-color: #fafafa;
	width: 100%;
	/* min-width: 0; */
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.Class_product_img {
	border-radius: var(--border-radius);
	background-color: #fafafa;
	width: 100%;
	min-width: 0;
	cursor: pointer;
	display: block;
}
/* .Class_product_img:first-child {
	border-radius: 0 6pt 6pt 0;
} */

.Class_product_img img {
	border-radius: var(--border-radius);
	max-width: 100%;
	/* Ensures images fit within the grid item */
	height: auto;
	/* Maintains aspect ratio */
	display: block;
	/* Removes inline spacing below the image */
}

.Class_secondary_product_img_picker {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4pt;
	min-width: 0;
	min-height: 0;
}

.Class_product_rhs {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	background-color: var(--sheet-color); /*#F6F5FA;*/
	padding: 1em 1em 1em 1em;
	grid-area: rhs;
}

.Class_product_name {
	font-family: "League Spartan", sans-serif;
	font-size: 1.8em;
	line-height: 100%;
	font-weight: 500;
	margin-bottom: .5em;
}

.Class_price {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.Class_color_picker {
	margin-top: 2em;
	margin-bottom: 1.2em;
}

@media (min-width: 800px) {
	.Class_color_picker {
		margin-top: 8em;
	}
}

.Class_size_picker {
	margin-bottom: 3em;
}

.Class_status_msg_stock {
	margin-bottom: 0;
}

.Class_info_box {
	padding: 8pt 12pt 8pt 12pt;
	background-color: var(--info-box-color);
	color: var(--info-box-text-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.Class_status_msg_shopping_bag {
	margin-bottom: .7em;
}

.Class_fade {
	animation: fadeOut 3s 2s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.Class_btn {
	/* background-color: #575179; */
	background-color: var(--button-color);
	border-radius: var(--border-radius);
	color: var(--button-text-color);
	/* border: black; */
	/* border-width: .5pt; */
	/* border-style: solid; */
	padding: 6pt 12pt;
	/* box-shadow: 2pt 2pt 0 #818183; */
	font-weight: 400;
	width: fit-content;
	text-align: center;
	font-size: 90%;
	cursor: pointer;
	user-select: none;
	/* -webkit-user-select: none; */
	/* -ms-user-select: none; */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	letter-spacing: .7pt;
}

.Class_btn:hover {
	/* background-color: #555; */
	background-color: var(--button-hover-color);
	/* color: white; */
}

.Class_btn.Class_disabled {
	background-color: var(--button-disabled-color);
	color: var(--button-disabled-text-color);
	cursor: not-allowed;
	pointer-events: none;
}

/* .Class_product_description_main_text {
	margin-bottom: 1em;
	hyphens: manual;
	font-size: 90%;
} */

/* .Class_product_details {
	margin-bottom: .8em;
} */

.Class_mobile {
	display: revert;
}

@media (min-width: 800px) {
	.Class_mobile {
		display: none;
	}
}

.Class_desktop {
	display: none;
}

@media (min-width: 800px) {
	.Class_desktop {
		display: revert;
	}
}

.Class_grid_container {
	display: grid;
	grid-template-areas:
	 /*| 01 | 02 | 03 |   */
		'img  img  img '
		'rhs  rhs  rhs '
		'c1   c2   c3  '
		'c4   c5   c6  '
		'foot foot foot';
	grid-template-columns: repeat(3, 1fr);
	gap: 4pt;
	background-color: white;
}

@media (min-width: 640px) {

	/* For tablet: */
	.Class_grid_container {
		display: grid;
		grid-template-areas:
		 /*| 01 | 02 | 03 | 04 | 05 | 06 |  */
			'img  img  img  rhs  rhs  rhs '
			'c1   c2   c3   c4   c5   c6  '
			'foot foot foot foot foot foot';
		grid-template-columns: repeat(6, 1fr);
		gap: 4pt;
		background-color: white;
	}
}

@media (min-width: 1000px) {
	/* For desktop: */
	.Class_grid_container {
		/* max-width: 1200px; */
		display: grid;
		grid-template-areas:
		 /*| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |   */
			'img  img  img  img  img  img  img  rhs  rhs  rhs  rhs  rhs'
			'c1   c2   c3   c4   c5   c6   c7   c8   c9   c10  c11  c12'
			'foot foot foot foot foot foot foot foot foot foot foot foot';
		grid-template-columns: repeat(12, 1fr);
		gap: 4pt;
		background-color: white;
	}
}

/* .Class_grid_container {
  display: grid;
  background-color: white;
} */

input[type=number] {
	text-align: center;
	border: none;
}

.Class_image_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	/* gap: 4pt; */
	/* padding: 15px; */
}

@media (min-width: 720px) {
	.Class_image_grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

@media (min-width: 1200px) {
	.Class_image_grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

@media (min-width: 1500px) {
	.Class_image_grid {
		grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
	}
}

.Class_class_whats_hot {
	grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
}

.Class_image_item {
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
	/* border: 1px solid #ddd; */
	/* border-radius: 8px; */
	padding-bottom: 8pt;
	/* background-color: #f9f9f9; */
	transition: transform .5s, box-shadow .5s;
	font-size: 24pt;
	cursor: pointer;
}

.Class_image_item:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.Class_image_item a {
	text-decoration: none;
	color: inherit;
}

.Class_image_item img {
	width: 100%;
	height: auto;
	/* border-radius: 5px; */
	margin-bottom: 8pt;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

.Class_image_item p {
	margin: 0;
	font-size: 1rem;
	color: #333;
}

table {
	border: none;
}

.Dropdown_menu_item {
	cursor: pointer;
	/* background-color: #f0f0f0; */
	display: block;
}

.Dropdown_disabled {
	color: var(--disabled_color);
}

.Dropdown_selected.Dropdown_menu_item::before {
	content: "🗸";
	/* box-sizing: border-box;
	margin-top: 10px; */
}

.Dropdown_dropdown {
	background-color: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 20;
}

.Dropdown_menu_item:hover {
	/* background-color: #eee; */
	/* text-decoration: underline; */
	/* font-weight: 500; */
}

.PageProduct_csCareSymbol {
	width: 1.8em;
	height: 1.8em;
	padding: 0 .5em 0 0;
}

.PageShoppingBag_itm {
	margin-top: 1ex;
}

.PageShoppingBag_menu_item {
	cursor: pointer;
	/* background-color: #f0f0f0; */
	display: block;
	padding: .3em;
    display: flex;
    width: 1.6em;
}

.PageShoppingBag_menu_item.Class_first {
	border-radius: calc(var(--border-radius) * 0.5) calc(var(--border-radius) * 0.5) 0 0;
}

.PageShoppingBag_menu_item.Class_last {
	border-radius: 0 0 calc(var(--border-radius) * 0.5) calc(var(--border-radius) * 0.5);
}

.PageShoppingBag_disabled {
	color: var(--disabled_color);
}

.PageShoppingBag_selected {
	background-color: var(--sheet-color);
	/* box-sizing: border-box;
	margin-top: 10px; */
	/* font-weight: 500; */
}

.PageShoppingBag_dropdown {
	background-color: white;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 20;
}

.PageShoppingBag_menu_item:hover {
	background-color: var(--underline-color);
	color: white;
	/* text-decoration: underline; */
}

/* .Nav_sale {
	text-transform: uppercase;
	color: rgb(167, 35, 23);
} */

.Class_big_table th input {
	font-weight: 500;
}

.Class_big_table th {
	background: white;
	position: sticky;
	/* http://stackoverflow.com/a/58563703 */
	top: 0;
	text-align: center;
	vertical-align: top;
}

.Class_big_table {
	max-height: 70vh;
	overflow: auto;
	max-width: fit-content;
	table-layout: fixed;
	position: relative;
}

.Class_big_table tr {
	border-bottom: 1px solid #ccc;
}

.Class_big_table tr:hover {
	background-color: #fff8d2;
}

.Class_color_false {
	color: #D55E00;
}

.Class_color_true {
	color: #00A877;
}

.Class_scroll_fog {
	content: '';
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8ex;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
	pointer-events: none;
	z-index: 2;
}

.Class_product_keywords {
	margin-bottom: 1em;
	display: flex;
	gap: 1em;
}

.Class_floating {
	background-color: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

label {
	display: block;
	font-size: 10pt;
	line-height: 14pt;
}

select {
	display: block;
}

select {
	font-size: 16pt;
	display: block;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: var(--border-radius);
	font-weight: 300;
}

input[type="text"],input[type="tel"],input[type="email"] {
	font-size: 16pt;
	display: block;
	width: 100%;
	padding:none;
	border: none;
	border-bottom: 1px solid var(--underline-color);
	font-weight: 300;
	background: transparent;
	outline: none;
	box-sizing: border-box;
	border-radius: 0;
	color: inherit;
}

.Class_accentuated {
	font-weight: 400;
}

.Class_disabled {
	color: var(--disabled_color);
}

input:disabled {
	color: var(--disabled_color);
	user-select: none;
	cursor: not-allowed;
}

.Class_checkout_form label, .Class_checkout_form p {
	margin-bottom: 10pt;
}

.Class_shopping_bag_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}


.HtmlComponents_input_label {
	margin-left: .5ex;
	min-height: 6ex;
}


.Class_shopping_bag_grid_container {
display: grid;
grid-template-areas:
 /*| 01 | 02 | 03 |   */
	'img  img  img '
	'rhs  rhs  rhs ';
grid-template-columns: repeat(3, 1fr);
gap: 4pt;
background-color: white;
}

@media (min-width: 640px) {
	.Class_shopping_bag_grid_container {
		display: grid;
		grid-template-areas:
		 /*| 01 | 02 | 03 | 04 | 05 | 06 |  */
			'img  img  img  rhs  rhs  rhs ';
		grid-template-columns: repeat(6, 1fr);
		gap: 4pt;
		background-color: white;
	}
}

@media (min-width: 1090px) {
	.Class_shopping_bag_grid_container {
		max-width: 1200px;
		display: grid;
		grid-template-areas:
		 /*| 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |   */
			'img  img  img  img  img  img  img  rhs  rhs  rhs  rhs  rhs';
		grid-template-columns: repeat(12, 1fr);
		gap: 4pt;
		background-color: white;
	}
}

.Class_sheet {
	width: 100vw;
	max-width: 30em;
	min-height: 12ex;
	padding:1em;
	background-color: var(--sheet-color);
	border-radius:3pt;
}

.PageShoppingBag_rhs {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	background-color: var(--sheet-color); /*#F6F5FA;*/
	padding: 1em 1em 1em 1em;
	grid-area: rhs;
}

@media (min-width: 1200px) {
	.PageShoppingBag_rhs {
		border-radius: var(--border-radius);
	}
}

.Class_out_of_stock {
	position: relative;
	display: inline-block;
	color:var(--disabled_color);
	cursor: not-allowed;
}

.Class_out_of_stock::after {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	width: 120%;
	height: 1px;
	background: var(--disabled_color);
	transform: translateX(-50%);
}

.Class_nudge_left {
	transform: translateX(-6px);
}

.Class_superimposed {
	grid-area: 1 / 1;
}

.Class_superimposed_container_center {
	display: grid;
	place-items: center;
}

.Class_superimposed_container_left {
	display: grid;
	place-items: left;
}

.Class_underlined_link {
	text-decoration: underline;
	text-decoration-color: var(--underline-color);
	text-decoration-thickness: var(--underline-thickness);
	cursor: pointer;
}

.Class_modal_overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(83, 95, 139, 0.2);
	backdrop-filter: blur(6px);
	z-index: 100;
}

.Class_modal {
	position: relative;
	max-width: 300px;
	background: white;
	padding: 1.5rem 2em;
	border-radius: var(--border-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
	.Class_modal {
		max-width: 400px;
	}
}

@media (min-width: 1000px) {
	.Class_modal {
		max-width: 600px;
	}
}

.Class_err_msg {
	line-height: 10pt;
	font-size: 10pt;
	color: #d05411;
}

.Class_hidden {
	visibility: hidden;
}

.Class_display_none {
	display: none;
}

.PageWhatsHot_textbox {
	--r: calc(0.8vw + 12pt);
	/* width: max(20vw, 6em); */
	text-align: center;
	position: absolute;
	top: 73%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fffc;
	backdrop-filter: blur(6px);
	padding: calc(var(--r) * .8) calc(var(--r) * 2);
	font-size: var(--r);
	line-height: calc(var(--r) * 1.2);
	letter-spacing: 0.02em;
	word-spacing: .1em;
	/* font-weight: 200; */
	white-space: nowrap;
	border-radius: var(--border-radius);
	background-color: rgb(from var(--button-color) r g b / 0.87);
	color: var(--button-text-color);
	box-shadow: 0 4px 10px #4323280a;
;
}

.PageProduct_careText {
	font-size: 90%;
	text-align: left;
}

.PageWhatsHot_firstImage {
	width: 100%;
	height: max(25vw, calc(100vh - var(--navbar-height)));
	object-fit: cover;
}

.PageWhatsHot_moreImage {
	width: 100%;
	height: max(25vw, 100vh);
	object-fit: cover;
}

.PageWhatsHot_blurbContainer {
	--r: calc(0.8vw + 12pt);

	padding: calc(var(--r) * 2);
}

.PageWhatsHot_blurbContainer p + p {
	padding-top: calc(var(--r) * 0.8);
}

/* .PageWhatsHot_blurbContainer p + ul {
	padding-top: calc(var(--r) * 0.8);
}

.PageWhatsHot_blurbContainer > ul {
	font-size: 90%;
} */

.PageWhatsHot_blurbContainer p {
	font-size: var(--r);
	line-height: calc(var(--r) * 1.2);
	text-align: justify;
	max-width: 30em;
	margin: auto;
}

@keyframes slideInRight {
	  0% { transform: translateX(100%); opacity: 0; }
	100% {transform: translateX(0); opacity: 1; }
}

@keyframes fadeOutDisable {
	  0% { opacity: 1; pointer-events: auto; visibility: visible; }
 	 99% { opacity: 0; pointer-events: auto; }
	100% { opacity: 0; pointer-events: none; visibility: hidden; }
}

.Navbar_popup {
	--margin: 1.2em;
	max-width: 24em;
	position: fixed;
	top: calc(var(--navbar-height) * 0.7);
	right: var(--margin);
	margin-left: var(--margin);
	background-color: #fff;
	backdrop-filter: blur(6px);
	z-index: 30;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 1em;
	/* animation: fadeOut 3s 2s forwards; */
	animation:
		slideInRight 0.4s ease-out forwards,
		fadeOutDisable 2s 7s forwards ease;
	cursor: auto;
	padding-right: 2em;
}

.Navbar_popup:hover {
	animation-play-state: running, paused;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* transition: opacity .2s ease; */
}

.Class_success {
	background-color: var(--success-color);
}

.Class_failure {
	background-color: var(--failure-color);
}

.Class_pretty {
	color: var(--underline-color);
}

.Class_gridTable {
	border: none;
	border-collapse: collapse;
}

.Class_gridTable th, .Class_gridTable td {
	border:1pt solid var(--underline-color);
}
.Class_gridTable th {
	font-weight: 400;
}