/* Product-first shop refresh: original iMobile styling, with a warmer and clearer sales flow. */
:root {
  --shop-ink: #231536;
  --shop-purple: #5b2f92;
  --shop-coral: #f26e58;
  --shop-mint: #9ce5c9;
  --shop-cream: #fffaf1;
}

.shop-page {
  background: var(--shop-cream);
}

/* The available phones now meet the visitor before marketing copy. */
.shop-page main {
  display: flex;
  flex-direction: column;
}

.shop-page main > .live-stock-section {
  order: -1;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 54px) 0 clamp(34px, 4vw, 58px);
  background:
    radial-gradient(circle at 3% 18%, rgba(255, 206, 111, .65) 0 7%, transparent 7.2%),
    radial-gradient(circle at 96% 80%, rgba(156, 229, 201, .7) 0 10%, transparent 10.2%),
    linear-gradient(135deg, #fff9ed 0%, #fffdf7 52%, #f6ecff 100%);
}

.shop-page main > .live-stock-section::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  content: "";
  background: linear-gradient(90deg, var(--shop-coral), #ffc55e 38%, var(--shop-mint) 67%, #a98de5);
}

.live-stock-head {
  align-items: center;
  margin-bottom: 25px;
}

.live-stock-head .shop-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--shop-purple);
  font-size: 12px;
  letter-spacing: .12em;
}

.live-stock-head .shop-eyebrow::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: #1eaa75;
  box-shadow: 0 0 0 5px rgba(30, 170, 117, .13);
}

.live-stock-head h2 {
  max-width: 730px;
  color: var(--shop-ink);
  font-size: clamp(34px, 4.3vw, 58px);
  letter-spacing: -.07em;
  line-height: .94;
}

.live-stock-head > a {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(35, 21, 54, .11);
  color: var(--shop-ink);
  background: #fff;
  box-shadow: 0 9px 22px rgba(63, 31, 88, .09);
}

.live-stock-head > a:hover {
  color: #fff;
  background: var(--shop-purple);
}

.live-stock-grid {
  gap: clamp(13px, 1.8vw, 22px);
}

.live-stock-card {
  min-height: 255px;
  border: 1px solid rgba(35, 21, 54, .11);
  border-radius: 26px;
  box-shadow: 0 17px 34px rgba(48, 25, 67, .11);
}

.live-stock-card:hover {
  transform: translateY(-7px) rotate(-.35deg);
  box-shadow: 0 25px 42px rgba(48, 25, 67, .18);
}

.live-stock-card--1 { background: #f5e5ff; }
.live-stock-card--2 { background: #d8f6e7; }
.live-stock-card--3 { background: #ffe5a9; }
.live-stock-card:nth-child(3n + 1) { background: #f5e5ff; }
.live-stock-card:nth-child(3n + 2) { background: #d8f6e7; }
.live-stock-card:nth-child(3n) { background: #ffe5a9; }

.live-stock-card__visual {
  padding: 21px 7px 12px;
}

.live-stock-card__visual::before {
  width: 82%;
  height: 82%;
  background: rgba(255, 255, 255, .67);
}

.live-stock-card__visual img {
  height: 203px;
}

.live-stock-card__copy {
  padding: 23px 20px 23px 4px;
}

.live-stock-card__copy span {
  color: #07573f;
  background: rgba(255, 255, 255, .86);
}

.live-stock-card__copy strong {
  color: var(--shop-ink);
  font-size: clamp(18px, 1.65vw, 23px);
}

.live-stock-card__copy small { color: #5f5270; }
.live-stock-card__copy b { color: var(--shop-ink); font-size: 17px; }

/* The former hero is now a compact confidence-building second step. */
.shop-hero {
  min-height: 0;
  padding: clamp(55px, 7vw, 95px) 0;
  background: linear-gradient(120deg, #291541 0%, #47206f 52%, #6c3ca2 100%);
}

.shop-hero::before {
  right: 40%;
  bottom: -260px;
  background: #a6ead1;
}

.shop-hero::after {
  background: #ffbe5c;
}

.shop-hero h1 em { color: #b2f0d8; }
.shop-hero .shop-eyebrow { color: #ffd78a; }

.hero-scroll-primary {
  border: 0;
  color: #231536;
  background: #b2f0d8;
}

.hero-scroll-primary:hover { color: #fff; background: var(--shop-coral); }

.hero-scroll-secondary {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.trust-bar {
  background: #fff;
  border-bottom: 1px solid #ece5da;
}

.trust-bar span::first-letter { color: #149363; }

.shop-content { padding-top: clamp(48px, 6vw, 78px); }

.shop-heading h2,
.shop-seo h2 { color: var(--shop-ink); }

.product-card {
  border-color: #e8dfd2;
  border-radius: 21px;
}

.product-card:hover { border-color: #c9aeea; }

@media (max-width: 820px) {
  .live-stock-card { min-height: 194px; }
  .live-stock-card__visual img { height: 158px; }
  .live-stock-card__copy { padding: 17px 16px 17px 0; }
}

@media (max-width: 520px) {
  .shop-page main > .live-stock-section { padding: 28px 0 34px; }
  .live-stock-head h2 { font-size: 36px; }
  .live-stock-card { min-height: 174px; }
  .live-stock-card__visual img { height: 138px; }
  .shop-hero { padding: 54px 0; }
}