:root {
	--mainfont: 'Inter', serif;
	--subfont: 'Inter', serif;
  }
  
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	box-sizing: border-box;
	scroll-behavior: smooth;
  }

  body, html {
	margin: 0;
	overflow-x: hidden;
  }
    main {
	display: block;
  }

 hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
  }
  pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
  a {
	background-color: transparent;
  }
  abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
  }
  b,
  strong {
	font-weight: bolder;
  }
  code,
  kbd,
  samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
 small {
	font-size: 80%;
  }
  sub,
  sup {
	font-size: 85%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -.5em;

  }
  sub {
	bottom: -0.25em;
  }
  sup {
	top: -0.5em;
  }
  img {
    border-style: none;
	width: 100%;
	height: auto;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
  }
  button,
  input { /* 1 */
	overflow: visible;
	}
  button,
  select { /* 1 */
	text-transform: none;
  }
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
	-webkit-appearance: button;
  }
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
  }
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
  }
 
  fieldset {
	padding: 0.35em 0.75em 0.625em;
  }
  legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
  }
  progress {
	vertical-align: baseline;
  }
  textarea {
	overflow: auto;
  }
  [type="checkbox"],
  [type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
  }
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
	height: auto;
  }
  [type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
  }
  [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
  }
  ::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
  }
  details {
	display: block;
  }
 summary {
	display: list-item;
  }
  template {
	display: none;
  }
  [hidden] {
	display: none;
  }

 /**
   * End Reset
   */
  

.grid-container {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	overflow: hidden;
}

.grid-container.nopad {
    padding-left: 0;
    padding-right: 0;
	margin-bottom: 0;
}

@media print,
screen and (min-width: 40em) {
	.grid-container {
		padding-right: .9375rem;
		padding-left: .9375rem
	}
}

.grid-container.fluid {
	padding-right: .625rem;
	padding-left: .625rem;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto
}

@media print,
screen and (min-width: 40em) {
	.grid-container.fluid {
		padding-right: .9375rem;
		padding-left: .9375rem
	}
}

.grid-container.full {
	padding-right: 0;
	padding-left: 0;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto
}

.grid-x {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.cell {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-height: 0px;
	min-width: 0px;
	width: 100%
}

.cell.auto {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0px;
	flex: 1 1 0px
}

.cell.shrink {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto
}

.grid-x>.auto {
	width: auto
}

.grid-x>.shrink {
	width: auto
}

.grid-x>.small-shrink,
.grid-x>.small-full,
.grid-x>.small-0,
.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12 {
	-ms-flex-preferred-size: auto;
	flex-basis: auto
}

@media print,
screen and (min-width: 40em) {
	.grid-x>.medium-shrink,
	.grid-x>.medium-full,
	.grid-x>.medium-1,
	.grid-x>.medium-2,
	.grid-x>.medium-3,
	.grid-x>.medium-4,
	.grid-x>.medium-5,
	.grid-x>.medium-6,
	.grid-x>.medium-7,
	.grid-x>.medium-8,
	.grid-x>.medium-9,
	.grid-x>.medium-10,
	.grid-x>.medium-11,
	.grid-x>.medium-12 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
}

@media print,
screen and (min-width: 64em) {
	.grid-x>.large-shrink,
	.grid-x>.large-full,
	.grid-x>.large-1,
	.grid-x>.large-2,
	.grid-x>.large-3,
	.grid-x>.large-4,
	.grid-x>.large-5,
	.grid-x>.large-6,
	.grid-x>.large-7,
	.grid-x>.large-8,
	.grid-x>.large-9,
	.grid-x>.large-10,
	.grid-x>.large-11,
	.grid-x>.large-12 {
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
}

.grid-x>.small-0,
.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto
}

.grid-x>.small-0 {
	width: 0%
}

.grid-x>.small-1 {
	width: 8.33333%
}

.grid-x>.small-2 {
	width: 16.66667%
}

.grid-x>.small-3 {
	width: 25%
}

.grid-x>.small-4 {
	width: 33.33333%
}

.grid-x>.small-5 {
	width: 41.66667%
}

.grid-x>.small-6 {
	width: 50%
}

.grid-x>.small-7 {
	width: 58.33333%
}

.grid-x>.small-8 {
	width: 66.66667%
}

.grid-x>.small-9 {
	width: 75%
}

.grid-x>.small-10 {
	width: 83.33333%
}

.grid-x>.small-11 {
	width: 91.66667%
}

.grid-x>.small-12 {
	width: 100%;
}

@media print,
screen and (min-width: 40em) {
	.grid-x>.medium-auto {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
		width: auto
	}
	.grid-x>.medium-shrink,
	.grid-x>.medium-1,
	.grid-x>.medium-2,
	.grid-x>.medium-3,
	.grid-x>.medium-4,
	.grid-x>.medium-5,
	.grid-x>.medium-6,
	.grid-x>.medium-7,
	.grid-x>.medium-8,
	.grid-x>.medium-9,
	.grid-x>.medium-10,
	.grid-x>.medium-11,
	.grid-x>.medium-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto
	}
	.grid-x>.medium-shrink {
		width: auto
	}
	.grid-x>.medium-1 {
		width: 8.33333%
	}
	.grid-x>.medium-2 {
		width: 16.66667%
	}
	.grid-x>.medium-3 {
		width: 25%
	}
	.grid-x>.medium-4 {
		width: 33.33333%
	}
	.grid-x>.medium-5 {
		width: 41.66667%
	}
	.grid-x>.medium-6 {
		width: 50%
	}
	.grid-x>.medium-7 {
		width: 58.33333%
	}
	.grid-x>.medium-8 {
		width: 66.66667%
	}
	.grid-x>.medium-9 {
		width: 75%
	}
	.grid-x>.medium-10 {
		width: 83.33333%
	}
	.grid-x>.medium-11 {
		width: 91.66667%
	}
	.grid-x>.medium-12 {
		width: 100%
	}
}

@media print,
screen and (min-width: 64em) {
	.grid-x>.large-auto {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
		width: auto
	}
	.grid-x>.large-shrink,
	.grid-x>.large-1,
	.grid-x>.large-2,
	.grid-x>.large-3,
	.grid-x>.large-4,
	.grid-x>.large-5,
	.grid-x>.large-6,
	.grid-x>.large-7,
	.grid-x>.large-8,
	.grid-x>.large-9,
	.grid-x>.large-10,
	.grid-x>.large-11,
	.grid-x>.large-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto
	}
	.grid-x>.large-shrink {
		width: auto
	}
	.grid-x>.large-1 {
		width: 8.33333%
	}
	.grid-x>.large-2 {
		width: 16.66667%
	}
	.grid-x>.large-3 {
		width: 25%
	}
	.grid-x>.large-4 {
		width: 33.33333%
	}
	.grid-x>.large-5 {
		width: 41.66667%
	}
	.grid-x>.large-6 {
		width: 50%
	}
	.grid-x>.large-7 {
		width: 58.33333%
	}
	.grid-x>.large-8 {
		width: 66.66667%
	}
	.grid-x>.large-9 {
		width: 75%
	}
	.grid-x>.large-10 {
		width: 83.33333%
	}
	.grid-x>.large-11 {
		width: 91.66667%
	}
	.grid-x>.large-12 {
		width: 100%
	}
}

.grid-margin-x:not(.grid-x)>.cell {
	width: auto
}

.grid-margin-y:not(.grid-y)>.cell {
	height: auto
}

.grid-margin-x {
	margin-left: -.625rem;
	margin-right: -.625rem
}

@media print,
screen and (min-width: 40em) {
	.grid-margin-x {
		margin-left: -.9375rem;
		margin-right: -.9375rem
	}
}

.grid-margin-x>.cell {
	width: calc(100% - 1.25rem);
	margin-left: .625rem;
	margin-right: .625rem
}

@media print,
screen and (min-width: 40em) {
	.grid-margin-x>.cell {
		width: calc(100% - 1.875rem);
		margin-left: .9375rem;
		margin-right: .9375rem
	}
}

.grid-margin-x>.auto {
	width: auto
}

.grid-margin-x>.shrink {
	width: auto
}

.grid-margin-x>.small-1 {
	width: calc(8.33333% - 1.25rem)
}

.grid-margin-x>.small-2 {
	width: calc(16.66667% - 1.25rem)
}

.grid-margin-x>.small-3 {
	width: calc(25% - 1.25rem)
}

.grid-margin-x>.small-4 {
	width: calc(33.33333% - 1.25rem)
}

.grid-margin-x>.small-5 {
	width: calc(41.66667% - 1.25rem)
}

.grid-margin-x>.small-6 {
	width: calc(50% - 1.25rem)
}

.grid-margin-x>.small-7 {
	width: calc(58.33333% - 1.25rem)
}

.grid-margin-x>.small-8 {
	width: calc(66.66667% - 1.25rem)
}

.grid-margin-x>.small-9 {
	width: calc(75% - 1.25rem)
}

.grid-margin-x>.small-10 {
	width: calc(83.33333% - 1.25rem)
}

.grid-margin-x>.small-11 {
	width: calc(91.66667% - 1.25rem)
}

.grid-margin-x>.small-12 {
	width: calc(100% - 1.25rem)
}

@media print,
screen and (min-width: 40em) {
	.grid-margin-x>.auto {
		width: auto
	}
	.grid-margin-x>.shrink {
		width: auto
	}
	.grid-margin-x>.small-1 {
		width: calc(8.33333% - 1.875rem)
	}
	.grid-margin-x>.small-2 {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x>.small-3 {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x>.small-4 {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x>.small-5 {
		width: calc(41.66667% - 1.875rem)
	}
	.grid-margin-x>.small-6 {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x>.small-7 {
		width: calc(58.33333% - 1.875rem)
	}
	.grid-margin-x>.small-8 {
		width: calc(66.66667% - 1.875rem)
	}
	.grid-margin-x>.small-9 {
		width: calc(75% - 1.875rem)
	}
	.grid-margin-x>.small-10 {
		width: calc(83.33333% - 1.875rem)
	}
	.grid-margin-x>.small-11 {
		width: calc(91.66667% - 1.875rem)
	}
	.grid-margin-x>.small-12 {
		width: calc(100% - 1.875rem)
	}
	.grid-margin-x>.medium-auto {
		width: auto
	}
	.grid-margin-x>.medium-shrink {
		width: auto
	}
	.grid-margin-x>.medium-1 {
		width: calc(8.33333% - 1.875rem)
	}
	.grid-margin-x>.medium-2 {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x>.medium-3 {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x>.medium-4 {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x>.medium-5 {
		width: calc(41.66667% - 1.875rem)
	}
	.grid-margin-x>.medium-6 {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x>.medium-7 {
		width: calc(58.33333% - 1.875rem)
	}
	.grid-margin-x>.medium-8 {
		width: calc(66.66667% - 1.875rem)
	}
	.grid-margin-x>.medium-9 {
		width: calc(75% - 1.875rem)
	}
	.grid-margin-x>.medium-10 {
		width: calc(83.33333% - 1.875rem)
	}
	.grid-margin-x>.medium-11 {
		width: calc(91.66667% - 1.875rem)
	}
	.grid-margin-x>.medium-12 {
		width: calc(100% - 1.875rem)
	}
}

@media print,
screen and (min-width: 64em) {
	.grid-margin-x>.large-auto {
		width: auto
	}
	.grid-margin-x>.large-shrink {
		width: auto
	}
	.grid-margin-x>.large-1 {
		width: calc(8.33333% - 1.875rem)
	}
	.grid-margin-x>.large-2 {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x>.large-3 {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x>.large-4 {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x>.large-5 {
		width: calc(41.66667% - 1.875rem)
	}
	.grid-margin-x>.large-6 {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x>.large-7 {
		width: calc(58.33333% - 1.875rem)
	}
	.grid-margin-x>.large-8 {
		width: calc(66.66667% - 1.875rem)
	}
	.grid-margin-x>.large-9 {
		width: calc(75% - 1.875rem)
	}
	.grid-margin-x>.large-10 {
		width: calc(83.33333% - 1.875rem)
	}
	.grid-margin-x>.large-11 {
		width: calc(91.66667% - 1.875rem)
	}
	.grid-margin-x>.large-12 {
		width: calc(100% - 1.875rem)
	}
}

.grid-padding-x .grid-padding-x {
	margin-right: -.625rem;
	margin-left: -.625rem
}

@media print,
screen and (min-width: 40em) {
	.grid-padding-x .grid-padding-x {
		margin-right: -.9375rem;
		margin-left: -.9375rem
	}
}

.grid-container:not(.full)>.grid-padding-x {
	margin-right: -.625rem;
	margin-left: -.625rem
}

@media print,
screen and (min-width: 40em) {
	.grid-container:not(.full)>.grid-padding-x {
		margin-right: .9375rem;
		margin-left: .9375rem
	}
}

.grid-padding-x>.cell {
	padding-right: .625rem;
	padding-left: .625rem
}

@media print,
screen and (min-width: 40em) {
	.grid-padding-x>.cell {
		padding-right: .9375rem;
		padding-left: .9375rem
	}
}

.small-up-1>.cell {
	width: 100%
}

.small-up-2>.cell {
	width: 50%
}

.small-up-3>.cell {
	width: 33.33333%
}

.small-up-4>.cell {
	width: 25%
}

.small-up-5>.cell {
	width: 20%
}

.small-up-6>.cell {
	width: 16.66667%
}

.small-up-7>.cell {
	width: 14.28571%
}

.small-up-8>.cell {
	width: 12.5%
}

@media print,
screen and (min-width: 40em) {
	.medium-up-1>.cell {
		width: 100%
	}
	.medium-up-2>.cell {
		width: 50%
	}
	.medium-up-3>.cell {
		width: 33.33333%
	}
	.medium-up-4>.cell {
		width: 25%
	}
	.medium-up-5>.cell {
		width: 20%
	}
	.medium-up-6>.cell {
		width: 16.66667%
	}
	.medium-up-7>.cell {
		width: 14.28571%
	}
	.medium-up-8>.cell {
		width: 12.5%
	}
}

@media print,
screen and (min-width: 64em) {
	.large-up-1>.cell {
		width: 100%
	}
	.large-up-2>.cell {
		width: 50%
	}
	.large-up-3>.cell {
		width: 33.33333%
	}
	.large-up-4>.cell {
		width: 25%
	}
	.large-up-5>.cell {
		width: 20%
	}
	.large-up-6>.cell {
		width: 16.66667%
	}
	.large-up-7>.cell {
		width: 14.28571%
	}
	.large-up-8>.cell {
		width: 12.5%
	}
}

.grid-margin-x.small-up-1>.cell {
	width: calc(100% - 1.25rem)
}

.grid-margin-x.small-up-2>.cell {
	width: calc(50% - 1.25rem)
}

.grid-margin-x.small-up-3>.cell {
	width: calc(33.33333% - 1.25rem)
}

.grid-margin-x.small-up-4>.cell {
	width: calc(25% - 1.25rem)
}

.grid-margin-x.small-up-5>.cell {
	width: calc(20% - 1.25rem)
}

.grid-margin-x.small-up-6>.cell {
	width: calc(16.66667% - 1.25rem)
}

.grid-margin-x.small-up-7>.cell {
	width: calc(14.28571% - 1.25rem)
}

.grid-margin-x.small-up-8>.cell {
	width: calc(12.5% - 1.25rem)
}

@media print,
screen and (min-width: 40em) {
	.grid-margin-x.small-up-1>.cell {
		width: calc(100% - 1.875rem)
	}
	.grid-margin-x.small-up-2>.cell {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x.small-up-3>.cell {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x.small-up-4>.cell {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x.small-up-5>.cell {
		width: calc(20% - 1.875rem)
	}
	.grid-margin-x.small-up-6>.cell {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x.small-up-7>.cell {
		width: calc(14.28571% - 1.875rem)
	}
	.grid-margin-x.small-up-8>.cell {
		width: calc(12.5% - 1.875rem)
	}
	.grid-margin-x.medium-up-1>.cell {
		width: calc(100% - 1.875rem)
	}
	.grid-margin-x.medium-up-2>.cell {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x.medium-up-3>.cell {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x.medium-up-4>.cell {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x.medium-up-5>.cell {
		width: calc(20% - 1.875rem)
	}
	.grid-margin-x.medium-up-6>.cell {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x.medium-up-7>.cell {
		width: calc(14.28571% - 1.875rem)
	}
	.grid-margin-x.medium-up-8>.cell {
		width: calc(12.5% - 1.875rem)
	}
}

@media print,
screen and (min-width: 64em) {
	.grid-margin-x.large-up-1>.cell {
		width: calc(100% - 1.875rem)
	}
	.grid-margin-x.large-up-2>.cell {
		width: calc(50% - 1.875rem)
	}
	.grid-margin-x.large-up-3>.cell {
		width: calc(33.33333% - 1.875rem)
	}
	.grid-margin-x.large-up-4>.cell {
		width: calc(25% - 1.875rem)
	}
	.grid-margin-x.large-up-5>.cell {
		width: calc(20% - 1.875rem)
	}
	.grid-margin-x.large-up-6>.cell {
		width: calc(16.66667% - 1.875rem)
	}
	.grid-margin-x.large-up-7>.cell {
		width: calc(14.28571% - 1.875rem)
	}
	.grid-margin-x.large-up-8>.cell {
		width: calc(12.5% - 1.875rem)
	}
}


.small-offset-0 {
	margin-left: 0%
}

.grid-margin-x>.small-offset-0 {
	margin-left: calc(0% + .625rem)
}

.small-offset-1 {
	margin-left: 8.33333%
}

.grid-margin-x>.small-offset-1 {
	margin-left: calc(8.33333% + .625rem)
}

.small-offset-2 {
	margin-left: 16.66667%
}

.grid-margin-x>.small-offset-2 {
	margin-left: calc(16.66667% + .625rem)
}

.small-offset-3 {
	margin-left: 25%
}

.grid-margin-x>.small-offset-3 {
	margin-left: calc(25% + .625rem)
}

.small-offset-4 {
	margin-left: 33.33333%
}

.grid-margin-x>.small-offset-4 {
	margin-left: calc(33.33333% + .625rem)
}

.small-offset-5 {
	margin-left: 41.66667%
}

.grid-margin-x>.small-offset-5 {
	margin-left: calc(41.66667% + .625rem)
}

.small-offset-6 {
	margin-left: 50%
}

.grid-margin-x>.small-offset-6 {
	margin-left: calc(50% + .625rem)
}

.small-offset-7 {
	margin-left: 58.33333%
}

.grid-margin-x>.small-offset-7 {
	margin-left: calc(58.33333% + .625rem)
}

.small-offset-8 {
	margin-left: 66.66667%
}

.grid-margin-x>.small-offset-8 {
	margin-left: calc(66.66667% + .625rem)
}

.small-offset-9 {
	margin-left: 75%
}

.grid-margin-x>.small-offset-9 {
	margin-left: calc(75% + .625rem)
}

.small-offset-10 {
	margin-left: 83.33333%
}

.grid-margin-x>.small-offset-10 {
	margin-left: calc(83.33333% + .625rem)
}

.small-offset-11 {
	margin-left: 91.66667%
}

.grid-margin-x>.small-offset-11 {
	margin-left: calc(91.66667% + .625rem)
}

@media print,
screen and (min-width: 40em) {
	.medium-offset-0 {
		margin-left: 0%
	}
	.grid-margin-x>.medium-offset-0 {
		margin-left: calc(0% + .9375rem)
	}
	.medium-offset-1 {
		margin-left: 8.33333%
	}
	.grid-margin-x>.medium-offset-1 {
		margin-left: calc(8.33333% + .9375rem)
	}
	.medium-offset-2 {
		margin-left: 16.66667%
	}
	.grid-margin-x>.medium-offset-2 {
		margin-left: calc(16.66667% + .9375rem)
	}
	.medium-offset-3 {
		margin-left: 25%
	}
	.grid-margin-x>.medium-offset-3 {
		margin-left: calc(25% + .9375rem)
	}
	.medium-offset-4 {
		margin-left: 33.33333%
	}
	.grid-margin-x>.medium-offset-4 {
		margin-left: calc(33.33333% + .9375rem)
	}
	.medium-offset-5 {
		margin-left: 41.66667%
	}
	.grid-margin-x>.medium-offset-5 {
		margin-left: calc(41.66667% + .9375rem)
	}
	.medium-offset-6 {
		margin-left: 50%
	}
	.grid-margin-x>.medium-offset-6 {
		margin-left: calc(50% + .9375rem)
	}
	.medium-offset-7 {
		margin-left: 58.33333%
	}
	.grid-margin-x>.medium-offset-7 {
		margin-left: calc(58.33333% + .9375rem)
	}
	.medium-offset-8 {
		margin-left: 66.66667%
	}
	.grid-margin-x>.medium-offset-8 {
		margin-left: calc(66.66667% + .9375rem)
	}
	.medium-offset-9 {
		margin-left: 75%
	}
	.grid-margin-x>.medium-offset-9 {
		margin-left: calc(75% + .9375rem)
	}
	.medium-offset-10 {
		margin-left: 83.33333%
	}
	.grid-margin-x>.medium-offset-10 {
		margin-left: calc(83.33333% + .9375rem)
	}
	.medium-offset-11 {
		margin-left: 91.66667%
	}
	.grid-margin-x>.medium-offset-11 {
		margin-left: calc(91.66667% + .9375rem)
	}
}

@media print,
screen and (min-width: 64em) {
	.large-offset-0 {
		margin-left: 0%
	}
	.grid-margin-x>.large-offset-0 {
		margin-left: calc(0% + .9375rem)
	}
	.large-offset-half {
		margin-left: 4.166664%
	}
	.large-offset-1 {
		margin-left: 8.33333%
	}
	.grid-margin-x>.large-offset-1 {
		margin-left: calc(8.33333% + .9375rem)
	}
	.large-offset-2 {
		margin-left: 16.66667%
	}
	.grid-margin-x>.large-offset-2 {
		margin-left: calc(16.66667% + .9375rem)
	}
	.large-offset-3 {
		margin-left: 25%
	}
	.grid-margin-x>.large-offset-3 {
		margin-left: calc(25% + .9375rem)
	}
	.large-offset-4 {
		margin-left: 33.33333%
	}
	.grid-margin-x>.large-offset-4 {
		margin-left: calc(33.33333% + .9375rem)
	}
	.large-offset-5 {
		margin-left: 41.66667%
	}
	.grid-margin-x>.large-offset-5 {
		margin-left: calc(41.66667% + .9375rem)
	}
	.large-offset-6 {
		margin-left: 50%
	}
	.grid-margin-x>.large-offset-6 {
		margin-left: calc(50% + .9375rem)
	}
	.large-offset-7 {
		margin-left: 58.33333%
	}
	.grid-margin-x>.large-offset-7 {
		margin-left: calc(58.33333% + .9375rem)
	}
	.large-offset-8 {
		margin-left: 66.66667%
	}
	.grid-margin-x>.large-offset-8 {
		margin-left: calc(66.66667% + .9375rem)
	}
	.large-offset-9 {
		margin-left: 75%
	}
	.grid-margin-x>.large-offset-9 {
		margin-left: calc(75% + .9375rem)
	}
	.large-offset-10 {
		margin-left: 83.33333%
	}
	.grid-margin-x>.large-offset-10 {
		margin-left: calc(83.33333% + .9375rem)
	}
	.large-offset-11 {
		margin-left: 91.66667%
	}
	.grid-margin-x>.large-offset-11 {
		margin-left: calc(91.66667% + .9375rem)
	}
}


/* Feb 2020 Updates */

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

.blue, .blue a {
	color: #2997ff!important;
	transition: color 350ms ease;
}

.over-text-qtr {
    position: absolute;
    left: 50%;
	top: 20%;
	margin-top: .75rem;
    transform: translate(-50%,-50%);
    width: 100%;
    font-weight: 600;
}

.over-text-qtr h3 {
	margin: 1rem;
}

.action {
    position: absolute;
    margin-top: 1rem;
    left: 3rem;
}

#product-nav .cell{
    position: relative;
}

.cell {
	overflow: hidden;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

h1, h2 {
    font-family:  var(--mainfont);
}

h2, h3, h4, a, p, li, ul, table  {
    font-family:  var(--subfont);
}

h1, .h1-title {
	margin: 0.67em 0;
	font-size: 2.7rem;
	font-weight: 600;
  }


h2 {
    font-size: 2.6rem;
	letter-spacing: .5px;
	font-weight: 500;
}

h3 {
	font-size: 1.7rem;
	font-weight: 500;
}

.grid-x .cell ul li .dealer-logo, .grid-x .cell .dealer-logo {
	width: 300px;
	margin: auto;
	float: center;
}

.grid-container {
     position: relative;
}

.tall {
    padding: 5rem 0;
}


.btn.btn-link {
    font-size: 1.2rem;
}

.btn.btn-link:hover {
    text-decoration: underline;
}

.right {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);

}


.white h1, .white h2, .white h3, .white p  {
    color: white;
}

.over-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
 }

.abs-text-left {
    position: absolute;
    margin-top: -30%;
    margin-left: 15%;

}

.abs-text-left-2 {
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%,-50%);
    margin-left: 3rem;
}

h1 sup {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .over-text.right {
        left: 55%;
        top: 20%;
    }

    .abs-text-left-2 {
        top: 18%;
        
    }
	h1, .h1-title {
	font-size: 1.5rem;
	}
	h1 sup, .h1-title sup {
		font-size: 1rem;
	}
	
    h2, h3 {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }

}

@media (max-width: 500px) {

   .grid-x .over-text.top-small {
        top: 23%;
    }
    .scale-up-135 img {
        width: 135%;
    }
    .scale-up-115 img {
        width: 115%;
    }
}

@media (max-width: 800px) {
.over-text.top-small {
    top: 20%;
}
}

.over {
    position: absolute;
}

.align-center {
    justify-content: center;
}
.align-right {
    justify-content: right;
}
.text-center {
    text-align: center;
}

.center {
      justify-content: center;
  }

  #brand-home img {
    max-width: 200px;
    max-height: 80px;
    padding: 5%;
    margin: 0 0 0 1rem;
}

.align-middle {
    -ms-flex-align: center;
    align-items: center
}

/* BUTTON */

.material-but {
    display: inline-block;
    position: relative;
    border: 2px solid #D0D0D0;
    border-radius: 6px;
    /* padding: 7px 22px 0 22px; */
    margin-top: 1.2rem;
    min-width: 150px;
    height: 44px;
    vertical-align: middle;
    text-align: center;
    color: #423F3F;
    background-color: transparent;
    font-family:  var(--subfont);
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    transition: .2s ease-out;
}

button.material-but {
    height: 50px;
    padding: 3px 22px 0 22px;
}

.material-but:hover,
.material-but:focus,
.material-but.solid {
    background-color: #303030;
    color: white;
    transition: .2s ease-out;
}

.material-but.white {
    color:white;
}

.brands .cell img, .trust .cell img {
	max-width: 180px;
	max-height: 65px;
}
.brands .cell {
	margin-top: 1rem;
	padding: 0 0 0 0rem;
}

.trust .cell img {
	max-width: 100px;
	max-height: 65px;
}

/* Footer — Apple-style directory + floor (hairlines, 12px scale, calm CTA) */

.site-footer-apple {
	--footer-hairline: rgba(0, 0, 0, 0.12);
	background: #f5f5f7;
	color: #6e6e73;
	font-size: 0.75rem;
	-webkit-font-smoothing: antialiased;
	border-top: 1px solid var(--footer-hairline);
}

.site-footer-apple .footer-inner {
	max-width: 96rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 2.75rem) clamp(1rem, 2.5vw, 1.75rem) 0;
	padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.footer-apple-cta-panel {
	margin: 0 0 clamp(1.5rem, 4vw, 2rem);
}

.site-footer-apple .footer-apple-cta-panel .cr-footer-cta {
	background: #fff;
	border: 1px solid var(--footer-hairline);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: clamp(1.35rem, 3.5vw, 1.85rem) clamp(1.15rem, 3vw, 1.65rem);
	margin: 0;
	text-align: left;
}

.site-footer-apple .cr-footer-cta__headline {
	margin: 0 0 0.4rem;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 600;
	color: #1d1d1f;
	letter-spacing: -0.022em;
	line-height: 1.15;
	max-width: 28rem;
}

.site-footer-apple .cr-footer-cta__sub {
	margin: 0 0 1.1rem;
	font-size: 0.875rem;
	color: #6e6e73;
	line-height: 1.47059;
	max-width: 34rem;
	letter-spacing: -0.01em;
}

.site-footer-apple .cr-footer-cta__actions {
	justify-content: flex-start;
	gap: 0.5rem 0.65rem;
}

.site-footer-apple .cr-footer-cta .cr-btn {
	transform: none;
}

.site-footer-apple .cr-footer-cta .cr-btn--primary,
.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-primary {
	background: #0071e3;
	color: #fff;
	border-color: transparent;
}

.site-footer-apple .cr-footer-cta .cr-btn--primary:hover,
.site-footer-apple .cr-footer-cta .cr-btn--primary:focus,
.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-primary:hover,
.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-primary:focus {
	background: #0077ed;
	color: #fff;
	transform: none;
}

.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost {
	color: #1d1d1f;
	border-color: #d2d2d7;
	background: #fff;
}

.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost:hover,
.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost:focus {
	background: #f5f5f7;
	border-color: #86868b;
	color: #1d1d1f;
	transform: none;
}

.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost--mid {
	color: #0071e3;
	border-color: rgba(0, 113, 227, 0.35);
	background: rgba(0, 113, 227, 0.06);
}

.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost--mid:hover,
.site-footer-apple .cr-footer-cta .cr-footer-cta__btn-ghost--mid:focus {
	background: rgba(0, 113, 227, 0.12);
	border-color: #0071e3;
	color: #0071e3;
	transform: none;
}

.footer-apple-nav {
	padding: clamp(1.35rem, 3.5vw, 1.85rem) 0 clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--footer-hairline);
}

.footer-apple-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 1.25rem;
	row-gap: 1.75rem;
}

@media print, screen and (min-width: 48em) {
	.footer-apple-grid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 2rem;
		row-gap: 0;
	}
}

.footer-apple-heading {
	margin: 0 0 0.65rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: #6e6e73;
	letter-spacing: -0.01em;
	text-transform: none;
}

.footer-apple-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-apple-col li {
	margin: 0;
}

.footer-apple-col a {
	display: inline-block;
	color: #424245;
	text-decoration: none;
	font-size: 0.75rem;
	line-height: 1.33337;
	padding: 0.2rem 0;
	margin: 0;
	transition: color 0.12s ease;
}

.footer-apple-col a:hover,
.footer-apple-col a:focus {
	color: #06c;
	text-decoration: none;
}

.footer-apple-col a:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 3px;
	border-radius: 2px;
	text-decoration: none;
}

.footer-apple-phone {
	font-weight: 400;
	letter-spacing: -0.015em;
}

/* Brand + disclaimer + legal — single “floor” band */
.footer-apple-floor {
	margin-top: 0;
	padding-top: 0;
	border-top: 1px solid var(--footer-hairline);
	background: linear-gradient(to bottom, #f5f5f7 0%, #f2f2f4 100%);
	margin-left: calc(-1 * clamp(1rem, 2.5vw, 1.75rem));
	margin-right: calc(-1 * clamp(1rem, 2.5vw, 1.75rem));
	padding-left: clamp(1rem, 2.5vw, 1.75rem);
	padding-right: clamp(1rem, 2.5vw, 1.75rem);
	padding-bottom: clamp(1.25rem, 3vw, 1.65rem);
}

.footer-apple-meta {
	padding: clamp(1.15rem, 3vw, 1.5rem) 0 clamp(1rem, 2.5vw, 1.25rem);
	border-top: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media print, screen and (min-width: 48em) {
	.footer-apple-meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 0.75rem 2rem;
	}
}

.footer-apple-brand {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: flex-start;
}

.footer-apple-logo-link {
	display: inline-block;
	line-height: 0;
}

.footer-apple-logo-link img {
	width: 96px;
	height: auto;
	display: block;
	opacity: 0.92;
}

.footer-apple-tagline {
	margin: 0;
	font-size: 0.75rem;
	color: #86868b;
	letter-spacing: -0.01em;
	line-height: 1.33337;
	max-width: 18rem;
}

.footer-apple-disclaimer {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.45455;
	color: #86868b;
	max-width: 36rem;
	flex: 1 1 auto;
}

@media print, screen and (min-width: 48em) {
	.footer-apple-disclaimer {
		text-align: right;
		margin-left: auto;
		max-width: 26rem;
	}
}

.footer-apple-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--footer-hairline);
}

.footer-apple-copyright {
	margin: 0;
	font-size: 0.6875rem;
	color: #86868b;
	line-height: 1.45455;
}

.footer-apple-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.65rem;
	align-items: center;
}

.footer-apple-legal a {
	position: relative;
	color: #424245;
	text-decoration: none;
	font-size: 0.6875rem;
	font-weight: 400;
	padding-right: 0.65rem;
	transition: color 0.12s ease;
}

.footer-apple-legal a:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 0.55rem;
	background: #d2d2d7;
}

.footer-apple-legal a:last-child {
	padding-right: 0;
}

.footer-apple-legal a:hover,
.footer-apple-legal a:focus {
	color: #06c;
	text-decoration: none;
}

.footer-apple-legal a:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 3px;
	border-radius: 2px;
	text-decoration: none;
}

.icon-small {
width: 40px;
padding-left: 3rem;
}

/* Base 2019 Version */

#site-logo {
	width: 166px;
	flex-shrink: 0;
}
#site-logo img {
	width: 166px;
	height: auto;
}

body.active-banner {
    transition: padding-top .4s cubic-bezier(1, -.4, .44, .985);
    padding-top: 0
}

body.active-banner.banner-open {
    padding-top: 60px
}

#promo-banner {
    background: #000;
    color: #fff;
    position: fixed;
    transition: top .4s cubic-bezier(1, -.4, .44, .985);
    top: -80px;
    width: 100%;
    z-index: 11
}

#promo-banner.banner-open {
    top: 0
}

#promo-banner .grid-container {
    background-size: cover;
    position: relative
}

#promo-banner .grid-container .promo-details {
    color: #e4e4e4
}


#promo-banner .grid-container .promo-details .details {
    color: #e4e4e4;
    text-decoration: underline
}

#promo-banner .grid-container .promo-details .details:hover {
    text-decoration: none
}

#promo-banner h3 {
    line-height: 1.1;
    margin-bottom: 0
}

@media screen and (min-width:90em) and (max-width:89.9375em) {
    #promo-banner h3 {
        font-size: 2rem
    }
}

@media screen and (min-width:64.063em) and (max-width:74.9375em) {
    #promo-banner h3 {
        font-size: 1.6rem
    }
}

#promo-banner .banner-cta {
    color: #fff;
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    position: relative;
}

#promo-banner .banner-cta:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff
}

@media screen and (max-width:33.188em) {
    #promo-banner .banner-cta:after {
        width: 3.2rem
    }
}

#promo-banner #close-banner {
    position: absolute;
    top: 50%;
    right: 1rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

#promo-banner #close-banner img,
#promo-banner #close-banner svg {
    height: 1rem
}
#cartProducts {
	overflow-y: auto;
	max-height: 600px;
 }

