/* _base.css */
/* FOUC Prevention Styles. Wait until JS is loaded before rendering website */
.js-loading body {
  opacity: 0;
  visibility: hidden;
}

.js-loading * {
  transition: none !important;
}

.hidden {
  display: none !important;
}

/* Existing global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}

body {
  background: var(--body-background);
  color: var(--text-body-neutral);
  min-width: var(--screen-min-width);
  overflow-x: hidden;
}

.link-text {
  color: var(--text-link);
  cursor: pointer;
}

.link-text:hover {
  color: var(--text-link-hover);
}

.legal-text-container {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

.policy-text-container {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.policy-text-header {
  font-size: var(--font-size-heading-h3);
  color: var(--text-header-neutral);
  line-height: 1.6;
  text-align: start;
  font-weight: 600;
}

.policy-text {
  font-size: var(--font-size-xs);
  color: var(--text-body-neutral);
  line-height: 1.6;
  text-align: start;
}

.terms-text-container {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.terms-text-header {
  font-size: var(--font-size-heading-h3);
  color: var(--text-header-neutral);
  line-height: 1.6;
  text-align: start;
  font-weight: 600;
}

.terms-text {
  font-size: var(--font-size-xs);
  color: var(--text-body-neutral);
  line-height: 1.6;
  text-align: start;
}

input::placeholder {
  color: var(--input-field-text-placeholder);
}

.main-layout,
.main-layout-centered {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-top: var(--screen-padding);
  padding-bottom: var(--screen-padding);
  width: 100%;
  overflow-y: visible;
  box-sizing: border-box;
}

.main-layout-centered {
  align-items: center;
}

.header,
.header-scroll,
.header-scroll-modal,
.header-sticky {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: var(--header-gap);
  flex-wrap: nowrap;
  width: 100%;
  padding-top: var(--screen-padding);
  padding-bottom: var(--screen-padding);
  background: var(--card-background);
  opacity: 0; /* Start hidden */
  animation: dissolveIn 1s ease-in-out forwards;
}

.header-scroll {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: var(--soft-shadow-header);
}

.header-scroll-modal {
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

.header-sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  padding-left: var(--screen-padding-mobile);
  padding-right: var(--screen-padding-mobile);
}

.header .shopping-cart-button {
  margin-right: var(--margin-md);
}

.header-row,
.header-row-modal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: var(--gap-sm);  
}

.header-row {
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

.header-actions-container {
  display: flex;
  flex-direction: row;
  gap: var(--gap-xl);
  padding-right: var(--padding-md);
}

.breadcrumb-back-button {
  gap: var(--gap-lg);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: var(--text-link);
}

.breadcrumb-back-button:hover {
  color: var(--text-link-hover);
}

.breadcrumb-forward-button {
  gap: var(--gap-lg);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.breadcrumb-forward-chevron {
  justify-content: left;
  align-items: center;
  line-height: 1;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  cursor: pointer;
}

.breadcrumb-current-page {
  gap: var(--gap-lg);
  cursor: default;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.breadcrumb-forward-chevron-current {
  justify-content: left;
  align-items: center;
  line-height: 1;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  cursor: default;
}

.page-header {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	gap: var(--gap-lg);
	margin-bottom: var(--margin-xxxxl);
	background: var(--body-background);
	
}

.page-title-header,
.page-title-header-link {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: var(--gap-lg);
  min-height: var(--button-min-height);
  flex-wrap: nowrap;
}

.page-title-header-link:hover .back-nav-button::after {
    /* Target the icon's pseudo-element for color change */
    background-color: var(--icon-hover);
}

.page-title-header-link:hover {
    cursor: pointer;
}

.page-title-header-link:hover .page-title-link {
    /* Target the page title link text for color change */
    color: var(--text-link-hover);
}

.page-title-header-link:hover .page-title-link-neutral {
	/* Match page title colour to chevron icon hover colour */
	color: var(--icon-hover);
}

.page-title,
.page-title-centered {
  display: inline-flex;
  width: 100%;
  font-size: var(--font-size-heading-h2);
  color: var(--text-header-neutral);
  min-height: var(--button-min-height);
  flex-wrap: wrap;
  align-content: center;
  white-space: nowrap;
}

.page-title-link,
.page-title-link-neutral {
  color: var(--text-link);
  font-size: var(--font-size-heading-h2);
  min-height: var(--button-min-height);
  align-content: center;
  white-space: nowrap;
}

.page-title-link-neutral {
  color: var(--text-header-neutral);
}

.page-title-link:hover {
  color: var(--text-link-hover);
}

.page-subtitle {
	display: inline-flex;
	font-size: var(--font-size-heading-h3);
	color: var(--text-subtitle);
	text-align: start;
}

.page-title-centered,
.page-subtitle-centered {
	justify-content: center;
	text-align: center;
}

.page-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: calc(-1*(var(--page-header-padding)));
  margin-right: calc(-1*(var(--page-header-padding)));
  width: calc(100% + 2 * var(--page-header-padding));

}

.start-page-navigation {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  margin-right: calc(-1*(var(--screen-padding)));
}

.close-nav-button,
.back-nav-button {
  position: relative;
  background: none;
  border: none;
  outline: none;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG icon color changes on hover using CSS masks */
.back-nav-button img,
.close-nav-button img {
  transition: background-color 0.2s ease;
  /* Hide the original SVG and use it as a mask */
  opacity: 0;
  position: absolute;
}

.close-nav-button img {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.back-nav-button img {
  height: var(--icon-size-md);
  width: var(--icon-size-md);
}

.back-nav-button::after,
.close-nav-button::after {
  content: '';
  position: absolute;
  background-color: var(--icon-default-grey);
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.close-nav-button::after {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  mask-image: url('../../icons/cancel_icon.svg');
  -webkit-mask-image: url('../../icons/cancel_icon.svg');
}

.back-nav-button::after {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  mask-image: url('../../icons/chevron_back_icon.svg');
  -webkit-mask-image: url('../../icons/chevron_back_icon.svg');
}

.back-nav-button:hover::after,
.close-nav-button:hover::after {
  background-color: var(--icon-hover);
}

.page-content-wrapper,
.page-content-wrapper-center,
.page-content-wrapper-scroll,
.page-content-wrapper-scroll-center
.page-content,
.page-content-center,
.page-content-no-nav {
  display: flex;
  flex-direction: column;
  background: var(--body-background);
  width: 100%;
  position: relative;
  text-align: center;
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
  padding-bottom: var(--screen-padding);
}

.page-content-wrapper-center,
.page-content-wrapper-scroll-center,
.page-content-center {
	max-width: 50vw;
}

.page-content-no-nav {
  padding-top: var(--screen-padding);
}

.page-content-scroll {
  padding-bottom: var(--space-7-5);
}

.page-footer {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	gap: var(--gap-lg);
	padding: var(--screen-padding);
	position: sticky;
	bottom: 0;
	z-index: 10;
	margin-top: auto;
	background: var(--body-background);
}

.page-body {
	display: inline-flex;
	flex-direction: column;
	font-size: var(--font-size-body);
	color: var(--text-body-neutral);
	gap: var(--gap-xl);
	line-height: 1.6;
	margin-bottom: var(--margin-xxxxl);
}