/* ==========================================================================
   Apple product pages — loaded by product.php for brand "Apple" (body.theme-apple).
   A clean Apple-store feel: the system font (SF on Apple devices), near-black text, light-grey panels,
   dark pill buttons, big tight headlines with a grey second clause, and rounded option tiles.
   Loaded after black-friday.css, so it also wins over the Black Friday theme on these pages
   (the countdown bar and the nav's Black Friday pill stay).
   ========================================================================== */

body.theme-apple {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", Arial, sans-serif;
  --ink: #1d1d1f; --ink-2: #1d1d1f; --ink-3: #1d1d1f;
  --mute: #6e6e73; --mute-2: #86868b;
  --line: #d2d2d7; --line-2: #d2d2d7;
  --stone: #f5f5f7; --stone-2: #e8e8ed; --paper: #ffffff;
  --radius: 18px; --radius-sm: 12px;
  /* "--apple-blue" is the accent: near-black, since Apple's bright blue felt too loud on our pages (user, 31 Oct). */
  --apple-blue: #1d1d1f; --apple-blue-hover: #424245; --apple-link: #2f5d8a; --apple-orange: #b64400;
  background: #fff; color: #1d1d1f; font-feature-settings: normal; letter-spacing: -.01em;
}
.theme-apple ::selection { background: #b3d7ff; color: #1d1d1f; }

/* ---------- Header: the light, translucent bar ---------- */
body.theme-apple .header { background: rgba(251, 251, 253, .8); border-bottom-color: rgba(0, 0, 0, .08); }
body.theme-apple .header::after { display: none; }
body.theme-apple .nav__link { font-size: 13px; font-weight: 400; color: rgba(29, 29, 31, .8); }
body.theme-apple .nav__link::after { display: none; }
@media (hover: hover) { body.theme-apple .nav__link:hover { color: #1d1d1f; } }

/* ---------- Type ---------- */
.theme-apple .serif, .theme-apple .section__title, .theme-apple .page-title, .theme-apple .pdp__title, .theme-apple .prose h2,
.theme-apple .prose h3, .theme-apple .prose h4, .theme-apple .prose h5, .theme-apple .prose h6 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.022em;
}
.theme-apple em { font-style: normal; }
body.theme-apple .section__title em { color: var(--mute); }
.theme-apple .section__title { font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.08; }
.theme-apple .section__title--sm { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.theme-apple .pdp__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.07; margin-bottom: 12px; }
body.theme-apple .eyebrow { margin-bottom: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--apple-orange); }
.theme-apple .eyebrow::before { display: none; }
.theme-apple .crumbs { font-size: 12px; }
.theme-apple .prose { color: #1d1d1f; font-weight: 400; font-size: 17px; line-height: 1.6; }
.theme-apple .prose a, .theme-apple .u, .theme-apple .apple-why a { color: var(--apple-link); }
.theme-apple .prose li::marker { color: var(--mute); }

/* ---------- Buttons: dark pills, no sliding fill ---------- */
body.theme-apple .btn { height: 48px; padding: 0 24px; font-size: 17px; font-weight: 400; letter-spacing: -.01em; transition: background-color .2s, color .2s, border-color .2s; }
body.theme-apple .btn::before { display: none; }
body.theme-apple .btn .icon { display: none; }
body.theme-apple .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa) { --bg: var(--apple-blue); --fg: #fff; --bd: var(--apple-blue); background: var(--apple-blue); color: #fff; }
@media (hover: hover) { body.theme-apple .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa):hover { background: var(--apple-blue-hover); border-color: var(--apple-blue-hover); color: #fff; } }
body.theme-apple .btn--ghost { --bd: var(--apple-blue); background: transparent; color: var(--apple-blue); border-color: var(--apple-blue); }
@media (hover: hover) { body.theme-apple .btn--ghost:hover { background: var(--apple-blue); color: #fff; border-color: var(--apple-blue); } }
body.theme-apple .btn--wa .icon { display: block; }

/* ---------- Product top: gallery on light grey, details beside it ---------- */
.theme-apple .pdp__frame { border-radius: 18px; background: #f5f5f7; }
.theme-apple .pdp__thumb { border-radius: 12px; }
body.theme-apple .badge { background: var(--apple-orange); color: #fff; }
.theme-apple .pdp__tags .tag { border-color: transparent; background: #f5f5f7; color: #1d1d1f; }
.theme-apple .tag--amber { background: #f5f5f7; color: #1d1d1f; }
.theme-apple .pdp__price { font-size: 24px; font-weight: 600; letter-spacing: -.015em; }
.theme-apple .pdp__price s { font-weight: 400; font-size: 17px; }
body.theme-apple .pdp__price:has(s:not([hidden])) > span:first-child { color: var(--apple-orange); }
.theme-apple .pdp__price .save { color: var(--apple-orange); font-size: 14px; font-weight: 400; }
.theme-apple .pdp__summary { color: #1d1d1f; font-weight: 400; font-size: 17px; line-height: 1.5; }

/* Options: Apple's rounded selection tiles (layout in style.css), dark ring when chosen */
.theme-apple .option > span { border: 1px solid #86868b; }
.theme-apple .option small { color: var(--mute); }
.theme-apple .option input:checked + span { border-color: var(--apple-blue); box-shadow: inset 0 0 0 1px var(--apple-blue); }
.theme-apple .option input:checked + span small { color: var(--mute); }
.theme-apple .option input:focus-visible + span { outline: 2px solid var(--apple-blue); }
@media (hover: hover) { .theme-apple .option:not(.is-out) > span:hover { border-color: #1d1d1f; } }

/* Stock, promos and side panels: flat light-grey boxes */
.theme-apple .stock__dot { background: #008009; box-shadow: none; animation: none; }
.theme-apple .stock--low { color: var(--apple-orange); }
.theme-apple .stock--low .stock__dot { background: var(--apple-orange); }
.theme-apple .tradein-promo, .theme-apple .gift-promo, .theme-apple .lpp-box, .theme-apple .repair-cta, .theme-apple .price-watch {
  border: 0; border-radius: 18px; background: #f5f5f7; animation: none;
}
.theme-apple .tradein-promo > svg, .theme-apple .gift-promo strong svg, .theme-apple .price-match > svg, .theme-apple .lpp-box__title .icon { color: var(--apple-blue); }
.theme-apple .tradein-promo__cta { color: var(--apple-link); }
.theme-apple .lpp-box__plans li { border-color: #e8e8ed; border-radius: 12px; }
.theme-apple .perks { padding: 22px 24px; border: 0; border-radius: 18px; background: #f5f5f7; }
.theme-apple .perks li { color: #1d1d1f; font-size: 14px; }
.theme-apple .perks strong { font-weight: 600; }
.theme-apple .perks .icon, .theme-apple .pay-ways .icon, .theme-apple .pdp-final__ship .icon { color: var(--mute); }
.theme-apple .pdp-final, .theme-apple .pdp-step .perks { border-radius: 18px; background: #f5f5f7; }
.theme-apple .pay-ways li { border-color: #86868b; }
.theme-apple .pdp-final__price { color: #1d1d1f; }
.theme-apple .pdp__action { color: var(--apple-link); }
.theme-apple .accordion summary { font-size: 17px; font-weight: 600; }
.theme-apple .accordion__body { color: #1d1d1f; }
.theme-apple .addon { border-radius: 18px; }
.theme-apple .addon__why { color: var(--apple-orange); }
body.theme-apple .addon__add { background: var(--apple-blue); color: #fff; }
.theme-apple .addon__price s { color: var(--mute); }

/* Phone buy bar: frosted white */
.theme-apple .buybar__info a { color: var(--apple-link); }
.theme-apple .buybar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0, 0, 0, .08); }

/* ---------- "Why buy here" tiles ---------- */
.apple-why { background: #f5f5f7; }
.apple-why .section__title { max-width: 900px; margin-bottom: clamp(24px, 4vw, 40px); }
.apple-why__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.apple-why__tiles li {
  display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 28px; border-radius: 18px; background: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .06); transition: transform .3s cubic-bezier(0, 0, .5, 1), box-shadow .3s cubic-bezier(0, 0, .5, 1);
}
@media (hover: hover) { .apple-why__tiles li:hover { transform: scale(1.015); box-shadow: 2px 4px 16px rgba(0, 0, 0, .1); } }
.apple-why__tiles .icon { color: var(--apple-blue); margin-bottom: 8px; }
.apple-why__tiles h3 { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.apple-why__tiles p { color: var(--mute); font-size: 15px; line-height: 1.45; }
.apple-why__tiles a { display: inline-block; margin-top: 4px; }
@media (hover: hover) { .apple-why__tiles a:hover { text-decoration: underline; } }

/* ---------- Sections below ---------- */
.theme-apple .reviews-section, .theme-apple .price-table-section { border-top: 0; }
.theme-apple .price-table { border-color: #e8e8ed; border-radius: 18px; }
.theme-apple .price-table th { background: #f5f5f7; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; color: #1d1d1f; }
.theme-apple .card__media { border-radius: 18px; background: #f5f5f7; }
.theme-apple .card__title { font-weight: 600; }
.theme-apple .card__price:has(s) > span { color: var(--apple-orange); }
.theme-apple .chip, .theme-apple .chips a { border-radius: 999px; }

/* ---------- Brand store: /brand/apple/ (shop.php + includes/apple-store.php) ---------- */
.theme-apple .card__media img { mix-blend-mode: multiply; } /* white photo backgrounds melt into the grey */
.astore-head { padding: clamp(20px, 3vw, 28px) 0 clamp(36px, 6vw, 64px); background: #f5f5f7; text-align: center; }
.astore-head .crumbs { justify-content: center; margin-bottom: clamp(20px, 4vw, 40px); }
.astore-head__title { font-family: var(--sans); font-weight: 600; font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: 1; letter-spacing: -.03em; color: #1d1d1f; }
.astore-head__intro { max-width: 620px; margin: 14px auto 0; color: var(--mute); font-size: 17px; }

.astore-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #d2d2d7; box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .25); }
.astore-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; }
.astore-nav__tabs { display: flex; gap: clamp(14px, 2.2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.astore-nav__tabs::-webkit-scrollbar { display: none; }
.astore-nav__tabs a {
  position: relative; flex: none; padding: 18px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #1d1d1f; white-space: nowrap;
}
.astore-nav__tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: #1d1d1f; transform: scaleX(0); transition: transform .25s; }
.astore-nav__tabs a[aria-current="page"]::after { transform: none; }
@media (hover: hover) { .astore-nav__tabs a:hover::after { transform: none; } }
.astore-nav__search { position: relative; flex: 0 1 260px; display: flex; align-items: center; }
.astore-nav__search .icon { position: absolute; left: 12px; color: var(--mute); pointer-events: none; }
.astore-nav__search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid #86868b; border-radius: 8px; background: #fff; font-size: 14px; }
.astore-nav__search input:focus { outline: 2px solid var(--apple-blue); outline-offset: 1px; border-color: transparent; }

.astore-family { padding-top: clamp(36px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 64px); }
.astore-family__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.astore-family__title { font-family: var(--sans); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -.025em; color: #1d1d1f; }
.astore-all__title { margin-bottom: 24px; }
.astore-family__all { display: inline-flex; align-items: center; gap: 2px; color: var(--apple-link); font-size: 17px; white-space: nowrap; }
.astore-family__all .icon { transform: rotate(-90deg); }
@media (hover: hover) { .astore-family__all:hover { text-decoration: underline; } }

.astore-hero {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: clamp(380px, 38vw, 520px);
  margin-bottom: 12px; border-radius: 18px; background: #f5f5f7; overflow: hidden;
}
.astore-hero__copy { padding: clamp(28px, 5vw, 72px); }
.astore-hero__new { margin-bottom: 6px; color: var(--apple-orange); font-size: 15px; }
.astore-hero__new--grey { color: var(--mute); }
.astore-hero__name { font-family: var(--sans); font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: #1d1d1f; }
.astore-hero__sub { margin-top: 10px; color: #1d1d1f; font-size: 17px; }
.astore-hero__buy {
  display: inline-flex; align-items: center; margin-top: 24px; padding: 9px 30px; border-radius: 999px;
  background: #1d1d1f; color: #fff; font-size: 15px; font-weight: 600; transition: background-color .2s;
}
@media (hover: hover) { .astore-hero__buy:hover { background: #000; } }
.astore-hero__media { display: grid; justify-items: center; gap: 14px; padding: clamp(20px, 3vw, 40px); }
.astore-hero__media img { width: min(100%, 440px); aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .astore-hero:hover .astore-hero__media img { transform: scale(1.03); } }
.astore-hero__price { font-size: 15px; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.astore-hero__price strong { font-size: 20px; font-weight: 600; }
.astore-hero__price s { margin-left: 6px; color: var(--mute); }

.astore-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.astore-row a { display: grid; gap: 4px; height: 100%; padding: 16px 16px 20px; border-radius: 18px; background: #f5f5f7; color: #1d1d1f; }
.astore-row__img img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .astore-row a:hover img { transform: scale(1.04); } }
.astore-row__name { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.astore-row__price { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .astore-nav { top: 0; position: relative; }
  .astore-nav__inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .astore-nav__search { flex: none; }
  .astore-hero { grid-template-columns: 1fr; min-height: 0; text-align: center; }
  .astore-hero__copy { padding: 32px 24px 0; }
  .astore-hero__media img { width: min(100%, 300px); }
  .astore-row { grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .astore-row::-webkit-scrollbar { display: none; }
  .astore-row li { scroll-snap-align: start; }
  .apple-why__tiles { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .apple-why__tiles::-webkit-scrollbar { display: none; }
  .apple-why__tiles li { scroll-snap-align: start; min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) { .apple-why__tiles li { transition: none; } }