@media screen and (max-width:47.938em) {
    #promo-banner h3 {
        font-size: 1.1rem
    }
    .masonry-grid .masonry-cell.numbered-highlight>.grid-x.highlight-content.black {
        position: relative;
        background: #000;
        margin-bottom: 1.5625rem;
        padding-bottom: 3rem
    }
}

@media print,
screen and (min-width:48em) {
    #promo-banner h3 {
        font-size: 1.5rem
    }
}

@media print,
screen and (max-width:47.5em) {
    #promo-banner h3 {
        font-size: 1rem
    }
	#cart h3, #cart h2 {
		margin: 1rem 0rem
	}
	.p-6 p {
		margin: 1rem 1.5rem;
	}
	#cartProducts {
		max-height: 450px;
	}
}

#promo-banner .grid-container {
    height: 60px;
    line-height: 1.2rem
}

.details {
    font-style: italic;
    font-size: .8rem
}


@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

.close {
    color: gray;
    float: right;
    font-size: 40px;
    font-weight: 700
}

.close:focus,
.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer
}



@media screen and (max-width:62.56em) {
	.hide-for-small {
		display: none;
	}
	.topright.compare {
		height: 20px;
	}
}

@media screen and (min-width:62.56em) {
	.show-for-small {
		display: block;
	}
	.margin-left-1-lm {
		margin-left: 1rem;
	}
}

#page-banner img {
	width: 100%;
	height: 100%;
}

#pageMask {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 998;
}
#pageMask.mpShow {
	opacity: 1;
	visibility: visible;
}

.menu, .menu.horizontal {
	flex-wrap: wrap;
	flex-direction: row;
}
.menu {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
}
.menu, .menu-icon {
	position: relative;
}
.menu.vertical {
	flex-wrap: nowrap;
	flex-direction: column;
}
.grid-container h4.menu-title {
	font-weight: 600;
	color: black;
}

button.product-card {
	text-align: left;
	border: none;
}
button.product-card:hover {
	cursor: pointer;
}
.black-bg, .product-card.black-bg {
	background-color: black;
	color: white;
}
.product-card.blue-robot-bg {
	background-color: #79a5c8;
	color: black;
}
.advanced-bg {
	background-color: #f5f9fc;
}

.no-margin-bottom {
	margin-bottom: 0rem;
}

.grey {
	color: #6e6e73;
}
.grey-bg, .product-card.grey-bg {
	background-color: #f2f2f2;
}
.grey-bg.f7 {
	background-color: #f7f7f7;
}
.grey-bg-header {
	background-color: #f5f5f7;
}
.white {
	color: #fff;
}

@media print, screen and (min-width: 48em) {
	.hide-for-medium {
		display: none!important;
	}
}

.align-left {
	justify-content: left;
}

/* Header */

:root {
	--header-height: 50px;
	--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--nav-bg: #ffffff;
}

body.menu-open {
	touch-action: none;
	-webkit-overflow-scrolling: none;
	position: fixed;
	width: 100%;
}

body > header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	z-index: 1001;
	transition: transform var(--transition), background-color 0.3s ease;
	height: var(--header-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 clamp(1rem, 4vw, 2.5rem);
	will-change: transform;
	box-sizing: border-box;
}

body > header:has(.dropdown-menu.show) {
	background-color: #ffffff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.menu-toggle {
	display: none;
	position: relative;
	z-index: 1002;
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 3px;
	border-radius: 8px;
}

nav {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
	flex-shrink: 0;
}

/* Primary "Shop" CTA in the global header.
   Same pill + blue (#0071e3) as the PDP subnav buy/preorder button so the
   purchase intent reads consistently across the site. Hidden on small
   screens where the mobile drawer already surfaces the store. */
.header-right .header-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 0.95rem;
	margin-right: 0.5rem;
	border-radius: 980px;
	background: #0071e3;
	color: #fff !important;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}

.header-right .header-shop-btn:hover,
.header-right .header-shop-btn:focus {
	background: #0077ed;
	color: #fff !important;
	text-decoration: none;
}

.header-right .header-shop-btn:active {
	transform: translateY(0.5px);
}

@media (max-width: 47.99em) {
	.header-right .header-shop-btn {
		display: none;
	}
}

.header-right button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #4b5563;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}

.header-right button:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: #1d1d1f;
}

#cart-button {
	position: relative;
}

#cartNumber {
	position: absolute;
	top: -2px;
	right: -4px;
	width: 18px;
	height: 18px;
	background: #1d1d1f;
	color: white;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

#cart-button:hover #cartNumber {
	background: #0071e3;
}

.nav-links {
	display: flex;
	position: relative;
	justify-content: center;
	gap: 8px;
}

.nav-link {
	color: #000000;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color var(--transition), background-color var(--transition);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 4px 16px;
	border-radius: 4px;
}

.dropdown-toggle.active,
.nav-link:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: #000000;
}

.mobile-chevron {
	display: none;
	align-items: center;
	transition: transform var(--transition);
}

.dropdown-menu {
	position: fixed;
	top: var(--header-height);
	left: 0;
	width: 100%;
	background: #ffffff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	max-height: 0;
	overflow: hidden;
	will-change: transform, opacity, max-height;
}

.dropdown-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	max-height: none;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 1rem 2rem;
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.dropdown-menu.show .dropdown-container {
	opacity: 1;
	transform: translateY(0);
}


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

.menu-grid .menu-item {
	color: #1d1d1f;
	text-decoration: none;
	font-size: 14px;
	padding: 0.5rem 0;
	display: block;
}

.menu-grid .menu-item:hover {
	color: #0071e3;
}

/* ---- Mega menu (beatbot-style: left text rail, right product cards) ---- */
.dropdown-container.mega {
	display: grid;
	grid-template-columns: minmax(260px, 320px) 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: 2.25rem clamp(1.5rem, 4vw, 3rem) 2.75rem;
	align-items: start;
	max-width: 1400px;
}

.mega-left {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

.mega-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6e6e73;
	margin: 0;
}

.mega-heading {
	font-size: clamp(1.35rem, 1.8vw, 1.65rem);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #1d1d1f;
	margin: 0;
}

.mega-desc {
	font-size: 14px;
	line-height: 1.55;
	color: #4b5563;
	margin: 0;
	max-width: 36ch;
}

.mega-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #0071e3;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	margin-top: 0.4rem;
	transition: color var(--transition);
}

.mega-cta svg {
	transition: transform var(--transition);
}

.mega-cta:hover {
	color: #0077ed;
}

.mega-cta:hover svg {
	transform: translateX(3px);
}

.mega-right {
	display: grid;
	gap: 0.5rem;
}

.mega-right--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mega-right--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 16px;
	padding: 0.5rem 0.5rem 1rem;
	background: transparent;
	transition: background-color var(--transition), transform var(--transition);
}

.mega-card:hover {
	background: #f5f5f7;
	transform: translateY(-2px);
}

.mega-card__img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 12px;
	background: linear-gradient(160deg, #f4f6fa 0%, #e9edf3 100%);
	overflow: hidden;
	margin-bottom: 0.9rem;
}

.mega-card__img img {
	width: 78%;
	height: 78%;
	max-width: 78%;
	max-height: 78%;
	object-fit: contain;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-card__img--cover img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

.mega-card:hover .mega-card__img img {
	transform: scale(1.04);
}

.mega-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4b5563;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2;
	line-height: 1;
}

.mega-card__badge--flag {
	background: #1d1d1f;
	color: #ffffff;
}

.mega-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0.5rem;
}

.mega-card__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1d1d1f;
	margin: 0;
}

.mega-card__sub {
	font-size: 13px;
	line-height: 1.4;
	color: #6e6e73;
	margin: 0;
}

@media (max-width: 1200px) {
	.dropdown-container.mega {
		grid-template-columns: minmax(220px, 260px) 1fr;
		gap: 2rem;
		padding: 1.75rem 1.5rem 2rem;
	}
	.mega-heading {
		font-size: 1.3rem;
	}
}

.side-banner {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	margin-bottom: 2rem;
	z-index: 4;
}
.side-banner img {
	width: 275px;
}
.x-mark {
	position: absolute;
	color: white;
	top: 0;
	right: 0;
	margin: 0.05rem 0.055rem 0rem 0rem;
	padding: 3px 4px;
	font-size: 16px;
	border: none;
	background-color: transparent;
	cursor: pointer;
}
.x-mark button {
	color: white;
}
.x-mark img {
	height: 1rem;
	width: 1rem;
}

/* Mobile header */
@media (max-width: 1000px) {
	:root {
		--header-height: 44px;
	}
	body > header {
		height: 44px;
	}
	/* Full-screen drawer that sits BELOW the sticky site header. The original
	   header (logo, hamburger/X, cart/help) stays visible and unchanged; only
	   the body of the drawer slides in underneath it. */
	body > header > nav {
		position: fixed !important;
		top: var(--header-height) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: calc(100vh - var(--header-height)) !important;
		height: calc(100dvh - var(--header-height)) !important;
		background-color: #ffffff !important;
		background-image: none !important;
		opacity: 0;
		visibility: hidden;
		transform: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		z-index: 1000; /* below the header (1001) so the logo is never occluded */
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0;
		margin: 0;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	body.menu-open > header > nav {
		opacity: 1;
		visibility: visible;
	}

	/* When the drawer is open, the header must NOT form a containing block
	   so the fixed-positioned nav escapes to the viewport.
	   (Header uses backdrop-filter + will-change: transform which otherwise contain it.)
	   We also freeze the header's hide-on-scroll transform so the logo can't move. */
	body.menu-open > header {
		will-change: auto !important;
		transform: none !important;
		transition: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background-color: #ffffff !important;
	}
	/* Hide the blurred page mask while the drawer is open — drawer is opaque. */
	body.menu-open #pageMask {
		opacity: 0 !important;
		visibility: hidden !important;
	}
	#site-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	#site-logo img {
		width: 130px;
	}
	.header-right button {
		width: 44px;
		height: 44px;
	}
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0.5rem;
	}
	.hamburger {
		width: 20px;
		height: 14px;
		position: relative;
	}
	.hamburger span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #1d1d1f;
		transition: var(--transition);
	}
	.hamburger span:nth-child(1) { top: 0; }
	.hamburger span:nth-child(2) { top: 6px; }
	.hamburger span:nth-child(3) { top: 12px; }
	.menu-open .hamburger span:nth-child(1) {
		transform: rotate(45deg) translate(4px, 4px);
	}
	.menu-open .hamburger span:nth-child(2) {
		opacity: 0;
	}
	.menu-open .hamburger span:nth-child(3) {
		transform: rotate(-45deg) translate(4px, -4px);
	}
	.menu-open header {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Nav list: scrollable, flush rows with dividers */
	.nav-links {
		flex: 1;
		flex-direction: column;
		padding: 0;
		gap: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		width: 100%;
		box-sizing: border-box;
	}
	.nav-link {
		padding: 16px 22px;
		font-size: 17px;
		font-weight: 500;
		color: #1d1d1f;
		border-radius: 0;
		justify-content: space-between;
	}
	.nav-link + .nav-link,
	.nav-link + .dropdown-toggle,
	.dropdown-menu + .nav-link,
	.dropdown-menu + .dropdown-toggle {
		border-top: 1px solid #f3f4f6;
	}
	.nav-link:hover,
	.dropdown-toggle.active {
		background-color: #f9fafb;
	}
	.mobile-chevron {
		display: flex !important;
		margin-left: auto;
		color: #9ca3af;
		transform: rotate(0deg);
		transition: transform var(--transition), color 0.2s ease;
	}
	.dropdown-toggle.active .mobile-chevron {
		color: #0071e3;
	}
	.header-right {
		width: auto;
	}

	/* Dropdown as full-width overlay inside the drawer. Slides in from the
	   right and replaces the main list — same white background, same edges. */
	.dropdown-menu {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateX(16px);
		transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s ease;
		box-shadow: none;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		z-index: 2;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	.dropdown-menu.show {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		max-height: none;
	}

	/* When an overlay is open, hide the underlying list + footer */
	nav:has(.dropdown-menu.show) > .nav-links,
	nav:has(.dropdown-menu.show) > .nav-footer {
		visibility: hidden;
	}

	/* Sticky Back + Title bar inside each dropdown overlay (Apple-style) */
	.mega-menu-close {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		padding: 6px 8px;
		min-height: 48px;
		border-bottom: 1px solid #f3f4f6;
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
		flex-shrink: 0;
	}
	.mega-menu-close span {
		font-weight: 600;
		font-size: 15px;
		color: #1d1d1f;
		text-align: center;
		letter-spacing: -0.01em;
		grid-column: 2;
	}
	.mega-menu-close .back-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		background: transparent;
		border-radius: 8px;
		color: #1d1d1f;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.15s ease, transform 0.1s ease;
		grid-column: 1;
		justify-self: start;
	}
	.mega-menu-close .back-btn:hover {
		background: #f3f4f6;
	}
	.mega-menu-close .back-btn:active {
		background: #e5e7eb;
		transform: scale(0.92);
	}

	/* Drawer footer CTA (Talk to expert + guide link) */
	.nav-footer {
		flex-shrink: 0;
		padding: 14px 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #e5e7eb;
		background: linear-gradient(to bottom, #fafafa, #f3f4f6);
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.talk-to-expert {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 14px;
		text-decoration: none;
		color: inherit;
		box-shadow: 0 1px 3px rgba(0,0,0,0.04);
		transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.talk-to-expert:hover {
		border-color: #d1d5db;
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		transform: translateY(-1px);
	}
	.talk-to-expert:active {
		transform: translateY(0);
		background: #f9fafb;
	}
	.talk-to-expert-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
		color: #0071e3;
		flex-shrink: 0;
	}
	.talk-to-expert-text {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.talk-to-expert-text strong {
		font-size: 15px;
		font-weight: 600;
		color: #1d1d1f;
		line-height: 1.3;
	}
	.talk-to-expert-text small {
		font-size: 13px;
		color: #6b7280;
		line-height: 1.3;
	}
	.talk-to-expert > svg {
		color: #9ca3af;
		flex-shrink: 0;
	}
	.nav-guide-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		background: linear-gradient(135deg, #0071e3 0%, #0058b3 100%);
		color: #fff;
		border-radius: 12px;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25);
		transition: transform 0.15s ease, box-shadow 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.nav-guide-link:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35);
		color: #fff;
	}
	.nav-guide-link:active {
		transform: translateY(0);
	}
	.nav-guide-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.nav-guide-text strong {
		font-size: 15px;
		font-weight: 600;
		color: #fff;
	}
	.nav-guide-text small {
		font-size: 13px;
		color: rgba(255,255,255,0.88);
	}
	.nav-guide-link svg {
		flex-shrink: 0;
		color: #fff;
	}

	/* Mobile mega menu: full-width vertical list that visually matches the
	   main drawer — same padding rhythm, same dividers, same typography. */
	.dropdown-container.mega {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 0;
		padding: 0;
		margin: 0;
		max-width: none;
		width: 100%;
		box-sizing: border-box;
	}
	.mega-left {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 18px 22px 14px;
		border-bottom: 1px solid #f3f4f6;
		background: #fafafa;
	}
	.mega-eyebrow {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #86868b;
		margin: 0;
	}
	.mega-heading {
		font-size: 17px;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #1d1d1f;
		line-height: 1.3;
		margin: 0;
	}
	.mega-desc {
		display: none;
	}
	.mega-cta {
		order: 2;
		margin: 0;
		padding: 14px 22px;
		font-size: 15px;
		font-weight: 500;
		color: #0071e3;
		border-top: 1px solid #f3f4f6;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		align-self: flex-start;
		background: transparent;
	}
	.mega-cta svg {
		width: 12px;
		height: 12px;
	}
	.mega-right {
		display: flex;
		flex-direction: column;
		gap: 0;
		grid-template-columns: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.mega-right--2,
	.mega-right--3 {
		grid-template-columns: none;
	}
	.mega-card {
		display: grid;
		grid-template-columns: 48px 1fr 18px;
		align-items: center;
		gap: 14px;
		padding: 14px 22px;
		border-radius: 0;
		border-top: 1px solid #f3f4f6;
		background: transparent;
		transform: none !important;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		min-height: 68px;
		text-decoration: none;
	}
	.mega-right .mega-card:first-child {
		border-top: none;
	}
	.mega-card:hover {
		background: #f9fafb;
		transform: none !important;
	}
	.mega-card:active {
		background: #f3f4f6;
		transform: none !important;
	}
	.mega-card:active .mega-card__title {
		color: #0071e3;
	}
	.mega-card__img {
		width: 48px;
		height: 48px;
		aspect-ratio: 1 / 1;
		margin: 0;
		border-radius: 10px;
		background: linear-gradient(160deg, #f4f6fa 0%, #e9edf3 100%);
		flex-shrink: 0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mega-card__img img {
		width: 78%;
		height: 78%;
		object-fit: contain;
	}
	.mega-card__img--cover img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.mega-card:hover .mega-card__img img {
		transform: none;
	}
	.mega-card__badge {
		display: none;
	}
	.mega-card__text {
		min-width: 0;
		padding: 0;
		gap: 2px;
		display: flex;
		flex-direction: column;
	}
	.mega-card__title {
		font-size: 16px;
		font-weight: 500;
		color: #1d1d1f;
		letter-spacing: -0.01em;
		margin: 0;
	}
	.mega-card__sub {
		font-size: 13px;
		line-height: 1.35;
		color: #6e6e73;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0;
	}

	/* Chevron on each row for affordance */
	.mega-card::after {
		content: "";
		grid-column: 3;
		justify-self: end;
		width: 7px;
		height: 7px;
		border-top: 1.5px solid #c7c7cc;
		border-right: 1.5px solid #c7c7cc;
		transform: rotate(45deg);
	}
}

/* Desktop header */
@media screen and (min-width: 1001px) {
	#site-logo img {
		width: 166px;
	}
	/* Mobile-only drawer chrome is hidden on desktop */
	.nav-footer,
	.mega-menu-close {
		display: none !important;
	}
}

.collection img {
	border-radius: 0px;
	aspect-ratio: 1/1;
	margin: auto;
}

.collection .product__image img:hover, .icon img:hover{
	transition: 0.3s;
}



#cart-but {
 
   top: 10px;
   right: 10px;
}

#cart-wrapper {
width: auto;
position: relative;
}

#cart-count{

    position: absolute;
    left: 18px;
    bottom: 5px;
    display: none;
  
  }
  
  .circle {
    display: inline-block;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    line-height: 18px;
    border-radius: 50%; 
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: 500;
    background-color: #448aff;
    border: 2px solid #fff;
    text-align: center;
  }
  
 #cart-count.full {
      display: inline-block;
      margin-right: 2rem;
  }
  
/* Category Page */

.collection {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: dense;
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 25px;
	grid-template-columns: repeat(1, 1fr);
    margin: 30px auto;
    max-width: 1400px;
	padding: 25px;
	justify-content: space-evenly;
  }
  .collection.collection-small-2 {
	grid-template-columns: repeat(2, 1fr);
  }
  .collection.collection-small-3 {
	grid-template-columns: repeat(3, 1fr);
  }

  .product__image {
    background-color: #e5e5e5;
    /*
	display: block;
	*/
	min-height: 100px;
    width: 100%;
	border-radius: 25px;
  }

  .product__name p {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600;
  }
  .product__name p a {
    color: #000000;
    text-decoration: none;
  }
  .product__price p {
    font-family: sans-serif;
    font-size: 1.6rem;
  }
  .product__title h1 {
    font-weight: 500;
    font-size: 1.8rem;
}

  /* Category Selections */

.filter-grid {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 25px;
    grid-template-columns: repeat(8, 1fr);
    margin-top: 2rem;
    max-width: 1200px;
    justify-content: space-evenly;
	text-align: center;
	margin: 3rem auto auto auto;
  }

.filter-image img, .icon img{
    display: block;
	width: 50px;
	-webkit-aspect-ratio: 1/1;
	aspect-ratio: 1 / 1;
    object-fit: contain;
	margin: auto;
  }

  .filter-grid-3 {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
    max-width: 400px;
    justify-content: space-evenly;
    text-align: center;
    margin: 3rem auto auto auto;
}
.filter-grid-3 .filter {
	border-radius: 20px;
}
   .grid-container .filter-name p {
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
  }

  .cattitle h1{
	text-align: center;
  }
  .cattitle p {
	line-height: 1.2rem;
  }

  .filter:hover {
	transition: box-shadow .25s cubic-bezier(.4,0,.2,1);
	box-shadow: 0 1px 1px 0 rgba(60,64,67,.3), 0 1px 3px 0 rgba(60,64,67,.15);
	border-radius: 20px;
  }

.filter-name p a {
	font-weight: 500;
    color: #000000;
    text-decoration: none;
	line-height: 1.2;
	margin: 1rem 0rem;
  }

    /* Icon Grid */

.icon-grid {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(35px, 65px));
    justify-content: space-evenly;
    text-align: center;
  }

.icon-image {
    display: block;
    min-height: 20px;
	margin-bottom: 1rem;
    width: 100%;
  }
.product .icon-name p, .icon-name p {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
	letter-spacing: 0px;
    line-height: 1;
  }
.icon-name p a {
    color: #000000;
    text-decoration: none;
	font-weight: 500;
  }
/*
  .icon img {
	border: 3px solid black;
	border-radius: 50%;
	padding: 3px;
  }
*/
.fullprice {
	text-decoration: line-through;
}
.msrp, .fullprice {
	font-weight: 500;
}
.currentprice {
	font-weight: 700;
}
.savemoney {
	font-weight: 500;
	color: white;
	background-color: green;
	padding: .25rem .75rem;
}

/*
.also-bought .cell, .also-bought {
	margin: 5px;
}

*/
.shoppersbought .grid-x {
	margin-top: 1rem;
}
.also-bought {
	margin: 0rem auto;
}
.also-bought .compare-text {
	padding-left: 10px;
}
  .also-bought div.preferred {
	border-bottom: 1px solid lightgray;
	margin: 0 0 1rem 0;
	width: 100%;
	max-width: 500px;
	min-height: 150px;
	padding-bottom: 1rem;
   }

.feature-div img {
	opacity: .75;
	-webkit-aspect-ratio: 1/1;
	aspect-ratio: 1/1;
	object-fit: contain;
}
.accessories .feature-div img {
	opacity: 1;
}
   .image-left {
	position: relative;
	max-width: 75px;
}
.image-center {
	max-width: 75px;
	margin: auto;
}

   #mainproduct {
	padding-left: 0;
   }
#mainproduct h3.ultimate {
	margin: 0.5rem;
	color: white;

}
#mainproduct .also-bought-title {
	background: #000;
}
   h2.block-title {
	margin: 0;
   }

   h2.block-title a {
	text-decoration: underline 1px dotted grey;
	font-size: 1.5rem;
   }

   h3.ultimate {
	margin: 2rem 0 3rem -.5rem;
	font-weight: 500;
	font-size: 1.4rem;
	color: black;
	letter-spacing: 3px;
	}

   .ultimate span {
	font-size: 1.4rem;
	margin-left: 1rem;
	padding-bottom: 1rem;
	font-weight: 700;
	}

   #vidbg {
    min-width: 100%; 
   }



   .over-text .material-but {
	background-color: transparent;
	margin-top: 2rem;
   }

   .padright {
	padding-right: 1rem;
   }

.better-but {
    display: inline-block;
    position: relative;
    margin-top: 1rem;
    min-width: 150px;
    height: 44px;
    vertical-align: middle;
    text-align: center;
    color: white;
    background-color: black;
    font-family: var(--subfont);
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(208, 208, 208);
    border-image: initial;
    border-radius: 4px;
    padding: 3px 18px 0px;
    transition: all 0.2s ease-out 0s;
}
#breadcrumbs-container {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}
.breadcrumbs {
    margin: 0rem;
	margin-left: 10px;
	padding: 0rem;
    list-style: none;
}
.breadcrumbs::after,
.breadcrumbs::before {
    display: table;
    content: " ";
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}
.breadcrumbs::after {
    clear: both;
}
.breadcrumbs li {
    float: left;
    font-size: 0.6875rem;
    color: #232323;
    cursor: default;
}
.breadcrumbs li:not(:last-child)::after {
    position: relative;
    margin: 0 0.75rem;
    opacity: 1;
    content: "/";
    color: #9d9d9d;
}
.breadcrumbs a {
    color: #0a92ef;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs .disabled {
    color: #9d9d9d;
    cursor: not-allowed;
}

table {
	border-collapse: collapse;
	width: 100%;
	max-width: 100%;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: 1rem;
}

td, th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px 10px;
}

td a {
	color: #0071e3;
}

h2 {
    font-size: 27px;
}

.robot-content p {
    font-size: 1.1em;
    line-height: 1.5em;
}

.robot-content h2 {
	margin: 0rem;
}

.image-container {
	position: relative;
	text-align: center;
	color: white;
}

.top-left-banner {
	position: absolute;
	font-size: 20px;
	font-weight: 500;
	top: 16px;
	left: 0px;
	padding: 8px 20px;
	background-color: rgba(8, 8, 8, .85);
}

.top-right-banner {
	position: absolute;
	font-size: 20px;
	font-weight: 500;
	top: 16px;
	right: 0px;
	margin: 8px 10px;
	background-color: rgba(8, 8, 8, .85);
}

.bottom-left-banner {
	position: absolute;
	font-size: 20px;
	font-weight: 500;
	bottom: 16px;
	left: 0px;
	padding: 0px;
	background-color: rgba(8, 8, 8, .85);
}

.bottom-right-banner {
	position: absolute;
	font-size: 20px;
	font-weight: 500;
	bottom: 16px;
	right: 0px;
	padding: 0px;
	background-color: rgba(8, 8, 8, .85);
}

.top-right-banner.white, .top-left-banner.white {
	background-color: white;
	color: black;
}
.bottom-right-banner.proline {
	right: 30px;
	bottom: 30px;
	width: 150px;
}

.top-left-banner.no-border, .top-right-banner.no-border {
	background-color: transparent;
	padding: 0px 7px;
}
.top-left-banner.no-border img, .top-right-banner.no-border img {
	width: 90px; 
	height: 40px;
	object-fit: contain;
}
.top-right-banner.no-border.max-series-logo img {
	width: 140px;
}

.pricematch img {
	position: relative;
    top: -2px;
    width: 1.66rem;
    margin-right: 2px;
    mix-blend-mode: darken;
	vertical-align: middle;
}

.pricematch p strong {
	font-weight: bold;
    color: #003d82;
}

.pricematch p {
	color: #3198D3;
}

.nav-list {
	list-style: none;
	padding: 0rem;
}

.nav-list li {
	border-bottom: 1px solid #dadada;
    font-size: 1.15em;
}

.nav-list li a {
	display: block;
	padding: 12px 20px;
}




/*! Shop CSS */

.my-4, .my-6 {
    border: 1px solid lightgrey;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 1rem;
}

div.space-x-1 .cursor-pointer {
	cursor: pointer;
    border: 1px solid lightgrey;
    border-radius: 4px;
    margin-bottom: 0;
    padding-left: 2rem;
    padding-right: 1rem;
}


.p-6 h1 {
    font-size: 1.2rem;
    text-transform: lowercase;
    font-weight: 500;
    position: absolute;
    top: .5rem;
    right: 2rem;
}

.p-6 p,#disc-com {
    font-weight: 300;
    font-size: .9rem;
    margin: 1.5rem 1.5rem 1.5rem 1.5rem;
}




.filter {
	margin: 3px;
}





#promo {
	background-color: #f5f5f7;
	color: rgba(0, 0, 0, .8);
	}
   .promomsg {
	align-items: center;
	text-align: center;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
	font-family: 'Karla', Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
   }

   .promomsg p {
	/* 
	background-image: url("assets/img/open-icon.png");
	*/
	background-repeat: no-repeat;
	background-position: 56% 40%;
	background-size: 1.3rem;
	line-height: 3;
	margin: 0rem 0rem 1rem 0rem;
	}
   @media (min-width: 767px) {
	.collection {
	    grid-template-columns: repeat(2, 1fr);
	}

	.product {
		padding: 2rem;
	}
	.slider-container li .product {
		padding: 2rem 2rem 0rem 0rem;
	}
  }

  @media (min-width: 1025px) {
	.collection,.collection.collection-small-2 {
	  grid-template-columns: repeat(3, 1fr);
	}
	.collection.collection-small-3 {
		grid-template-columns: repeat(3, 1fr);
	  }
	  
  }
  @media (max-width: 32rem) {
	.filter-grid {
		grid-template-columns: repeat(4, 1fr);
	}
  }
  
	.filter {
		background-color: transparent;
		border: none;
	}
	.activeFilter {
		outline: 1px solid #0070c9;
		box-shadow: 0 1px 2px 0 #59abe3, 0 1px 5px 0 #59abe3;
		border-radius: 20px;
		}

/* CART CSS */
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-l {
    border-left-width: 1px;
}
.bottom-0 {
  bottom: 0px;
}
.flex {
  display: flex;
}
.max-w-xs {
    max-width: 20rem;
}

.my-4, .my-6 {
    margin-top: 1rem;
    /* margin-bottom: 1rem; */
}
.my-6 .material-but {
	margin-top: 0rem;
}
.relative {
    position: relative;
}
.spec-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    align-self: start;
    margin: 0rem auto;
    border-radius: 10px;
    line-height: 1;
    z-index: 99;
	background-color: white;
}
.spec-sticky img {
	width: 33%;
	max-width: 100%;
	margin: 0 auto;
	float: none;
}
/* ── Side Panels (Cart & Support) ── */

#cart, #support {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 26rem;
  padding: 0;
  z-index: 100000;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.side-panel-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}

.panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  color: #86868b;
  transition: background-color 0.2s, color 0.2s;
}

.panel-close:hover {
  background-color: #f5f5f7;
  color: #1d1d1f;
}

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.side-panel-footer {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

/* Cart empty state */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
}

.cart-empty p {
  margin: 0;
  font-size: 0.95rem;
  color: #86868b;
}

.cart-empty-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0071e3;
  text-decoration: none;
  transition: color 0.2s;
}

.cart-empty-link:hover {
  color: #0077ed;
  text-decoration: underline;
}

/* Cart totals */
.cart-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cart-totals-row span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1d1d1f;
}

.cart-total-price {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.btn-checkout {
  display: block;
  width: 100%;
  padding: 0.85rem;
  background: #1d1d1f;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.btn-checkout:hover {
  background: #333;
}

.btn-checkout:active {
  transform: scale(0.98);
}

.btn-checkout[disabled] {
  background: #d2d2d7;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Cart line items ---------- */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.cart-item:hover {
  border-color: #d8d8de;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -16px rgba(0, 0, 0, 0.18);
}

/* Image tile: soft gradient backdrop so the white-on-white robot render reads
   as a finished thumbnail. `object-fit: contain` keeps the whole robot in
   frame; inner padding gives it room to breathe. */
.cart-item__media {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  padding: 6px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f3f3f6 60%, #ececf1 100%);
  flex-shrink: 0;
}

.cart-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  /* `min-height: 0` lets the inner column actually shrink/grow inside the
     fixed-height grid track instead of overflowing the tile. */
  min-height: 0;
}

.cart-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* Reserve a row height matching the remove button so a missing preorder
     pill doesn't make the name shift up against the top edge. */
  min-height: 24px;
}

.cart-item__name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #1d1d1f;
  text-decoration: none;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.cart-item__name:hover {
  color: #0071e3;
}

.cart-item__preorder {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.14);
  color: #1f7a3a;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  white-space: nowrap;
}

.cart-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Pin the qty + price row to the bottom of the body so the layout reads
     the same whether or not a preorder pill is present. */
  margin-top: auto;
}

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: #f5f5f7;
  border-radius: 10px;
}

.cart-item__qty-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #1d1d1f;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-item__qty-btn:hover {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cart-item__qty-btn:active {
  transform: scale(0.96);
}

.cart-item__qty-num {
  min-width: 1.75rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
}

.cart-item__price {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-item__remove {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -2px -4px -2px 0; /* optical: nudge into the corner without enlarging the row */
  border: none;
  background: transparent;
  color: #a1a1a6;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-item__remove:hover,
.cart-item__remove:focus-visible {
  background: #f5f5f7;
  color: #1d1d1f;
  outline: none;
}

.cart-item__remove svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* Support panel */
.support-subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: #86868b;
}

.support-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.support-card:hover {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.support-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  color: #1d1d1f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.support-card-text {
  flex: 1;
  min-width: 0;
}

.support-card h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1d1d1f;
}

.support-card p {
  margin: 0.125rem 0 0;
  font-size: 0.8rem;
  color: #86868b;
}

.support-card-arrow {
  flex-shrink: 0;
  color: #c7c7cc;
  transition: color 0.2s, transform 0.2s;
}

.support-card:hover .support-card-arrow {
  color: #86868b;
  transform: translateX(2px);
}
.my-4{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
  margin-top: 1rem;
}

.my-6 {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 10px;
	margin-top: 1rem;
}

.my-6 h3, .my-6 h2 {
	margin: .5rem;
}
.space-x-1 .w-4 {
  margin: auto;
}
.space-x-1 .cursor-pointer {
  height: 20px;
  width: 20px;
}
.p-6 h2, .p-6 h3 {
  font-size: 16px;
}


#slide1 .top-left-banner {
	left: 149px;
}

.also-bought {
	background: #ffffff;
	padding: 1rem;
	border-radius: 0px;
	color: black;
}

.also-bought h2 a {
	color: black;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.left-overhang img {
	border-radius: 0px
}

.nav-list, div.pricematch, .checkoutBtn {
	display: none;
}

.pillButton {
	width: 200px;
	height: 40px;
	border: 5px black;
	background-color: black;
	color: white;
	border-radius: 50px;
}
.pillButton {
	padding: .5rem 1rem;
}

.pillButton:hover {
	background-color: rgb(202, 202, 202);
	color: #000;
	transition: .5s;
}

.pillButton p {
	margin: 0;
}

/* PRODUCT TITLE BANNER HEADER */
body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: visible;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: #1d1d1f;
}

#site-content {
	flex: 1;
}

.productnav {
	display: block;
	max-width: 1920px;
    margin: auto;
}

.productname h1 {
    font-size: 1.5rem;
	font-weight: 500;
}

.productname {
	padding-left: 10px;
}

/* Article Template */
.article-template h2 {
	margin-top: 3rem;
}

.article-template a, .dotted, .dashlink {
	border-bottom: 2px dotted rgb(26,115,232);
}

.article-template img {
	width: auto;
	display: block;
	margin: 0rem auto;
}

.article-title {
	padding: 2rem;
	background-color: black;
	color: white;
}
/* end of article template */
#content.grid-container, #content.grid-container .cell {
	overflow: visible;
}

#content h4 {
	margin-top: -1rem;
    font-size: 1.3rem;
}

#content a, .bluelink, a.bluelink {
	color: #2997ff;
	border-bottom: none;
    transition: border-color 0.15s ease 0s, background-image 0.15s ease 0s, color 0.15s ease 0s, background-size 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	background-repeat: no-repeat;
    background-size: 100% 0em;
    background-position: 0px 100%;
    text-decoration: none;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: transparent;
    cursor: pointer;
}
.bluelink:hover {
	border-bottom: 2px solid;
	border-bottom-color: rgb(25, 103, 210);
}
#content .product-image a {
	color: transparent;
}
#differences a.bluelink {
	color: black;
	border-color: #2997ff;
}
#content figure {
	display: block;
	max-width: 750px;
	margin: auto;
}

