@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --blue: #1976f3;
  --blue-dark: #0a56d7;
  --ink: #0b1730;
  --muted: #68758d;
  --line: #dce4ee;
  --soft: #f3f6fa;
  --green: #22ad5c;
  --navy: #07162f;
  --shadow: 0 14px 38px rgba(12, 32, 65, .09)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased
}

body,
a,
button,
input {
  font-family: Poppins, "Segoe UI", Arial, sans-serif
}

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

button,
input {
  font: inherit
}

svg {
  display: block
}

.store-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff
}

.store-shell>main {
  width: 100%;
  flex: 1 0 auto
}

.catalog-header {
  height: 96px;
  padding: 0 clamp(34px, 6vw, 82px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #fff
}

.catalog-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .005em
}

.catalog-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain
}

.catalog-brand>span {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.catalog-brand small {
  display: block;
  margin-top: 5px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .02em
}

.mobile-brand-line {
  display: none
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 54px;
  color: #536178;
  font-size: 12px;
  font-weight: 400
}

.desktop-nav a {
  position: relative;
  padding: 11px 0;
  transition: .2s
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
  color: var(--blue)
}

.desktop-nav a.is-active:after {
  position: absolute;
  content: "";
  height: 2px;
  left: 0;
  right: 0;
  bottom: 2px;
  border-radius: 2px;
  background: var(--blue)
}

.mobile-search {
  display: none
}

.catalog-hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: 306px;
  margin: 0 clamp(34px, 6vw, 82px);
  border-radius: 31px;
  color: #fff;
  background: #02050c url("../images/catalog-gaming-banner.png") center/cover no-repeat;
  box-shadow: 0 16px 35px rgba(3, 11, 29, .18)
}

.catalog-hero:before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 3, 11, .98) 0%, rgba(0, 5, 16, .88) 31%, rgba(0, 6, 22, .25) 63%, rgba(0, 0, 0, .35) 100%)
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: 48%;
  padding: 38px 0 0 56px
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(31px, 3vw, 43px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 400
}

.hero-copy h1 strong {
  font-weight: 700
}

.hero-copy p {
  width: 330px;
  margin: 12px 0 16px;
  color: #d1d9e8;
  font-size: 12px;
  line-height: 1.42
}

.hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 40px;
  padding: 0 60px;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 9px 22px rgba(25, 118, 243, .28)
}

.hero-primary:hover {
  background: #2c84f7;
  transform: translateY(-1px)
}

.hero-mobile-title,
.mobile-cta {
  display: none
}

.hero-visual {
  position: absolute;
  z-index: 2;
  right: clamp(-55px, -3vw, -24px);
  top: -16px;
  width: clamp(430px, 43vw, 620px);
  aspect-ratio: 3 / 2;
  pointer-events: none
}

.rtx-badge {
  position: absolute;
  z-index: 1;
  left: -5%;
  top: 80px;
  width: 48%;
  max-width: 360px;
  height: 135px;
  padding: 50px 20px;
  border-radius: 21px;
  color: #fff;
  background: linear-gradient(135deg, #3284ee, #1774ef);
  box-shadow: 0 18px 35px rgba(11, 82, 202, .25);
  font-size: 27px;
  line-height: .86
}

.rtx-badge span,
.rtx-badge strong {
  display: block
}

.rtx-badge strong {
  font-size: 30px
}

.hero-laptop {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .43));
  pointer-events: none
}

.catalog-section,
.brand-section,
.how-section {
  position: relative;
  z-index: 1;
  padding: 42px clamp(34px, 6vw, 82px)
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 23px
}

.section-heading h2,
.brand-section h2,
.how-section h2 {
  margin: 0;
  color: #131d31;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.025em
}

.section-heading p {
  margin: 7px 0 0;
  color: #7a8699;
  font-size: 12px
}

.catalog-search {
  width: 270px;
  height: 43px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff
}

.catalog-search:focus-within {
  border-color: #76a9f9;
  box-shadow: 0 0 0 4px rgba(25, 118, 243, .09)
}

.catalog-search svg {
  width: 18px;
  fill: none;
  stroke: #6c7890;
  stroke-width: 2
}