#content figure video, #content figure img, .article-template figure img {
	margin-bottom: .5rem;
	width: 100%;
}

.article-template figure {
	max-width: 600px;
	margin: 0rem auto;
}

figure figcaption {
	margin-top: 1rem;
	font-size: 1.2rem;
	font-weight: 500;
}

td {
	height: 4rem;
	width: 50%;
	padding: .5rem;
	}
	
	.comparision table thead tr th h5 {
	margin: 0rem;
	}
	
	tr:nth-child(2n){
	background-color: #f2f2f2;
	}
	
	table img {
	  max-width: 25px;
	}
	
	#compare-specs table tr td {
		width: 33.3333%;
	}
	
	@media screen and (max-width: 64em) {
	thead tr th h4 {
		text-align: left;
		font-size: 20px;
	}
	}
	
	table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1rem;
	border: 0px;
	}
	
	.specs-table {
		table-layout: fixed;
	}
	
	th,td {
		word-wrap: break-word;
		border: 0px;
	}
	
	table.comparision thead {
	background-color: transparent;
	}
	
	thead th {
	padding: 0.5rem 0.625rem 0.625rem;
	font-weight: 700;
	text-align: left;
	}
	
	#compare-specs table.comparision.performance tr td {
	width: 33.3333%;
	border: 0px;
	}

.sticky {
    position: sticky;
    top: 2rem;
    left: 0;
    width: 80%;
    max-width: 100vw;
    overflow-x: visible;
    background: white;
    align-self: start;
    background-color: #f2f2f2;
    padding: 1rem;
}


.sticky img {
	max-width: 85%;
}

.sticky button {
	display: block;
	line-height: 1.5rem;
	background-color: transparent;
	border: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.sticky button.highlight {
	color: rgb(25,103,210)!important;
	background-color: transparent!important;
	box-shadow: none!important;
}


#stickynav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
	z-index: 500;
	overflow-x: visible;
	background: white;
	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.15);
}

.slidernav {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;

	overflow: hidden;
	overflow-x: hidden;
}
/* Hide scrollbar for Chrome*/
.slidernav::-webkit-scrollbar {
	display: none;
}

.alsoviewed .cell img {
	padding: .5rem;
}
.alsoviewed .cell {
	position: relative;
}

.alsoviewed a h4 {
	font-weight: 600;
	padding: 0.5rem;
    font-size: 1.2rem;
}

/* Hide scrollbar for IE, Edge and Firefox */
.slidernav {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

#trust {
    position: absolute;
    bottom: 5%;
    right: 2%;
	display: inline-block;
    vertical-align: middle;
	width: auto;
    max-width: 100%;
    height: auto;
}
#authorized-dealer {
    position: absolute;
    top: 5%;
    right: 2%;
	display: inline-block;
    vertical-align: middle;
	width: 200px;
    max-width: 100%;
    height: auto;
}

.bigbuy button, .bigbuy a {
	display: block;
    font-size: 22px;
    padding: 0 40px;
    background-color: rgb(26,115,232);
    color: white;
    height: 56px;
	line-height: 56px;
    width: fit-content;
    border: none;
	cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
	margin: 8px 0; 
}

.landing-page-category .bigbuy button {
	background-color: black;
}

#topoffer .bigbuy button {
    margin-left: 25px;
}

#topoffer {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
	margin-right: 1rem;
	margin-left: auto;
}

#topoffer.pd-subnav-cta {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}

#bottomoffer {
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    padding-left: 50px;
    padding-right: 16px;
    background: #fff;
    z-index: 91;
    max-width: 100vw;
    display: flex;
    position: fixed;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
    
}
.leftoffer{
    display: block;
  }
.leftnav {
	padding-bottom: 1rem;
	margin-left: 2rem;
}
.leftnav button, .pill-div button, .leftnav a{
    color: black;
    background-color: #f2f2f2;
    padding: 8px 18px;
    border: 0;
    position: relative;
    margin-right: 8px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 16px;
    max-height: 32px;
}
#refurb-selector.pill-div button {
	margin: .25rem;
	font-size: 1rem;
}
#refurb-selector.pill-div button:hover {
	cursor: pointer;
}
#refurb-selector ul {
	font-size: 1rem;
    line-height: 1.5;
}
.flex-center {
	display: flex;
    flex-wrap: inherit;
    justify-content: center;
    align-content: center;
}

button.circle-button {
	background: rgb(26,115,232);
    border-radius: 3em;
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    width: 40px;
	height: 40px;
    border: none;
    font-size: 30px;
	padding: 0rem;
}
button.circle-button:hover {
	cursor: pointer;
}

.also-need p {
    font-size: 20px;
    line-height: 1.2;
    margin-left: 1rem;
}
.formstackBody {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.formstackFrame {
	width: 100%;
	height: 650px;
	border: none;
	overflow: hidden;
}

.price {
    font-size: 1.3rem;
    margin-top: 10px;
}

.freeship {
	float: right;
	margin-left: .5rem;
    font-size: .8rem;
    margin-top: .3rem;
	padding-top: 4px;
    color: grey;
}
.bigbuy button.sold-out-button {
	background-color: grey;
	cursor: default;
}
span.regprice {
    margin-left: .5rem;
    text-decoration-line: line-through;
}

span.from {
    color: grey;
    margin-right: .5rem;
}

.bottom-left-banner.authorized-dealer {
	max-width: 200px;
}
.icon-banner {
	max-width: 140px;
    background: none;
}
.best-award {
	margin-left: 1rem;
  }
  /* Mobile Only */
@media only screen and (max-width: 600px) {
	#cart, #support {
	  padding: 1rem;
	  max-width: calc(100% - 2rem);
	}
	#authorized-dealer {
		display: none;
	}
	.bigbuy button, .bigbuy a {
	  height: 45px;
	  line-height: 45px;
  }
  #trust {
	width: 275px;
  }
  .bottom-left-banner.authorized-dealer, .top-right-banner.authorized-dealer, .bottom-right-banner.proline {
	max-width: 135px;
  }
  #drop-links a {
    padding: 0.7rem 0rem;
}
  .best-award {
	margin-left: 0rem;
  }
  .bottom-right-banner.proline {
	bottom: 15px;
	right: 10px;
  }
  #mainproduct h3 {
	margin: 1rem;
  }
.icon-banner {
	max-width: 100px;
}

  }
/* Tablet Only  / Medium Only */
@media screen and (min-width: 48em) and (max-width: 62.56em) {
	.promo-icons {
		margin-left: 3rem;
		}
}
/* Mobile and Tablet Sizes */
@media screen and (max-width:62.56em) {
	.hide-for-small {
		display: none!important;
	}
	#bottomoffer {
		padding-left: 1rem;
	}
	.price {
		font-size: 1.3rem;
	}
	.freeship {
		padding-top: 0px;
		float: right;
		margin-left: 0.5rem;
		font-size: .8rem;
		margin-top: 0.6rem;
		color: grey;
	}
	.side-banner {
		display: none;
	  }
	#refurb-selector.pill-div button {
	margin: 0.25rem;
	font-size: .8rem;
	}
	.grid-padding {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.grid-container p, .grid-container ul, .grid-container ol {
		font-size: 16px;
	}
}
@media screen and (min-width:62.56em) {
	.hide-for-large {
		display: none!important;
	}
	.productnav {
		display: flex;
	} 
}
/* ADD XLARGE */

@media screen and (min-width:90em) {
	.grid-x>.xlarge-1,
	.grid-x>.xlarge-10,
	.grid-x>.xlarge-11,
	.grid-x>.xlarge-12,
	.grid-x>.xlarge-2,
	.grid-x>.xlarge-3,
	.grid-x>.xlarge-4,
	.grid-x>.xlarge-5,
	.grid-x>.xlarge-6,
	.grid-x>.xlarge-7,
	.grid-x>.xlarge-8,
	.grid-x>.xlarge-9,
	.grid-x>.xlarge-full,
	.grid-x>.xlarge-shrink {
		-webkit-flex-basis: auto;
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
  }
  
  @media screen and (min-width:120em) {
	.grid-x>.xxlarge-1,
	.grid-x>.xxlarge-10,
	.grid-x>.xxlarge-11,
	.grid-x>.xxlarge-12,
	.grid-x>.xxlarge-2,
	.grid-x>.xxlarge-3,
	.grid-x>.xxlarge-4,
	.grid-x>.xxlarge-5,
	.grid-x>.xxlarge-6,
	.grid-x>.xxlarge-7,
	.grid-x>.xxlarge-8,
	.grid-x>.xxlarge-9,
	.grid-x>.xxlarge-full,
	.grid-x>.xxlarge-shrink {
		-webkit-flex-basis: auto;
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
  }
  
  
  
  @media screen and (min-width:90em) {
	.grid-x>.xlarge-auto {
		-webkit-flex: 1 1 0px;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
		width: auto
	}
	.grid-x>.xlarge-shrink {
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto
	}
	.grid-x>.xlarge-1 {
		width: 8.33333%
	}
	.grid-x>.xlarge-2 {
		width: 16.66667%
	}
	.grid-x>.xlarge-3 {
		width: 25%
	}
	.grid-x>.xlarge-4 {
		width: 33.33333%
	}
	.grid-x>.xlarge-5 {
		width: 41.66667%
	}
	.grid-x>.xlarge-6 {
		width: 50%
	}
	.grid-x>.xlarge-7 {
		width: 58.33333%
	}
	.grid-x>.xlarge-8 {
		width: 66.66667%
	}
	.grid-x>.xlarge-9 {
		width: 75%
	}
	.grid-x>.xlarge-10 {
		width: 83.33333%
	}
	.grid-x>.xlarge-11 {
		width: 91.66667%
	}
	.grid-x>.xlarge-12 {
		width: 100%
	}
  }
  
  
  
  @media screen and (min-width:120em) {
	.grid-x>.xxlarge-auto {
		-webkit-flex: 1 1 0px;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
		width: auto
	}
	.grid-x>.xxlarge-shrink {
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: auto
	}
	.grid-x>.xxlarge-1 {
		width: 8.33333%
	}
	.grid-x>.xxlarge-2 {
		width: 16.66667%
	}
	.grid-x>.xxlarge-3 {
		width: 25%
	}
	.grid-x>.xxlarge-4 {
		width: 33.33333%
	}
	.grid-x>.xxlarge-5 {
		width: 41.66667%
	}
	.grid-x>.xxlarge-6 {
		width: 50%
	}
	.grid-x>.xxlarge-7 {
		width: 58.33333%
	}
	.grid-x>.xxlarge-8 {
		width: 66.66667%
	}
	.grid-x>.xxlarge-9 {
		width: 75%
	}
	.grid-x>.xxlarge-10 {
		width: 83.33333%
	}
	.grid-x>.xxlarge-11 {
		width: 91.66667%
	}
	.grid-x>.xxlarge-12 {
		width: 100%
	}
  }
  
  
  
  @media screen and (min-width:120em) {
	.xxlarge-pull-1,
	.xxlarge-pull-10,
	.xxlarge-pull-11,
	.xxlarge-pull-2,
	.xxlarge-pull-3,
	.xxlarge-pull-4,
	.xxlarge-pull-5,
	.xxlarge-pull-6,
	.xxlarge-pull-7,
	.xxlarge-pull-8,
	.xxlarge-pull-9,
	.xxlarge-push-1,
	.xxlarge-push-10,
	.xxlarge-push-11,
	.xxlarge-push-2,
	.xxlarge-push-3,
	.xxlarge-push-4,
	.xxlarge-push-5,
	.xxlarge-push-6,
	.xxlarge-push-7,
	.xxlarge-push-8,
	.xxlarge-push-9 {
		position: relative
	}
	.xxlarge-1 {
		width: 8.33333%
	}
	.xxlarge-push-1 {
		left: 8.33333%
	}
	.xxlarge-pull-1 {
		left: -8.33333%
	}
	.xxlarge-offset-0 {
		margin-left: 0
	}
	.xxlarge-2 {
		width: 16.66667%
	}
	.xxlarge-push-2 {
		left: 16.66667%
	}
	.xxlarge-pull-2 {
		left: -16.66667%
	}
	.xxlarge-offset-1 {
		margin-left: 8.33333%
	}
	.xxlarge-3 {
		width: 25%
	}
	.xxlarge-push-3 {
		left: 25%
	}
	.xxlarge-pull-3 {
		left: -25%
	}
	.xxlarge-offset-2 {
		margin-left: 16.66667%
	}
	.xxlarge-4 {
		width: 33.33333%
	}
	.xxlarge-push-4 {
		left: 33.33333%
	}
	.xxlarge-pull-4 {
		left: -33.33333%
	}
	.xxlarge-offset-3 {
		margin-left: 25%
	}
	.xxlarge-5 {
		width: 41.66667%
	}
	.xxlarge-push-5 {
		left: 41.66667%
	}
	.xxlarge-pull-5 {
		left: -41.66667%
	}
	.xxlarge-offset-4 {
		margin-left: 33.33333%
	}
  }
  
  
  
  @media screen and (min-width:90em) {
	.xlarge-offset-0 {
		margin-left: 0
	}
	.grid-margin-x>.xlarge-offset-0 {
		margin-left: calc(0% + .78125rem)
	}
  
	.xlarge-offset-half {
	  margin-left: 3%
  }
	.xlarge-offset-1 {
		margin-left: 8.33333%
	}
	.grid-margin-x>.xlarge-offset-1 {
		margin-left: calc(8.33333% + .78125rem)
	}
	.xlarge-offset-2 {
		margin-left: 16.66667%
	}
	.grid-margin-x>.xlarge-offset-2 {
		margin-left: calc(16.66667% + .78125rem)
	}
	.xlarge-offset-3 {
		margin-left: 25%
	}
	.grid-margin-x>.xlarge-offset-3 {
		margin-left: calc(25% + .78125rem)
	}
	.xlarge-offset-4 {
		margin-left: 33.33333%
	}
	.grid-margin-x>.xlarge-offset-4 {
		margin-left: calc(33.33333% + .78125rem)
	}
	.xlarge-offset-5 {
		margin-left: 41.66667%
	}
	.grid-margin-x>.xlarge-offset-5 {
		margin-left: calc(41.66667% + .78125rem)
	}
	.xlarge-offset-6 {
		margin-left: 50%
	}
	.grid-margin-x>.xlarge-offset-6 {
		margin-left: calc(50% + .78125rem)
	}
	.xlarge-offset-7 {
		margin-left: 58.33333%
	}
	.grid-margin-x>.xlarge-offset-7 {
		margin-left: calc(58.33333% + .78125rem)
	}
	.xlarge-offset-8 {
		margin-left: 66.66667%
	}
	.grid-margin-x>.xlarge-offset-8 {
		margin-left: calc(66.66667% + .78125rem)
	}
	.xlarge-offset-9 {
		margin-left: 75%
	}
	.grid-margin-x>.xlarge-offset-9 {
		margin-left: calc(75% + .78125rem)
	}
	.xlarge-offset-10 {
		margin-left: 83.33333%
	}
	.grid-margin-x>.xlarge-offset-10 {
		margin-left: calc(83.33333% + .78125rem)
	}
	.xlarge-offset-11 {
		margin-left: 91.66667%
	}
	.grid-margin-x>.xlarge-offset-11 {
		margin-left: calc(91.66667% + .78125rem)
	}
	.grid-y>.xlarge-1,
	.grid-y>.xlarge-10,
	.grid-y>.xlarge-11,
	.grid-y>.xlarge-12,
	.grid-y>.xlarge-2,
	.grid-y>.xlarge-3,
	.grid-y>.xlarge-4,
	.grid-y>.xlarge-5,
	.grid-y>.xlarge-6,
	.grid-y>.xlarge-7,
	.grid-y>.xlarge-8,
	.grid-y>.xlarge-9,
	.grid-y>.xlarge-full,
	.grid-y>.xlarge-shrink {
		-webkit-flex-basis: auto;
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
  }


  .eight-points {
    margin-bottom: 8%;
  }
  .four-points {
    margin-bottom: 4%;
  }
  .two-points {
    margin-bottom: 2%;
  }
  section#home-banners.grid-container.eight-points, .grid-container.eight-points {
    margin-bottom: 4%;
  }


.product-highlight .highlight-content {
	padding-top: 3rem;
	width: 100%;
	position: absolute;
}
.product-highlight .highlight-content.absolute-center {
	left: 50%;
    transform: translate(-50%, 0);
}

.product-highlight .highlight-content.right {
  padding-top: 7rem;
  position: absolute;
  left: 40%;
}
.text-container {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    margin: 0 auto;
  }
.product-highlight .highlight-content {
	padding-top: 3rem;
	position: absolute;
}


.title-container h2 {
    font-size: 4rem;
    font-weight: 800;
}

.grid-container.title-container {
    padding-bottom: 3rem;
}
/* HERO BANNER */
@media print, screen and (max-width:48em) {
	.product-highlight .highlight-content {
		padding-top: 1.8rem;
        margin-left: 1rem;
    }
	.product-highlight .highlight-content.right {
		padding-top: 1.5rem;
		position: absolute;
		left: .5rem;
	}
	
	.highlight-content.mobile-fix {
        position: relative;
    }
    .grid-container h2, .title-container h2 {
      font-size: 2rem;
  }
      .product-highlight .highlight-content {

        margin-left: 1rem;
    }

    .page-banner-two {
      height: 100px;
    }

     .grid-margin-x>.small-12 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: 1rem;
      }
    
    .orbit p {
      font-size: 1rem;
    }
    
    h4 {
      font-size: .9rem;
    }
    
    h2.slide-title {
      font-size: 1.8rem;
    }
    
    #promo-banner {
      font-size: .8rem;
      padding-left: .25rem;
    }

    .product-highlight .highlight-content  {
      padding-top: 3rem;
   }
   
	.grid-container .medium-heading {
		font-size: 1rem;
	}
	}

	@media only screen and (max-width: 600px) {
		.product-highlight .highlight-content {
		  padding-top: .5rem;
		}
		.small-offset-1 {
		  margin-left: 1rem;
	  }
	  .product-highlight .highlight-content {
		  margin-left: 0rem;
	  }
	  
	  }

.highlight {
	color: rgb(25,103,210)!important;
    background-color: rgb(232,240,254)!important;
    box-shadow: inset 0 0 0 1px rgb(25,103,210)!important;
}

.leftnav button:hover, #support-button, #cart-button, .material-but, .cursor-pointer {
		cursor: pointer;
}
.shadow{
		box-shadow: 0 0px 10px 0 rgba(0,0,0,.15);
}

.grid-container h4 {
    font-weight: 400;
	letter-spacing: 3px;
}
.grid-container h2 {
    font-weight: 800;
}
.grid-container p, .grid-container ul, .grid-container ol {
    letter-spacing: .5px;
    line-height: 1.7;
    font-size: 18px;
    font-weight: 400;
}
.button-btm a{
    background-color: transparent;
    color: black;
    border: 2px solid black;
    font-size: 1rem;
	padding: 1rem;
}

.button-btm a.button {
    margin: 1rem 0 1rem 0;
}

.button-btm a.white {
	border-color: white;
	color: white;
}

.button {
    display: inline-block;
    margin: 0 0.5rem;
    padding: 0.85em 1.5em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 0;
    transition: background-color .25s ease-out,color .25s ease-out;
    font-size: .9rem;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
}

.product-highlight .highlight-content.right-text {
    padding-top: 7rem;
    position: absolute;
    left: 60%;
}
@media print, screen and (max-width: 48em){
.product-highlight .highlight-content.right-text {
    padding-top: 1.5rem;
    position: absolute;
    left: 0.5rem;
}
}

.also-bought .grid-container {
	margin-bottom: 3rem;
}






/*
.grid-x div.cell:first-child img {
	float: right;
}
*/

#pgallery img {
	float: none;
}



.circle-content {
	color: black;
	float: left;
	line-height: 1.2;
	margin-top: -3em;
	padding-top: 50%;
	text-align: center;
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .5px;
}

.invert {
  filter: invert(100%);
}

.circle {
  position: absolute;
  z-index: 1;
  right: 10%;
  border: 2px solid rgb(47, 190, 233);
  background-color: transparent;
  opacity: 1;
  height: 160px;
  width: 160px;
  border-radius: 120px;
}

.circle.left {
left: 37%;
margin-top: 4%;
}

.grid-container .question h4, .grid-container .reviewContainer h4 {
	font-size: 1.3rem;
	margin-bottom: -0.5rem;
}
.grid-container .question, .grid-container .reviewContainer p {
	font-size: 1rem;
}
.grid-container .reviewContainer h4 {
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}

@media screen and (max-width:47.938em) {
    #promo-banner .grid-container .promo-details {
        font-size: .75rem;
        line-height: 1.1
}
.cell.statement h2 {
    font-size: 2rem;
    font-weight: 600;
}
.circle.product {
	display: none;
 }
.circle.left {
    right: 1.5rem;
    margin-top: -25px;
    border: none;
    left: 55%;
  }
	.productname h1 {
		font-size: 1.2rem;
		margin: .4rem 0 1rem 0;
	}

	.productname {
		margin-top: 0;
	}

	.promomsg {
		font-size: .8rem;
    }
	
    .promomsg p {
		line-height: 2;
		margin: 0rem;
	}
	.leftoffer {
		padding-top: 4px;
	}
	.leftnav {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		padding: 0 8px 8px 10px;
		align-items: center;
		margin-left: 10px;
} 


	#banner-banner h3 {
		font-size: 1rem;
	}

	h2 {
		margin-top: 3rem;
	}

	h3 {
		margin-bottom: 3rem;
	}
	.product__name h3 {
		margin-bottom: 0rem;
		font-size: 1.2rem;
	}
	#video   {
		padding-left: 0;
		padding-right: 0;
	}

	.questionContainer, .reviewContainer {
		padding: 1rem;
	}

	#questions h4 {
		font-size: 1.4rem;
		line-height: 1.2;
	}

		#questions p {
		font-size: .8rem;
	}

	#reviews {
		margin-top: 2rem;
	}

	#reviews h4, #reviews h5 {
		font-size: 1rem;
	}

	.slidernav {
		overflow-x:scroll;
	}
	
	.filter-grid, .filter-grid-3 {
		margin: 1rem auto;
		grid-gap: 5px;
	}
	.filter-image img {
		width: 35px;
	}
	.grid-container .filter-grid .filter-name p, .grid-container .filter-grid-3 .filter-name p {
		font-size: .7rem;
		line-height: 1;
		color: #000000;
	}
}

#reviews .grid-container{
    padding: 1rem;
}
    .review, .dealer-section {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f2f2f2;
border-radius: 0px;
padding: 24px;
margin-bottom: 40px;
}

.review span svg {
margin-right: 4px;
}

.review p {
font-size: 16px;
line-height: 1.5;
margin: 0;
color: #4f4f4f;
}

.review p:last-child {
margin-bottom: 0;
}
.topright {
	position: absolute;
	top: 0;
	right: 0;
	width: 35%;
  }
.product-image {
	width: auto;
}
@media screen and (max-width: 63.99875em) {
	.show-for-large {
	  display: none !important; } 
	  .show-for-large-navbtn {
		display: none;
	  }
	  .grid-x .product-image {
		order: 1;
	  }
	  .grid-x .product-text {
		order: 2;
	  }
	}

/* LAZYLOAD Fade in CSS */
img.lazy {
opacity: 0;
}
img:not(.initial) {
transition: opacity .5s;
}
img.initial,
img.loaded,
img.error {
opacity: 1;
}

img:not([src]) {
visibility: hidden;
}
/* end of lazyload fade in */

.blueline {
	color: #0a92ef;
	text-decoration: none;
}

.feature-list {
	line-height: 1.5rem;
	padding: 0rem 1.5rem;
	font-size: 1rem;
}

.feature-list li {
	margin: 1rem 0rem;
}

.question h4 {
	background-color: #f2f2f2;
	margin: 0;
	padding: 1rem .5rem;
	box-shadow: -0.15rem 0.15rem 0.6rem rgba(0,0,0,.2);   
}

.question p {
	padding: .5rem 1rem .5rem 1rem;
	box-shadow: -0.15rem 0.15rem 0.6rem rgba(0,0,0,.2);
	width: 80%;
	margin-left: 3rem;
}

.question h4::before {
content: 'Q';
font-size: 1.75rem;
color: #c3c1c0;
font-weight: 700;
line-height: 1rem;
margin-right: 1.5rem
}

.question p::before {
content: 'A';
font-size: 1.75rem;
color: #c3c1c0;
font-weight: 700;
line-height: 1rem;
margin-right: 1.5rem
}

.top-features .cell img {
    margin: 0 auto 1rem;
}

.promo-icons {
	float: left;
	height: 30px;
	width: 30px;
	margin: 0rem 1rem 0rem 0rem;
	opacity: .8;
}
.why-buy .promo-icons {
	margin: 1rem 1rem 0rem 0rem;;
}

.special-offers .promo-icons {
	margin: 0rem 1rem 0rem 0rem;
}

.why-buy p {
	margin-bottom: 0rem;
	line-height: 1.2;
	padding-left: 5px;
}

.save {
	display: inline-block;
	background-color: #d14124;
	color: white;
	padding: 3px;
	margin-top: 4px;
}

.product__price  .save {
	padding: 5px 3px 0px 5px;
    margin-top: 4px;
    height: 25px;
    font-size: 1.2rem;
}

#mainproduct h3 {
	letter-spacing: .5px;
    line-height: 1.7;
    font-size: 18px;
    font-weight: 400;
}

#mainproduct h3.product-subtitle, .product-subtitle {
	font-size: 1.5rem;
	font-weight: 800;
}

#mainproduct .product-name {
	margin: 0.15rem 0rem;
}
.feature-div .compare-text h2 {
	text-align: center;
}
.blackbox {
	background: rgb(69,69,69);
	color: white;
	padding: .15rem .5rem;
}

.black-bold {
	color: black;
	font-weight: 800;
}
.greybox {
	background: #DCDCDC;
	color: black;
	padding: .15rem .5rem;
	font-weight: 800;
}

.green {
	color: green;
}

.below-price {
	display: flex;
	margin-bottom: 1rem;
}

.product-margin {
	margin-left: .75rem;
}

.product-category-data .image-container {
	position: relative;
	overflow: hidden;
  }
  
  .product-category-data .hover-image {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
  }
  
  .product-category-data .image-container:hover .hover-image {
	opacity: 1;
  }
  
  .product-category-data .image-container:hover .default-image {
	opacity: 0;
  }
  
  .product-category-data .image-container:hover .top-left-banner,
  .product-category-data .image-container:hover .top-right-banner {
	display: none;
  }

  .black-box {
	color: white;
	background-color: black;
	text-align: center;
	font-weight: 600;
	padding: 5px;
	max-width: 200px;
	margin: 0rem .25rem;
  }

  .black-box h3 {
	margin: 1rem 0rem 0.5rem;
	font-weight: 600;
  }

  .black-box h4 {
	margin: 0rem 0rem 1rem;
  }
  .coupon .black-box {
	height: 100%;
  }
  
.cta-container {
	background-color: black;
	padding: 4rem 0rem;
	color: white;
  }

  #next .button-btm .material-but {
    width: 200px;
}

.overall-reviews button {
	display: block;
    margin-top: 0rem;
    text-decoration: underline;
	background: none;
    border: none;
	cursor: pointer;
}

.product-help-grid {
	display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem;
}

.product-help-grid img {
	max-width: 340px;
	margin: auto;
}

.coupon {
	background-color: #f2f2f2;
}

.modal {
    display: none;
    position: fixed;
    z-index: 99;
    padding-top: 3rem;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, .4);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
	margin-bottom: 6rem;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: .4s;
    animation-name: animatetop;
    animation-duration: .4s;
}
.modal-content .cell img {
	margin: 2rem 0rem;
}

.modal-footer,
.modal-header {
    background-color: #fff;
    color: #fff;
}

.modal-header {
    padding: 0 1rem 1rem 0;
}

.modal-body {
    padding: 3px 0;
}

.modal-footer {
    padding: 2px 16px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    border: 1px solid #888;
    max-width: 1000px;
    overflow: auto;
}

.close-button {
    color: #aaa;
    float: right;
    font-weight: bold;
    cursor: pointer;
	position: absolute;
	top: 1rem;
	right:1rem;
	font-size: 4rem;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#modalBody {
    margin-top: 20px;
}

.modal-item {
    margin-bottom: 20px;
}

.modal h2 {
    margin-top: 0;
}

.modal h3 {
    margin-top: 0;
	margin-bottom: 1rem;
}

.modal p {
    margin-bottom: 0;
}

.four-points-top {
	margin-top: 4%;
}

#openModal {
	cursor: pointer;
	border: none; 
	background: none;
	color: black;
	padding: 0rem;
}
.why-buy #openModal {
	text-align: left;
}

#openModal img {
	height: 16px;
	width: 16px;
}

.featured-robots {
	background-color: #f2f2f2;
	padding: 1rem;
	margin-bottom: .5rem;
}

.featured-robots img {
	margin: auto;
}

#link-nav {
	max-width: 1200px;
	text-align: center;
	margin: 1rem auto;
}
#link-nav a, #category-nav {
	cursor: pointer;
}
#link-nav .cell img {
	float: none;
}
.landing-page-category {
	max-width: 1600px;
	margin: 1rem auto;
}

.grid-container .category-slider p .save, .grid-container .category-slider p .fullprice, .grid-container .category-slider p .currentprice {
	line-height: 1rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.swiffy-slider .product__price p {
    font-family: sans-serif;
    font-size: 1.6rem;
}

.swiffy-slider .product__name p {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.swiffy-slider .product__price p {
    font-family: sans-serif;
    font-size: 1.6rem;
}

.swiffy-slider .slider-container p {
	line-height: 1.15;
	font-weight: 200;
}

.collection-video {
	padding: 1rem;
}
.collection-video img {
	display: block; aspect-ratio: 320/180; max-width: 320px; margin: 2rem auto;
}

#feature-set table figure img {
	max-width: 100%;
}

.auto-aspect {
	aspect-ratio: auto!important;
}

span.circlenum {
	background: black;
	border-radius: 0.8em;
	-moz-border-radius: 0.8em;
	-webkit-border-radius: 0.8em;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	line-height: 1.6em;
	margin-right: 15px;
	text-align: center;
	width: 1.6em; 
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }

  @media (max-width: 767px) {
	.swap-mobile {
	  flex-direction: column-reverse;
	}
  }
  
  @media (min-width: 768px) {
	.swap-mobile {
	  flex-direction: row;
	}
  }
  
  .swap-mobile {
	display: flex;
	flex-wrap: wrap;
  }

  .swap-mobile-child {
	flex-basis: 100%;
  }



  sup.sup-cross {
	font-size: .8rem;
  }

  .feature-description {
	max-width: 800px;
  }

  .compare-item-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
  }
  .compare-item-grid .vs {
    margin-top: auto;
    text-align: center;
  }

  .icon-img {
	max-width: 100px;
	display: block;
	margin: auto;
  }
  .flex-side-by-side {
	display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  }
  .accolades {
	background-color: white;
	color: black;
	padding: 1rem 0;
	}
  .accolades img {
	width: auto;
  }
	.accolades h3 {
	font-size: 2.5rem;
	font-weight: 600;
  }
  
  .accolades h3 a {
	color: black;
	text-decoration: solid underline black 3px;
	-webkit-text-underline-offset: 4px;
	text-underline-offset: 4px;
  }

  #table-of-contents a {
	color: black;
	border: none;
  }
  #table-of-contents a:hover {
	color: #2997ff;
  }
.width-auto img{
	width: auto;
	margin: auto;
	display: block;
}

.no-style-button {
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
}



.wistia {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.wistia img {
    width: 100%;
    top: 0; /* Change this for different ratio than 16:9 */
    left: 0;
    opacity: 0.7;
}
.wistia .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.8 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.wistia .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.wistia img,
.wistia .play-button {
    cursor: pointer;
}
.wistia img,
.wistia iframe,
.wistia .play-button,
.wistia .play-button:before {
    position: absolute;
}
.wistia .play-button,
.wistia .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.wistia iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.top-left-banner.no-border.also-viewed-award {
	top: -10px;
}
.top-left-banner.no-border.also-viewed-award img {
	width: 120px;
	height: 120px;
}

.compare-table {
	border: 4px solid #aaa;
	padding: 0.5rem 2rem;
}
.compare-table .cell h3 {
	font-weight: 800;
}
.compare-table ul {
	list-style: none; /* Remove default list bullets */
	padding-left: 20px; /* Add left padding to create space for the bullets */
	margin: 0.8rem 1.3rem;
}

/* Apply styles to the <li> elements */
.compare-table li {
	margin-bottom: 1rem; /* Add bottom margin to space out list items */
}
.compare-table li::before {
	content: "";
	width: 0.3125rem;
	height: 0.3125rem;
	position: absolute;
	margin-top: 0.6875rem;
	margin-left: -0.8em;
	border-radius: 50%;
	background: #2997ff;
	margin-left: -1.25rem;
	background-image: none;
}

.grid-container .h1-title {
	margin: 0.67em 0;
	font-size: 2.7rem;
	font-weight: 600;
	text-transform: none;
    letter-spacing: 0;
  }

  .top-left-banner.no-border.category-award img {
	width: 100px;
	height: 100px;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}
.grid-2.feature-table {
    margin-top: 1rem;
    padding: 1rem;
    grid-gap: 2rem;
}
.grid-2.feature-table img {
    margin: auto;
    max-width: 25px;
}
.grid-2.feature-table div {
    padding: 1rem;
    background-color: rgba(0,0,0,.05)
}

  @media (max-width: 768px) {
	.grid-container .h1-title {
	font-size: 1.5rem;
	}
	.grid-container .h1-title sup {
		font-size: 1rem;
	}
	.grid-container #main-title h2 {
		font-size: 1rem;
		margin-top: 0rem;
	  }
	.top-left-banner.no-border.also-viewed-award img {
		width: 60px;
		height: auto;
	}
	.compare-table {
		padding: .5rem;
	}
	.grid-2.feature-table {
		padding: 0rem;
		grid-gap: 0.5rem;
	}
	.grid-2.feature-table div {
		padding: 1rem 0.5rem;
	}
  }

  /* Small screens (480px and below) */
	@media (max-width: 480px) {
	/* Your CSS styles for small screens go here */
		.responsive-size-premier {
			width: 60px;
		}
		.top-left-banner.no-border.also-viewed-award img {
			width: 50px;
			height: 50px;
		}
  }
  
  /* Medium screens (between 481px and 1280px) */
  	@media (min-width: 481px) and (max-width: 1280px) {
	/* Your CSS styles for medium screens go here */
	.responsive-size-premier {
		width: 85px;
	}
	.top-left-banner.no-border.also-viewed-award img {
		width: 80px;
		height: 80px;
	}
  }
  
  /* Wide screens (between 1281px and 1366px) */
 	 @media (min-width: 1281px) and (max-width: 1366px) {
	/* Your CSS styles for wide screens go here */
	.responsive-size-premier {
		width: 100px;
	}
	.top-left-banner.no-border.also-viewed-award img {
		width: 100px;
		height: 100px;
	}
  }
  
  /* Larger screens (1536px and above) */
  	@media (min-width: 1366px) and (max-width: 1536px) {
	/* Your CSS styles for larger screens go here */
	.responsive-size-premier {
		width: 110px;
	}
	.top-left-banner.no-border.also-viewed-award img {
		width: 100px;
		height: 100px;
	}
  }
  
  
  #overview {
	margin-top: 1rem;
}

.black {
	color: black;
	transition: color 350ms ease;
}

/* SPECTRALIGHT CODE */
.orange {
	color: #f68a1f;
	text-decoration: none;
  }

.xl-heading {
	font-size: 6vw;
}

.large-heading {
	font-size: 4vw;
}

.medium-heading {
	font-weight: 300;
	font-size: 1.75vw;
}
.review-heading-box {
	margin-top: 1rem;
}
.review-heading-box .review-l-heading {
	font-size: 3rem;
	font-weight: 800;
	margin: 0rem;
}
.review-heading-box .review-m-heading {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0rem;
}

.black-statement {
	background-color: black;
	color: white;
  }

  .statement.wide {
    margin-bottom: 3rem;
    padding-bottom: 8rem;
    padding-top: 6rem;
}

.statement h2 {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 2.5rem;
}

.statement h3 {
	font-size: 2rem;
	font-weight: 800;
}


.navigation-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	background: black;
	text-align: left;
	width: 100%;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.25rem;
	position: relative;
	transform: scale(1,1);
	margin-bottom: 0.5rem;
	color: white;
  }
  
  
  
.section-grey {
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
}
.quote {
    padding: 40px;
    background-color: #f7f7f7;
    -moz-border-radius: 227px;
    -webkit-border-radius: 227px;
    border-radius: 227px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    max-width: 250px;
    max-width: 250px;
    text-align: center;
}

.product-card {
	position: relative;
	background-color: white;
	color: black;
	border-radius: 1rem;
	transition: transform 1s cubic-bezier(.165,.84,.44,1),border-radius 1s cubic-bezier(.165,.84,.44,1);
	box-shadow: 2px 4px 12px rgba(0,0,0,.08);
}
.grid-x .product-card {
	margin-bottom: 2rem;
}
.product-card:hover {
	box-shadow: 2px 4px 16px rgba(0,0,0,.16);
	transform: scale3d(1.01,1.01,1.01)
}
.swiffy-slider .product-card:hover {
	transform: none;
}
.product-card .product-card-img {
	max-width: 1200px;
	width: 100%;
	position: relative;
	bottom: 0;
	z-index: 1;
}
.product-card .product-card-content {
	position: relative;
	padding: 3vw;
	z-index: 2;
}
.product-card .product-card-absolute {
	position: absolute;
	height: 100%;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.product-card .knowledge {
	padding: 1vw;
}
.product-card-dot {
align-items: center;
background-color: black;
border-radius: .625vw;
display: flex;
height: 1.2499999999vw;
justify-content: center;
left: 2.2916666665vw;
position: absolute;
top: 2.0833333332vw;
transition: transform .9s cubic-bezier(.165,.84,.44,1);
width: 1.2499999999vw;
will-change: transform;
z-index: 3;
}
.product-card-dot-arrow {
opacity: 0;
overflow: hidden;
transform: translate3d(-100%,0,0);
transition: opacity .1s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1);
width: .9722222222vw;
will-change: opacity,transform;
}
.product-card-dot-arrow path{
	fill: white;
}
.product-card:hover .product-card-dot {
transform: scale(2);
}

.product-card:hover .product-card-dot-arrow, .product-card-dot-arrow.show-arrow {
opacity: 1;
transform: scale(.5);
transition: opacity .2s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1);
}
.small-img .product-card-content img, .original-size-img {
    display: block;
    width: auto;
    margin: 0rem auto;
}
.imagetext-circle {
    position: absolute;
    right: 10px;
    top: 0;
    width: 140px;
    height: 140px;
    background-color: #f68a1f;
    -moz-border-radius: 227px;
    -webkit-border-radius: 227px;
    border-radius: 227px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.imagetext-circle h2 {
    padding: 25px;
    color: #fff;
    font-family: 'Open Sans', 'HelveticaNeue-Light', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    line-height: 1.3em;
}
.right-nav-arrow {
    align-items: center;
    background-color: #030507;
    border-radius: 2.361111111vw;
    display: flex;
    height: 2.361111111vw;
    justify-content: center;
    margin-right: 1.3888888888vw;
    transition: background-color .3s ease;
    width: 2.361111111vw;
    will-change: background-color;
}
.right-nav-arrow-icon {
    fill: #f3f3f3;
    transition: fill .3s ease;
    width: 0.9763888888vw;
    will-change: fill;
}
.nav-arrow-container {
	color: black;
	align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: auto;
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.165,.84,.44,1),transform .6s cubic-bezier(.165,.84,.44,1);
    will-change: transform,opacity;
	margin-bottom: 1rem;
}
#main-title h1.xl-heading {
    letter-spacing: -4px;
    font-weight: 800;
}
@media (max-width: 1024px){
	.statement h3 {
		letter-spacing: .5px;
		line-height: 1.7;
		font-size: 18px;
		font-weight: 400;
	}
	.grid-container .knowledge h2 {
		font-size: 1rem;
	}
	.nav-arrow-container h3 {
		margin: 0rem;
		font-size: 1rem;
	}
	.right-nav-arrow {
		border-radius: 2rem;
		height: 2rem;
		width: 2rem;
	}
	.right-nav-arrow-icon  {
		width: 1rem;
	}
	.product-card-dot-arrow, .product-card-dot {
		display: none;
	}
	#main-title h1.xl-heading {
		letter-spacing: 0px;
		font-weight: 800;
	}
	#main-title.transparentbanner-title h1{
		margin-top: 3rem;
		font-size: 2rem;
	}
}

.nav-arrow-container.orange-arrow, .nav-arrow-container.blue-arrow {
	color: white;
}
.nav-arrow-container.orange-arrow:hover, .nav-arrow-container:hover {
	color: #f68a1f;
}

.orange-arrow .right-nav-arrow {
	background-color: #f68a1f;
}

.orange-arrow .right-nav-arrow-icon, .blue-arrow .right-nav-arrow-icon {
	fill: black;
}
.blue-arrow .right-nav-arrow {
	background-color: #2997ff;
}
.nav-arrow-container.blue-arrow:hover {
	color: #2997ff;
}
.product-card-dot.white-arrow {
	background-color: white;
	
}
.product-card-dot.white-arrow .product-card-dot-arrow path {
	fill: black;
}


.nav-arrow-container:hover .right-nav-arrow-icon {
    animation: navContactArrowHover .6s ease;
}
@keyframes navContactArrowHover {
	49% {
		opacity: 0;
		transform: translate3d(50%,0,0)
	}

	50% {
		opacity: 0;
		transform: translate3d(-50%,0,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}
.lines-animation {
    stroke: #f3f3f3;
    height: 19.4444444432vw;
    margin-bottom: 2.0833333332vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .8;
    position: absolute;
    width: 100%;
    will-change: opacity;
    }


.quote-large {
	margin: 3rem 0rem;
	padding: 2rem 2rem;
	border-radius: 16px;
	background: black;
	color: white;
}
.quote-large h4 {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0px;
	line-height: 1.5;
}
.quote-large p {
	margin-left: 2rem;
}
.text-indent {
	text-indent: -40px;
	padding-left: 40px;
}

.grid-padding {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.product-padding {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

#knowledgeWrapper img {
	width: auto;
	display: block;
	margin: 0rem auto;
}
#knowledgeWrapper .product-card {
	text-align: center;
	margin-bottom: 2rem;
}
.store-heading {
	margin-bottom: 2rem;
}
.store-heading h2 {
	margin-bottom: 0rem;
}

.store-heading.mainstore h1, .store-heading.mainstore h2 {
    margin: 0rem;
    font-weight: 800;
}
.content-heading h2, .content-heading h3 {
    margin: .5rem;
}

.grid {
	display: grid;
}
.relative {
	position: relative;
}
  /* Progress Circle */
.rating-circle {
	position: relative;
	max-width: 100px;
    margin: 0rem auto;
}
.rating-circle.absolute {
	position: absolute;
    bottom: 0;
    padding: 1rem;
}

.rating-circle text {
	position: absolute;
	font-weight: 600;
	font-size: 36px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
  .progress-circle {
	background-color: white;
	border-radius: 10rem;
	max-width: 100px;
	width: 95%;
	font-size: 18px;
  }
.u-absoluteCenter {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	}
.u-flexCenter {
	display: flex;
	align-items: center;
	justify-content: center;
	}
.u-offscreen {
	position: absolute;
	left: -999em;
	}
.demo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	}
.progress {
	transform: rotate(-90deg);
	}
.progress__value {
	stroke-dasharray: 0;
	stroke-dashoffset: 0;
	}
@-webkit-keyframes progress {
	from {
		stroke-dashoffset: 339.292;
	}
	to {
		stroke-dashoffset: 0;
	}
	}
@keyframes progress {
	from {
		stroke-dashoffset: 339.292;
	}
	to {
		stroke-dashoffset: 0;
	}
	}
::root {
	--val: 0;
	}



.percent {
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--val));
	}

.fifty {
	--val: 50;
	}

.sixty {
	--val: 60;
	}

.ninety {
	--val: 90;
	}
/* end Progress circle */

.review-header h2, .review-header h3 {
	margin: 0rem;
}

.bold-title .cell h3 {
	font-weight: 700;
}

.review-content {
	padding-top: 1rem;
	line-height: 1.5;
}

.review-content h3 {
	font-weight: 700;
}

.summary-div {
	padding: 1rem;
	border: 5px solid #f2f2f2;
	margin-bottom: 1rem;
	border-radius: 1rem;
}
.summary-div h3 {
	margin-top: 0rem;
}

.bluebox {
	display: inline-block;
	background: black;
    padding: 1rem 1rem 0rem;
    font-size: 3rem;
    color: white;
    font-weight: 800;
    line-height: 2rem;
	margin: 0rem;
	letter-spacing: -2px;
}

.large-quote {
background-color: #003d82;
color: white;
padding: 1rem;
border-radius: 1rem;
margin: 2rem 0rem;
}

.large-quote h2{
	text-align: center;
	font-size: 2rem;

}

.summary-list {
	list-style-type: none; /* Removes default bullet points */
	padding-left: 0; /* Adjusts padding for alignment */
}

.liked-list li::before {
	content: "\2713"; /* Unicode for check mark */
	font-weight: 800;
	color: green;
	padding-right: 10px;
}

.disliked-list li::before {
	content: "\2715"; /* Unicode for cross mark */
	font-weight: 800;
	color: red;
	padding-right: 10px;
}

.reviewer-img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.reviewer-text {
	margin-left: 10px;
	margin-top: 12px;
    font-size: 18px;
}

.grey-box {
	display: block;
	width: 100%;
	padding: 1rem 0rem;
	text-align: center;
	font-weight: 700;
	background-color: #f0f0f0;
}

.check-price {
	display: block;
	width: 100%;
	padding: 1rem 0rem;
	font-size: 18px;
	text-align: center;
	font-size: 700;
	background-color: #f0f0f0;
}

.check-price .cart {
	width: 18px;
	height: 18px;
	transform: none;
}

/* ---- Clear visual system: premium tech (large type, high-impact, Apple/Google-adjacent) ---- */
#site-content {
	--cr-display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#site-content .cr-page-hero,
#site-content .cr-section,
#site-content .cr-trust-strip,
#site-content .cr-footer-cta,
#site-content .cr-text-page-hero,
#site-content .cr-prose {
	font-family: var(--cr-display-font);
}

:root {
	--cr-surface: #f5f5f7;
	--cr-surface-elevated: #ffffff;
	--cr-surface-dark: #000000;
	--cr-text: #1d1d1f;
	--cr-text-muted: #6e6e73;
	--cr-border: rgba(0, 0, 0, 0.06);
	--cr-accent: #0071e3;
	--cr-accent-hover: #0077ed;
	--cr-section-y: clamp(4rem, 12vw, 9rem);
	--cr-prose-max: 46rem;
	--cr-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
	--cr-radius-lg: 1.25rem;
	--cr-radius-xl: 1.75rem;
	--cr-shadow-float: 0 32px 90px rgba(0, 0, 0, 0.16);
	--cr-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.reveal,
[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 1.75rem, 0) scale(0.985);
	transition:
		opacity 1s var(--cr-ease-out),
		transform 1.1s var(--cr-ease-out),
		filter 1s var(--cr-ease-out);
	will-change: opacity, transform;
}

.reveal.is-inview,
[data-reveal].is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	will-change: auto;
}

/* Image reveal: subtle zoom + desaturate → natural on scroll-in */
.cr-media-slot[data-reveal] img,
.cr-media-slot[data-reveal] picture {
	transform: scale(1.06);
	filter: saturate(0.9);
	transition:
		transform 1.4s var(--cr-ease-out),
		filter 1.2s var(--cr-ease-out);
	will-change: transform, filter;
}

.cr-media-slot[data-reveal].is-inview img,
.cr-media-slot[data-reveal].is-inview picture {
	transform: scale(1);
	filter: saturate(1);
	will-change: auto;
}

/* Staggered child reveals inside a parent [data-reveal] */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 1rem, 0);
	transition:
		opacity 0.9s var(--cr-ease-out),
		transform 0.9s var(--cr-ease-out);
}

[data-reveal-stagger].is-inview > * {
	opacity: 1;
	transform: none;
}

[data-reveal-stagger].is-inview > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-inview > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger].is-inview > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger].is-inview > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-stagger].is-inview > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-stagger].is-inview > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
	.reveal,
	[data-reveal],
	[data-reveal-stagger] > *,
	.cr-media-slot[data-reveal] img,
	.cr-media-slot[data-reveal] picture {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
		will-change: auto;
	}
}

.cr-page-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 2400 / 800;
	max-height: calc(100vh - var(--header-height, 50px));
	display: flex;
	align-items: flex-start;
	color: #fff;
	overflow: hidden;
	background: var(--cr-surface-dark);
	isolation: isolate;
}

/* Match hero box aspect to the responsive image variant swapped in by <picture> */
@media (max-width: 74.99em) {
	.cr-page-hero {
		aspect-ratio: 1600 / 900;
	}
}
@media (max-width: 47.99em) {
	.cr-page-hero {
		aspect-ratio: 900 / 1100;
		max-height: calc(100vh - 44px);
	}
}

.cr-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.cr-page-hero__media picture,
.cr-page-hero__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cr-page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: var(--cr-surface-dark);
	z-index: 0;
}

/* JS-driven parallax (reveal-on-scroll.js sets --cr-hero-parallax 0..1) */
.cr-page-hero__media[data-parallax] .cr-page-hero__bg {
	transform: translate3d(0, calc(var(--cr-hero-parallax, 0) * 8%), 0) scale(1.08);
	animation: none;
}

@keyframes cr-kenburns {
	from { transform: scale(1.1); }
	to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cr-page-hero__bg { animation: none; transform: none; }
	.cr-page-hero__media[data-parallax] .cr-page-hero__bg { transform: none; }
}

.cr-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.35) 45%,
			rgba(0, 0, 0, 0.55) 100%
		),
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.25) 55%,
			rgba(0, 0, 0, 0) 85%
		);
	pointer-events: none;
}

.cr-page-hero--light {
	color: var(--cr-text);
}

.cr-page-hero--light .cr-page-hero__overlay {
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.7) 0%,
			rgba(255, 255, 255, 0.35) 55%,
			rgba(255, 255, 255, 0) 85%
		);
}

.cr-page-hero--light .cr-btn--ghost {
	color: var(--cr-text);
	border-color: rgba(0, 0, 0, 0.25);
}

.cr-page-hero--light .cr-btn--ghost:hover,
.cr-page-hero--light .cr-btn--ghost:focus {
	border-color: rgba(0, 0, 0, 0.6);
	background: rgba(0, 0, 0, 0.04);
}

.cr-page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
	box-sizing: border-box;
}

.cr-page-hero__kicker {
	font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
	letter-spacing: -0.005em;
	font-weight: 500;
	opacity: 0.88;
	margin: 0 0 1rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.cr-page-hero__title {
	font-size: clamp(1.625rem, 4.5vw, 2.75rem);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 1rem;
	letter-spacing: -0.03em;
	max-width: 18ch;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

#site-content > .cr-page-hero:first-of-type .cr-page-hero__title {
	font-size: clamp(1.875rem, 5.5vw, 3.5rem);
	max-width: 14ch;
	line-height: 1.02;
	font-weight: 600;
}

.cr-page-hero__subtitle {
	font-size: clamp(1rem, 1.7vw, 1.25rem);
	line-height: 1.45;
	font-weight: 400;
	max-width: 32rem;
	margin: 0 0 1.75rem;
	opacity: 0.92;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.cr-page-hero--light .cr-page-hero__kicker,
.cr-page-hero--light .cr-page-hero__title,
.cr-page-hero--light .cr-page-hero__subtitle {
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}

.cr-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	align-items: center;
}

.cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 40px;
	padding: 0.55rem 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: -0.01em;
}

.cr-btn:focus { outline: none; }
.cr-btn:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 3px;
}

.cr-btn--primary {
	background: #fff;
	color: var(--cr-surface-dark);
}

.cr-btn--primary:hover,
.cr-btn--primary:focus {
	background: #f5f5f7;
	color: #000;
	transform: scale(1.02);
}

.cr-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}

.cr-btn--ghost:hover,
.cr-btn--ghost:focus {
	border-color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.02);
}

.cr-section {
	padding: var(--cr-section-y) 0;
}

.cr-section--muted {
	background: var(--cr-surface);
}

.cr-section--dark {
	background: var(--cr-surface-dark);
	color: #f5f5f5;
}

.cr-section--dark .cr-lead,
.cr-section--dark p {
	color: rgba(255, 255, 255, 0.82);
}

.cr-section__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	padding-right: clamp(1rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

.cr-heading-xl {
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.035em;
	margin: 0 0 1.25rem;
}

.cr-heading-lg {
	font-size: clamp(1.5rem, 3.5vw, 2.375rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 1rem;
}

.cr-lead {
	font-size: clamp(1.0625rem, 1.75vw, 1.3125rem);
	line-height: 1.58;
	color: var(--cr-text-muted);
	margin: 0 0 1.5rem;
	max-width: var(--cr-prose-max);
	letter-spacing: -0.012em;
}

.cr-media-slot {
	position: relative;
	width: 100%;
	border-radius: var(--cr-radius-xl);
	overflow: hidden;
	background: #0c0c0e;
	border: none;
	box-sizing: border-box;
	box-shadow: var(--cr-shadow-soft);
	isolation: isolate;
}

.cr-media-slot--flush {
	border-radius: 0;
	box-shadow: none;
}

.cr-media-slot--wide {
	aspect-ratio: 21 / 9;
}

.cr-media-slot--landscape {
	aspect-ratio: 16 / 9;
}

.cr-media-slot--square {
	aspect-ratio: 1 / 1;
}

.cr-media-slot--portrait {
	aspect-ratio: 3 / 4;
}

.cr-media-slot picture {
	display: block;
	width: 100%;
	height: 100%;
}

.cr-media-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-media-slot__label {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 2rem);
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(28, 28, 30, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	pointer-events: none;
	text-align: center;
}

.cr-media-slot__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	width: clamp(3.25rem, 6vw, 4.5rem);
	height: clamp(3.25rem, 6vw, 4.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
	transition: transform 0.35s var(--cr-ease-out), background 0.2s;
	pointer-events: none;
}

.cr-media-slot__play svg {
	width: 42%;
	height: 42%;
	transform: translateX(1px);
}

.cr-video-card:hover .cr-media-slot__play,
.cr-video-card:focus-within .cr-media-slot__play {
	transform: translate(-50%, -50%) scale(1.06);
	background: #fff;
}

/* Subtle sheen when a media slot is inside a card that is hovered */
.cr-store-card:hover .cr-media-slot img,
.cr-store-card:focus .cr-media-slot img,
.cr-home-model-card:hover .cr-media-slot img,
.cr-home-model-card:focus .cr-media-slot img,
.cr-video-card:hover .cr-media-slot img,
.cr-video-card:focus-within .cr-media-slot img {
	transform: scale(1.04);
	transition: transform 0.9s var(--cr-ease-out);
}

.cr-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media print, screen and (min-width: 48em) {
	.cr-split {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 6vw, 5rem);
	}
}

.cr-split--reverse .cr-split__media {
	order: 2;
}

@media print, screen and (min-width: 48em) {
	.cr-split--reverse .cr-split__media {
		order: 2;
	}
	.cr-split--reverse .cr-split__text {
		order: 1;
	}
}

.cr-trust-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
	border-top: 1px solid var(--cr-border);
	border-bottom: 1px solid var(--cr-border);
	background: var(--cr-surface-elevated);
}

@media print, screen and (min-width: 40em) {
	.cr-trust-strip {
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
	}
}

.cr-trust-strip__item strong {
	display: block;
	font-size: clamp(0.9375rem, 1.15vw, 1rem);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
	color: var(--cr-text);
	font-weight: 600;
}

.cr-trust-strip__item span {
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	color: var(--cr-text-muted);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.cr-card-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media print, screen and (min-width: 40em) {
	.cr-card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cr-store-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border: none;
	border-radius: var(--cr-radius-xl);
	overflow: hidden;
	background: var(--cr-surface-elevated);
	transition: box-shadow 0.35s var(--cr-ease-out), transform 0.35s var(--cr-ease-out);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.cr-store-card:hover,
.cr-store-card:focus {
	box-shadow: var(--cr-shadow-float);
	transform: translateY(-6px);
}

.cr-store-card__body {
	padding: clamp(1.5rem, 3vw, 2rem);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cr-store-card__body h2 {
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
	margin: 0 0 0.75rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.cr-store-card__body p {
	margin: 0 0 1.25rem;
	flex: 1;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--cr-text-muted);
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.cr-store-card__cta {
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--cr-accent);
	letter-spacing: -0.01em;
}

.cr-footer-cta {
	background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
	color: #fff;
	padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cr-footer-cta p {
	margin: 0 0 1.5rem;
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: 500;
	opacity: 0.92;
	letter-spacing: -0.02em;
	line-height: 1.35;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.cr-footer-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.cr-footer-cta .cr-footer-cta__btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.cr-footer-cta .cr-footer-cta__btn-ghost:hover,
.cr-footer-cta .cr-footer-cta__btn-ghost:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.cr-quote {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	line-height: 1.25;
	font-weight: 600;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
	border: none;
	background: transparent;
	border-radius: 0;
	text-align: center;
	letter-spacing: -0.035em;
	color: var(--cr-text);
	max-width: 52rem;
}

/* ---- Homepage: high-impact layout (body.page-home) ---- */
body.page-home #site-content > .cr-page-hero:first-of-type {
	min-height: 0;
}

body.page-home #site-content > .cr-page-hero:first-of-type .cr-page-hero__title {
	max-width: 16ch;
	font-size: clamp(2.125rem, 6.5vw, 4.25rem);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.032em;
}

body.page-home #site-content > .cr-page-hero:first-of-type .cr-page-hero__subtitle {
	max-width: 44rem;
	font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
	line-height: 1.42;
	opacity: 0.94;
}

body.page-home #site-content > .cr-page-hero:first-of-type .cr-page-hero__overlay {
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.28) 40%,
			rgba(0, 0, 0, 0.55) 100%
		),
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.3) 50%,
			rgba(0, 0, 0, 0) 80%
		);
}

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

/* ============================================================
   Home — Stats "proof band" (dark, dramatic, Apple/Tesla style)
   ============================================================ */
.cr-home-stats {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 7rem);
	background: #05070c;
	color: #fff;
	font-family: var(--cr-display-font);
	border-bottom: 0;
}

.cr-home-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			60% 70% at 15% 0%,
			rgba(116, 87, 224, 0.28) 0%,
			transparent 60%
		),
		radial-gradient(
			55% 70% at 100% 100%,
			rgba(40, 110, 255, 0.22) 0%,
			transparent 60%
		),
		linear-gradient(180deg, #05070c 0%, #0a0d16 100%);
	pointer-events: none;
}

.cr-home-stats__inner {
	position: relative;
	max-width: 78rem;
	margin: 0 auto;
	padding-left: clamp(1.25rem, 4vw, 3rem);
	padding-right: clamp(1.25rem, 4vw, 3rem);
}

.cr-home-stats__header {
	max-width: 48rem;
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.cr-home-stats__header .cr-eyebrow {
	text-align: left;
	display: block;
	margin-bottom: 0.85rem;
}

.cr-home-stats__headline {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: #fff;
	margin: 0;
	max-width: 22ch;
}

.cr-home-stats__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 40em) {
	.cr-home-stats__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.cr-home-stats__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cr-home-stats__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1rem, 2.5vw, 1.75rem) clamp(2rem, 4vw, 2.75rem) 0;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 40em) {
	.cr-home-stats__item {
		padding-right: clamp(1.25rem, 2.5vw, 2rem);
	}
	.cr-home-stats__item + .cr-home-stats__item {
		padding-left: clamp(1.25rem, 2.5vw, 2rem);
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
	.cr-home-stats__list > li:nth-child(3) {
		border-left: 0;
	}
}

@media (min-width: 64em) {
	.cr-home-stats__list > li:nth-child(3) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

.cr-home-stats__value {
	display: block;
	font-size: clamp(3.75rem, 9vw, 6.5rem);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.95;
	color: #fff;
	background: linear-gradient(180deg, #ffffff 0%, #b8c0d0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}

.cr-home-stats__value sup {
	font-size: 0.55em;
	font-weight: 500;
	vertical-align: baseline;
	position: relative;
	top: -0.45em;
	letter-spacing: -0.02em;
	margin-left: 0.02em;
	-webkit-text-fill-color: currentColor;
	color: #8c74ff;
}

.cr-home-stats__item:not(.cr-home-stats__item--uv) .cr-home-stats__value sup {
	color: var(--cr-accent);
}

.cr-home-stats__value-slash {
	display: inline-block;
	font-weight: 400;
	margin: 0 0.04em;
	transform: translateY(-0.05em);
	color: rgba(195, 180, 255, 0.6);
	-webkit-text-fill-color: rgba(195, 180, 255, 0.6);
	background: none;
}

.cr-home-stats__item--uv .cr-home-stats__value {
	background: linear-gradient(180deg, #e6dcff 0%, #8c74ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cr-home-stats__unit {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	margin-top: 0.25rem;
}

.cr-home-stats__item--uv .cr-home-stats__unit {
	color: #c3b4ff;
}

.cr-home-stats__label {
	font-size: clamp(0.9375rem, 1.1vw, 1rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	max-width: 24rem;
	letter-spacing: -0.005em;
	margin-top: 0.5rem;
}

.cr-home-band {
	padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.cr-home-band__inner {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto;
}

.cr-home-band__line {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: #fff;
}

.cr-home-band__sub {
	margin: 0;
	font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: -0.012em;
}

.cr-home-tight-head {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.cr-home-tight-lead {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.75rem;
}

/* Wider section headings — for multi-word titles on desktop */
.cr-home-section-head {
	max-width: clamp(22rem, 70vw, 48rem);
	margin-left: auto;
	margin-right: auto;
}

.cr-home-section-lead {
	max-width: clamp(24rem, 70vw, 44rem);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.75rem;
}

/* Inline actions — reset default page-hero padding */
.cr-home-inline-actions {
	padding: 0;
	margin-top: 0.25rem;
}

/* Primary button on light sections — inverts to the dark brand pill */
.cr-btn--on-light {
	background: var(--cr-surface-dark);
	color: #fff;
}

.cr-btn--on-light:hover,
.cr-btn--on-light:focus {
	background: #1d1d1f;
	color: #fff;
}

/* Ghost button on light sections — readable contrast */
.cr-btn--ghost-on-light {
	color: var(--cr-text);
	border-color: rgba(0, 0, 0, 0.22);
}

.cr-btn--ghost-on-light:hover,
.cr-btn--ghost-on-light:focus {
	border-color: rgba(0, 0, 0, 0.55);
	background: rgba(0, 0, 0, 0.04);
}

/* Safety net: ghost buttons inside light/muted sections (or the
   white reviews surface) are auto-corrected so they never go
   white-on-white if a template forgets `cr-btn--ghost-on-light`. */
.cr-section--muted .cr-btn--ghost:not(.cr-btn--ghost-on-light),
.pd-reviews-section .cr-btn--ghost:not(.cr-btn--ghost-on-light) {
	color: var(--cr-text);
	border-color: rgba(0, 0, 0, 0.22);
}

.cr-section--muted .cr-btn--ghost:not(.cr-btn--ghost-on-light):hover,
.cr-section--muted .cr-btn--ghost:not(.cr-btn--ghost-on-light):focus,
.pd-reviews-section .cr-btn--ghost:not(.cr-btn--ghost-on-light):hover,
.pd-reviews-section .cr-btn--ghost:not(.cr-btn--ghost-on-light):focus {
	border-color: rgba(0, 0, 0, 0.55);
	background: rgba(0, 0, 0, 0.04);
}

/* Finale lead (dark section) */
.cr-home-finale__lead {
	color: rgba(255, 255, 255, 0.82);
}

.cr-home-features {
	margin-top: 0.5rem;
}

.cr-home-statement {
	padding: clamp(3.5rem, 10vw, 7rem) clamp(1.25rem, 4vw, 2rem);
	background: #000;
	text-align: center;
	font-family: var(--cr-display-font);
}

.cr-home-statement__text {
	margin: 0;
	font-size: clamp(2rem, 7vw, 4.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: #fff;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

.cr-home-models {
	padding-top: clamp(3.5rem, 9vw, 6rem);
	padding-bottom: clamp(3rem, 8vw, 5rem);
}

.cr-home-models .cr-home-models__eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
}

.cr-home-models__title {
	margin-bottom: 0.75rem;
}

.cr-home-models__intro {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.cr-home-model-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media print, screen and (min-width: 48em) {
	.cr-home-model-grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.5rem, 2.5vw, 2rem);
	}
}

.cr-home-model-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--cr-radius-xl);
	overflow: hidden;
	background: var(--cr-surface);
	border: 1px solid var(--cr-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.4s var(--cr-ease-out), box-shadow 0.4s var(--cr-ease-out),
		border-color 0.4s var(--cr-ease-out);
}

.cr-home-model-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.12);
}

.cr-home-model-card:focus-within {
	outline: 2px solid var(--cr-accent);
	outline-offset: 4px;
}

.cr-home-model-card__media {
	position: relative;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) 0;
	background: linear-gradient(180deg, #f5f5f7 0%, #fafafb 100%);
	overflow: hidden;
}

.cr-home-model-card--uv .cr-home-model-card__media {
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(116, 87, 224, 0.18) 0%, rgba(116, 87, 224, 0) 60%),
		linear-gradient(180deg, #f3f0fb 0%, #f7f6fc 100%);
}

.cr-home-model-card--s .cr-home-model-card__media {
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(0, 113, 227, 0.12) 0%, rgba(0, 113, 227, 0) 60%),
		linear-gradient(180deg, #f2f4f8 0%, #f8f9fb 100%);
}

.cr-home-model-card__media .cr-media-slot {
	border-radius: 0;
	box-shadow: none;
	border: none;
	background: transparent;
	aspect-ratio: 16 / 10;
}

.cr-home-model-card__media .cr-media-slot img {
	object-fit: contain;
	transition: transform 0.7s var(--cr-ease-out);
}

.cr-home-model-card:hover .cr-home-model-card__media .cr-media-slot img {
	transform: scale(1.03);
}

.cr-home-model-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3vw, 2.25rem);
}

.cr-home-model-card__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cr-text-muted);
}

.cr-home-model-card--uv .cr-home-model-card__eyebrow {
	color: #7457e0;
}

.cr-home-model-card--s .cr-home-model-card__eyebrow {
	color: var(--cr-accent);
}

.cr-home-model-card__name {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 2.8vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--cr-text);
	line-height: 1.1;
}

.cr-home-model-card__tag {
	margin: 0 0 1.5rem;
	font-size: clamp(1rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
	color: var(--cr-text-muted);
	letter-spacing: -0.01em;
}

.cr-home-model-card__features {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--cr-border);
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem 1rem;
}

@media print, screen and (min-width: 30em) {
	.cr-home-model-card__features {
		grid-template-columns: 1fr 1fr;
	}
}

.cr-home-model-card__features li {
	position: relative;
	padding-left: 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--cr-text);
	letter-spacing: -0.005em;
}

.cr-home-model-card__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.875rem;
	height: 0.5rem;
	border-left: 2px solid var(--cr-accent);
	border-bottom: 2px solid var(--cr-accent);
	transform: rotate(-45deg);
}

.cr-home-model-card--uv .cr-home-model-card__features li::before {
	border-color: #7457e0;
}

.cr-home-model-card__actions {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
	align-items: center;
}

.cr-home-model-card__link {
	font-size: 1rem;
	font-weight: 500;
	color: var(--cr-accent);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.2s var(--cr-ease-out);
}

.cr-home-model-card__link:hover,
.cr-home-model-card__link:focus {
	color: var(--cr-accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.cr-home-models__compare {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.cr-home-models__compare-link {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--cr-accent);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.2s var(--cr-ease-out);
}

.cr-home-models__compare-link:hover,
.cr-home-models__compare-link:focus {
	color: var(--cr-accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ============================================================
   Home — UV full-bleed showcase band
   ============================================================ */
.cr-home-uv-showcase {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(4rem, 10vw, 7rem);
	padding-bottom: clamp(4rem, 10vw, 7rem);
	color: #fff;
	background: #0b0413;
}

.cr-home-uv-showcase__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cr-home-uv-showcase__media .cr-media-slot,
.cr-home-uv-showcase__media picture,
.cr-home-uv-showcase__media img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	border: 0;
}

.cr-home-uv-showcase__media .cr-media-slot {
	aspect-ratio: auto;
}

.cr-home-uv-showcase__media img {
	object-fit: cover;
	object-position: center;
}

.cr-home-uv-showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			120% 80% at 20% 50%,
			rgba(116, 87, 224, 0.55) 0%,
			rgba(11, 4, 19, 0) 60%
		),
		linear-gradient(
			180deg,
			rgba(11, 4, 19, 0.55) 0%,
			rgba(11, 4, 19, 0.75) 100%
		);
	pointer-events: none;
}

.cr-home-uv-showcase__inner {
	position: relative;
	max-width: 62rem;
	margin: 0 auto;
	padding-left: clamp(1.25rem, 4vw, 3rem);
	padding-right: clamp(1.25rem, 4vw, 3rem);
	text-align: center;
}

.cr-eyebrow--on-dark {
	color: #c3b4ff;
	display: block;
	text-align: center;
}

.cr-home-uv-showcase__title {
	color: #fff;
	max-width: 22ch;
	margin: 0.75rem auto 1rem;
}

.cr-home-uv-showcase__lead {
	color: rgba(255, 255, 255, 0.82);
	max-width: 40rem;
	margin: 0 auto;
}

.cr-home-uv-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: clamp(1.5rem, 4vw, 2.25rem);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 40em) {
	.cr-home-uv-stats {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

.cr-home-uv-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.cr-home-uv-stats__value {
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
	line-height: 1;
}

.cr-home-uv-stats__label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: -0.005em;
	max-width: 16rem;
	line-height: 1.4;
}

.cr-home-uv-showcase__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: clamp(2rem, 5vw, 3rem);
}