.catalog-search input {
  min-width: 0;
  width: 100%;
  margin-left: 8px;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 13px
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.catalog-card[hidden]{display:none}
.all-sold-models{color:var(--blue);font-weight:700;white-space:nowrap}
.all-sold-models:hover{text-decoration:underline}
.all-models-section{margin-top:64px;scroll-margin-top:110px}
.all-models-section .catalog-subheading{margin-bottom:20px}
.all-models-section .catalog-subheading h2{margin:4px 0 0;font-size:22px}
.customer-reviews-section{margin:16px clamp(34px,6vw,82px) 24px;padding:26px 28px 24px;border:1px solid #d8e6f9;border-radius:20px;background:linear-gradient(115deg,#f8fbff,#f3f8ff 48%,#fff);box-shadow:0 10px 28px rgba(24,70,130,.05)}
.customer-reviews-heading{display:flex;align-items:end;gap:26px;flex-wrap:wrap}
.customer-reviews-heading h2{margin:4px 0 0;font-size:25px;letter-spacing:-.03em}
.customer-reviews-score{display:flex;align-items:center;gap:13px}
.customer-reviews-score strong{font-size:27px;letter-spacing:-.04em}
.customer-reviews-score strong small{font-size:16px;font-weight:500;color:#596981}
.customer-reviews-score>span,.customer-review-stars,.customer-reviews-empty>span{color:#f4a800;letter-spacing:1px}
.customer-reviews-score>small,.customer-reviews-source{color:#657790;font-size:12px}
.customer-reviews-source{margin:8px 0 20px}
.customer-reviews-carousel{display:flex;align-items:center;gap:12px}
.customer-reviews-arrow{flex:0 0 39px;width:39px;height:39px;border:1px solid #d9e7fa;border-radius:50%;background:#fff;color:#0a2552;font-size:26px;line-height:1;box-shadow:0 3px 9px rgba(35,82,145,.08);cursor:pointer}
.customer-reviews-arrow:hover,.customer-reviews-arrow:focus-visible{border-color:#78aaff;color:var(--blue);outline:3px solid rgba(25,118,243,.14)}
.customer-reviews-track{min-width:0;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a9c7f4 #edf4fe;overscroll-behavior-inline:contain}
.customer-review-card{flex:0 0 clamp(230px,23vw,325px);min-height:160px;padding:17px 19px;border:1px solid #e4ebf4;border-radius:17px;background:#fff;box-shadow:0 4px 14px rgba(23,60,112,.04);scroll-snap-align:start}
.customer-review-top{display:flex;align-items:center;gap:14px}
.customer-review-avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:#1879f4;color:#fff;font-size:15px;font-weight:700}
.customer-review-stars{font-size:18px;white-space:nowrap}
.customer-review-stars span{color:#dce4ee}
.customer-review-card p{margin:12px 0 6px;font-size:14px;line-height:1.47;color:#40516d}
.customer-review-card>small{font-size:10px;color:#7790ad}
.customer-reviews-empty{padding:22px;border:1px dashed #ccdef7;border-radius:14px;background:#fff}
.customer-reviews-empty p{margin:6px 0 0;color:#566b88;font-size:13px}
.review-form-main{display:grid;place-items:center;padding:36px 16px 80px}
.review-form-card{width:min(100%,580px);padding:34px;border:1px solid #dce8f7;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(18,46,85,.09)}
.review-form-card h1{margin:8px 0 8px;font-size:29px;line-height:1.2}
.review-form-card>p{margin:0 0 20px;color:#62718a;font-size:14px;line-height:1.6}
.review-form{display:grid;gap:15px}
.review-rating{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:13px 0;border:0;border-bottom:1px solid #edf1f6}
.review-rating legend{float:left;padding:0;color:#1b2a44;font-size:14px;font-weight:600}
.review-stars{display:flex;flex-direction:row-reverse;gap:3px}
.review-stars label{cursor:pointer}
.review-stars input{position:absolute;opacity:0;width:1px;height:1px}
.review-stars span[aria-hidden]{color:#dce4ee;font-size:28px;line-height:1}
.review-stars label:hover span[aria-hidden],.review-stars label:hover~label span[aria-hidden],.review-stars input:checked+span,.review-stars label:has(input:checked)~label span[aria-hidden]{color:#f4a800}
.review-stars input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.review-comment-label{margin-top:5px;font-weight:600;font-size:14px}
.review-comment-label small{float:right;color:#72819a;font-weight:400}
.review-form textarea{width:100%;padding:13px;border:1px solid #d9e3f0;border-radius:11px;resize:vertical;min-height:102px;color:var(--ink)}
.review-form textarea:focus{outline:3px solid rgba(25,118,243,.14);border-color:#7eacfa}
.review-word-count{margin-top:-12px;color:#75849a;text-align:right}.review-word-count.is-over{color:#c53d49}
.review-consent{margin:0;color:#71809b;font-size:11px;line-height:1.5}
.review-form .hero-primary{margin:2px 0 0;border:0;cursor:pointer}
.review-form-error{margin:0 0 12px;padding:12px;border-radius:10px;color:#a62f3c;background:#fff1f3;font-size:13px}
.review-thanks-icon{width:52px;height:52px;display:grid;place-items:center;margin:16px 0;border-radius:50%;background:#e9f5ee;color:#16a55f;font-size:27px}
.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}
@media(max-width:700px){.customer-reviews-section{margin:8px 14px 20px;padding:21px 15px}.customer-reviews-heading{gap:7px}.customer-reviews-heading h2{font-size:19px}.customer-reviews-score strong{font-size:22px}.customer-reviews-carousel{gap:5px}.customer-reviews-arrow{flex-basis:31px;width:31px;height:31px;font-size:22px}.customer-review-card{flex-basis:min(72vw,280px);min-height:150px}.customer-review-card p{font-size:12px}.customer-reviews-score>small{font-size:10px}.review-form-card{padding:23px 18px}.review-rating legend{font-size:12px}.review-stars span[aria-hidden]{font-size:24px}.all-models-section{margin-top:34px}}
@media(prefers-reduced-motion:reduce){.customer-reviews-track{scroll-behavior:auto}}
.catalog-stock-note{margin:0 0 24px;padding:13px 17px;border:1px solid #dce7f8;border-radius:11px;color:#31527e;background:#f3f8ff;font-size:13px}
.catalog-subsection{margin-top:42px}
.catalog-stock-note+.catalog-subsection{margin-top:0}
.catalog-subheading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.catalog-subheading span{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.12em}
.catalog-subheading h3{margin:3px 0 0;color:var(--ink);font-size:23px;line-height:1.2}
.catalog-subheading p{max-width:420px;margin:0;color:var(--muted);font-size:13px;line-height:1.5;text-align:right}
.catalog-card-meta{display:block;max-width:calc(100% - 35px);min-height:26px;color:#51627d;font-size:13px;line-height:1.5}
.catalog-card--upcoming .available-badge{color:#9b6200;background:#fff3d9}
.catalog-card--upcoming .available-badge i{background:#e49a16}
.catalog-card--sold .available-badge{color:#5c6a80;background:#edf1f5}
.catalog-card--sold .available-badge i{background:#8390a1}
.catalog-card--sold .product-image>img{filter:saturate(.83)}
.catalog-empty a{display:inline-flex;margin-top:14px;padding:10px 17px;border-radius:9px;color:#fff;background:var(--blue);font-size:12px;font-weight:700}

.catalog-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe3ed;
  border-radius: 15px;
  background: #fff;
  transition: transform .22s, box-shadow .22s, border-color .22s
}

.catalog-card:hover {
  transform: translateY(-3px);
  border-color: #b9cff1;
  box-shadow: var(--shadow)
}

.product-image {
  position: relative;
  height: 278px;
  display: block;
  overflow: hidden;
  background: #fff
}

.product-image>img {
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
  object-position: center;
  transition: transform .25s
}

.catalog-card:hover .product-image>img {
  transform: scale(1.025)
}

.available-badge {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  color: #279c57;
  background: #e5f6eb;
  font-size: 9px;
  font-weight: 800
}

.available-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28b561
}

.image-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fa
}

.image-placeholder img {
  width: 64px;
  opacity: .22
}

.product-copy {
  position: relative;
  padding: 9px 18px 19px
}

.product-copy h3 {
  max-width: calc(100% - 35px);
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.015em
}

.product-copy>p {
  height: 39px;
  margin: 0 0 6px;
  overflow: hidden;
  color: #748198;
  font-size: 13px;
  line-height: 1.5
}

.product-price {
  display: block;
  color: #1470ed;
  font-size: 17px;
  letter-spacing: -.01em
}

.product-interest {
  position: absolute;
  right: 17px;
  bottom: 18px;
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 5px 12px rgba(25, 118, 243, .24)
}

.desktop-card-cta {
  display: grid;
  place-items: center
}

.desktop-card-cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mobile-card-cta {
  display: none
}

.catalog-empty,
.no-results {
  padding: 55px 24px;
  text-align: center;
  border: 1px dashed #bcc9db;
  border-radius: 16px;
  color: var(--muted);
  background: #f8fafc
}

.catalog-empty span,
.section-label {
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em
}

.catalog-empty h3 {
  margin: 11px 0 5px;
  color: var(--ink)
}

.brand-section {
  background: #f5f8fc;
  text-align: center
}

.brand-section h2 {
  margin: 9px 0 24px;
  font-size: 28px
}

.brand-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px
}

.brand-list span {
  min-width: 110px;
  padding: 12px 18px;
  border: 1px solid #dfe7f1;
  border-radius: 11px;
  color: #4f5d74;
  background: #fff;
  font-size: 12px;
  font-weight: 800
}

.how-section {
  display: grid;
  grid-template-columns: minmax(270px,.42fr) minmax(0,1fr);
  align-items: stretch;
  gap: clamp(24px,3vw,60px);
  padding-top: 64px;
  padding-bottom: 70px
}

.how-section h2 {
  margin-top: 9px;
  max-width: 440px;
  font-size: clamp(34px,2.2vw,46px);
  line-height: 1.16
}

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px
}

.steps article {
  min-height: 164px;
  padding: 26px 23px;
  border: 1px solid #e0e7f0;
  border-radius: 14px;
  background: #fff
}

.steps article:first-child {
  border-color: #cfe0fa;
  background: #f8fbff
}

.steps article>span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 850
}

.steps h3 {
  margin: 13px 0 7px;
  font-size: 16px
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55
}

.catalog-footer {
  padding: 46px clamp(34px, 6vw, 82px) 22px;
  color: #fff;
  background: var(--navy);
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 35px 55px
}

.catalog-footer .catalog-brand small {
  color: #61a0ff
}

.footer-brand p {
  max-width: 330px;
  margin: 18px 0 0;
  color: #9cabc2;
  font-size: 12px;
  line-height: 1.65
}

.footer-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.footer-contact>a {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035)
}

.footer-contact>a:hover {
  border-color: rgba(91, 153, 255, .42);
  background: rgba(255, 255, 255, .07)
}

.social-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #76aaff;
  background: rgba(50, 123, 239, .14)
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.social-icon svg .fill {
  fill: currentColor;
  stroke: none
}

.footer-contact a>span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column
}

.footer-contact small {
  color: #8f9db2;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.footer-contact strong {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f7f9fd;
  font-size: 11px;
  white-space: nowrap
}

.footer-delivery {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid rgba(118, 170, 255, .2);
  border-radius: 12px;
  background: rgba(50, 123, 239, .08)
}

.footer-delivery-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #76aaff;
  background: rgba(50, 123, 239, .14)
}

.footer-delivery-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.footer-delivery h3 {
  margin: 0 0 6px;
  color: #f7f9fd;
  font-size: 14px
}

.footer-delivery p {
  max-width: 900px;
  margin: 0;
  color: #afbed3;
  font-size: 12.5px;
  line-height: 1.6
}

.footer-bottom {
  grid-column: 1/-1;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  color: #7f8da4;
  font-size: 10px
}

.footer-bottom a:hover {
  color: #fff
}

.whatsapp-float {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2dcf55;
  box-shadow: 0 10px 24px rgba(23, 151, 57, .3)
}

.whatsapp-float svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.whatsapp-float svg,
.contact-button svg {
  display: none
}

.whatsapp-float:before,
.contact-button:before {
  content: "";
  display: block;
  background: url("../icons/twotone-whatsapp.svg") center/contain no-repeat
}

.whatsapp-float:before {
  width: 27px;
  height: 27px
}

.contact-button:before {
  width: 20px;
  height: 20px
}

.mobile-bottom-nav {
  display: none
}

.scroll-top-button {
  display: none
}

.scroll-top-button[hidden] {
  display: none !important
}

/* Product detail */
.detail-shell {
  overflow: hidden
}

.detail-header {
  height: 88px
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  color: #56637a;
  font-size: 11px;
  font-weight: 700
}

.back-button:hover {
  color: var(--blue);
  border-color: #b5ccef
}

.detail-main {
  padding: 15px clamp(34px, 6vw, 82px) 55px
}

.public-detail {
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 55px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(15, 37, 66, .055)
}

.gallery,
.detail-copy {
  min-width: 0
}

.main-photo {
  height: 515px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, #f5f7fa, #e9edf3)
}

.gallery-slide {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center
}

.gallery-slide.is-active {
  display: flex
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  padding: 34px;
  object-fit: contain
}

.thumbnail-row {
  margin-top: 13px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 1px 1px 5px
}

.thumbnail {
  width: 96px;
  height: 80px;
  flex: 0 0 auto;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #f4f6f9;
  cursor: pointer
}

.thumbnail.is-active {
  border-color: var(--blue)
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.detail-copy {
  padding: 18px 0 0
}

.detail-available {
  position: static;
  width: max-content;
  margin-bottom: 16px
}

.detail-copy h1 {
  margin: 0;
  color: #142038;
  font-size: clamp(32px, 3.4vw, 47px);
  letter-spacing: -.045em;
  line-height: 1.06
}

.detail-summary {
  margin: 12px 0 0;
  color: #728097;
  font-size: 14px;
  line-height: 1.5
}

.detail-price {
  display: block;
  margin: 20px 0;
  color: #2580f5;
  font-size: 33px;
  letter-spacing: -.025em
}

.detail-price-label{display:block;margin:18px 0 -16px;color:#697c97;font-size:11px;font-weight:600}
.detail-status-note{display:grid;gap:4px;margin:20px 0 10px;padding:13px 16px;border:1px solid #d9e7fb;border-radius:11px;color:#315781;background:#f3f8ff;font-size:14px;line-height:1.5}
.detail-status-note strong{color:#163f78;font-size:15px}
.detail-status-note.status-sold{border-color:#e2e7ee;color:#58677e;background:#f6f8fb}
.detail-status-note.status-sold strong{color:#35445d}
.detail-available.status-upcoming{color:#9b6200;background:#fff3d9}
.detail-available.status-upcoming i{background:#e49a16}
.detail-available.status-sold{color:#5c6a80;background:#edf1f5}
.detail-available.status-sold i{background:#8390a1}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 19px
}

.spec-grid article {
  min-height: 83px;
  padding: 13px 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #e0e6ee;
  border-radius: 11px;
  background: #f8f9fb
}

.spec-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e9edf3
}

.spec-icon img {
  width: 15px;
  height: 15px;
  opacity: .7
}

.spec-grid article>span:last-child {
  min-width: 0
}

.spec-grid small {
  display: block;
  margin-bottom: 6px;
  color: #76839a;
  font-size: 11px
}

.spec-grid strong {
  display: block;
  color: #1a253a;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere
}

.detail-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 4px 0 24px;
  color: #526179;
  font-size: 12px
}

.detail-highlights span {
  display: flex;
  align-items: center;
  gap: 6px
}

.detail-highlights i {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 8px;
  font-style: normal
}

.detail-description {
  padding-top: 19px;
  border-top: 1px solid #e3e8ef;
  color: #707d92;
  font-size: 14px;
  line-height: 1.65
}

.included-accessories {
  color: #58667d;
  font-size: 13px
}

.contact-button {
  height: 49px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(100deg, #2480f6, #136ae3);
  box-shadow: 0 10px 22px rgba(25, 118, 243, .22);
  font-size: 11px;
  font-weight: 800
}

.contact-button:hover {
  filter: brightness(1.05)
}

.contact-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* Brands page */
.brands-header {
  border-bottom: 1px solid #e4e9f0
}

.brands-main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 34px 48px 72px
}

.brands-breadcrumb {
  margin: 0 0 27px;
  color: #98a6ba;
  font-size: 13px
}

.brands-breadcrumb span {
  margin: 0 5px;
  color: #b4bfce
}

.brands-main>h1 {
  margin: 0;
  color: #0b1427;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.035em
}

.brands-intro {
  margin: 8px 0 42px;
  color: #718099;
  font-size: 12px
}

.brand-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px
}

.brand-card {
  position: relative;
  min-height: 412px;
  padding: 27px 27px 29px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e5ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 23px rgba(18, 42, 72, .055)
}

.brand-card:first-child {
  border: 2px solid #1675ff
}

.brand-device {
  position: relative;
  height: 145px;
  margin: -2px -3px 4px;
  display: grid;
  place-items: center;
  color: #bad3f7
}

.brand-device svg {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 120px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2
}

.brand-device strong {
  position: absolute;
  z-index: 2;
  top: 58px;
  left: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
  font-size: 15px;
  font-style: italic;
  font-weight: 600
}

.brand-dot-field {
  position: absolute;
  inset: 8px 0;
  background-image: radial-gradient(currentColor .8px, transparent .8px);
  background-size: 8px 8px;
  opacity: .19;
  mask-image: radial-gradient(ellipse at center, #000, transparent 69%)
}

.brand-card h2 {
  margin: 10px 0;
  color: #1874f0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.03em
}

.brand-card h3 {
  margin: 0 0 12px;
  color: #111b2e;
  font-size: 13px;
  font-weight: 600
}

.brand-card>p {
  margin: 0;
  color: #748198;
  font-size: 12px;
  line-height: 1.7
}

.brand-card>a {
  width: 110px;
  height: 38px;
  margin-top: auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #1373f4;
  box-shadow: 0 8px 16px rgba(19, 115, 244, .2);
  font-size: 11px;
  font-weight: 500
}

.brand-card--asus {
  overflow: hidden;
  color: #1e6ddf;
  border-color: #102541;
  background: radial-gradient(circle at 50% 26%, rgba(20, 107, 231, .23), transparent 37%), linear-gradient(155deg, #061932, #020b18);
  box-shadow: 0 12px 30px rgba(3, 16, 34, .17)
}

.brand-card--asus:before {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, transparent 49.7%, rgba(41, 122, 234, .13) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(41, 122, 234, .1) 50%, transparent 50.3%);
  background-size: 24px 24px;
  mask-image: linear-gradient(transparent, #000 35%, transparent 80%);
  opacity: .45
}

.brand-card--asus>* {
  position: relative;
  z-index: 1
}

.brand-card--asus h2,
.brand-card--asus h3 {
  color: #fff
}

.brand-card--asus>p {
  color: #b5c1d2
}

.brand-card--asus .brand-device {
  color: #3d92ff
}

.brand-card--asus .brand-device strong {
  font-size: 21px
}

.brand-card--asus>a {
  color: #1a2436;
  background: #fff;
  box-shadow: none
}

.brand-card--hp .brand-device strong {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px
}

@media(min-width:1500px) and (min-height:850px) {
  .catalog-detail-page .catalog-header {
    height: 108px;
    padding-inline: clamp(72px, 5vw, 128px)
  }

  .catalog-detail-page .catalog-brand {
    gap: 13px;
    font-size: 18px
  }

  .catalog-detail-page .catalog-brand img {
    width: 52px;
    height: 52px
  }

  .catalog-detail-page .catalog-brand small {
    margin-top: 6px;
    font-size: 11px
  }

  .catalog-detail-page .back-button {
    gap: 12px;
    padding: 13px 20px;
    border-radius: 11px;
    font-size: 13px
  }

  .catalog-detail-page .detail-main {
    padding: 24px clamp(72px, 5vw, 128px) 72px
  }

  .catalog-detail-page .public-detail {
    padding: 36px;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(64px, 4.5vw, 112px);
    border-radius: 22px
  }

  .catalog-detail-page .main-photo {
    height: clamp(560px, 52vh, 720px);
    border-radius: 18px
  }

  .catalog-detail-page .gallery-slide img {
    padding: 30px
  }

  .catalog-detail-page .thumbnail-row {
    margin-top: 17px;
    gap: 14px
  }

  .catalog-detail-page .thumbnail {
    width: 122px;
    height: 102px;
    padding: 8px;
    border-radius: 12px
  }

  .catalog-detail-page .detail-copy {
    padding-top: 28px
  }

  .catalog-detail-page .detail-available {
    margin-bottom: 20px;
    padding: 7px 13px;
    font-size: 11px
  }

  .catalog-detail-page .detail-copy h1 {
    font-size: clamp(46px, 2.7vw, 64px)
  }

  .catalog-detail-page .detail-summary {
    margin-top: 15px;
    font-size: 15px
  }

  .catalog-detail-page .detail-price {
    margin: 26px 0;
    font-size: 44px
  }

  .catalog-detail-page .spec-grid {
    gap: 14px;
    margin-bottom: 25px
  }

  .catalog-detail-page .spec-grid article {
    min-height: 108px;
    padding: 18px 15px;
    gap: 12px;
    border-radius: 14px
  }

  .catalog-detail-page .spec-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px
  }

  .catalog-detail-page .spec-icon img {
    width: 19px;
    height: 19px
  }

  .catalog-detail-page .spec-grid small {
    margin-bottom: 8px;
    font-size: 11px
  }

  .catalog-detail-page .spec-grid strong {
    font-size: 14px
  }

  .catalog-detail-page .detail-highlights {
    gap: 15px 28px;
    margin: 6px 0 30px;
    font-size: 13px
  }

  .catalog-detail-page .detail-highlights i {
    width: 18px;
    height: 18px;
    font-size: 10px
  }

  .catalog-detail-page .detail-description {
    padding-top: 24px;
    font-size: 14px;
    line-height: 1.7
  }

  .catalog-detail-page .included-accessories {
    font-size: 13px
  }

  .catalog-detail-page .contact-button {
    height: 60px;
    margin-top: 23px;
    border-radius: 10px;
    font-size: 14px
  }

  .catalog-detail-page .catalog-footer {
    padding: 54px clamp(72px, 5vw, 128px) 28px;
    gap: 42px 70px
  }

  .catalog-detail-page .footer-brand p {
    max-width: 410px;
    font-size: 14px
  }

  .catalog-detail-page .footer-contact>a {
    padding: 15px;
    gap: 14px;
    border-radius: 13px
  }

  .catalog-detail-page .social-icon {
    width: 40px;
    height: 40px
  }

  .catalog-detail-page .footer-contact small,
  .catalog-detail-page .footer-bottom {
    font-size: 11px
  }

  .catalog-detail-page .footer-contact strong {
    font-size: 13px
  }
}

@media(max-width:1050px) {
  .desktop-nav {
    gap: 24px
  }

  .catalog-hero {
    height: 275px
  }

  .hero-copy {
    padding-left: 35px
  }

  .hero-copy h1 {
    font-size: 32px
  }

  .hero-visual {
    right: -38px;
    top: -4px;
    width: clamp(410px, 45vw, 475px)
  }

  .rtx-badge {
    top: 62px;
    height: 114px;
    padding: 40px 18px;
    font-size: 23px
  }

  .rtx-badge strong { font-size: 27px }

  .product-image {
    height: 215px
  }

  .public-detail {
    gap: 30px
  }

  .main-photo {
    height: 440px
  }

  .spec-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .brand-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .brand-card {
    min-height: 380px
  }
}

@media(max-width:1024px) {
  html {
    scroll-padding-top: 75px
  }

  .store-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none
  }

  .catalog-header {
    position: relative;
    height: 76px;
    padding: 0 17px
  }

  .catalog-brand {
    gap: 9px;
    font-size: 15px
  }

  .catalog-brand img {
    width: 48px;
    height: 48px
  }

  .catalog-brand small {
    margin-top: 4px;
    color: #657289;
    font-size: 9px;
    font-weight: 600
  }

  .desktop-brand-line {
    display: none
  }

  .mobile-brand-line {
    display: inline
  }

  .desktop-nav {
    display: none
  }

  .mobile-search {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #17223a;
    background: #f3f5f8
  }

  .mobile-search svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8
  }

  .catalog-hero {
    height: 164px;
    margin: 5px 14px 0;
    border-radius: 13px;
    background-position: center
  }

  .catalog-hero:before {
    background: linear-gradient(90deg, rgba(0, 2, 9, .96), rgba(1, 6, 19, .72) 55%, rgba(0, 0, 0, .08))
  }

  .hero-copy {
    width: 60%;
    padding: 24px 0 0 16px
  }

  .hero-desktop-title,
  .desktop-cta {
    display: none
  }

  .hero-mobile-title,
  .mobile-cta {
    display: inline
  }

  .hero-copy h1 {
    font-size: 23px;
    line-height: 1.08;
    font-weight: 500
  }

  .hero-copy p {
    display: none
  }

  .hero-primary {
    height: 35px;
    min-width: 105px;
    margin-top: 18px;
    padding: 0 24px;
    border-radius: 6px;
    font-size: 10px
  }

  .hero-visual {
    right: -72px;
    top: -9px;
    width: clamp(285px, 74vw, 350px);
    max-width: none
  }

  .rtx-badge {
    display: none
  }

  .catalog-section,
  .brand-section,
  .how-section {
    padding: 22px 14px
  }

  .section-heading {
    margin-bottom: 14px
  }

  .section-heading h2 {
    font-size: 0
  }

  .section-heading h2:after {
    content: none;
    font-size: 18px
  }

  .section-heading h2{font-size:18px}

  .section-heading p {
    display: none
  }

  .catalog-search {
    display: none
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .catalog-subsection{margin-top:32px}
  .catalog-stock-note{margin-bottom:20px;font-size:11px}
  .catalog-subheading{display:block;margin-bottom:12px}
  .catalog-subheading h3{font-size:17px}
  .catalog-subheading p{margin-top:4px;font-size:12px;text-align:left}
  .catalog-card-meta{max-width:none;min-height:0;font-size:12.5px}

  .catalog-card {
    min-height: 170px;
    display: grid;
    grid-template-columns: 42% 58%;
    border-radius: 12px;
    box-shadow: 0 5px 13px rgba(19, 42, 72, .07)
  }

  .catalog-card:hover {
    transform: none
  }

  .product-image {
    height: 100%;
    background: #fff
  }

  .product-image>img {
    padding: 8px
  }

  .catalog-card .available-badge {
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
    display: inline-flex;
    padding: 4px 7px;
    gap: 4px;
    overflow: hidden;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .catalog-card .available-badge i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto
  }

  .product-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 12px 12px 4px
  }

  .product-copy h3 {
    max-width: none;
    margin-bottom: 5px;
    font-size: 15px
  }

  .product-copy>p {
    height: 41px;
    margin-bottom: 4px;
    font-size: 13.5px;
    line-height: 1.45
  }

  .product-price {
    font-size: 15px;
    font-weight:600;
  }

  .product-interest {
    position: static;
    width: max-content;
    height: 34px;
    margin-top: 7px;
    padding: 0 30px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
  }

  .desktop-card-cta {
    display: none;
  }

  .mobile-card-cta {
    display: inline;
  }

  .brand-section {
    text-align: left;
  }

  .brand-section h2 {
    font-size: 21px;
  }

  .brand-list {
    justify-content: flex-start
  }

  .brand-list span {
    min-width: 84px;
    padding: 10px 13px;
    text-align: center
  }

  .how-section {
    display: block;
    padding-top: 34px;
    padding-bottom: 38px
  }

  .how-section h2 {
    font-size: 23px
  }

  .steps {
    grid-template-columns: 1fr;
    margin-top: 18px
  }

  .steps article {
    min-height: 0;
    padding: 20px
  }

  .catalog-footer {
    padding: 35px 18px 95px;
    display: block
  }

  .footer-brand p {
    margin-bottom: 22px
  }

  .footer-contact {
    grid-template-columns: 1fr
  }

  .footer-delivery {
    margin-top: 20px;
    padding: 16px
  }

  .footer-delivery p {
    font-size: 13px
  }

  .footer-bottom {
    margin-top: 22px;
    gap: 15px;
    flex-direction: column
  }

  .whatsapp-float {
    right: 18px;
    bottom: 98px;
    width: 46px;
    height: 46px;
    border-width: 3px
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 25;
    left: 50%;
    right: auto;
    bottom: 12px;
    width: min(630px, calc(100% - 28px));
    height: 70px;
    padding: 7px 14px calc(7px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid #e0e6ee;
    border-radius: 24px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 32px rgba(17, 39, 68, .16);
    backdrop-filter: blur(12px)
  }

  .scroll-top-button {
    position: fixed;
    z-index: 31;
    right: 18px;
    bottom: 154px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #2389ff, #0756d8);
    box-shadow: 0 10px 25px rgba(9, 111, 255, .3);
    cursor: pointer
  }

  .scroll-top-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #748097;
    font-size: 8px
  }

  .mobile-bottom-nav svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .mobile-bottom-nav a.is-active {
    color: var(--blue)
  }

  /* Mobile detail */
  .detail-header {
    height: 75px
  }

  .back-button {
    padding: 9px 11px;
    font-size: 0
  }

  .back-button span {
    font-size: 18px
  }

  .detail-main {
    padding: 4px 14px 28px
  }

  .public-detail {
    padding: 0;
    display: block;
    border: 0;
    box-shadow: none
  }

  .main-photo {
    height: 330px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    border-radius: 12px
  }

  .gallery-slide,
  .gallery-slide.is-active {
    flex: 0 0 100%;
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always
  }

  .gallery-slide img {
    padding: 20px
  }

  .detail-available {
    display: inline-flex
  }

  .thumbnail-row {
    margin-top: 9px
  }

  .thumbnail {
    width: 72px;
    height: 62px
  }

  .detail-copy {
    padding-top: 22px
  }

  .detail-copy h1 {
    font-size: 30px
  }

  .detail-summary {
    font-size: 14px
  }

  .detail-price {
    margin: 15px 0 19px;
    font-size: 27px
  }

  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
  }

  .spec-grid article {
    min-height: 75px;
    padding: 11px 9px
  }

  .spec-grid small {
    font-size: 12px
  }

  .spec-grid strong {
    font-size: 14px
  }

  .detail-highlights {
    gap: 10px 14px;
    font-size: 13px
  }

  .detail-description {
    font-size: 15px
  }

  .included-accessories {
    font-size: 14px
  }

  .contact-button {
    height: 50px
  }

  .catalog-detail-page .whatsapp-float {
    display: none
  }

  .brands-main {
    padding: 24px 14px 35px
  }

  .brands-breadcrumb {
    margin-bottom: 18px;
    font-size: 10px
  }

  .brands-main>h1 {
    font-size: 27px
  }

  .brands-intro {
    margin: 7px 0 24px;
    font-size: 10px;
    line-height: 1.6
  }

  .brand-card-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .brand-card {
    min-height: 330px;
    padding: 20px 24px
  }

  .brand-device {
    height: 118px
  }

  .brand-device svg {
    height: 98px
  }

  .brand-device strong {
    top: 48px
  }

  .brand-card h2 {
    margin-top: 3px;
    font-size: 23px
  }

  .brand-card>p {
    font-size: 11px
  }

  .brands-page .catalog-footer {
    margin-top: 10px
  }
}

@media(min-width:561px) and (max-width:1024px) {
  .catalog-header {
    height: 88px;
    padding: 0 42px
  }

  .catalog-brand img {
    width: 48px;
    height: 48px
  }

  .catalog-brand {
    font-size: 15px
  }

  .mobile-search {
    width: 40px;
    height: 40px
  }

  .catalog-hero {
    height: 218px;
    margin: 8px 42px 0;
    border-radius: 22px
  }

  .hero-copy {
    width: 55%;
    padding: 31px 0 0 28px
  }

  .hero-copy h1 {
    font-size: 30px
  }

  .hero-primary {
    height: 40px;
    min-width: 125px;
    margin-top: 23px;
    font-size: 11px
  }

  .hero-visual {
    right: -30px;
    top: 8px;
    width: clamp(360px, 50vw, 430px)
  }

  .rtx-badge {
    left: 3%;
    top: 105px;
    height: 85px;
    padding: 23px 14px;
    font-size: 17px
  }

  .rtx-badge strong { font-size: 17px }

  .catalog-section,
  .how-section {
    padding: 48px 42px 32px
  }

  .section-heading h2:after {
    font-size: 22px
  }

  .product-grid {
    gap: 14px
  }

  .catalog-card {
    height: 218px;
    grid-template-columns: 39% 61%;
    border-radius: 18px
  }

  .product-image>img {
    padding: 10px
  }

  .product-copy {
    padding: 20px 24px 20px 8px
  }

  .product-copy h3 {
    font-size: 20px
  }

  .product-copy>p {
    height: 42px;
    font-size: 13px
  }

  .product-price {
    font-size: 22px
  }

  .product-interest {
    height: 43px;
    margin-top: 12px;
    padding: 0 26px;
    border-radius: 9px;
    font-size: 12px
  }

  .how-section h2 {
    font-size: 32px
  }

  .how-section {grid-template-columns:1fr;gap:23px;padding-top:48px;padding-bottom:54px}
  .steps article {min-height:144px}
  .steps article {
    padding: 23px
  }

  .catalog-footer {
    padding-left: 42px;
    padding-right: 42px
  }

  .mobile-bottom-nav a {
    font-size: 11px
  }

  .mobile-bottom-nav svg {
    width: 24px;
    height: 24px
  }

  .detail-main {
    padding-left: 42px;
    padding-right: 42px
  }

  .main-photo {
    height: 470px
  }

  .detail-copy h1 {
    font-size: 37px
  }

  .brands-main {
    padding-left: 42px;
    padding-right: 42px
  }

  .brand-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .brand-card {
    min-height: 370px
  }
}

@media(max-width:370px) {
  .hero-copy h1 {
    font-size: 21px
  }

  .catalog-card {
    grid-template-columns: 40% 60%
  }

  .product-interest {
    padding: 0 14px
  }

  .main-photo {
    height: 285px
  }
}