/* ============================================================
   Home — Mosaic section spacing tweak
   ============================================================ */
.cr-home-mosaic-section {
	padding-top: clamp(3.5rem, 8vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

/* ============================================================
   Home — Inline bullets (under split sections)
   ============================================================ */
.cr-home-inline-bullets {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.cr-home-inline-bullets li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.95rem;
	color: var(--cr-text-secondary, #3a3a3c);
	letter-spacing: -0.005em;
	line-height: 1.4;
}

.cr-home-inline-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.35rem;
	border-left: 2px solid var(--cr-accent);
	border-bottom: 2px solid var(--cr-accent);
	transform: rotate(-45deg) translateY(-0.15em);
}

/* ============================================================
   Home — Lifestyle full-bleed moment
   ============================================================ */
.cr-home-lifestyle {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(5rem, 12vw, 8rem);
	padding-bottom: clamp(5rem, 12vw, 8rem);
	color: #fff;
	background: #0c1420;
}

.cr-home-lifestyle__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cr-home-lifestyle__media .cr-media-slot,
.cr-home-lifestyle__media picture,
.cr-home-lifestyle__media img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	border: 0;
}

.cr-home-lifestyle__media .cr-media-slot {
	aspect-ratio: auto;
}

.cr-home-lifestyle__media img {
	object-fit: cover;
	object-position: center;
}

.cr-home-lifestyle::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(12, 20, 32, 0.82) 0%,
		rgba(12, 20, 32, 0.55) 45%,
		rgba(12, 20, 32, 0.2) 100%
	);
	pointer-events: none;
}

.cr-home-lifestyle__inner {
	position: relative;
	max-width: 62rem;
	margin: 0 auto;
	padding-left: clamp(1.25rem, 4vw, 3rem);
	padding-right: clamp(1.25rem, 4vw, 3rem);
	max-width: 40rem;
	margin-left: clamp(1rem, 6vw, 6rem);
}

.cr-home-lifestyle__title {
	color: #fff;
	margin: 0.75rem 0 1rem;
	max-width: 16ch;
}

.cr-home-lifestyle__lead {
	color: rgba(255, 255, 255, 0.85);
	max-width: 34rem;
	margin: 0 0 1.5rem;
}

.cr-home-lifestyle__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 47.99em) {
	.cr-home-lifestyle::before {
		background: linear-gradient(
			180deg,
			rgba(12, 20, 32, 0.55) 0%,
			rgba(12, 20, 32, 0.82) 100%
		);
	}
	.cr-home-lifestyle__inner {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.cr-home-lifestyle__title,
	.cr-home-lifestyle__lead {
		margin-left: auto;
		margin-right: auto;
	}
	.cr-home-lifestyle__actions {
		justify-content: center;
	}
}

.cr-home-quote {
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.18;
	max-width: 46rem;
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.cr-home-trust {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: clamp(2rem, 5vw, 3rem);
	padding-bottom: clamp(2rem, 5vw, 3rem);
}

.cr-home-finale .cr-heading-xl {
	color: #fff;
}

.cr-home-bottom-hero {
	padding-top: 0;
	padding-bottom: 0;
}

.cr-home-bottom-hero__inner {
	padding: 0;
	max-width: none;
}

.cr-home-bottom-hero .cr-page-hero {
	min-height: 0;
}

/* Small uppercase-feel eyebrow label for sections */
.cr-eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cr-accent);
	text-transform: none;
}

.cr-eyebrow--on-dark {
	color: #4fa8ff;
	opacity: 0.95;
}

/* Featured model card — subtle ring accent for the most popular model */
.cr-home-model-card--featured {
	border-color: rgba(116, 87, 224, 0.28);
	box-shadow: 0 0 0 1px rgba(116, 87, 224, 0.18), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cr-home-model-card--featured:hover {
	border-color: rgba(116, 87, 224, 0.5);
	box-shadow: 0 0 0 1px rgba(116, 87, 224, 0.3),
		0 20px 40px -20px rgba(116, 87, 224, 0.25),
		0 8px 16px -8px rgba(0, 0, 0, 0.08);
}

.cr-home-model-card__badge {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #7457e0;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(116, 87, 224, 0.35);
	pointer-events: none;
}

/* How it works — 3-step strip */
.cr-home-steps-section {
	padding-top: clamp(3rem, 8vw, 5rem);
	padding-bottom: clamp(3rem, 8vw, 5rem);
}

.cr-home-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}

@media print, screen and (min-width: 52em) {
	.cr-home-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.25rem;
	}
}

.cr-home-steps__item {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--cr-surface-elevated);
	border: 1px solid var(--cr-border);
	border-radius: var(--cr-radius-lg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
	transition: transform 0.35s var(--cr-ease-out), box-shadow 0.35s var(--cr-ease-out);
}

.cr-home-steps__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--cr-shadow-soft);
}

.cr-home-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cr-accent);
	background: rgba(0, 113, 227, 0.1);
	border-radius: 999px;
}

.cr-home-steps__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--cr-text);
	line-height: 1.2;
}

.cr-home-steps__copy {
	margin: 0;
	font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
	line-height: 1.55;
	color: var(--cr-text-muted);
	letter-spacing: -0.01em;
}

.cr-feature-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media print, screen and (min-width: 48em) {
	.cr-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 4-up variant — keeps 2 cols on tablets, expands to 4 on desktop */
@media print, screen and (min-width: 64em) {
	.cr-feature-grid--4 {
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.cr-feature-grid h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
	font-weight: 600;
	margin: 0 0 0.65rem;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--cr-text);
}

.cr-feature-grid p {
	margin: 0;
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.55;
	color: var(--cr-text-muted);
	letter-spacing: -0.01em;
}

.cr-text-page-hero {
	padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem);
	background: var(--cr-surface);
	border-bottom: 1px solid var(--cr-border);
}

.cr-text-page-hero h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.cr-text-page-hero .cr-text-page-lead {
	margin: 0;
	max-width: 42rem;
	font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
	color: var(--cr-text-muted);
	line-height: 1.5;
	letter-spacing: -0.012em;
}

.cr-prose {
	max-width: 48rem;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
	box-sizing: border-box;
}

.cr-prose h2 {
	margin-top: 2rem;
	font-size: 1.25rem;
}

.cr-prose p,
.cr-prose li {
	line-height: 1.65;
	color: var(--cr-text);
}

.cr-support-tiles {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media print, screen and (min-width: 40em) {
	.cr-support-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media print, screen and (min-width: 64em) {
	.cr-support-tiles--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cr-tile {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: none;
	border-radius: var(--cr-radius-lg);
	background: var(--cr-surface-elevated);
	height: 100%;
	box-sizing: border-box;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s var(--cr-ease-out), transform 0.3s var(--cr-ease-out);
}

.cr-tile:hover {
	box-shadow: var(--cr-shadow-soft);
	transform: translateY(-2px);
}

.cr-tile h2 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 600;
	margin: 0 0 0.65rem;
	letter-spacing: -0.02em;
}

.cr-tile p {
	margin: 0 0 1.25rem;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	color: var(--cr-text-muted);
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.cr-tile a {
	font-weight: 600;
	color: var(--cr-accent);
	text-decoration: none;
}

.cr-tile a:hover,
.cr-tile a:focus {
	text-decoration: underline;
}

.cr-video-card {
	border: none;
	border-radius: var(--cr-radius-xl);
	overflow: hidden;
	background: var(--cr-surface-elevated);
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s var(--cr-ease-out), transform 0.3s var(--cr-ease-out);
}

.cr-video-card:hover {
	box-shadow: var(--cr-shadow-soft);
	transform: translateY(-4px);
}

.cr-video-card__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	flex: 1;
}

.cr-video-card__body h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.cr-video-card__body p {
	margin: 0;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	color: var(--cr-text-muted);
	line-height: 1.5;
	letter-spacing: -0.01em;
}

/* ---- Marketing sections: tighter rhythm (Apple-like) ---- */
#site-content .cr-section + .cr-section.cr-section--muted {
	border-top: 1px solid rgba(0, 0, 0, 0.04);
}

#site-content .cr-trust-strip.cr-section__inner {
	border-radius: var(--cr-radius-lg);
	border: 1px solid var(--cr-border);
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* ---- Product page (PDP): conversion + Apple store feel ---- */
.pd-overview {
	margin-bottom: clamp(2rem, 5vw, 4rem) !important;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-overview-product-row {
	padding-top: clamp(0.25rem, 1.5vw, 1rem);
}

.pd-trust-strip {
	max-width: 80rem;
	margin-left: auto !important;
	margin-right: auto !important;
}

.pd-overview-trust-row {
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.pd-overview .cr-trust-strip {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: #fafafa;
	border-radius: 18px;
	padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1rem, 3vw, 1.75rem);
	box-shadow: none;
}

@media (max-width: 39.9375em) {
	.pd-overview .cr-trust-strip {
		text-align: center;
	}
}

@media print, screen and (min-width: 40em) {
	.pd-overview .cr-trust-strip {
		text-align: left;
	}

	.pd-overview .cr-trust-strip__item {
		padding-right: 0.5rem;
	}
}

.pd-overview .cr-trust-strip__item strong {
	text-transform: none;
	letter-spacing: -0.02em;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: #1d1d1f;
}

.pd-overview .cr-trust-strip__item span {
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
}

.pd-breadcrumbs-wrap { display: none !important; }

#stickynav.pd-subnav {
	top: var(--header-height, 50px);
	z-index: 900;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

body.page-pdp {
	scroll-padding-top: calc(var(--header-height, 50px) + var(--pd-subnav-height, 44px));
}

body.page-pdp #site-content {
	padding-bottom: 0;
}

@media (max-width: 39.9375em) {
	body.page-pdp #site-content {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
	}
}

body.page-pdp header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pd-subnav-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem 1.25rem;
	width: 100%;
	padding: 0.15rem 0;
}

.pd-subnav-inner .leftoffer {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.1rem 1rem;
}

.pd-subnav-inner .slidernav {
	min-width: 0;
	flex: 1 1 auto;
}

.pd-subnav-inner .leftnav {
	display: flex;
	align-items: center;
	gap: 0.05rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 !important;
	margin: 0 !important;
}

.pd-subnav-inner .leftnav::-webkit-scrollbar { display: none; }

.pd-crumbs-bar {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	background: transparent;
	border-bottom: none;
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 4vw, 2.5rem) 0;
	z-index: 10;
	transform: none;
	inset: auto;
	max-width: 80rem;
	margin: 0 auto;
	box-sizing: border-box;
}

.pd-crumbs-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: #6e6e73;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pd-crumbs-item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.pd-crumbs-item::before {
	display: none !important;
}

.pd-crumbs-link {
	color: #6e6e73;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pd-crumbs-link:hover,
.pd-crumbs-link:focus {
	color: #0071e3;
}

.pd-crumbs-sep {
	color: #c7c7cc;
	font-size: 0.75rem;
	user-select: none;
}

.pd-crumbs-current {
	color: #1d1d1f;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

@media (max-width: 47.9375em) {
	.pd-crumbs-bar {
		padding: 0.9rem 1rem 0;
	}
	.pd-crumbs-list {
		font-size: 0.75rem;
	}
}

.pd-subnav-cta {
	display: none;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
	margin-left: auto;
}

@media print, screen and (min-width: 40em) {
	.pd-subnav-cta {
		display: flex;
	}
}

.pd-subnav-price {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1d1d1f;
}

.pd-subnav-buy {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 0.28rem 0.9rem;
	border-radius: 980px;
	border: none;
	background: #0071e3;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease;
	line-height: 1.3;
}

.pd-subnav-buy:hover,
.pd-subnav-buy:focus {
	background: #0077ed;
}

a.pd-subnav-buy {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pd-subnav-buy--outline {
	background: #1d1d1f;
	color: #fff;
	border: 1px solid #1d1d1f;
	font-size: 0.75rem;
	letter-spacing: -0.005em;
	font-weight: 600;
	padding: 0.28rem 0.9rem;
}

.pd-subnav-buy--outline:hover,
.pd-subnav-buy--outline:focus {
	background: #000;
	border-color: #000;
	color: #fff;
}

/* Beats legacy #bottomoffer { display:flex; position:fixed } in this stylesheet */
#bottomoffer.pd-mobile-cta-bar {
	display: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: none !important;
	z-index: auto !important;
	background: transparent !important;
}

@media (max-width: 39.9375em) {
	#bottomoffer.pd-mobile-cta-bar {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 1002 !important;
		padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
		background: rgba(255, 255, 255, 0.94) !important;
		backdrop-filter: saturate(180%) blur(16px);
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
		max-width: 100vw !important;
		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06) !important;
	}

	.pd-mobile-cta-bar__price {
		font-size: 1.0625rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		color: #1d1d1f;
	}

	.pd-mobile-cta-bar__btn {
		flex: 1;
		max-width: 12rem;
		padding: 0.75rem 1rem;
		border-radius: 980px;
		border: none;
		background: #0071e3;
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		font-family: inherit;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
	}

	.pd-mobile-cta-bar__btn--full {
		max-width: none;
	}

	.pd-mobile-cta-bar__btn:hover,
	.pd-mobile-cta-bar__btn:focus {
		background: #0077ed;
	}
}

.pd-subnav .pd-subnav-product {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	color: #1d1d1f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pd-subnav .leftnav button {
	flex-shrink: 0;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #6e6e73;
	background: transparent !important;
	border: none !important;
	padding: 0.3rem 0.6rem !important;
	margin: 0 !important;
	max-height: none !important;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	box-shadow: none !important;
	line-height: 1.2;
}

.pd-subnav .leftnav button:hover,
.pd-subnav .leftnav button:focus {
	color: #1d1d1f;
	background: rgba(0, 0, 0, 0.04) !important;
}

.pd-subnav .leftnav button.is-active {
	color: #1d1d1f !important;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.05) !important;
	box-shadow: none !important;
}

.pd-subnav .productnav {
	padding: 0.35rem 0 !important;
}

@media print, screen and (min-width: 64em) {
	.pd-gallery-col {
		position: sticky;
		top: calc(var(--header-height, 50px) + var(--pd-subnav-height, 44px) + 0.5rem);
		align-self: start;
	}
}

.pd-buy-col {
	padding-top: 0.5rem;
}

.pd-product-title {
	font-size: clamp(2rem, 4.5vw, 2.75rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.05 !important;
	color: #1d1d1f !important;
	margin: 0 0 0.5rem !important;
}

.pd-product-tagline {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: #6e6e73;
	letter-spacing: -0.01em;
}

.pd-reviews-compact {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.pd-reviews-link {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8125rem;
	color: #0071e3;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-family: inherit;
}

.pd-reviews-link:hover {
	color: #0077ed;
}

.pd-buy-box {
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid #d2d2d7;
	border-bottom: 1px solid #d2d2d7;
	margin-bottom: 1.75rem;
}

.pd-price {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 3vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}

.pd-price-note,
.pd-availability {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #6e6e73;
	max-width: 22rem;
}

.pd-btn-add {
	display: block;
	width: 100%;
	max-width: 22rem;
	box-sizing: border-box;
	padding: 0.9rem 1.5rem;
	margin-bottom: 1rem;
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #fff;
	background: #0071e3;
	border: none;
	border-radius: 980px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: inherit;
	transition: background 0.2s ease, transform 0.15s ease;
}

.pd-btn-add:hover,
.pd-btn-add:focus {
	background: #0077ed;
}

.pd-btn-add:active {
	transform: scale(0.99);
}

a.pd-btn-add {
	line-height: 1.3;
}

.pd-btn-add--secondary {
	background: #1d1d1f;
}

.pd-btn-add--secondary:hover,
.pd-btn-add--secondary:focus {
	background: #000;
}

.pd-buy-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: 0.8125rem;
}

.pd-buy-meta a {
	color: #0071e3;
	text-decoration: none;
}

.pd-buy-meta a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pd-buy-meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #d2d2d7;
}

.pd-product-story .pd-lead {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #424245;
	margin: 0 0 1.25rem;
	letter-spacing: -0.01em;
}

.pd-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #f5f5f7;
}

.pd-feature-list li {
	padding: 0.85rem 0;
	border-bottom: 1px solid #f5f5f7;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #1d1d1f;
	letter-spacing: -0.01em;
}

.pd-detail-section {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: #f5f5f7;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-detail-heading {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.03em !important;
	margin-bottom: 1.5rem !important;
	color: #1d1d1f !important;
}

#overview,
#product-description,
#specs,
#reviews,
#questions {
	scroll-margin-top: calc(var(--header-height, 50px) + var(--pd-subnav-height, 44px) + 0.35rem);
}

.pd-section-title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.06;
	color: #1d1d1f;
	margin: 0 0 1rem;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-section-lead {
	font-size: clamp(1.0625rem, 1.75vw, 1.3125rem);
	line-height: 1.55;
	color: #6e6e73;
	margin: 0 0 2rem;
	max-width: 46rem;
	letter-spacing: -0.012em;
}

.pd-section-lead a {
	color: #0071e3;
	text-decoration: none;
}

.pd-section-lead a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pd-pillars {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-pillar-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media print, screen and (min-width: 40em) {
	.pd-pillar-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.pd-pillar-card {
	background: #f5f5f7;
	border-radius: 16px;
	padding: 1.5rem 1.35rem;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.pd-pillar-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: #1d1d1f;
}

.pd-pillar-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #424245;
}

.pd-specs-section {
	padding-top: clamp(2rem, 5vw, 3rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: #fafafa;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-spec-dl {
	margin: 0;
	padding: 0;
	border-top: 1px solid #d2d2d7;
}

.pd-spec-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid #e8e8ed;
}

@media print, screen and (min-width: 40em) {
	.pd-spec-row {
		grid-template-columns: minmax(8rem, 28%) 1fr;
		align-items: baseline;
	}
}

.pd-spec-row dt {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #6e6e73;
	letter-spacing: -0.005em;
}

.pd-spec-row dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: #1d1d1f;
	letter-spacing: -0.01em;
}

.pd-spec-row dd a {
	color: #0071e3;
	text-decoration: none;
}

.pd-spec-row dd a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pd-reviews-section {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-review-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pd-review-card {
	padding: 1.25rem 1.35rem;
	border-radius: 14px;
	background: #f5f5f7;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.pd-review-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	color: #6e6e73;
}

.pd-review-card__stars {
	font-weight: 600;
	color: #1d1d1f;
}

.pd-review-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #1d1d1f;
}

.pd-reviews-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.pd-faq-section {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-faq-section--muted {
	background: #f5f5f7;
}

.pd-mini-faq {
	margin: 0;
	padding: 0;
}

.pd-mini-faq__item {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pd-mini-faq__item:first-child {
	padding-top: 0;
}

.pd-mini-faq__item dt {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #1d1d1f;
	margin: 0 0 0.5rem;
}

.pd-mini-faq__item dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #424245;
}

.pd-mini-faq__item dd a {
	color: #0071e3;
	text-decoration: none;
}

.pd-mini-faq__item dd a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pd-faq-more {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

.pd-faq-more a {
	color: #0071e3;
	text-decoration: none;
	font-weight: 500;
}

.pd-faq-more a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pd-compare-band {
	background: linear-gradient(180deg, #f5f5f7 0%, #fff 100%);
	padding: clamp(2.5rem, 6vw, 4rem) 0;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-compare-band__inner {
	text-align: center;
}

.pd-compare-band__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 0.75rem;
	color: #1d1d1f;
}

.pd-compare-band__text {
	margin: 0 auto 1.5rem;
	max-width: 36rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: #424245;
}

.pd-compare-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.pd-detail-section .pd-prose {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #1d1d1f;
	letter-spacing: -0.01em;
}

.pd-detail-section .pd-prose p {
	margin: 0 0 1.25rem;
}

.pd-detail-section .pd-prose ul {
	margin: 0 0 1.5rem 1.25rem;
	padding: 0;
}

.pd-detail-section .pd-prose li {
	margin-bottom: 0.5rem;
}

.pd-detail-section .pd-prose-note {
	font-size: 0.9375rem;
	color: #6e6e73;
	margin-bottom: 0;
}

.pd-detail-section .pd-prose-note a {
	color: #0071e3;
	text-decoration: none;
}

.pd-detail-section .pd-prose-note a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   Sitemap — Apple-inspired index page
   ============================================================ */
.cr-sitemap {
	font-family: var(--cr-display-font);
	background: var(--cr-surface-elevated);
	color: var(--cr-text);
	padding: clamp(6rem, 12vw, 9rem) clamp(1.25rem, 4vw, 2.5rem) clamp(5rem, 10vw, 8rem);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cr-sitemap__inner {
	max-width: 75rem;
	margin: 0 auto;
}

.cr-sitemap__header {
	max-width: 48rem;
	margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.cr-sitemap__eyebrow {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cr-text-muted);
	margin: 0 0 0.875rem;
	text-transform: none;
}

.cr-sitemap__title {
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: var(--cr-text);
	margin: 0;
}

.cr-sitemap__intro {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--cr-text-muted);
	margin: 1rem 0 0;
	max-width: 38rem;
}

.cr-sitemap__groups {
	display: flex;
	flex-direction: column;
}

.cr-sitemap__group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
	border-top: 1px solid var(--cr-border);
}

.cr-sitemap__group:last-child {
	border-bottom: 1px solid var(--cr-border);
}

@media print, screen and (min-width: 48em) {
	.cr-sitemap__group {
		grid-template-columns: 14rem 1fr;
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}
}

.cr-sitemap__group-title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--cr-text);
	margin: 0;
	line-height: 1.4;
}

.cr-sitemap__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

@media print, screen and (min-width: 40em) {
	.cr-sitemap__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media print, screen and (min-width: 64em) {
	.cr-sitemap__columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cr-sitemap__col {
	min-width: 0;
}

.cr-sitemap__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.cr-sitemap__list a {
	display: inline-block;
	color: var(--cr-text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.45;
	letter-spacing: -0.005em;
	transition: color 0.2s var(--cr-ease-out);
}

.cr-sitemap__list a:hover,
.cr-sitemap__list a:focus-visible {
	color: var(--cr-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.cr-sitemap__list a:focus-visible {
	outline: none;
}

/* ============================================================
   cr-banner — full-bleed text-over-image section
   ============================================================ */
.cr-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

/* Height variants */
.cr-banner--sm { min-height: min(60vh, 32rem); }
.cr-banner--md { min-height: min(72vh, 40rem); }
.cr-banner--lg { min-height: min(88vh, 52rem); }

@media (max-width: 47.99em) {
	.cr-banner--sm { min-height: min(56vh, 28rem); }
	.cr-banner--md { min-height: min(68vh, 34rem); }
	.cr-banner--lg { min-height: min(78vh, 40rem); }
}

.cr-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.cr-banner__media picture,
.cr-banner__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cr-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform-origin: center;
	will-change: transform;
	transform: scale(1.04);
	transition: transform 1.2s var(--cr-ease-out, ease-out);
}

.cr-banner.is-revealed .cr-banner__bg {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.cr-banner__bg { transform: none; transition: none; }
}

.cr-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.3) 50%,
			rgba(0, 0, 0, 0.5) 100%
		);
}

.cr-banner--align-left .cr-banner__overlay {
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.3) 55%,
			rgba(0, 0, 0, 0) 85%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.45) 100%
		);
}

.cr-banner--align-right .cr-banner__overlay {
	background:
		linear-gradient(
			270deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.3) 55%,
			rgba(0, 0, 0, 0) 85%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.45) 100%
		);
}

.cr-banner--light { color: var(--cr-text, #1d1d1f); }
.cr-banner--light .cr-banner__overlay {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.25) 100%
		);
}

.cr-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

.cr-banner--align-center .cr-banner__inner { align-items: center; text-align: center; justify-content: center; }
.cr-banner--align-left   .cr-banner__inner { align-items: flex-start; text-align: left; justify-content: flex-end; }
.cr-banner--align-right  .cr-banner__inner { align-items: flex-end;   text-align: right; justify-content: flex-end; margin-left: auto; }
.cr-banner--align-bottom .cr-banner__inner { align-items: flex-start; text-align: left; justify-content: flex-end; }

.cr-banner__kicker {
	font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
	letter-spacing: -0.005em;
	font-weight: 500;
	opacity: 0.88;
	margin: 0 0 1rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.cr-banner__title {
	font-size: clamp(1.875rem, 5.2vw, 3.25rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 1rem;
	max-width: 22ch;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.cr-banner--align-center .cr-banner__title { max-width: 18ch; }

.cr-banner__subtitle {
	font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
	line-height: 1.5;
	font-weight: 400;
	max-width: 40rem;
	margin: 0 0 1.75rem;
	opacity: 0.92;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.cr-banner--light .cr-banner__kicker,
.cr-banner--light .cr-banner__title,
.cr-banner--light .cr-banner__subtitle {
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}

.cr-banner--align-center .cr-banner__subtitle { margin-left: auto; margin-right: auto; }

.cr-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cr-banner--align-center .cr-banner__actions { justify-content: center; }

/* On small screens: always center-align content regardless of align variant,
   so text stays readable over a portrait background */
@media (max-width: 47.99em) {
	.cr-banner__inner {
		padding: clamp(2.5rem, 10vw, 4rem) 1.25rem;
	}
	.cr-banner__title { max-width: 100%; }
	.cr-banner__subtitle { max-width: 100%; }
}

/* =======================================================================
   PDP — Google Store hero, bento grid, quote band, Material-style icons
   ======================================================================= */

.pd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: min(72vh, 40rem);
	background: #000;
	display: flex;
	align-items: flex-start;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
	color: #fff;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (max-width: 47.99em) {
	.pd-hero {
		min-height: min(68vh, 34rem);
	}
}

.pd-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pd-hero__media picture,
.pd-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0.32) 55%,
			rgba(0, 0, 0, 0) 85%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.35) 0%,
			rgba(0, 0, 0, 0.15) 45%,
			rgba(0, 0, 0, 0.5) 100%
		);
}

.pd-hero--uv::before,
.pd-hero--s::before {
	content: "";
}

.pd-hero__inner {
	max-width: 80rem;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.pd-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.35rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 980px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.pd-hero__title {
	margin: 0 0 0.875rem;
	max-width: 22ch;
	font-size: clamp(1.875rem, 5vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.pd-hero__sub {
	margin: 0 0 1.75rem;
	max-width: 42ch;
	font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: -0.008em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.pd-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
}

.pd-hero__price {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.pd-hero__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #0a0a0f;
	background: #fff;
	border: none;
	border-radius: 980px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: transform 0.15s ease, background 0.2s ease;
}

.pd-hero__buy:hover,
.pd-hero__buy:focus {
	background: #f5f5f7;
	transform: translateY(-1px);
}

.pd-hero__link {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #fff;
	text-decoration: none;
	opacity: 0.86;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 1px;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pd-hero__link:hover,
.pd-hero__link:focus {
	opacity: 1;
	border-color: #fff;
}


/* Overview eyebrow above the title (when hero pushes the H1 down to H2) */
.pd-overview-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #6e6e73;
}

/* -------- Material-style icon chip -------- */

.pd-mat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: rgba(0, 113, 227, 0.08);
	color: #0071e3;
	flex-shrink: 0;
}

.pd-mat-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.pd-hero--uv .pd-mat-icon {
	background: rgba(124, 77, 255, 0.12);
	color: #7c4dff;
}

/* -------- Bento grid -------- */

.pd-bento {
	padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-bento__header {
	max-width: 60rem;
	margin: 0 auto clamp(2rem, 5vw, 3.5rem);
	padding: 0 clamp(0.25rem, 2vw, 1rem);
}

.pd-section-title--center {
	text-align: center;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
}

.pd-section-lead--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.pd-bento__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	max-width: 88rem;
	margin: 0 auto;
}

@media (max-width: 74.9375em) {
	.pd-bento__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 47.99em) {
	.pd-bento__grid {
		grid-template-columns: 1fr;
	}
}

.pd-bento__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #f5f5f7;
	border-radius: 22px;
	overflow: hidden;
	min-height: 22rem;
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	grid-column: span 2;
}

.pd-bento__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.pd-bento__tile--wide {
	grid-column: span 6;
	min-height: 30rem;
}

.pd-bento__tile--half {
	grid-column: span 3;
	min-height: 26rem;
}

.pd-bento__tile--third {
	grid-column: span 2;
}

.pd-bento__tile--text {
	grid-column: span 3;
	min-height: 18rem;
}

@media (max-width: 74.9375em) {
	.pd-bento__tile--wide { grid-column: span 4; }
	.pd-bento__tile--half { grid-column: span 2; min-height: 22rem; }
	.pd-bento__tile--third { grid-column: span 2; min-height: 18rem; }
	.pd-bento__tile--text { grid-column: span 2; }
}

@media (max-width: 47.99em) {
	.pd-bento__tile,
	.pd-bento__tile--wide,
	.pd-bento__tile--half,
	.pd-bento__tile--third,
	.pd-bento__tile--text {
		grid-column: span 1;
		min-height: 18rem;
	}
}

.pd-bento__media {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	min-height: 0;
	overflow: hidden;
	background: #e8ecf2;
}

.pd-bento__media picture,
.pd-bento__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-bento__media--center img {
	object-fit: contain;
	padding: clamp(1rem, 3vw, 2rem);
}

.pd-bento__tile--wide .pd-bento__media {
	aspect-ratio: 16 / 9;
}

.pd-bento__tile--text {
	background: linear-gradient(160deg, #fafafa 0%, #f0f2f6 100%);
}

.pd-bento__tile--text .pd-bento__media {
	display: none;
}

.pd-bento__body {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	flex-shrink: 0;
}

.pd-bento__tile--text .pd-bento__body,
.pd-bento__tile--third .pd-bento__body {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.pd-bento__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: #1d1d1f;
}

.pd-bento__tile--wide .pd-bento__title {
	font-size: clamp(2rem, 3.5vw, 2.875rem);
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.pd-bento__text {
	margin: 0;
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
	line-height: 1.52;
	color: #424245;
	letter-spacing: -0.008em;
	max-width: 42ch;
}

.pd-bento__text a {
	color: #0071e3;
	text-decoration: none;
}

.pd-bento__text a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* UV-themed wide tile */
.pd-bento__tile--uv .pd-bento__media {
	background: radial-gradient(80% 60% at 50% 40%, rgba(185, 147, 255, 0.28), transparent 70%), #220f3a;
}
.pd-bento__tile--uv .pd-bento__title { color: #1d1d1f; }

/* Lifestyle wide tile — text over bottom of image */
.pd-bento__tile--lifestyle {
	min-height: 32rem;
}

.pd-bento__tile--lifestyle .pd-bento__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	color: #fff;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.pd-bento__tile--lifestyle .pd-bento__title {
	color: #fff;
}

.pd-bento__tile--lifestyle .pd-bento__text {
	color: rgba(255, 255, 255, 0.9);
}

.pd-bento__tile--lifestyle .pd-mat-icon {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* -------- Quote / Band -------- */

.pd-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(60vh, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem);
	color: #fff;
	text-align: center;
	background: #081018;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-quote__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pd-quote__media picture,
.pd-quote__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-quote::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.pd-quote__inner {
	max-width: 50rem;
	margin: 0 auto;
}

.pd-quote__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.pd-quote__text {
	margin: 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: -0.01em;
}

/* -------- Specs with Material icons -------- */

.pd-spec-dl--icons .pd-spec-row {
	grid-template-columns: 1fr;
	gap: 0.5rem 1.5rem;
}

@media print, screen and (min-width: 40em) {
	.pd-spec-dl--icons .pd-spec-row {
		grid-template-columns: minmax(14rem, 32%) 1fr;
		align-items: center;
	}
}

.pd-spec-dl--icons .pd-spec-row dt {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.pd-spec-dl--icons .pd-spec-row dt .pd-mat-icon {
	width: 2.25rem;
	height: 2.25rem;
}

.pd-spec-dl--icons .pd-spec-row dt .pd-mat-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.pd-spec-dl--icons .pd-spec-row dd {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Overview eyebrow on small screens stays left-aligned */
@media (max-width: 47.99em) {
	.pd-bento__header { text-align: center; }
	.pd-bento__header .pd-section-title--center { text-align: center; }
}

/* ==========================================================================
   PDP — home-style advantages (stats strip + editorial split)
   ========================================================================== */

.pd-home-stats {
	background: var(--cr-surface-elevated, #fbfbfd);
	border-top: 1px solid var(--cr-border, rgba(0,0,0,0.06));
	border-bottom: 1px solid var(--cr-border, rgba(0,0,0,0.06));
	padding: clamp(2.5rem, 6vw, 4rem) 0;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.pd-home-stats .cr-home-stats__value {
	color: #1d1d1f;
}

.pd-home-stats .cr-home-stats__unit {
	color: #0071e3;
}

.pd-home-stats .cr-home-stats__label {
	color: #6e6e73;
	max-width: 24rem;
}

.pd-story-split {
	padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
}

.pd-story-split .cr-split {
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.pd-story-split__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: clamp(18px, 2vw, 28px);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
}

.pd-story-split .pd-overview-eyebrow {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #0071e3;
	background: rgba(0, 113, 227, 0.08);
	border-radius: 999px;
	text-transform: none;
}

.pd-story-split .cr-heading-xl {
	color: #1d1d1f;
	margin: 0 0 1.25rem;
}

.pd-story-split .cr-lead {
	color: #424245;
	margin: 0 0 1.75rem;
	max-width: 34rem;
}

.pd-story-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.pd-story-split__actions .cr-btn--primary {
	background: #1d1d1f;
	color: #fff;
	border-color: #1d1d1f;
}

.pd-story-split__actions .cr-btn--primary:hover,
.pd-story-split__actions .cr-btn--primary:focus {
	background: #000;
	color: #fff;
	border-color: #000;
}

.pd-story-split__actions .cr-btn--ghost {
	background: transparent;
	color: #1d1d1f;
	border-color: rgba(0, 0, 0, 0.24);
}

.pd-story-split__actions .cr-btn--ghost:hover,
.pd-story-split__actions .cr-btn--ghost:focus {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.55);
	color: #1d1d1f;
}

@media print, screen and (max-width: 47.99em) {
	.pd-story-split .cr-split {
		grid-template-columns: 1fr;
	}
	.pd-story-split__img {
		border-radius: 16px;
	}
}

/* ==========================================================================
   FAQ page — clean Apple/Material-inspired disclosure list
   ========================================================================== */

.cr-faq {
	background: var(--cr-surface-elevated, #fff);
	color: var(--cr-text, #1d1d1f);
	scroll-behavior: smooth;
}

/* --- Sticky category navigation (chips) --- */
.cr-faq-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--cr-border, rgba(0, 0, 0, 0.08));
}

.cr-faq-nav__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cr-faq-nav__inner::-webkit-scrollbar { display: none; }

.cr-faq-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-faq-nav__list li { flex: 0 0 auto; }

.cr-faq-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.95rem;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--cr-text, #1d1d1f);
	background: var(--cr-surface, #f5f5f7);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	letter-spacing: -0.01em;
	transition:
		background 180ms var(--cr-ease-out, ease-out),
		color 180ms var(--cr-ease-out, ease-out),
		border-color 180ms var(--cr-ease-out, ease-out);
	white-space: nowrap;
}

.cr-faq-nav__list a:hover,
.cr-faq-nav__list a:focus-visible {
	background: #ebebf0;
	color: var(--cr-text, #1d1d1f);
	outline: none;
	border-color: rgba(0, 0, 0, 0.06);
}

.cr-faq-nav__list a:focus-visible {
	outline: 2px solid var(--cr-accent, #0071e3);
	outline-offset: 2px;
}

/* --- Section + category header --- */
.cr-faq-section {
	padding: clamp(3rem, 8vw, 6rem) 0;
	scroll-margin-top: 5rem;
}

.cr-faq-section__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 60em) {
	.cr-faq-section__inner {
		grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
		gap: clamp(3rem, 6vw, 5rem);
		align-items: start;
	}
}

.cr-faq-category {
	position: relative;
}

@media (min-width: 60em) {
	.cr-faq-category {
		position: sticky;
		top: 5.5rem;
	}
}

.cr-faq-category__kicker {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cr-text-muted, #6e6e73);
	margin: 0 0 0.75rem;
}

.cr-faq-category__kicker--light {
	color: rgba(255, 255, 255, 0.7);
}

.cr-faq-category--center {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.cr-faq-category .cr-heading-xl {
	font-size: clamp(1.75rem, 3.75vw, 2.5rem);
	letter-spacing: -0.028em;
	margin: 0 0 0.75rem;
}

.cr-faq-category .cr-lead {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	margin: 0;
}

/* --- Disclosure list --- */
.cr-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--cr-border, rgba(0, 0, 0, 0.08));
}

.cr-faq-item {
	border-bottom: 1px solid var(--cr-border, rgba(0, 0, 0, 0.08));
	transition: background 200ms var(--cr-ease-out, ease-out);
}

.cr-faq-item[open] {
	background: rgba(0, 0, 0, 0.015);
}

.cr-faq-item > summary {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 0.25rem 1.25rem 0;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.cr-faq-item > summary::-webkit-details-marker { display: none; }
.cr-faq-item > summary::marker { content: ""; }

.cr-faq-item > summary:focus-visible .cr-faq-item__q {
	text-decoration: underline;
	text-decoration-color: var(--cr-accent, #0071e3);
	text-underline-offset: 4px;
}

.cr-faq-item__q {
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--cr-text, #1d1d1f);
	flex: 1 1 auto;
}

.cr-faq-item__icon {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	position: relative;
	margin-top: 0.15rem;
	border-radius: 50%;
	background: var(--cr-surface, #f5f5f7);
	transition:
		background 200ms var(--cr-ease-out, ease-out),
		transform 240ms var(--cr-ease-out, ease-out);
}

.cr-faq-item__icon::before,
.cr-faq-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.75rem;
	height: 2px;
	background: var(--cr-text, #1d1d1f);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform 260ms var(--cr-ease-out, ease-out);
}

.cr-faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.cr-faq-item[open] > summary .cr-faq-item__icon {
	background: var(--cr-text, #1d1d1f);
}

.cr-faq-item[open] > summary .cr-faq-item__icon::before,
.cr-faq-item[open] > summary .cr-faq-item__icon::after {
	background: #fff;
}

.cr-faq-item[open] > summary .cr-faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.cr-faq-item:hover:not([open]) > summary .cr-faq-item__icon {
	background: #ebebf0;
}

.cr-faq-item__a {
	padding: 0 2.5rem 1.5rem 0;
	max-width: 46rem;
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.65;
	color: #3a3a3c;
	animation: cr-faq-fade 260ms var(--cr-ease-out, ease-out);
}

@keyframes cr-faq-fade {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cr-faq-item__a p { margin: 0 0 0.85rem; }
.cr-faq-item__a p:last-child { margin-bottom: 0; }
.cr-faq-item__a strong { color: var(--cr-text, #1d1d1f); font-weight: 600; }
.cr-faq-item__a a { color: var(--cr-accent, #0071e3); text-decoration: none; }
.cr-faq-item__a a:hover { text-decoration: underline; }

.cr-faq-item__a ul,
.cr-faq-item__a ol {
	margin: 0 0 0.85rem;
	padding-left: 1.25rem;
}

.cr-faq-item__a ul li,
.cr-faq-item__a ol li {
	margin-bottom: 0.35rem;
	padding-left: 0.25rem;
}

.cr-faq-item__a ul li::marker { color: var(--cr-text-muted, #6e6e73); }
.cr-faq-item__a ol li::marker { color: var(--cr-text-muted, #6e6e73); font-weight: 600; }

/* --- Inline tip callout --- */
.cr-faq-tip {
	margin: 1rem 0 0;
	padding: 0.9rem 1.1rem;
	background: #eef4fd;
	border-left: 3px solid var(--cr-accent, #0071e3);
	border-radius: 0.625rem;
	color: #1d1d1f;
}

.cr-faq-tip__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-accent, #0071e3);
	margin: 0 0 0.25rem !important;
}

.cr-faq-tip p {
	margin: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* --- Quick tips (dark band) --- */
.cr-faq-tips {
	color: #f5f5f7;
}

.cr-faq-tips .cr-faq-section__inner {
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
}

.cr-faq-tips__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 36em) {
	.cr-faq-tips__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
	.cr-faq-tips__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.cr-faq-tips__item {
	position: relative;
	padding: 1.5rem 1.25rem 1.5rem 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--cr-radius-lg, 1.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: background 220ms var(--cr-ease-out, ease-out), transform 220ms var(--cr-ease-out, ease-out);
}

.cr-faq-tips__item:hover {
	background: rgba(255, 255, 255, 0.09);
	transform: translateY(-2px);
}

.cr-faq-tips__num {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.78);
}

.cr-faq-tips__item p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: -0.005em;
}

/* --- Still need help cards --- */
.cr-faq-help {
	grid-template-columns: 1fr !important;
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.cr-faq-help__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

@media (min-width: 48em) {
	.cr-faq-help__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

.cr-faq-help__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem 1.5rem 1.25rem;
	background: var(--cr-surface, #f5f5f7);
	border: 1px solid var(--cr-border, rgba(0, 0, 0, 0.06));
	border-radius: var(--cr-radius-lg, 1.25rem);
	color: var(--cr-text, #1d1d1f);
	text-decoration: none;
	transition:
		background 220ms var(--cr-ease-out, ease-out),
		transform 220ms var(--cr-ease-out, ease-out),
		box-shadow 220ms var(--cr-ease-out, ease-out);
}

.cr-faq-help__card:hover,
.cr-faq-help__card:focus-visible {
	background: #ebebf0;
	transform: translateY(-2px);
	box-shadow: var(--cr-shadow-soft, 0 16px 48px rgba(0, 0, 0, 0.1));
	outline: none;
}

.cr-faq-help__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-faq-help__value {
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--cr-text, #1d1d1f);
}

.cr-faq-help__cta {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--cr-accent, #0071e3);
}

/* Mobile tweaks */
@media (max-width: 47.99em) {
	.cr-faq-item > summary { padding: 1rem 0; gap: 1rem; }
	.cr-faq-item__a { padding-right: 0; }
	.cr-faq-nav__inner { padding: 0.625rem clamp(1rem, 4vw, 2.5rem); }
}

/* ============================================================
   PDP — conversion enhancements: buy-box trust, scenes mosaic,
   richer compare cards.
   ============================================================ */

.pd-buy-trust {
	list-style: none;
	margin: 0.75rem 0 1rem;
	padding: 0.75rem 0 0.25rem;
	border-top: 1px solid #e8e8ed;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: #424245;
	letter-spacing: -0.005em;
}

@media (min-width: 75em) {
	.pd-buy-trust {
		grid-template-columns: repeat(3, auto);
		gap: 0.35rem 1.25rem;
		justify-content: start;
	}
}

.pd-buy-trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	line-height: 1.35;
}

.pd-buy-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	font-size: 0.75rem;
	border-radius: 999px;
	background: rgba(0, 113, 227, 0.12);
	color: #0071e3;
	font-weight: 700;
	flex-shrink: 0;
}

/* -------- Scenes mosaic -------- */

.pd-scenes {
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2.5rem);
	background: #fafafa;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-scenes__inner {
	max-width: 88rem;
	margin: 0 auto;
}

.pd-scenes__header {
	max-width: 46rem;
	margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
}

.pd-scenes__header .pd-overview-eyebrow {
	text-align: center;
	margin-bottom: 0.35rem;
}

.pd-scenes__header .pd-section-title {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.pd-scenes__header .pd-section-lead {
	margin: 0 auto;
	text-align: center;
}

.pd-scenes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 40em) {
	.pd-scenes__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.9rem;
	}
}

@media (min-width: 64em) {
	.pd-scenes__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 14rem;
		gap: 1rem;
	}
	.pd-scenes__tile--main {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.pd-scenes__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #e8ecf2;
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: transform 0.35s var(--cr-ease-out, ease-out),
		box-shadow 0.35s var(--cr-ease-out, ease-out);
}

.pd-scenes__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.pd-scenes__tile picture,
.pd-scenes__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--cr-ease-out, ease-out);
}

.pd-scenes__tile:hover img {
	transform: scale(1.04);
}

.pd-scenes__tile:not(.pd-scenes__tile--main) {
	aspect-ratio: 4 / 3;
}

@media (min-width: 64em) {
	.pd-scenes__tile:not(.pd-scenes__tile--main) {
		aspect-ratio: auto;
	}
}

.pd-scenes__caption {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	padding: 0.45rem 0.9rem;
	background: rgba(28, 28, 30, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	border-radius: 999px;
	max-width: max-content;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------- Enriched compare cards -------- */

.pd-compare-band {
	background: linear-gradient(180deg, #f5f5f7 0%, #fff 100%);
	padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pd-compare-band__inner {
	max-width: 78rem;
	margin: 0 auto;
	text-align: center;
}

.pd-compare-band__header {
	max-width: 46rem;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.pd-compare-band__header .pd-overview-eyebrow {
	margin-bottom: 0.35rem;
}

.pd-compare-band__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 0.75rem;
	color: #1d1d1f;
	line-height: 1.1;
}

.pd-compare-band__text {
	margin: 0 auto 0;
	max-width: 40rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: #424245;
}

.pd-compare-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	text-align: left;
}

@media (min-width: 48em) {
	.pd-compare-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

.pd-compare-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s var(--cr-ease-out, ease-out),
		box-shadow 0.3s var(--cr-ease-out, ease-out);
}

.pd-compare-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}

.pd-compare-card--current {
	border-color: #0071e3;
	box-shadow: 0 6px 28px rgba(0, 113, 227, 0.14);
}

.pd-compare-card__media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(165deg, #ececf1 0%, #f5f5f7 40%, #ffffff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.pd-compare-card__media picture,
.pd-compare-card__media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pd-compare-card__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.pd-compare-card__name {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	color: #1d1d1f;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.pd-compare-card__tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #0071e3;
	background: rgba(0, 113, 227, 0.1);
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	text-transform: none;
}

.pd-compare-card__tag-line {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	color: #6e6e73;
	letter-spacing: -0.005em;
}

.pd-compare-card__list {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.pd-compare-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #1d1d1f;
	letter-spacing: -0.005em;
}

.pd-compare-card__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	margin-top: 0.12rem;
	border-radius: 999px;
	background: rgba(0, 113, 227, 0.12);
	color: #0071e3;
	font-weight: 700;
	font-size: 0.75rem;
}

.pd-compare-card__check--muted {
	background: rgba(0, 0, 0, 0.06);
	color: #6e6e73;
}

.pd-compare-card__check--accent {
	background: linear-gradient(135deg, #9d4edd 0%, #6f5cf0 100%);
	color: #fff;
	font-size: 0.7rem;
}

.pd-compare-card__cta {
	align-self: flex-start;
	margin-top: 0.25rem;
}

.pd-compare-card__cta--disabled {
	opacity: 0.55;
	pointer-events: none;
	cursor: default;
}

.pd-compare-band__foot {
	margin: clamp(1.5rem, 3vw, 2rem) auto 0;
	max-width: 40rem;
	font-size: 0.9375rem;
	color: #6e6e73;
	line-height: 1.5;
}

.pd-compare-band__foot a {
	color: #0071e3;
	text-decoration: none;
	font-weight: 500;
}

.pd-compare-band__foot a:hover,
.pd-compare-band__foot a:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   Site-wide: small eyebrow label utility
   ============================================================ */
.cr-eyebrow {
	display: inline-block;
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cr-text-muted, #6e6e73);
}

/* ============================================================
   Feature mosaic — shared across Features, UltraBin, UltraFilter
   ============================================================ */
.cr-feature-mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 40em) {
	.cr-feature-mosaic {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.9rem;
	}
}

@media (min-width: 40em) and (max-width: 63.99em) {
	.cr-feature-mosaic > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64em) {
	.cr-feature-mosaic {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 17rem;
		gap: 1.1rem;
	}
	.cr-feature-mosaic__tile--main {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media (min-width: 90em) {
	.cr-feature-mosaic {
		grid-auto-rows: 20rem;
		gap: 1.25rem;
	}
}

.cr-feature-mosaic__header {
	max-width: 46rem;
	margin: 0 auto clamp(1.5rem, 3.5vw, 2.25rem);
	text-align: center;
}

.cr-feature-mosaic__header .cr-lead {
	margin: 0.5rem auto 0;
}

.cr-feature-mosaic__header .cr-eyebrow {
	display: block;
	text-align: center;
}

.cr-feature-mosaic__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #e8ecf2;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
	transition: transform 0.35s var(--cr-ease-out, ease-out),
		box-shadow 0.35s var(--cr-ease-out, ease-out);
}

.cr-feature-mosaic__tile .cr-media-slot {
	border-radius: 0;
	box-shadow: none;
	height: 100%;
}

.cr-feature-mosaic__tile .cr-media-slot img {
	transition: transform 0.9s var(--cr-ease-out, ease-out);
}

.cr-feature-mosaic__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.cr-feature-mosaic__tile:hover .cr-media-slot img {
	transform: scale(1.04);
}

@media (max-width: 63.99em) {
	.cr-feature-mosaic__tile .cr-media-slot.cr-media-slot--landscape {
		aspect-ratio: 4 / 3;
	}
}

.cr-feature-mosaic__caption {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	padding: 0.45rem 0.9rem;
	background: rgba(28, 28, 30, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	border-radius: 999px;
	max-width: max-content;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	z-index: 2;
}

/* =========================================================================
   PDP — Modern redesign (Google Store–inspired gallery + conversion polish)
   Added 2026-04-17. Scoped to .pd-overview / .pd-gallery-col / .pd-buy-col.
   ========================================================================= */

/* -------- Overview layout polish -------- */
.pd-overview {
	padding-top: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pd-overview-product-row {
	align-items: flex-start;
}

/* -------- Eyebrow refinements -------- */
.pd-buy-col .pd-overview-eyebrow {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.28rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0071e3;
	background: rgba(0, 113, 227, 0.08);
	border-radius: 999px;
}

.pd-hero--uv ~ .pd-crumbs-bar ~ .pd-overview .pd-buy-col .pd-overview-eyebrow {
	color: #6b3aff;
	background: rgba(124, 77, 255, 0.1);
}

.pd-product-title {
	font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
	line-height: 1.04 !important;
	margin: 0 0 0.65rem !important;
}

.pd-product-tagline {
	font-size: 1.125rem;
	line-height: 1.45;
	color: #424245;
	margin: 0 0 1.1rem;
	letter-spacing: -0.012em;
	max-width: 32rem;
}

/* -------- Feature "at a glance" chips (above buy box) -------- */
.pd-hl-chips {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.pd-hl-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem 0.35rem 0.55rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	color: #1d1d1f;
	background: #f5f5f7;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 999px;
	letter-spacing: -0.005em;
}

.pd-hl-chips li svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #0071e3;
}

.pd-hl-chips .pd-hl-chip--accent {
	background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(0, 113, 227, 0.1));
	border-color: rgba(124, 77, 255, 0.22);
	color: #4a2fd6;
}

.pd-hl-chips .pd-hl-chip--accent svg {
	color: #7c4dff;
}

/* -------- Buy box polish -------- */
.pd-buy-box {
	padding: 1.4rem 0 1.4rem;
	border-top: 1px solid #e8e8ed;
	border-bottom: 1px solid #e8e8ed;
	margin-bottom: 1.5rem;
}

.pd-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.8rem;
	font-size: clamp(1.75rem, 3.2vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}

.pd-price-note,
.pd-availability {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6e6e73;
	margin: 0 0 1.1rem;
	max-width: 26rem;
}

.pd-availability {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.1rem;
	padding: 0.55rem 0.85rem;
	font-size: 0.875rem;
	color: #1d1d1f;
	background: #f5f5f7;
	border: 1px solid #e8e8ed;
	border-radius: 12px;
	max-width: none;
}

.pd-availability--in-stock::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #34c759;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
	flex-shrink: 0;
}

.pd-btn-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	max-width: 100%;
	padding: 1rem 1.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	box-shadow: 0 1px 2px rgba(0, 113, 227, 0.18),
		0 10px 26px -8px rgba(0, 113, 227, 0.32);
	transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.pd-btn-add:hover,
.pd-btn-add:focus {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 113, 227, 0.24),
		0 14px 32px -10px rgba(0, 113, 227, 0.42);
}

.pd-btn-add--secondary {
	background: linear-gradient(180deg, #2b2b30 0%, #1d1d1f 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
		0 10px 26px -8px rgba(0, 0, 0, 0.3);
}

.pd-btn-add--secondary:hover,
.pd-btn-add--secondary:focus {
	background: linear-gradient(180deg, #000 0%, #0a0a0c 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28),
		0 14px 32px -10px rgba(0, 0, 0, 0.42);
}

.pd-btn-add__ico {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* -------- Scannable feature list (material-style) -------- */
.pd-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e8e8ed;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

.pd-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.95rem 1.1rem;
	border-bottom: 1px solid #eef0f3;
	font-size: 0.9375rem;
	line-height: 1.48;
	color: #1d1d1f;
	letter-spacing: -0.005em;
}

.pd-feature-list li:last-child {
	border-bottom: 0;
}

.pd-feature-list li::before {
	content: '';
	flex-shrink: 0;
	margin-top: 0.2em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		rgba(0, 113, 227, 0.12)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.body-pdp-uv .pd-feature-list li::before,
body .pd-hero--uv ~ * .pd-feature-list li::before {
	background:
		rgba(124, 77, 255, 0.14)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.pd-product-story .pd-lead {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #424245;
	margin: 0 0 1.25rem;
}

/* ============================================================
   PDP gallery — clean Google Store–style, CSS scroll-snap.
   Minimal chrome, flat surfaces, disciplined type.
   ============================================================ */

.pd-gallery {
	--pd-gallery-surface: #f5f5f7;
	--pd-gallery-active: #1d1d1f;
	--pd-gallery-line: rgba(0, 0, 0, 0.1);
	--pd-gallery-line-soft: rgba(0, 0, 0, 0.06);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pd-hero--uv ~ .pd-crumbs-bar ~ .pd-overview .pd-gallery {
	--pd-gallery-surface: #f4f2fb;
}

.pd-gallery__stage {
	position: relative;
	background: transparent;
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-height: 44rem;
	isolation: isolate;
}

.pd-gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.pd-gallery__track::-webkit-scrollbar { display: none; }
.pd-gallery__track:focus { outline: none; }
.pd-gallery__track:focus-visible {
	outline: 2px solid var(--pd-gallery-active);
	outline-offset: 4px;
	border-radius: 12px;
}

.pd-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.pd-gallery__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.pd-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -------- Floating nav buttons -------- */
.pd-gallery__nav {
	position: absolute;
	top: 50%;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid var(--pd-gallery-line-soft);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px -8px rgba(0, 0, 0, 0.12);
	color: #1d1d1f;
	opacity: 0;
	transform: translateY(-50%) scale(0.96);
	transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	z-index: 4;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pd-gallery__nav svg { width: 1rem; height: 1rem; }
.pd-gallery__nav--prev { left: 0.75rem; }
.pd-gallery__nav--next { right: 0.75rem; }

.pd-gallery__stage:hover .pd-gallery__nav,
.pd-gallery__stage:focus-within .pd-gallery__nav {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.pd-gallery__nav:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 24px -10px rgba(0, 0, 0, 0.2);
}

.pd-gallery__nav:focus-visible {
	opacity: 1;
	outline: 2px solid var(--pd-gallery-active);
	outline-offset: 3px;
	transform: translateY(-50%) scale(1);
}

@media (hover: none) {
	.pd-gallery__nav { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (max-width: 47.99em) {
	.pd-gallery__nav { width: 2.25rem; height: 2.25rem; opacity: 1; transform: translateY(-50%) scale(1); }
	.pd-gallery__stage { aspect-ratio: 1 / 1; max-height: 28rem; border-radius: 16px; }
}

/* -------- Page counter "1 / 7" -------- */
.pd-gallery__counter {
	position: absolute;
	bottom: 0.875rem;
	right: 0.875rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(160%) blur(6px);
	-webkit-backdrop-filter: saturate(160%) blur(6px);
	border: 1px solid var(--pd-gallery-line-soft);
	color: #1d1d1f;
	font-size: 0.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.pd-gallery__counter-sep { opacity: 0.4; margin: 0 0.1rem; }
.pd-gallery__counter-total { opacity: 0.6; }

/* -------- Thumbnail grid — square tiles, wraps to multiple rows -------- */
.pd-gallery__thumbs {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (max-width: 47.99em) {
	.pd-gallery__thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.4rem;
	}
}

.pd-gallery__thumb-item {
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	background: var(--pd-gallery-surface);
	box-shadow: inset 0 0 0 1px var(--pd-gallery-line-soft);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pd-gallery__thumb-item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.2s ease;
	pointer-events: none;
}

.pd-gallery__thumb-item:hover {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.pd-gallery__thumb-item.is-active {
	box-shadow: inset 0 0 0 1px var(--pd-gallery-line-soft);
	transform: none;
}

.pd-gallery__thumb-item.is-active::after {
	box-shadow: inset 0 0 0 2px var(--pd-gallery-active);
}

.pd-gallery__thumb {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.pd-gallery__thumb:focus { outline: none; }
.pd-gallery__thumb:focus-visible {
	outline: 2px solid var(--pd-gallery-active);
	outline-offset: 2px;
	border-radius: 10px;
}

.pd-gallery__thumb picture,
.pd-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.pd-gallery__track { scroll-behavior: auto; }
	.pd-gallery__nav,
	.pd-gallery__thumb-item { transition: none; }
}

/* -------- Sticky behavior fine-tune -------- */
@media print, screen and (min-width: 64em) {
	.pd-gallery-col {
		position: sticky;
		top: calc(var(--header-height, 50px) + var(--pd-subnav-height, 44px) + 1rem);
		align-self: start;
	}
}

/* -------- Buy meta (support/manual/phone row) -------- */
.pd-buy-meta {
	gap: 0.5rem 1rem;
	font-size: 0.875rem;
}

.pd-buy-meta a {
	font-weight: 500;
}

/* -------- Hero: add subtle bottom scrim for readability -------- */
.pd-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.05) 32%,
			rgba(0, 0, 0, 0.15) 62%,
			rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
}

.pd-hero__eyebrow {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	padding: 0.4rem 0.85rem;
}

.pd-hero--uv .pd-hero__eyebrow {
	background: linear-gradient(135deg, rgba(124, 77, 255, 0.28), rgba(0, 113, 227, 0.28));
	border-color: rgba(185, 147, 255, 0.5);
}

.pd-hero__title {
	text-shadow: 0 1px 40px rgba(0, 0, 0, 0.2);
}

/* -------- Section title with subtle accent line -------- */
.pd-section-title {
	position: relative;
}

/* -------- Responsive feature-chips stacking -------- */
@media (max-width: 29.99em) {
	.pd-hl-chips li {
		font-size: 0.75rem;
		padding: 0.3rem 0.65rem 0.3rem 0.45rem;
	}
}

/* =========================================================================
   Home — final polish (2026-04-17)
   Larger split media, stacked square accents, mosaic mix, detail thumbs.
   ========================================================================= */

/* -- Model cards: show the square product art in its natural ratio -- */
.cr-home-model-card__media .cr-media-slot.cr-media-slot--square {
	aspect-ratio: 1 / 1;
	max-height: 28rem;
	margin: 0 auto;
}

.cr-home-model-card__media .cr-media-slot.cr-media-slot--square img {
	object-fit: contain;
}

/* -- Split sections: media feels more present on desktop -- */
.cr-split-section .cr-split__media .cr-media-slot {
	box-shadow:
		0 32px 72px -32px rgba(12, 20, 32, 0.38),
		0 8px 24px -14px rgba(12, 20, 32, 0.22);
}

@media (min-width: 48em) {
	.cr-split-section .cr-section__inner > .cr-split {
		grid-template-columns: 1.25fr 0.75fr;
		gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: center;
	}
}

@media (min-width: 75em) {
	.cr-split-section .cr-section__inner > .cr-split {
		grid-template-columns: 1.4fr 0.6fr;
		gap: clamp(3rem, 6vw, 6rem);
	}
	.cr-split-section .cr-section__inner,
	.cr-home-finale .cr-section__inner {
		max-width: 88rem;
	}
}

/* Home finale mirrors the split-section media balance */
@media (min-width: 48em) {
	.cr-home-finale .cr-section__inner.cr-split {
		grid-template-columns: 0.75fr 1.25fr;
		gap: clamp(2.5rem, 6vw, 5.5rem);
	}
}

@media (min-width: 75em) {
	.cr-home-finale .cr-section__inner.cr-split {
		grid-template-columns: 0.62fr 1.38fr;
	}
}

/* -- Stacked media treatment (landscape + floating square accent) -- */
.cr-split__media--stacked {
	position: relative;
	padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
	padding-right: clamp(1rem, 4vw, 2.75rem);
}

.cr-split__media--stacked-left {
	padding-right: 0;
	padding-left: clamp(1rem, 4vw, 2.75rem);
}

.cr-split__media--stacked > .cr-media-slot:first-child {
	width: 100%;
}

.cr-split__media--stacked .cr-media-slot--accent {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(8rem, 34%, 13rem);
	aspect-ratio: 1 / 1;
	border: 5px solid #fff;
	background: #fff;
	border-radius: var(--cr-radius-xl, 1.75rem);
	box-shadow:
		0 28px 56px -18px rgba(0, 0, 0, 0.35),
		0 6px 18px -10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.cr-split__media--stacked-left .cr-media-slot--accent {
	right: auto;
	left: 0;
}

.cr-split__media--stacked-dark .cr-media-slot--accent {
	border-color: rgba(255, 255, 255, 0.08);
	background: #0a0a0c;
	box-shadow:
		0 32px 64px -22px rgba(0, 0, 0, 0.7),
		0 8px 22px -12px rgba(0, 0, 0, 0.4);
}

.cr-split__media--stacked .cr-media-slot--accent picture,
.cr-split__media--stacked .cr-media-slot--accent img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 64em) {
	.cr-split__media--stacked .cr-media-slot--accent {
		width: clamp(10rem, 36%, 16rem);
	}
}

@media (max-width: 39.99em) {
	.cr-split__media--stacked {
		padding-right: 0;
		padding-left: 0;
		padding-bottom: 0;
	}
	.cr-split__media--stacked .cr-media-slot--accent {
		position: relative;
		width: 60%;
		margin: -3rem auto 0;
		right: auto;
		left: auto;
	}
}

/* -- Feature mosaic: square + tall tile variants -- */
@media (min-width: 64em) {
	.cr-feature-mosaic__tile--tall {
		grid-row: span 2;
	}
}

.cr-feature-mosaic__tile--square .cr-media-slot {
	aspect-ratio: 1 / 1;
}

@media (max-width: 63.99em) {
	.cr-feature-mosaic__tile--square .cr-media-slot.cr-media-slot--square {
		aspect-ratio: 1 / 1;
	}
	.cr-feature-mosaic__tile--tall .cr-media-slot.cr-media-slot--square {
		aspect-ratio: 4 / 5;
	}
}

/* -- UV showcase: square detail thumbnails strip -- */
.cr-home-uv-thumbs {
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
	max-width: 48rem;
}

.cr-home-uv-thumb {
	margin: 0;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--cr-radius-lg, 1.25rem);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
	transition: transform 0.4s var(--cr-ease-out, ease-out),
		box-shadow 0.4s var(--cr-ease-out, ease-out);
}

.cr-home-uv-thumb picture,
.cr-home-uv-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--cr-ease-out, ease-out);
}

.cr-home-uv-thumb:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 52px -18px rgba(0, 0, 0, 0.7);
}

.cr-home-uv-thumb:hover img {
	transform: scale(1.05);
}

.cr-home-uv-thumb figcaption {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	right: 0.75rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #fff;
	background: rgba(12, 6, 24, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	max-width: max-content;
	pointer-events: none;
}

@media (max-width: 39.99em) {
	.cr-home-uv-thumbs {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}
	.cr-home-uv-thumb figcaption {
		font-size: 0.6875rem;
		padding: 0.25rem 0.55rem;
		left: 0.4rem;
		bottom: 0.4rem;
		right: 0.4rem;
	}
}

/* -- Finale polish -- */
.cr-home-finale .cr-split__media .cr-media-slot:first-child {
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.75);
}

/* =========================================================================
   PDP — Refinement pass (2026-04-17)
   Soften heavy type, tighten hero/gallery alignment, clear right-column
   hierarchy. Scoped to .page-pdp so the rest of the site is untouched.
   ========================================================================= */

/* ---------- Section titles: quieter, less "heavy" feel ---------- */
.page-pdp .pd-specs-section .pd-section-title,
.page-pdp .pd-reviews-section .pd-section-title,
.page-pdp .pd-faq-section .pd-section-title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.page-pdp .pd-specs-section .pd-section-lead,
.page-pdp .pd-reviews-section .pd-section-lead,
.page-pdp .pd-faq-section .pd-section-lead {
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.55;
	color: #6e6e73;
	margin: 0 0 1.5rem;
	max-width: 42rem;
}

/* Section backgrounds: keep it flatter, less alternating noise */
.page-pdp .pd-specs-section {
	background: #fff;
	padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
	border-top: 1px solid #f0f0f3;
}

.page-pdp .pd-reviews-section {
	padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
	border-top: 1px solid #f0f0f3;
}

.page-pdp .pd-faq-section.pd-faq-section--muted {
	background: #fafafa;
	padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

/* ---------- Tech specs: lighter icons + calmer rows ---------- */
.page-pdp .pd-spec-dl {
	border-top-color: #ececef;
}

.page-pdp .pd-spec-dl--icons .pd-spec-row {
	padding: 0.85rem 0;
	border-bottom-color: #f0f0f3;
	gap: 0.5rem 1.25rem;
}

@media print, screen and (min-width: 40em) {
	.page-pdp .pd-spec-dl--icons .pd-spec-row {
		grid-template-columns: minmax(11rem, 26%) 1fr;
		align-items: center;
	}
}

.page-pdp .pd-spec-dl--icons .pd-spec-row dt {
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #1d1d1f;
	letter-spacing: -0.005em;
}

.page-pdp .pd-spec-dl--icons .pd-spec-row dt .pd-mat-icon {
	width: 1.5rem;
	height: 1.5rem;
	background: transparent;
	color: #86868b;
	border-radius: 0;
}

.page-pdp .pd-spec-dl--icons .pd-spec-row dt .pd-mat-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.page-pdp .pd-hero--uv ~ * .pd-spec-dl--icons .pd-spec-row dt .pd-mat-icon {
	color: #86868b;
}

.page-pdp .pd-spec-dl--icons .pd-spec-row dd {
	font-size: 0.9375rem;
	color: #424245;
	line-height: 1.5;
}

/* ---------- Reviews card: quieter surface ---------- */
.page-pdp .pd-review-card {
	background: #fafafa;
	border-color: #ececef;
	padding: 1rem 1.15rem;
}

.page-pdp .pd-review-card__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #424245;
}

/* ---------- Mini FAQ: softer dividers, smaller heading text ---------- */
.page-pdp .pd-mini-faq__item dt {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.page-pdp .pd-mini-faq__item dd {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #424245;
}

/* =========================================================================
   Hero — tighten, center with site grid, better text scale
   ========================================================================= */
.page-pdp .pd-hero {
	min-height: min(62vh, 36rem);
	padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
	align-items: flex-end;
}

@media (max-width: 47.99em) {
	.page-pdp .pd-hero {
		min-height: min(58vh, 30rem);
	}
}

/* Hero inner width + gutter are controlled by the shared --pd-text-max
   rule below so the hero, breadcrumbs, and overview all align. */

.page-pdp .pd-hero__title {
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.028em;
	margin-bottom: 0.7rem;
}

.page-pdp .pd-hero__sub {
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	line-height: 1.5;
	max-width: 40ch;
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.82);
}

.page-pdp .pd-hero__eyebrow {
	font-size: 0.6875rem;
	padding: 0.32rem 0.7rem;
	letter-spacing: 0.1em;
}

/* Softer top-to-bottom scrim so text stays readable without a heavy wash */
.page-pdp .pd-hero::after {
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.15) 0%,
			rgba(0, 0, 0, 0.02) 30%,
			rgba(0, 0, 0, 0.25) 70%,
			rgba(0, 0, 0, 0.55) 100%);
}

/* =========================================================================
   Gallery — a touch more compact; softer surface on desktop
   ========================================================================= */
.page-pdp .pd-overview {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-pdp .pd-gallery__stage {
	padding: 0;
	max-height: none;
	border-radius: 16px;
	aspect-ratio: 1 / 1;
}

/* The product source images are square, but the robot is composed
   toward the bottom of the frame with the cable arcing into a band of
   white at the top. Anchor the image to the top of the stage so any
   non-square slides land flush with the top of the right column. The
   thumbnails below stay unchanged. */
.page-pdp .pd-gallery__slide {
	align-items: flex-start;
}

.page-pdp .pd-gallery__slide img {
	object-position: top center;
}

/* Crumbs bar: smaller, quieter separator between hero and product */
.page-pdp .pd-crumbs-bar {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

/* =========================================================================
   Right buy-column — clearer hierarchy, less visual weight
   ========================================================================= */

/* Eyebrow: smaller, neutral by default (keep the accent color but quieter) */
.page-pdp .pd-buy-col .pd-overview-eyebrow {
	padding: 0.22rem 0.6rem;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	background: rgba(0, 113, 227, 0.08);
}

.page-pdp .pd-hero--uv ~ .pd-crumbs-bar ~ .pd-overview .pd-buy-col .pd-overview-eyebrow {
	background: rgba(124, 77, 255, 0.1);
}

/* Product title: slightly tighter so the hierarchy reads cleanly */
.page-pdp .pd-product-title {
	font-size: clamp(2rem, 3.8vw, 2.5rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 0.55rem !important;
}

.page-pdp .pd-product-tagline {
	font-size: 1rem;
	line-height: 1.5;
	color: #6e6e73;
	margin: 0 0 1.25rem;
	max-width: 30rem;
}

/* At-a-glance chips: a hair smaller, quieter surface */
.page-pdp .pd-hl-chips {
	gap: 0.35rem;
	margin-bottom: 1.25rem;
}

.page-pdp .pd-hl-chips li {
	padding: 0.32rem 0.7rem 0.32rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 500;
	background: #fafafa;
	border-color: #ececef;
	color: #1d1d1f;
}

.page-pdp .pd-hl-chips li svg {
	width: 13px;
	height: 13px;
}

/* Reviews compact row: tighter spacing */
.page-pdp .pd-reviews-compact {
	margin-bottom: 1rem;
	gap: 0.45rem 0.6rem;
}

.page-pdp .pd-reviews-link {
	font-size: 0.75rem;
	color: #6e6e73;
	text-decoration: none;
}

.page-pdp .pd-reviews-link:hover {
	color: #0071e3;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Buy box: remove the heavy top/bottom rule pair — use only a soft top line */
.page-pdp .pd-buy-box {
	padding: 1.25rem 0 0;
	border-top: 1px solid #ececef;
	border-bottom: none;
	margin-bottom: 1.5rem;
}

.page-pdp .pd-price {
	font-size: clamp(1.5rem, 2.6vw, 1.75rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.35rem;
	color: #1d1d1f;
}

.page-pdp .pd-price-note {
	font-size: 0.8125rem;
	color: #86868b;
	margin-bottom: 0.9rem;
}

/* Availability: flatten — no boxed pill, just a quiet inline marker */
.page-pdp .pd-availability {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	font-size: 0.8125rem;
	color: #1d1d1f;
	margin-bottom: 1rem;
	gap: 0.4rem;
}

.page-pdp .pd-availability--in-stock::before {
	width: 0.4rem;
	height: 0.4rem;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.14);
}

/* Preorder availability: green pulse (positive — available, ships later) +
   secondary line for the ship-by note. */
.page-pdp .pd-availability--preorder::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #34c759;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
	flex-shrink: 0;
}

.page-pdp .pd-availability-note {
	font-size: 0.75rem;
	line-height: 1.5;
	color: #86868b;
	margin: -0.5rem 0 1rem;
	max-width: 26rem;
}

/* Compare-at strikethrough next to the price. */
.page-pdp .pd-price-compare {
	font-size: 0.75em;
	font-weight: 500;
	color: #86868b;
	text-decoration: line-through;
	letter-spacing: -0.01em;
}

/* Preorder CTAs reuse the regular primary "Buy" / "Add to bag" styling — the
   green Preorder availability pill above the button already signals state,
   so the action itself stays the same blue as a normal purchase. The
   `--preorder` modifier class is kept on the markup as a hook for future
   tweaks but no longer overrides the button color. */

.pd-hero__preorder-note {
	display: inline-block;
	margin-left: 0.6rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.01em;
}

/* CTA button: keep bold, but a notch tighter */
.page-pdp .pd-btn-add {
	padding: 0.9rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.008em;
	margin-bottom: 0.85rem;
	box-shadow: 0 1px 2px rgba(0, 113, 227, 0.14),
		0 8px 22px -10px rgba(0, 113, 227, 0.28);
}

/* Trust row: single line on most widths, no top border */
.page-pdp .pd-buy-trust {
	margin: 0.35rem 0 0.9rem;
	padding: 0;
	border-top: none;
	grid-template-columns: repeat(3, auto);
	gap: 0.35rem 1.15rem;
	justify-content: start;
	font-size: 0.8125rem;
	color: #6e6e73;
}

@media (max-width: 47.99em) {
	.page-pdp .pd-buy-trust {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}
}

.page-pdp .pd-buy-trust__icon {
	width: 0.95rem;
	height: 0.95rem;
	font-size: 0.625rem;
	background: rgba(0, 113, 227, 0.1);
}

/* Meta links row: smaller, lighter */
.page-pdp .pd-buy-meta {
	padding-top: 0.9rem;
	border-top: 1px solid #f0f0f3;
	font-size: 0.8125rem;
	gap: 0.4rem 0.9rem;
}

.page-pdp .pd-buy-meta a {
	color: #6e6e73;
	font-weight: 500;
}

.page-pdp .pd-buy-meta a:hover {
	color: #0071e3;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Lead paragraph after buy box: smaller, easier to scan */
.page-pdp .pd-product-story .pd-lead {
	font-size: 1rem;
	line-height: 1.55;
	color: #424245;
	margin: 0 0 1rem;
}

/* Feature list: drop the boxed card, use a simple divider list */
.page-pdp .pd-feature-list {
	border: none;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	border-top: 1px solid #f0f0f3;
}

.page-pdp .pd-feature-list li {
	padding: 0.75rem 0;
	border-bottom: 1px solid #f0f0f3;
	gap: 0.7rem;
	font-size: 0.9375rem;
	color: #1d1d1f;
}

.page-pdp .pd-feature-list li::before {
	width: 16px;
	height: 16px;
	margin-top: 0.25em;
	background:
		rgba(0, 113, 227, 0.1)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 10px no-repeat;
}

.page-pdp .pd-hero--uv ~ * .pd-feature-list li::before {
	background:
		rgba(124, 77, 255, 0.12)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 10px no-repeat;
}

/* =========================================================================
   PDP — Apple AirPods-inspired pass (2026-04-17)
   Centered sticky header + alternating dark/light feature sections
   with oversized multi-line typography. Scoped to .page-pdp.
   ========================================================================= */

/* ---------- Sticky subnav: product label left, centered nav, CTA right ---------- */
.page-pdp .pd-subnav-inner {
	position: relative;
	align-items: center;
	gap: 0.75rem 1rem;
}

.page-pdp .pd-subnav-product {
	display: none;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: #1d1d1f;
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0.2rem 0;
}

@media print, screen and (min-width: 48em) {
	.page-pdp .pd-subnav-product {
		display: inline-block;
	}

	.page-pdp .pd-subnav-inner .leftoffer {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
	}

	.page-pdp .pd-subnav-inner .leftnav {
		justify-content: center;
	}
}

/* Tighten the subnav leftnav buttons to read like Apple's thin local nav */
.page-pdp .pd-subnav .leftnav button {
	font-size: 0.8125rem;
	padding: 0.3rem 0.7rem !important;
	color: #424245;
}

.page-pdp .pd-subnav .leftnav button:hover,
.page-pdp .pd-subnav .leftnav button:focus {
	background: transparent !important;
	color: #1d1d1f;
}

.page-pdp .pd-subnav .leftnav button.is-active {
	background: transparent !important;
	color: #1d1d1f !important;
	font-weight: 500;
}

/* CTA pill + inline product suffix (e.g. "Buy Clear UV") */
.page-pdp .pd-subnav-buy__suffix {
	display: none;
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-subnav-buy__suffix {
		display: inline;
	}
}

/* ---------- Apple-style kicker (small all-caps category label) ---------- */
.page-pdp .pd-feature-kicker {
	font-size: clamp(0.875rem, 1.05vw, 1rem);
	font-weight: 600;
	letter-spacing: -0.008em;
	color: #6e6e73;
	margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem);
	line-height: 1.25;
	text-transform: none;
}

.page-pdp .pd-feature-kicker--center {
	text-align: center;
}

.page-pdp .pd-feature-kicker--light {
	color: rgba(245, 245, 247, 0.72);
}

/* ---------- Oversized Apple-style multi-line headline ---------- */
.page-pdp .pd-xl-headline {
	font-size: clamp(2.25rem, 6.4vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 600;
	margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
}

@media (max-width: 47.99em) {
	.page-pdp .pd-xl-headline br {
		display: none;
	}
}

/* ---------- Dark alternating section modifier ---------- */
.page-pdp .pd-section--dark {
	background: #000 !important;
	color: #f5f5f7;
}

.page-pdp .pd-section--dark .pd-feature-kicker,
.page-pdp .pd-section--dark .pd-overview-eyebrow {
	color: rgba(245, 245, 247, 0.72) !important;
	background: transparent !important;
	padding: 0 !important;
	letter-spacing: -0.008em;
	text-transform: none;
}

.page-pdp .pd-section--dark .cr-heading-xl,
.page-pdp .pd-section--dark .pd-section-title,
.page-pdp .pd-section--dark .pd-xl-headline,
.page-pdp .pd-section--dark h2,
.page-pdp .pd-section--dark h3 {
	color: #f5f5f7 !important;
}

.page-pdp .pd-section--dark .cr-lead,
.page-pdp .pd-section--dark .pd-section-lead {
	color: rgba(245, 245, 247, 0.72) !important;
}

/* ---------- Story-split, dark variant (Apple "Audio performance" pattern) ---------- */
.page-pdp .pd-story-split.pd-section--dark {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.page-pdp .pd-story-split.pd-section--dark .cr-split {
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.page-pdp .pd-story-split.pd-section--dark .pd-xl-headline {
	font-size: clamp(2.25rem, 6.4vw, 4rem);
}

.page-pdp .pd-story-split.pd-section--dark .pd-story-split__img {
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--primary {
	background: #f5f5f7;
	color: #1d1d1f;
	border-color: #f5f5f7;
}

.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--primary:hover,
.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--primary:focus {
	background: #fff;
	border-color: #fff;
	color: #0071e3;
}

.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--ghost {
	color: #f5f5f7;
	border-color: rgba(245, 245, 247, 0.32);
	background: transparent;
}

.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--ghost:hover,
.page-pdp .pd-story-split.pd-section--dark .pd-story-split__actions .cr-btn--ghost:focus {
	color: #f5f5f7;
	border-color: rgba(245, 245, 247, 0.72);
	background: rgba(245, 245, 247, 0.06);
}

/* ---------- Scenes, dark variant ---------- */
.page-pdp .pd-scenes.pd-section--dark {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header {
	text-align: left;
	max-width: 56rem;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header .pd-feature-kicker,
.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header .pd-section-lead {
	text-align: left;
	margin-left: 0;
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header .pd-section-lead {
	max-width: 44rem;
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header .pd-xl-headline {
	font-size: clamp(2.25rem, 6.4vw, 4rem);
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__tile {
	border-radius: 18px;
	background: #111;
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}

.page-pdp .pd-scenes.pd-section--dark .pd-scenes__caption {
	color: rgba(245, 245, 247, 0.88);
}

/* ---------- Bento: bigger Apple-like heading on light bg ---------- */
.page-pdp .pd-bento .pd-xl-headline {
	margin-bottom: 0.75rem;
}

.page-pdp .pd-bento .pd-section-lead--center {
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	color: #6e6e73;
	margin: 0 auto 2rem;
}

/* ---------- Quote band: slot the kicker above the big title ---------- */
.page-pdp .pd-quote::before {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.48) 45%,
		rgba(0, 0, 0, 0.72) 100%);
}

.page-pdp .pd-quote__inner .pd-feature-kicker {
	color: rgba(245, 245, 247, 0.88);
	margin-bottom: 0.85rem;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.page-pdp .pd-quote__inner .pd-xl-headline {
	color: #fff;
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	margin-bottom: 0.85rem;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.page-pdp .pd-quote__text {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* ---------- Compare band: bigger Apple-style headline ---------- */
.page-pdp .pd-compare-band .pd-xl-headline {
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	margin-bottom: 1rem;
}

/* ---------- Hero: slightly tighter Apple-like stack ---------- */
.page-pdp .pd-hero__title {
	font-weight: 600;
}

/* ---------- Stats band: give it a touch more breathing room against dark sections ---------- */
.page-pdp .pd-home-stats + .pd-story-split.pd-section--dark {
	margin-top: 0;
}


/* =========================================================================
   Home — AirPods-inspired pass (2026-04-17)
   Clear white↔black rhythm, Apple-style "grey body with bolded key phrase",
   a "Get the highlights" icon grid, and iconified how-it-works steps.
   ========================================================================= */

/* ---------- Grey paragraph with bolded key phrase (Apple pattern) ---------- */
#site-content .cr-lead strong,
#site-content .cr-page-hero__subtitle strong,
#site-content .cr-banner__subtitle strong,
#site-content .cr-home-steps__copy strong,
#site-content .cr-home-highlights__text strong {
	font-weight: 600;
	color: var(--cr-text, #1d1d1f);
	letter-spacing: -0.012em;
}

/* On dark surfaces, bolded phrase pops in white instead */
#site-content .cr-section--dark .cr-lead strong,
#site-content .cr-page-hero .cr-page-hero__subtitle strong,
#site-content .cr-banner .cr-banner__subtitle strong,
#site-content .cr-home-uv-showcase__lead strong,
#site-content .cr-home-lifestyle__lead strong,
#site-content .cr-home-finale__lead strong {
	color: #fff;
}

/* Allow inline <br> inside big titles to break cleanly on larger screens.
   NOTE: When these <br> are hidden on small screens the markup includes a
   literal space before the <br> so neighboring words don't merge. */
.cr-page-hero__title br,
.cr-banner__title br,
.cr-heading-xl br,
.pd-xl-headline br {
	display: inline;
}

@media (max-width: 47.99em) {
	.cr-page-hero__title br,
	.cr-banner__title br,
	.cr-home-highlights__title br,
	.pd-xl-headline br,
	.pd-quote__title br {
		display: none;
	}
}

/* ---------- "Get the highlights." icon grid ---------- */
.cr-home-highlights {
	background: #ffffff;
	padding-top: clamp(3.5rem, 9vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 9vw, 6.5rem);
	border-bottom: 1px solid var(--cr-border);
}

.cr-home-highlights__header {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
}

.cr-home-highlights__eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--cr-text-muted);
	text-align: center;
}

.cr-home-highlights__title {
	margin-bottom: 0.6rem;
}

.cr-home-highlights__lead {
	margin: 0 auto;
	max-width: 36rem;
}

.cr-home-highlights__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.cr-home-highlights__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.cr-home-highlights__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(1.5rem, 2.5vw, 2.25rem);
	}
}

.cr-home-highlights__tile {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.25rem);
	background: #f5f5f7;
	border-radius: var(--cr-radius-xl, 1.75rem);
	border: 1px solid rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: transform 0.35s var(--cr-ease-out), box-shadow 0.35s var(--cr-ease-out);
}

.cr-home-highlights__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.22);
}

.cr-home-highlights__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--cr-accent, #0071e3);
	background: rgba(0, 113, 227, 0.1);
	border-radius: 999px;
	flex-shrink: 0;
}

.cr-home-highlights__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.cr-home-highlights__icon--uv {
	color: #7457e0;
	background: rgba(116, 87, 224, 0.14);
}

.cr-home-highlights__text {
	margin: 0;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.55;
	color: var(--cr-text-muted, #6e6e73);
	letter-spacing: -0.01em;
}

/* ---------- Iconified "Set it up. Forget it." steps ---------- */
.cr-home-steps__eyebrow {
	display: block;
	margin: 0 auto 0.75rem;
	color: var(--cr-text-muted);
	text-align: center;
}

.cr-home-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cr-home-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
	color: var(--cr-accent, #0071e3);
	background: rgba(0, 113, 227, 0.1);
	border-radius: 999px;
}

.cr-home-steps__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.cr-home-steps__item .cr-home-steps__number {
	width: auto;
	height: auto;
	display: inline;
	margin: 0;
	padding: 0;
	background: transparent;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cr-text-muted, #6e6e73);
}

/* ---------- Bold key phrase inside step copy — stays subdued on light section ---------- */
.cr-home-steps__item .cr-home-steps__copy strong {
	color: var(--cr-text, #1d1d1f);
}

/* ---------- Home hero: allow multi-line Apple-style headline ---------- */
#site-content > .cr-page-hero:first-of-type .cr-page-hero__title {
	max-width: 20ch;
}

/* ---------- Banner title line-break: use wider max-width when multi-line ---------- */
.cr-banner--align-center .cr-banner__title {
	max-width: 22ch;
}

/* ---------- Tighter bolded-phrase treatment inside banner/dark subtitles ---------- */
.cr-banner--dark .cr-banner__subtitle {
	color: rgba(255, 255, 255, 0.82);
}

.cr-banner--dark .cr-banner__subtitle strong {
	color: #fff;
	font-weight: 600;
}


/* =========================================================================
   PDP — Apple polish pass v2 (2026-04-17)
   - Bold Apple-style subhead (`.pd-feature-sub`)
   - Blue chevron "arrow" links (`.pd-arrow-link`)
   - Softer tonal alternating backgrounds + bigger whitespace
   - Rounded Apple-size card radii on bento / scenes
   - Hero polish (tighter Apple typography, arrow-link hero CTA)
   ========================================================================= */

/* ---------- Apple-style short bold subhead ---------- */
.page-pdp .pd-feature-sub {
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #1d1d1f;
	margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem);
	text-wrap: balance;
}

.page-pdp .pd-section--dark .pd-feature-sub,
.page-pdp .pd-quote .pd-feature-sub {
	color: #f5f5f7;
}

/* ---------- Apple-style chevron arrow link ---------- */
.page-pdp .pd-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #0071e3;
	text-decoration: none;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	line-height: 1.3;
}

.page-pdp .pd-arrow-link::after {
	content: "\203A";
	display: inline-block;
	font-size: 1.2em;
	line-height: 1;
	transform: translateY(-0.04em);
	transition: transform 0.2s ease;
}

.page-pdp .pd-arrow-link:hover,
.page-pdp .pd-arrow-link:focus {
	color: #0077ed;
	text-decoration: underline;
	opacity: 1 !important;
}

.page-pdp .pd-arrow-link:hover::after,
.page-pdp .pd-arrow-link:focus::after {
	transform: translate(0.15em, -0.04em);
}

.page-pdp .pd-arrow-link--light {
	color: #2997ff;
}

.page-pdp .pd-arrow-link--light:hover,
.page-pdp .pd-arrow-link--light:focus {
	color: #5eb3ff;
}

/* Cancel hero-link decorations when it's now an arrow link */
.page-pdp .pd-hero__link.pd-arrow-link {
	opacity: 1;
	border-bottom: 0;
	padding-bottom: 0;
	margin-left: 0.25rem;
}

/* ---------- Tonal alternating light backgrounds (Apple "off-white" feel) ---------- */
.page-pdp .pd-bento {
	background: #fbfbfd;
}

.page-pdp .pd-specs-section {
	background: #fff;
}

.page-pdp .pd-reviews-section,
.page-pdp .pd-faq-section {
	background: #fbfbfd;
}

.page-pdp .pd-compare-band {
	background: #fff;
}

/* ---------- Generous Apple-scale vertical whitespace ---------- */
.page-pdp .pd-bento,
.page-pdp .pd-specs-section,
.page-pdp .pd-reviews-section,
.page-pdp .pd-faq-section,
.page-pdp .pd-compare-band {
	padding-top: clamp(3.5rem, 7vw, 6rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

.page-pdp .pd-section--dark.pd-story-split,
.page-pdp .pd-section--dark.pd-scenes {
	padding-top: clamp(4rem, 8vw, 7rem) !important;
	padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

/* ---------- Bento: Apple-sized rounded cards, bigger tile titles ---------- */
.page-pdp .pd-bento__tile {
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -16px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.page-pdp .pd-bento__media {
	overflow: hidden;
}

.page-pdp .pd-bento__title {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.18;
	color: #1d1d1f;
}

.page-pdp .pd-bento__text {
	color: #6e6e73;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.45;
}

.page-pdp .pd-bento__header {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- Scenes: rounded Apple-style tiles ---------- */
.page-pdp .pd-scenes__tile {
	border-radius: 22px;
	overflow: hidden;
}

.page-pdp .pd-scenes__caption {
	font-size: 0.9375rem;
	letter-spacing: -0.008em;
}

/* ---------- Quote band: tighter Apple finale ---------- */
.page-pdp .pd-quote {
	min-height: min(70vh, 620px);
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.page-pdp .pd-quote__cta {
	margin: 1.75rem 0 0;
	text-align: center;
}

.page-pdp .pd-quote__cta .pd-arrow-link,
.page-pdp .pd-quote__cta .pd-arrow-link--light {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.7rem 1.4rem !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 999px;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.page-pdp .pd-quote__cta .pd-arrow-link:hover,
.page-pdp .pd-quote__cta .pd-arrow-link:focus,
.page-pdp .pd-quote__cta .pd-arrow-link--light:hover,
.page-pdp .pd-quote__cta .pd-arrow-link--light:focus {
	background: rgba(255, 255, 255, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.85) !important;
	color: #fff !important;
	text-decoration: none;
	transform: translateY(-1px);
}

/* ---------- Hero: bump typography a touch toward Apple headline feel ---------- */
.page-pdp .pd-hero {
	min-height: min(82vh, 720px);
}

.page-pdp .pd-hero__title {
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 600;
	text-wrap: balance;
	margin-bottom: 0.85rem;
}

.page-pdp .pd-hero__sub {
	font-size: clamp(1rem, 1.3vw, 1.1875rem);
	line-height: 1.45;
	max-width: 44ch;
	margin-bottom: 1.75rem;
	color: rgba(255, 255, 255, 0.88);
}

.page-pdp .pd-hero__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
}

.page-pdp .pd-hero__cta {
	gap: 1rem 1.25rem;
	align-items: center;
}

/* ---------- Compare band polish ---------- */
.page-pdp .pd-compare-band__header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---------- Stats band: tighter Apple rhythm in PDP context ---------- */
.page-pdp .pd-home-stats {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.page-pdp .pd-home-stats .cr-home-stats__value {
	font-size: clamp(3rem, 7.5vw, 5.25rem);
	letter-spacing: -0.04em;
}

/* ---------- Subnav: crisper active state (thin underline, Apple style) ---------- */
.page-pdp .pd-subnav .leftnav button.is-active {
	position: relative;
}

.page-pdp .pd-subnav .leftnav button.is-active::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: -0.05rem;
	height: 2px;
	background: #1d1d1f;
	border-radius: 2px;
}

/* ---------- Overview eyebrow: calmer, Apple-style type treatment ---------- */
.page-pdp .pd-overview-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.008em;
	text-transform: none;
	color: #6e6e73;
	background: transparent;
	padding: 0;
}

/* ---------- Hide the separator space between dark-to-dark sections ---------- */
.page-pdp .pd-section--dark + .pd-quote,
.page-pdp .pd-scenes.pd-section--dark + .pd-quote {
	margin-top: 0;
}

/* =========================================================================
   PDP — Apple polish pass v3 (2026-04-17)
   Modelled on apple.com/airpods-4/
   - "Get the highlights." → horizontal snap-scroll rail with arrow buttons
   - Apple's classic off-white #f5f5f7 for tonal sections
   - Tighter hero + nav rhythm, rounded corners and calm shadows
   ========================================================================= */

/* ---------- Apple classic off-white (#f5f5f7) for tonal light sections ---------- */
.page-pdp .pd-bento,
.page-pdp .pd-reviews-section,
.page-pdp .pd-faq-section {
	background: #f5f5f7;
}

.page-pdp .pd-specs-section,
.page-pdp .pd-compare-band {
	background: #fff;
}

/* Bento card background: pure white on grey canvas (Apple pattern) */
.page-pdp .pd-bento__tile {
	background: #fff;
}

/* ---------- "Get the highlights." rail header ---------- */
.page-pdp .pd-bento--rail .pd-bento__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 88rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 3vw, 2rem);
	padding-right: clamp(1rem, 3vw, 2rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	text-align: left;
}

.page-pdp .pd-bento--rail .pd-bento-rail-title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: #1d1d1f;
	text-align: left;
	margin: 0;
}

.page-pdp .pd-bento--rail .pd-bento-rail-controls {
	display: none;
	gap: 0.5rem;
	flex: 0 0 auto;
}

@media (min-width: 48em) {
	.page-pdp .pd-bento--rail .pd-bento-rail-controls {
		display: inline-flex;
	}
}

.page-pdp .pd-bento-rail-btn {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: #e8e8ed;
	color: #1d1d1f;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
	padding: 0;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.page-pdp .pd-bento-rail-btn:hover {
	background: #d6d6db;
}

.page-pdp .pd-bento-rail-btn:active {
	transform: scale(0.96);
}

.page-pdp .pd-bento-rail-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.page-pdp .pd-bento-rail-btn__icon {
	display: inline-block;
	transform: translateY(-0.08em);
}

/* ---------- Convert the bento grid to a horizontal snap rail ---------- */
.page-pdp .pd-bento--rail .pd-bento__grid {
	display: flex;
	grid-template-columns: none;
	gap: clamp(0.75rem, 1.5vw, 1rem);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: clamp(1rem, 3vw, 2rem);
	padding: 0.25rem clamp(1rem, 3vw, 2rem) 1.5rem;
	max-width: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.page-pdp .pd-bento--rail .pd-bento__grid::-webkit-scrollbar {
	display: none;
}

/* Equalize every tile width in rail mode, regardless of size modifier */
.page-pdp .pd-bento--rail .pd-bento__tile,
.page-pdp .pd-bento--rail .pd-bento__tile--wide,
.page-pdp .pd-bento--rail .pd-bento__tile--half,
.page-pdp .pd-bento--rail .pd-bento__tile--third,
.page-pdp .pd-bento--rail .pd-bento__tile--text {
	flex: 0 0 auto;
	grid-column: auto;
	scroll-snap-align: start;
	width: min(88vw, 340px);
	min-height: 26rem;
	border-radius: 22px;
	border: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 34px -18px rgba(0, 0, 0, 0.12);
}

@media (min-width: 48em) {
	.page-pdp .pd-bento--rail .pd-bento__tile,
	.page-pdp .pd-bento--rail .pd-bento__tile--wide,
	.page-pdp .pd-bento--rail .pd-bento__tile--half,
	.page-pdp .pd-bento--rail .pd-bento__tile--third,
	.page-pdp .pd-bento--rail .pd-bento__tile--text {
		width: 360px;
		min-height: 28rem;
	}
}

/* Tighten tile inner media / body rhythm in rail mode */
.page-pdp .pd-bento--rail .pd-bento__media {
	aspect-ratio: 16 / 9;
	min-height: 0;
	flex: 0 0 auto;
}

.page-pdp .pd-bento--rail .pd-bento__body {
	padding: clamp(1rem, 2vw, 1.5rem);
}

/* Wide/text/lifestyle bodies look OK at uniform width — align text left */
.page-pdp .pd-bento--rail .pd-bento__tile--text .pd-bento__body,
.page-pdp .pd-bento--rail .pd-bento__tile--third .pd-bento__body,
.page-pdp .pd-bento--rail .pd-bento__tile--lifestyle .pd-bento__body {
	padding: clamp(1rem, 2vw, 1.5rem);
}

.page-pdp .pd-bento--rail .pd-bento__tile--lifestyle .pd-bento__body {
	position: static;
	color: inherit;
	background: none;
}

.page-pdp .pd-bento--rail .pd-bento__tile--lifestyle .pd-bento__title {
	color: #1d1d1f;
}

.page-pdp .pd-bento--rail .pd-bento__tile--lifestyle .pd-bento__text {
	color: #424245;
}

.page-pdp .pd-bento--rail .pd-bento__tile--lifestyle .pd-mat-icon {
	background: #eef2f7;
	color: #1d4ed8;
}

/* ---------- Faint edge fade hints you can scroll ---------- */
.page-pdp .pd-bento--rail {
	position: relative;
}

@media (min-width: 48em) {
	.page-pdp .pd-bento--rail::before,
	.page-pdp .pd-bento--rail::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: clamp(1.5rem, 3vw, 3rem);
		height: 70%;
		pointer-events: none;
		z-index: 2;
	}

	.page-pdp .pd-bento--rail::before {
		left: 0;
		background: linear-gradient(to right, rgba(245, 245, 247, 1), rgba(245, 245, 247, 0));
	}

	.page-pdp .pd-bento--rail::after {
		right: 0;
		background: linear-gradient(to left, rgba(245, 245, 247, 1), rgba(245, 245, 247, 0));
	}
}

/* ---------- Scroll-reveal safe default for rail tiles (flex doesn't love the initial hidden transform) ---------- */
.page-pdp .pd-bento--rail [data-reveal],
.page-pdp .pd-bento--rail .pd-bento__grid > * {
	opacity: 1;
	transform: none;
}

/* ---------- Overview section: Apple off-white tonal ---------- */
.page-pdp .pd-overview {
	background: #fff;
}

/* ---------- Stats band: bigger Apple-scale numbers ---------- */
.page-pdp .pd-home-stats .cr-home-stats__value {
	font-size: clamp(3.25rem, 8.5vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1;
}

.page-pdp .pd-home-stats .cr-home-stats__label {
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	color: #6e6e73;
	letter-spacing: -0.005em;
}

/* ---------- Section titles (Apple larger headline rhythm) ---------- */
.page-pdp .pd-section-title {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	letter-spacing: -0.03em;
	line-height: 1.06;
	font-weight: 600;
}

/* ---------- Compare band: calmer Apple "Keep exploring" band ---------- */
.page-pdp .pd-compare-band__title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	letter-spacing: -0.025em;
	font-weight: 600;
	line-height: 1.08;
}

/* ---------- Reviews / FAQ section headers: calmer ---------- */
.page-pdp .pd-reviews-section h2,
.page-pdp .pd-faq-section h2,
.page-pdp .pd-specs-section h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	letter-spacing: -0.025em;
	font-weight: 600;
	line-height: 1.1;
}

/* ---------- Subnav: a touch more breathing room & Apple sizing ---------- */
.page-pdp .pd-subnav {
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	background: rgba(251, 251, 253, 0.72);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.page-pdp .pd-subnav .leftnav button {
	font-size: 0.75rem;
	letter-spacing: -0.005em;
	font-weight: 400;
	color: #1d1d1f;
}

.page-pdp .pd-subnav .pd-subnav-product {
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	color: #1d1d1f;
}

.page-pdp .pd-subnav .pd-subnav-buy {
	font-size: 0.75rem;
	padding: 0.45rem 0.95rem;
	border-radius: 980px;
	background: #0071e3;
	color: #fff;
	font-weight: 400;
}

.page-pdp .pd-subnav .pd-subnav-buy:hover {
	background: #0077ed;
}

/* =========================================================================
   PDP — Apple Watch Series 11 style sticky local nav
   Modelled on apple.com/apple-watch-series-11/
   - Thin frosted bar (~52px), 3 minimal text nav items
   - NO pill backgrounds — just color + weight change on hover/active
   - Hairline bottom border + hairline active indicator
   ========================================================================= */

/* Bar itself — slightly thinner, softer alpha, Apple frost */
#stickynav.pd-subnav,
.page-pdp #stickynav.pd-subnav,
.page-pdp .pd-subnav {
	background: rgba(251, 251, 253, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
}

/* Tighten the row rhythm — Apple's local nav is visually ~52px tall */
.page-pdp .pd-subnav-inner {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 52px;
	gap: 0.5rem 1rem;
}

.page-pdp .pd-subnav .productnav {
	padding: 0 !important;
	min-height: 52px;
	align-items: center;
}

/* Product label on the left — Apple-weight */
.page-pdp .pd-subnav .pd-subnav-product {
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	color: #1d1d1f;
	line-height: 1.2;
}

/* Nav buttons — flat, no pills, Apple-quiet */
.page-pdp .pd-subnav .leftnav {
	gap: 0;
	column-gap: 0;
}

.page-pdp .pd-subnav .leftnav button,
.page-pdp .pd-subnav .leftnav button:hover,
.page-pdp .pd-subnav .leftnav button:focus,
.page-pdp .pd-subnav .leftnav button.is-active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.page-pdp .pd-subnav .leftnav button {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: #1d1d1f;
	padding: 0 0.9rem !important;
	margin: 0 !important;
	line-height: 1.2;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease;
	opacity: 0.88;
}

.page-pdp .pd-subnav .leftnav button:hover,
.page-pdp .pd-subnav .leftnav button:focus {
	opacity: 1;
	color: #1d1d1f !important;
	text-decoration: none;
}

.page-pdp .pd-subnav .leftnav button.is-active {
	color: #1d1d1f !important;
	font-weight: 400;
	opacity: 1;
}

/* Hairline active indicator — 1px line flush to the bottom, Apple-crisp */
.page-pdp .pd-subnav .leftnav button.is-active::after {
	content: "";
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0;
	height: 1px;
	background: #1d1d1f;
	border-radius: 0;
}

/* CTA pill on the right — tighter Apple Watch-style pill */
.page-pdp .pd-subnav .pd-subnav-cta {
	align-items: center;
}

.page-pdp .pd-subnav .pd-subnav-price {
	font-size: 0.75rem;
	color: #6e6e73;
	letter-spacing: -0.005em;
}

.page-pdp .pd-subnav .pd-subnav-buy,
.page-pdp .pd-subnav a.pd-subnav-buy {
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.5rem 0.95rem;
	border-radius: 980px;
	background: #0071e3;
	color: #fff !important;
	font-weight: 400;
	letter-spacing: -0.005em;
	border: 0;
	box-shadow: none;
	transition: background 0.15s ease;
}

.page-pdp .pd-subnav .pd-subnav-buy:hover,
.page-pdp .pd-subnav .pd-subnav-buy:focus,
.page-pdp .pd-subnav a.pd-subnav-buy:hover,
.page-pdp .pd-subnav a.pd-subnav-buy:focus {
	background: #0077ed;
	color: #fff !important;
}

.page-pdp .pd-subnav .pd-subnav-buy--outline {
	background: transparent;
	color: #0071e3 !important;
	border: 1px solid #0071e3;
}

.page-pdp .pd-subnav .pd-subnav-buy--outline:hover,
.page-pdp .pd-subnav .pd-subnav-buy--outline:focus {
	background: rgba(0, 113, 227, 0.06);
	color: #0071e3 !important;
}

/* Small-screen polish: center the 3 nav items, hide price span */
@media (max-width: 47.99em) {
	.page-pdp .pd-subnav .pd-subnav-price {
		display: none;
	}
	.page-pdp .pd-subnav .leftnav button {
		padding: 0 0.65rem !important;
		min-height: 48px;
	}
	.page-pdp .pd-subnav-inner,
	.page-pdp .pd-subnav .productnav {
		min-height: 48px;
	}
}

/* =========================================================================
   PDP — Apple "Safety / A real lifeline" style text-dense feature section
   Modelled on apple.com/apple-watch-series-11/
   Big type on white, wide hero image, then a list of bold-lead-in
   paragraphs separated by thin hairline rules.
   ========================================================================= */
.page-pdp .pd-features-detail {
	background: #fff;
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 3vw, 2rem);
	color: #1d1d1f;
}

.page-pdp .pd-features-detail__inner {
	max-width: 62rem;
	margin: 0 auto;
}

.page-pdp .pd-features-detail__header {
	max-width: 50rem;
	margin: 0 auto clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}

.page-pdp .pd-features-detail__header .pd-feature-kicker {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: #6e6e73;
}

.page-pdp .pd-features-detail__title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	letter-spacing: -0.04em;
	line-height: 1.04;
	font-weight: 600;
	color: #1d1d1f;
	margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
	text-align: center;
	text-wrap: balance;
}

.page-pdp .pd-features-detail__lead {
	font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
	line-height: 1.45;
	color: #6e6e73;
	text-align: center;
	margin: 0 auto;
	max-width: 44rem;
	text-wrap: pretty;
	letter-spacing: -0.01em;
}

.page-pdp .pd-features-detail__hero {
	margin: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px -24px rgba(0, 0, 0, 0.18);
}

.page-pdp .pd-features-detail__hero picture,
.page-pdp .pd-features-detail__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

@media (max-width: 47.99em) {
	.page-pdp .pd-features-detail__hero picture,
	.page-pdp .pd-features-detail__hero img {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}
}

.page-pdp .pd-features-detail__list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 48rem;
}

/* Legacy (non-grid) list rows — kept for any list without the grid modifier */
.page-pdp .pd-features-detail__list:not(.pd-features-detail__grid) > li {
	padding: clamp(1.1rem, 2vw, 1.5rem) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.page-pdp .pd-features-detail__list:not(.pd-features-detail__grid) > li:first-child {
	border-top: 0;
	padding-top: 0;
}

.page-pdp .pd-features-detail__list:not(.pd-features-detail__grid) > li:last-child {
	padding-bottom: 0;
}

.page-pdp .pd-features-detail__list p {
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.5;
	color: #6e6e73;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: pretty;
}

.page-pdp .pd-features-detail__list strong {
	color: #1d1d1f;
	font-weight: 600;
	margin-right: 0.25em;
}

.page-pdp .pd-features-detail__list a {
	color: #0071e3;
	text-decoration: none;
}

.page-pdp .pd-features-detail__list a:hover,
.page-pdp .pd-features-detail__list a:focus {
	text-decoration: underline;
}

/* =========================================================================
   PDP — Features detail: 3 × 2 icon-topped grid (desktop)
   Added 2026-04-17. Clear hierarchy: icon → title → body.
   ========================================================================= */

.page-pdp .pd-features-detail__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	max-width: 62rem;
	margin: 0 auto;
}

@media print, screen and (min-width: 40em) {
	.page-pdp .pd-features-detail__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-features-detail__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.75rem);
	}
}

.page-pdp .pd-features-detail__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	border: 0;
	margin: 0;
	text-align: left;
}

/* Icon on top — quiet Apple-style circular tile, not heavy */
.page-pdp .pd-features-detail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 1.1rem;
	border-radius: 14px;
	background: #f5f5f7;
	color: #1d1d1f;
	flex-shrink: 0;
}

.page-pdp .pd-features-detail__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.page-pdp .pd-features-detail__item-title {
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: #1d1d1f;
	margin: 0 0 0.45rem;
	text-wrap: balance;
}

.page-pdp .pd-features-detail__grid .pd-features-detail__item > p {
	font-size: clamp(0.9375rem, 1vw, 1rem);
	line-height: 1.5;
	color: #6e6e73;
	letter-spacing: -0.008em;
	margin: 0;
	text-wrap: pretty;
}

@media (max-width: 39.99em) {
	.page-pdp .pd-features-detail__icon {
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: 0.9rem;
	}

	.page-pdp .pd-features-detail__icon svg {
		width: 1.375rem;
		height: 1.375rem;
	}
}

/* Neighbor spacing — tight against surrounding dark sections */
.page-pdp .pd-scenes.pd-section--dark + .pd-features-detail {
	margin-top: 0;
}

.page-pdp .pd-features-detail + .pd-quote {
	margin-top: 0;
}

/* =========================================================================
   PDP — Feature bento grid (.pd-feat)
   Updated 2026-06-01. Apple-style varied bento: one dark full-width hero,
   two wide split rows (image-left and image-right), a three-up narrow
   rail, and balanced two-up rows. All media is 16:9, tiles stretch to
   match row heights, and hovering a tile gently lifts the card and zooms
   the image. Layout class on the tile (--hero / --wide-left /
   --wide-right / --mid / --narrow) drives the grid span and the internal
   layout (split vs. stacked).
   ========================================================================= */

.page-pdp .pd-feat {
	background: #fbfbfd;
	color: #1d1d1f;
	padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem);
}

.page-pdp .pd-scenes.pd-section--dark + .pd-feat {
	margin-top: 0;
}

.page-pdp .pd-feat + .pd-features-detail {
	padding-top: clamp(2rem, 5vw, 4rem);
}

.page-pdp .pd-feat__inner {
	max-width: 87.5rem;
	margin: 0 auto;
}

.page-pdp .pd-feat__header {
	text-align: center;
	max-width: 56rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.page-pdp .pd-feat__header .pd-feature-kicker {
	margin-bottom: 0.85rem;
}

.page-pdp .pd-feat__title {
	font-size: clamp(2.125rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.022em;
	font-weight: 600;
	color: #1d1d1f;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.page-pdp .pd-feat__lead {
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.5;
	color: #6e6e73;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: pretty;
}

/* Bento grid: 6-col canvas on tablet+; on mobile every tile is full-width.
   Tiles in the same row stretch to a shared height so split + stacked
   layouts read as a single rhythm. */
.page-pdp .pd-feat__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	align-items: stretch;
}

@media print, screen and (min-width: 40em) {
	.page-pdp .pd-feat__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Base tile: stacks media over text. */
.page-pdp .pd-feat__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #f5f5f7;
	border-radius: 22px;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
	            box-shadow 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
	grid-column: 1 / -1;
}

.page-pdp .pd-feat__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.18),
	            0 4px 12px -6px rgba(0, 0, 0, 0.08);
}

/* Media: 16:9 by default. Split layouts override to fill the column. */
.page-pdp .pd-feat__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e8e8ed;
}

.page-pdp .pd-feat__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.page-pdp .pd-feat__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}

.page-pdp .pd-feat__tile:hover .pd-feat__media img {
	transform: scale(1.035);
}

.page-pdp .pd-feat__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.35rem, 2vw, 1.85rem) clamp(1.35rem, 2vw, 1.85rem) clamp(1.6rem, 2.4vw, 2.15rem);
	flex: 1 1 auto;
}

.page-pdp .pd-feat__eyebrow {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #86868b;
	margin: 0;
}

.page-pdp .pd-feat__title-tile {
	font-size: clamp(1.1875rem, 1.45vw, 1.4375rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #1d1d1f;
	margin: 0;
	text-wrap: balance;
}

.page-pdp .pd-feat__text {
	font-size: clamp(0.9375rem, 1vw, 1.0625rem);
	line-height: 1.5;
	color: #515154;
	letter-spacing: -0.008em;
	margin: 0;
	text-wrap: pretty;
	max-width: 42ch;
}

/* --- Tile spans on the 6-col grid (tablet+) -------------------------------
   --hero       full width
   --wide-left  span 4 (image on the left, copy on the right)
   --wide-right span 4 (copy on the left, image on the right)
   --mid        span 3 (stacked)
   --narrow     span 2 (stacked)
   On narrower viewports they collapse to two-up or full-width. */

@media print, screen and (min-width: 40em) and (max-width: 63.99em) {
	.page-pdp .pd-feat__tile--hero,
	.page-pdp .pd-feat__tile--wide-left,
	.page-pdp .pd-feat__tile--wide-right { grid-column: span 6; }
	.page-pdp .pd-feat__tile--mid       { grid-column: span 3; }
	.page-pdp .pd-feat__tile--narrow    { grid-column: span 3; }
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-feat__tile--hero       { grid-column: span 6; }
	.page-pdp .pd-feat__tile--wide-left,
	.page-pdp .pd-feat__tile--wide-right { grid-column: span 4; }
	.page-pdp .pd-feat__tile--mid        { grid-column: span 3; }
	.page-pdp .pd-feat__tile--narrow     { grid-column: span 2; }
}

/* --- Hero tile: dark, editorial split on desktop -------------------------
   The hero is the showstopper — Ultraviolet sanitation for Clear UV, the
   ultimate cleaning machine for Clear S — so it earns a dark background
   and inverted type, in classic Apple feature-page tradition. */
.page-pdp .pd-feat__tile--hero {
	background: #1d1d1f;
}

.page-pdp .pd-feat__tile--hero .pd-feat__eyebrow {
	color: #a1a1a6;
}

.page-pdp .pd-feat__tile--hero .pd-feat__title-tile {
	color: #f5f5f7;
}

.page-pdp .pd-feat__tile--hero .pd-feat__text {
	color: #d2d2d7;
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-feat__tile--hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: stretch;
		min-height: clamp(20rem, 30vw, 26rem);
	}

	.page-pdp .pd-feat__tile--hero .pd-feat__body {
		order: 1;
		justify-content: center;
		gap: 0.85rem;
		padding: clamp(2.25rem, 3.5vw, 3.5rem);
	}

	.page-pdp .pd-feat__tile--hero .pd-feat__media {
		order: 2;
		aspect-ratio: auto;
		height: 100%;
	}

	.page-pdp .pd-feat__tile--hero .pd-feat__title-tile {
		font-size: clamp(1.85rem, 2.6vw, 2.5rem);
		line-height: 1.04;
		letter-spacing: -0.028em;
	}

	.page-pdp .pd-feat__tile--hero .pd-feat__text {
		font-size: clamp(1rem, 1.15vw, 1.125rem);
		line-height: 1.55;
		max-width: 46ch;
	}
}

/* --- Wide-left tile: media on the left, copy on the right ----------------- */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-feat__tile--wide-left {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: clamp(14rem, 20vw, 18rem);
	}

	.page-pdp .pd-feat__tile--wide-left .pd-feat__media {
		order: 1;
		aspect-ratio: auto;
		height: 100%;
	}

	.page-pdp .pd-feat__tile--wide-left .pd-feat__body {
		order: 2;
		justify-content: center;
		gap: 0.6rem;
		padding: clamp(1.5rem, 2.5vw, 2.25rem);
	}

	.page-pdp .pd-feat__tile--wide-left .pd-feat__title-tile {
		font-size: clamp(1.375rem, 1.75vw, 1.625rem);
		line-height: 1.12;
	}
}

/* --- Wide-right tile: copy on the left, media on the right ---------------- */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-feat__tile--wide-right {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: stretch;
		min-height: clamp(14rem, 20vw, 18rem);
	}

	.page-pdp .pd-feat__tile--wide-right .pd-feat__body {
		order: 1;
		justify-content: center;
		gap: 0.6rem;
		padding: clamp(1.5rem, 2.5vw, 2.25rem);
	}

	.page-pdp .pd-feat__tile--wide-right .pd-feat__media {
		order: 2;
		aspect-ratio: auto;
		height: 100%;
	}

	.page-pdp .pd-feat__tile--wide-right .pd-feat__title-tile {
		font-size: clamp(1.375rem, 1.75vw, 1.625rem);
		line-height: 1.12;
	}
}

/* --- Mid + narrow tiles: stacked, left-aligned ---------------------------
   Unified left alignment across stacked tiles keeps the rhythm coherent
   alongside the split tiles. The text wraps naturally inside the body
   column, and the flex layout pins the body to the bottom of the tile so
   tiles in the same row land on the same baseline. */
.page-pdp .pd-feat__tile--mid .pd-feat__body,
.page-pdp .pd-feat__tile--narrow .pd-feat__body {
	justify-content: flex-end;
}

.page-pdp .pd-feat__tile--mid .pd-feat__title-tile,
.page-pdp .pd-feat__tile--narrow .pd-feat__title-tile {
	text-wrap: balance;
}

/* Slightly tighter copy on narrow tiles so 3-up rows read as a clean rail. */
.page-pdp .pd-feat__tile--narrow .pd-feat__text {
	font-size: clamp(0.9375rem, 0.95vw, 1rem);
	max-width: 36ch;
}

/* =========================================================================
   PDP — Widen the "In action / Every little thing it does is magic" band
   Added 2026-04-17. This section reads as the "showcase gallery" rail and
   benefits from more horizontal real estate on desktop than our content
   sections.
   ========================================================================= */

/* Wider overall section on desktop — tighter side margins */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-scenes.pd-section--dark {
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
		padding-right: clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* Let the inner wrapper breathe on larger desktops */
.page-pdp .pd-scenes.pd-section--dark .pd-scenes__inner {
	max-width: 96rem;
}

@media print, screen and (min-width: 90em) {
	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__inner {
		max-width: 104rem;
	}
}

@media print, screen and (min-width: 120em) {
	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__inner {
		max-width: 118rem;
	}
}

/* Give the header room to span more of the new width on desktop */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header {
		max-width: 64rem;
	}

	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__header .pd-section-lead {
		max-width: 52rem;
	}
}

/* Scale up the grid gap a touch on wide desktops so the larger tiles
   still feel like a composed Apple-style gallery, not a poster wall */
@media print, screen and (min-width: 90em) {
	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__grid {
		gap: 1.25rem;
	}

	.page-pdp .pd-scenes.pd-section--dark .pd-scenes__grid {
		grid-auto-rows: 16rem;
	}
}

/* =========================================================================
   PDP — Unified Apple-style content width for text
   Added 2026-04-17.
   Apple caps most text (section titles, subheads, body copy, form UIs)
   at ~1300px with a generous side gutter. Media-heavy bands (scenes gallery,
   bento rail, hero background) remain wider for visual breathing room.

   Variables:
     --pd-text-max     = shared cap for text/content columns (scales up
                         on wider viewports so the page doesn't feel
                         pinched on big screens)
     --pd-text-gutter  = side padding so text never kisses the viewport
   ========================================================================= */

.page-pdp {
	--pd-text-max: 1400px;
	--pd-text-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   Text-focused section containers — unified 1300px cap + shared gutter.
   ------------------------------------------------------------------------- */

.page-pdp .pd-hero__inner,
.page-pdp .pd-overview.grid-container,
.page-pdp .pd-home-stats .cr-section__inner,
.page-pdp .pd-story-split .cr-section__inner,
.page-pdp .pd-features-detail__inner,
.page-pdp .pd-quote__inner,
.page-pdp .pd-specs-section > .grid-container,
.page-pdp #reviews.pd-reviews-section.grid-container,
.page-pdp #questions.pd-faq-section.grid-container,
.page-pdp .pd-compare-band__inner,
.page-pdp .pd-cta .grid-container {
	max-width: var(--pd-text-max) !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pd-text-gutter);
	padding-right: var(--pd-text-gutter);
	box-sizing: border-box;
	width: 100%;
}

/* Hard cap the overview row at every desktop breakpoint so it never
   stretches past 1400px even when Foundation's .grid-container default
   (1920px) or other later rules try to widen it. */
.page-pdp .pd-overview.grid-container,
.page-pdp section.pd-overview.grid-container {
	max-width: 1400px !important;
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-overview.grid-container {
		max-width: 1400px !important;
		padding-left: var(--pd-text-gutter);
		padding-right: var(--pd-text-gutter);
	}
}

@media print, screen and (min-width: 90em) {
	.page-pdp .pd-overview.grid-container {
		max-width: 1400px !important;
		padding-left: var(--pd-text-gutter);
		padding-right: var(--pd-text-gutter);
	}
}

/* Hero outer padding — clear it so the background image goes edge-to-edge;
   the inner wrapper now handles text gutter. */
.page-pdp .pd-hero {
	padding-left: 0;
	padding-right: 0;
}

/* Crumbs bar handles only vertical spacing; the inner list inherits
   the shared --pd-text-max + --pd-text-gutter so it sits on the same
   left edge as the hero text and overview row. */
.page-pdp .pd-crumbs-bar {
	padding-left: 0;
	padding-right: 0;
}

.page-pdp .pd-crumbs-bar .pd-crumbs-list {
	max-width: var(--pd-text-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pd-text-gutter);
	padding-right: var(--pd-text-gutter);
	box-sizing: border-box;
}

/* Sticky subnav inner — align the left product label and right CTA to the
   same rhythm (without inheriting from grid-container) */
.page-pdp .pd-subnav-inner {
	max-width: var(--pd-text-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pd-text-gutter);
	padding-right: var(--pd-text-gutter);
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Section inner headers — tighter readable measure, centered in column.
   ------------------------------------------------------------------------- */

.page-pdp .pd-features-detail__header {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}

.page-pdp .pd-features-detail__grid {
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
}

@media print, screen and (min-width: 64em) {
	.page-pdp .pd-features-detail__grid {
		max-width: 72rem;
	}
}

/* Quote band text block keeps its own measure inside the 1300px column */
.page-pdp .pd-quote__inner {
	max-width: var(--pd-text-max);
}

.page-pdp .pd-quote__inner .pd-quote__title,
.page-pdp .pd-quote__inner .pd-quote__text {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* Generic section titles + leads: readable text measure inside the column */
.page-pdp .pd-section-title,
.page-pdp .pd-section-lead {
	max-width: 56rem;
}

.page-pdp .pd-section-title--center,
.page-pdp .pd-section-title--center + .pd-section-lead,
.page-pdp .pd-section-lead--center {
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Media-heavy bands — intentionally NOT capped to --pd-text-max.
   The scenes gallery and bento rail keep their own wider caps from earlier
   rules (96rem / 104rem / 118rem for scenes; rail width for bento) so
   imagery has room to breathe. Ample outer padding is preserved so they
   never kiss the viewport edges.
   ------------------------------------------------------------------------- */

/* =========================================================================
   PDP — Hero top-anchored + tighter gap to gallery + cleaner overview
   Added 2026-04-17.
   Goals:
     1) Hero text sits near the TOP of the banner (not bottom). Banner is
        shorter and punchier, so the page doesn't feel "dead" above the fold.
     2) Reduce vertical padding between the hero and the product image
        (crumbs bar + overview top padding).
     3) On desktop, cap the image-left / buy-right row with generous side
        margins so the layout breathes like Apple's PDPs.
     4) Clean up the right column hierarchy: calmer eyebrow, tighter title,
        quieter tagline, chips with a little more breathing room.
   ========================================================================= */

/* 1) Hero — shorter, top-aligned, quieter padding ------------------------- */
.page-pdp .pd-hero {
	align-items: flex-start;
	min-height: min(62vh, 560px);
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (max-width: 47.99em) {
	.page-pdp .pd-hero {
		min-height: min(56vh, 440px);
		padding-top: clamp(1.25rem, 5vw, 2rem);
		padding-bottom: clamp(1.25rem, 5vw, 2rem);
	}
}

/* Keep the title + sub from sprawling so the top block reads tight,
   while the outer container matches the shared text column width */
.page-pdp .pd-hero__title {
	max-width: 22ch;
}

.page-pdp .pd-hero__sub {
	max-width: 46ch;
}

/* Flip the scrim so the TOP is slightly darker for readable text-on-image
   (we moved content up; previous gradient was heavier at the bottom). */
.page-pdp .pd-hero::after {
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.18) 38%,
			rgba(0, 0, 0, 0.08) 70%,
			rgba(0, 0, 0, 0.20) 100%);
}

/* 2) Less air between hero and product image ----------------------------- */
.page-pdp .pd-crumbs-bar {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

.page-pdp .pd-overview {
	padding-top: clamp(0.75rem, 1.8vw, 1.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.page-pdp .pd-overview-product-row {
	padding-top: 0;
}

/* 3) Desktop side margin for the image-left / buy-right row --------------
   Inherits the shared --pd-text-max + --pd-text-gutter so the product row
   sits flush with the breadcrumbs and hero text above it. */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-overview.grid-container {
		max-width: 1400px !important;
		padding-left: var(--pd-text-gutter);
		padding-right: var(--pd-text-gutter);
	}
}

/* Give the two columns a bit more gutter on desktop */
@media print, screen and (min-width: 64em) {
	.page-pdp .pd-overview-product-row.grid-margin-x > .pd-gallery-col,
	.page-pdp .pd-overview-product-row.grid-margin-x > .pd-buy-col {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* 4) Right column — clearer hierarchy ------------------------------------ */
.page-pdp .pd-buy-col {
	padding-top: 0.25rem;
}

/* Eyebrow: small-caps-feeling category label, Apple-quiet */
.page-pdp .pd-buy-col .pd-overview-eyebrow {
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #6e6e73;
}

/* Title: crisper, tighter to tagline */
.page-pdp .pd-buy-col .pd-product-title {
	font-size: clamp(1.875rem, 3.4vw, 2.375rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.028em !important;
	margin: 0 0 0.55rem !important;
}

/* Tagline: shorter measure, quieter */
.page-pdp .pd-buy-col .pd-product-tagline {
	max-width: 34ch;
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #6e6e73;
}

/* Chips: a little more breathing room before the reviews/buy box */
.page-pdp .pd-buy-col .pd-hl-chips {
	margin-bottom: 1.75rem;
}

/* Reviews row: tighter to the chips above */
.page-pdp .pd-buy-col .pd-reviews-compact {
	margin-top: -0.5rem;
	margin-bottom: 1.25rem;
}

/* Separator line above the buy box, quieter */
.page-pdp .pd-buy-col .pd-buy-box {
	border-top-color: #e5e5ea;
	border-bottom-color: #e5e5ea;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

/* Story + feature list: more rhythm between the buy box and body copy */
.page-pdp .pd-buy-col .pd-product-story {
	margin-top: 0.25rem;
}

.page-pdp .pd-buy-col .pd-product-story .pd-lead {
	font-size: 1rem;
	line-height: 1.55;
	color: #424245;
	margin-bottom: 1rem;
}

/* =======================================================================
   PDP layout + polish
   - Horizontal overflow guard
   - Primary CTA sizing
   - 3-item highlights grid
   - Hero CTA row hygiene
   - Hide product subnav until the hero is scrolled past (no double-header)
   - Desktop image-left / copy-right lockdown
   ======================================================================= */

/* Belt-and-suspenders overflow guard. Full-bleed media + decorative
   pseudo-elements shouldn't force a horizontal scrollbar. */
html,
body.page-pdp {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	html,
	body.page-pdp {
		overflow-x: hidden;
	}
}

body.page-pdp > main > section,
body.page-pdp #site-content > section,
body.page-pdp .pd-hero,
body.page-pdp .pd-crumbs-bar,
body.page-pdp .pd-overview,
body.page-pdp .pd-home-stats,
body.page-pdp .pd-story-split,
body.page-pdp .pd-bento,
body.page-pdp .pd-scenes,
body.page-pdp .pd-features-detail,
body.page-pdp .pd-quote,
body.page-pdp .pd-specs-section,
body.page-pdp .pd-compare-band {
	max-width: 100%;
}

/* Primary PDP CTA — content-width pill on desktop, full-width on narrow
   screens. Always drops onto its own line beneath the availability pill. */
.page-pdp .pd-btn-add {
	display: flex;
	width: 100%;
	max-width: 22rem;
	box-sizing: border-box;
	margin-top: 0.25rem;
}

@media (min-width: 64em) {
	.page-pdp .pd-btn-add {
		width: auto;
		min-width: 14rem;
		max-width: 26rem;
	}
}

/* Highlights stats band ships with three tiles — stop the generic home
   grid from stranding the third item on its own row at tablet widths. */
.pd-home-stats .cr-home-stats__list {
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.pd-home-stats .cr-home-stats__list {
		grid-template-columns: repeat(3, 1fr);
	}
	.pd-home-stats .cr-home-stats__item + .cr-home-stats__item {
		padding-left: clamp(1.25rem, 2.5vw, 2rem);
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
	.pd-home-stats .cr-home-stats__list > li:nth-child(3) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Hero CTA row hygiene — reasonable gaps so the pill and the text link
   don't collide when the hero narrows. We intentionally DO NOT paint a
   pill background on the text link; the existing hero gradient handles
   contrast and the cleaner link reads more polished. */
.pd-hero__cta {
	row-gap: 0.85rem;
	column-gap: 1.5rem;
	flex-wrap: wrap;
}

/* Reset any earlier frosted-pill treatment — the hero text link is now
   a clean Apple-style arrow link. White on the darker bottom half of
   the hero with a soft drop-shadow keeps it readable over busy product
   photography without resorting to a heavy pill. */
.page-pdp .pd-hero .pd-hero__link.pd-arrow-link {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff !important;
	opacity: 1 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	font-weight: 500;
}

.page-pdp .pd-hero .pd-hero__link.pd-arrow-link:hover,
.page-pdp .pd-hero .pd-hero__link.pd-arrow-link:focus {
	background: transparent !important;
	text-decoration: none !important;
	color: #fff !important;
	opacity: 0.85 !important;
}

/* =======================================================================
   Product subnav: hide until the hero is scrolled past
   -----------------------------------------------------------------------
   The sticky product-contextual subnav used to render immediately under
   the site header on page load — a visible "double header" overlay on
   top of the hero. Apple/Google Store PDPs only surface this rail once
   the hero has been scrolled past. An inline script in product-header.njk
   adds `.pd-subnav-controlled` on <html> before paint; helper.js then
   toggles `.pd-subnav--visible` when the hero leaves the viewport.

   When controlled, the subnav is promoted to `position: fixed` so it
   takes no space in the document flow (otherwise we'd see an empty gap
   between the site header and the hero). Without JS the `.pd-subnav-controlled`
   class never lands and the subnav falls back to its original sticky
   behavior — navigation still works.
   ======================================================================= */
body.page-pdp #stickynav.pd-subnav {
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 220ms ease;
	will-change: transform, opacity;
}

html.pd-subnav-controlled body.page-pdp #stickynav.pd-subnav {
	position: fixed;
	top: var(--header-height, 50px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 900;
	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
}

html.pd-subnav-controlled body.page-pdp #stickynav.pd-subnav.pd-subnav--visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Scroll-padding restoration: when the subnav is absent from flow, the
   scroll-padding-top for hash links only needs to clear the site header.
   When the subnav is visible (i.e. after the hero is scrolled past) we
   keep the subnav-height padding so anchor targets don't hide underneath it. */
html.pd-subnav-controlled body.page-pdp {
	scroll-padding-top: var(--header-height, 50px);
}

/* Because the subnav is hidden at the top of the page, tighten the gap
   between the hero and the breadcrumb trail so it doesn't feel airy. */
body.page-pdp .pd-crumbs-bar {
	padding-top: clamp(0.75rem, 1.8vw, 1.25rem);
	padding-bottom: clamp(0.25rem, 1vw, 0.5rem);
}

/* =======================================================================
   Desktop overview: images LEFT, copy RIGHT — 50/50 split
   ======================================================================= */
@media (min-width: 64em) {
	.page-pdp .pd-overview-product-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: clamp(1.5rem, 3vw, 3rem);
	}

	.page-pdp .pd-overview-product-row > .pd-gallery-col {
		flex: 0 0 calc(50% - clamp(0.75rem, 1.5vw, 1.5rem));
		max-width: calc(50% - clamp(0.75rem, 1.5vw, 1.5rem));
		order: 1;
	}

	.page-pdp .pd-overview-product-row > .pd-buy-col {
		flex: 0 0 calc(50% - clamp(0.75rem, 1.5vw, 1.5rem));
		max-width: calc(50% - clamp(0.75rem, 1.5vw, 1.5rem));
		margin-left: 0;
		order: 2;
	}
}

/* =======================================================================
   Store page — /store/ — richer marketing + SEO content surfaces.
   Reuses cr-home-model-card, cr-home-highlights, cr-home-stats, cr-faq-item.
   Adds store-only patterns: intro pills, comparison table, decide cards,
   "what's in the box" list, and a small button variant.
   ======================================================================= */

.cr-store-intro {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cr-store-intro__lead {
	max-width: 52rem;
	margin-left: auto;
	margin-right: auto;
	color: var(--cr-text-muted, #424245);
}

/* Centered eyebrows across store sections (the base .cr-eyebrow is
   inline-block; force block + center where the section header is centered). */
.cr-store-intro > .cr-section__inner > .cr-eyebrow.text-center,
.cr-store-models__header .cr-eyebrow.text-center,
.cr-store-compare__header .cr-eyebrow.text-center,
.cr-store-decide__header .cr-eyebrow.text-center,
.cr-store-included__header .cr-eyebrow.text-center,
.cr-store-faq__header .cr-eyebrow.text-center {
	display: block;
	margin-bottom: 0.75rem;
	text-align: center;
}

.cr-store-intro__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.6rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	max-width: 56rem;
}

.cr-store-intro__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.95rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: #1d1d1f;
	background: #f5f5f7;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 999px;
}

/* ---------- Store model cards: price + secondary badge ---------- */
.cr-store-models {
	padding-top: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cr-store-models__header {
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.cr-store-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin: 0.25rem 0 1rem;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cr-store-card__price-now {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	color: #1d1d1f;
}

.cr-store-card__price-was {
	font-size: 1.0625rem;
	color: #86868b;
	text-decoration: line-through;
}

.cr-store-card__price-note {
	width: 100%;
	font-size: 0.8125rem;
	color: #6e6e73;
	letter-spacing: -0.005em;
}

.cr-home-model-card__badge--alt {
	background: rgba(0, 113, 227, 0.1);
	color: #0071e3;
}

.cr-store-models__assist {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 1rem;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-store-models__assist a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
	font-weight: 500;
}

.cr-store-models__assist a:hover {
	text-decoration: underline;
}

/* ---------- Comparison table ---------- */
.cr-store-compare {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cr-store-compare__header {
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.cr-compare-table-wrap {
	max-width: 64rem;
	margin: 0 auto;
	overflow-x: auto;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.cr-compare-table {
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	border: none;
	font-size: clamp(0.9375rem, 1.2vw, 1rem);
	letter-spacing: -0.005em;
}

/* Override the global tr:nth-child(2n) striping & td/th borders for this table. */
.cr-compare-table tr:nth-child(2n) {
	background-color: transparent;
}

.cr-compare-table th,
.cr-compare-table td {
	border: none;
	height: auto;
	width: auto;
}

.cr-compare-table thead th {
	padding: clamp(1rem, 2vw, 1.5rem) clamp(0.875rem, 1.6vw, 1.25rem);
	text-align: left;
	font-weight: 600;
	background: #fafafa;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	color: #1d1d1f;
}

.cr-compare-table__model {
	text-align: center !important;
	white-space: nowrap;
}

.cr-compare-table__model-name {
	display: block;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.018em;
	color: #1d1d1f;
}

.cr-compare-table__model-tag {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #6e6e73;
	text-transform: uppercase;
}

.cr-compare-table__model--uv .cr-compare-table__model-tag {
	color: #6b3aff;
}

.cr-compare-table tbody th {
	padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(0.875rem, 1.6vw, 1.25rem);
	text-align: left;
	font-weight: 500;
	color: #1d1d1f;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: #fff;
}

.cr-compare-table tbody td {
	padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(0.875rem, 1.6vw, 1.25rem);
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: #1d1d1f;
}

.cr-compare-table tbody tr:last-child th,
.cr-compare-table tbody tr:last-child td {
	border-bottom: none;
}

.cr-compare-table tbody tr:hover th,
.cr-compare-table tbody tr:hover td {
	background: rgba(0, 113, 227, 0.025);
}

.cr-compare-table__yes {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
	color: #0a7d3c;
}

.cr-compare-table__no {
	display: inline-block;
	color: #b0b0b8;
	font-size: 1.25rem;
	line-height: 1;
}

.cr-compare-table__price {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}

.cr-compare-table__price-was {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: #86868b;
	text-decoration: line-through;
}

.cr-compare-table__price-row th,
.cr-compare-table__price-row td {
	background: #fafafa;
}

.cr-compare-table__cta-row th,
.cr-compare-table__cta-row td {
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	background: #fafafa;
}

.cr-store-compare__note {
	max-width: 48rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	font-size: 1rem;
	color: var(--cr-text-muted, #6e6e73);
	line-height: 1.55;
}

/* Small button variant for inline use (e.g., comparison table CTAs) */
.cr-btn--sm {
	padding: 0.55rem 1.2rem;
	font-size: 0.875rem;
}

/* ---------- "A simple way to decide" cards ---------- */
.cr-store-decide {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cr-store-decide__header {
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.cr-store-decide__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 48em) {
	.cr-store-decide__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.cr-store-decide__card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 22px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 40px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cr-store-decide__card--alt {
	background: linear-gradient(160deg, #fafafa 0%, #f0f2f6 100%);
}

.cr-store-decide__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: #1d1d1f;
}

.cr-store-decide__list {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
}

.cr-store-decide__list li {
	position: relative;
	padding-left: 1.75rem;
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	line-height: 1.5;
	color: var(--cr-text-muted, #424245);
}

.cr-store-decide__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 999px;
	background: #0071e3;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}

.cr-store-decide__card--alt .cr-store-decide__list li::before {
	background: #1d1d1f;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.cr-store-decide__card .cr-btn {
	align-self: flex-start;
	margin-top: auto;
}

.cr-store-decide__assist {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 1rem;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-store-decide__assist a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
	font-weight: 500;
}

.cr-store-decide__assist a:hover {
	text-decoration: underline;
}

/* ---------- What's in the box ---------- */
.cr-store-included {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cr-store-included__header {
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.cr-store-included__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 72rem;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

@media (min-width: 40em) {
	.cr-store-included__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.cr-store-included__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cr-store-included__item {
	background: #fff;
	border-radius: 18px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cr-store-included__item h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}

.cr-store-included__item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-store-included__item a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
}

.cr-store-included__item a:hover {
	text-decoration: underline;
}

/* ---------- Trust strip on the store page (4 columns instead of 3) ---------- */
.cr-store-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: clamp(2rem, 4vw, 3.5rem) auto;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
}

@media (min-width: 40em) {
	.cr-store-trust {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.cr-store-trust {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cr-store-trust .cr-trust-strip__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0;
}

.cr-store-trust .cr-trust-strip__item strong {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 600;
	letter-spacing: -0.018em;
	color: #1d1d1f;
}

.cr-store-trust .cr-trust-strip__item span {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-store-trust .cr-trust-strip__item a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
}

.cr-store-trust .cr-trust-strip__item a:hover {
	text-decoration: underline;
}

/* ---------- Store FAQ section ---------- */
.cr-store-faq {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cr-store-faq__inner {
	max-width: 56rem;
}

.cr-store-faq__header {
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.cr-store-faq__header a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
}

.cr-store-faq__header a:hover {
	text-decoration: underline;
}

.cr-store-faq__more {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 1rem;
	color: var(--cr-text-muted, #6e6e73);
}

.cr-store-faq__more a {
	color: var(--cr-accent, #0071e3);
	text-decoration: none;
	font-weight: 500;
}

.cr-store-faq__more a:hover {
	text-decoration: underline;
}

/* ---------- Store finale section ---------- */
.cr-store-finale {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ===========================================================================
   Contact page enhancements
   =========================================================================== */

.cr-contact-intro {
	max-width: 56rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.cr-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.cr-contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #f5f5f7;
	border-radius: 18px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.cr-contact-card:hover,
.cr-contact-card:focus-visible {
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(15, 17, 21, 0.08);
	transform: translateY(-2px);
}

.cr-contact-card__label {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6e6e73;
	margin: 0;
}

.cr-contact-card__value {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1d1d1f;
	margin: 0;
}

.cr-contact-card__note {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #424245;
	margin: 0;
}

.cr-contact-card__cta {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--cr-accent, #0071e3);
}

.cr-contact-form-wrap {
	max-width: 48rem;
}

.cr-contact-form-header {
	max-width: 44rem;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.cr-contact-form {
	background: #ffffff;
	border-radius: 22px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 8px 24px rgba(15, 17, 21, 0.06);
}

.cr-contact-faqs {
	max-width: 48rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}