/* PHONE MX · prism glass. Shared material, crisp content, gesture-led controls. */
:root {
  --text:#17243c; --muted:#4e5d75; --red:#ba1947; --red-hover:#a01540;
  --accent-rgb:186 25 71; --finish-tint:#809bd6;
  --crystal:linear-gradient(135deg,#ffffffc7 0%,#ffffff8a 38%,#ffffff4d 72%,#e4edff8c 100%);
  --crystal-shadow:inset 0 2px 1px #fffffff2,inset 1px 0 1px #ffffffd1,inset -1px -1px 1px #afbcda66,0 0 0 1px #8d9cbc24,0 10px 24px -18px #243e7059;
  --glass:var(--crystal); --glass-shadow:var(--crystal-shadow);
}
html[data-catalog-category=ipad] { --accent-rgb:106 60 204; }
html[data-catalog-category=samsung],html[data-catalog-category=playstation] { --accent-rgb:31 87 199; }
html[data-catalog-category=xiaomi] { --accent-rgb:157 65 10; }
html[data-catalog-category=xbox] { --accent-rgb:22 112 77; }
html[data-catalog-category=nintendo] { --accent-rgb:185 30 76; }
body {
  background:#f1f5fc;
  background-image:radial-gradient(ellipse 75% 720px at 90% 0,#94c4fc66,transparent 76%),radial-gradient(ellipse 52% 700px at 0 420px,#ef8fba40,transparent 75%),linear-gradient(160deg,#f4f7ff,#eef3fb 45%,#faf6fc);
}
.ambient {
  position:fixed; inset:0; height:100lvh; z-index:-1; opacity:.85;
  background:radial-gradient(ellipse at 97% 25%,#78d7ed52,transparent 45%),radial-gradient(ellipse at 4% 65%,#e1b4ff48,transparent 42%),radial-gradient(ellipse at 85% 90%,#a5b9ff45,transparent 42%);
}
.header,.spotlight,.catalog-controls,.product-card,.step,.contact-panel,.faq-list details { isolation:isolate; }
.header,.mobile-dock {
  background:linear-gradient(125deg,#ffffffb8,#ffffff63 45%,#d7eaff7a 76%,#faedff91);
  border:1px solid #ffffffed;
  box-shadow:var(--crystal-shadow),0 12px 35px -20px #29497659;
  -webkit-backdrop-filter:blur(22px) saturate(175%); backdrop-filter:blur(22px) saturate(175%);
}
.header { border-radius:28px; }
.brand { letter-spacing:-.065em; }
.brand>span { color:var(--red); }
.announcement { color:#394b67; }
.announcement>span svg { color:#4369a5; }
.hero { gap:clamp(26px,5vw,70px); }
.hero h1 { font-weight:760; letter-spacing:-.055em; }
.hero h1>span {
  color:#b31b4a; background:linear-gradient(105deg,#b91844 8%,#b52e77 56%,#5551c2 100%);
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero .eyebrow { letter-spacing:.095em; }
.hero-desc { max-width:510px; }
.hero-actions .text-link { padding:11px 18px; border-radius:99px; border:1px solid #ffffffed; background:var(--crystal); box-shadow:var(--crystal-shadow); }
.hero-orbit { display:block; opacity:.85; }
.orbit-one { background:linear-gradient(130deg,#94cff852,#fa8cbc38 45%,#af97ff52); border-color:#fff; }
.orbit-two { border-color:#ffffffd9; box-shadow:inset 1px 1px 2px #fff,0 0 0 1px #b8d1f44d; }
.hero-orbit { width:78%; height:72%; right:10%; top:14%; }
.spotlight {
  background:radial-gradient(ellipse at 12% 15%,#fff8,transparent 56%),linear-gradient(125deg,#ffffffa6,#ffffff4d 50%,#badaff61 100%);
  border:1px solid #ffffffeb; border-radius:34px;
  box-shadow:var(--crystal-shadow),0 28px 60px -35px #3c5b9d80;
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
}
.spotlight-top { color:#3d506d; }
.spotlight-number { padding:5px 10px; border-radius:99px; background:#ffffff70; box-shadow:inset 0 1px 1px #fff; color:#3e526f; }
.spotlight-bottom { border-top:1px solid #ffffffcf; }
.spotlight-bottom strong { color:#1d2b47; }
.hero-image-link img { filter:drop-shadow(0 16px 11px #46577821); }
.benefits { border:1px solid #ffffffc9; border-radius:24px; background:linear-gradient(110deg,#ffffff6b,#ffffff38); box-shadow:inset 0 1px 1px #fff; }
.benefits svg { color:#6554ae; }
.benefits>div+div { border-left-color:#b3c0d647; }
.section-heading .eyebrow { color:rgb(var(--accent-rgb)); }
.catalog-controls { background:var(--crystal); border-radius:28px; padding:20px 22px 0; }
.controls-top { align-items:center; gap:16px; }
.controls-bottom { gap:10px 14px; }
.search-field { background:linear-gradient(135deg,#ffffffb3,#edf3ff80); border:1px solid #ffffffeb; border-radius:18px; min-height:54px; }
.search-field:focus-within { box-shadow:inset 0 1px 1px #fff,0 0 0 3px rgb(var(--accent-rgb)/.14); }
.search-field input { font-size:1rem; color:var(--text); }
.control-select { min-width:155px; }
.control-select .choice-picker { margin-top:5px; }
.control-select label { color:#465975; }
.choice-picker .color-trigger { font-size:.9375rem; min-height:48px; }
.catalog-meta { color:#4b5e79; }
.catalog-meta #results-count { color:rgb(var(--accent-rgb)); font-weight:650; }
.brand-heading { border-bottom-color:#b7c7dd7a; }
.brand-heading h3 { letter-spacing:-.035em; }
[data-brand-section=ipad] { --accent-rgb:106 60 204; }
[data-brand-section=samsung],[data-brand-section=playstation] { --accent-rgb:31 87 199; }
[data-brand-section=xiaomi] { --accent-rgb:157 65 10; }
[data-brand-section=xbox] { --accent-rgb:22 112 77; }
[data-brand-section=nintendo] { --accent-rgb:185 30 76; }
.brand-heading>span { color:rgb(var(--accent-rgb)); padding:7px 13px; border-radius:99px; background:linear-gradient(125deg,#ffffffc9,rgb(var(--accent-rgb)/.075)); }
.product-card {
  border:1px solid #ffffffeb; border-radius:30px;
  background:linear-gradient(145deg,#ffffffdb,#ffffff94 46%,#e9effb94);
  box-shadow:var(--crystal-shadow),0 18px 38px -29px #29497870;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.product-card .product-media { margin:8px 8px 0; border-radius:23px; background:#fff; }
.product-card .photo-window { border-radius:23px; }
.product-card .product-info { border-top:1px solid #ffffffeb; padding:22px; background:linear-gradient(150deg,#ffffff4d,#ffffff08); }
.product-card .product-title { color:#1a2943; }
.product-card .product-category { color:rgb(var(--accent-rgb)); font-weight:650; }
.product-card .product-price { color:#172e51; font-size:2rem; letter-spacing:-.04em; }
.product-card .product-price small { color:#52637d; }
.color-trigger,.detail-button,.icon-button,.round-link,.photo-expand,.detail-zoom,.quantity-control,
.detail-tools button,.photo-viewer-button,.order-field input,.order-field textarea,.order-field select,.catalog-refine>summary {
  border:1px solid #ffffffed; background:linear-gradient(130deg,#ffffffe0,#ffffff75 46%,#e2edfc80);
  box-shadow:var(--crystal-shadow); color:#233754;
}
.detail-button { min-height:50px; border-radius:18px; }
.add-button { width:50px; min-width:44px; height:50px; border-radius:18px; }
.icon-button,.round-link,.photo-expand { -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); }
.button.primary,.detail-purchase .primary,.product-dialog .detail-info .primary {
  background:linear-gradient(145deg,#e6547fe8,#bf1d51f5 52%,#941746f5);
  color:#fff; border:1px solid #ffffffb3;
  box-shadow:inset 0 2px 1px #ffffffa8,inset 0 -2px 2px #60123538,0 0 0 1px #b1214e26,0 9px 24px -12px #a52c676e;
}
.order-button,.add-button {
  background:linear-gradient(145deg,#657eaded,#3b507af0 46%,#223959f5); border:1px solid #ffffffba; color:#fff;
  box-shadow:inset 0 2px 1px #ffffff8c,inset 0 -1px 1px #1324445e,0 7px 17px -10px #254b816b;
}
.button.whatsapp { background:linear-gradient(145deg,#259970eb,#147d5cf5 55%,#106344fa); border-color:#ffffffb3; box-shadow:inset 0 2px 1px #ffffff85,0 7px 22px -13px #116f517a; }
.button.secondary,.detail-purchase .secondary,.product-dialog .detail-info .secondary { background:linear-gradient(135deg,#f7fffae3,#bcecd273); border:1px solid #fff; box-shadow:var(--crystal-shadow); color:#1d6349; }
.favorite-button[aria-pressed=true],.icon-button[aria-pressed=true] { background:linear-gradient(125deg,#fff2f7ee,#f5b7d078); color:#b6194a; }
.favorite-button[aria-pressed=true] svg { fill:#b6194a; }
.color-trigger { border-radius:18px; min-height:52px; }
.color-trigger:not([data-placeholder=true]) { background:linear-gradient(120deg,#ffffffeb,#ffffff99 72%,color-mix(in srgb,var(--finish-color,#8ea6d7) 18%,#fff)); }
.color-trigger[aria-expanded=true] { background:linear-gradient(135deg,#ffffffdf,#dbe8ff99); box-shadow:var(--crystal-shadow),0 0 0 3px rgb(var(--accent-rgb)/.1),0 14px 25px -16px #28457e59; }
.color-trigger[aria-invalid=true],.order-field [aria-invalid=true] { border-color:#b51d48; }
.color-options {
  border-radius:25px; padding:7px; border:1px solid #fffffff5;
  background:linear-gradient(130deg,#ffffffe0,#ffffffa1 50%,#e1eaffc9);
  box-shadow:inset 0 2px 1px #fff,inset 1px 0 1px #ffffffc9,inset -1px -1px 2px #afb8dc75,0 0 0 1px #7d97bc3d,0 20px 50px -15px #27437466;
  -webkit-backdrop-filter:blur(22px) saturate(175%); backdrop-filter:blur(22px) saturate(175%);
}
.color-options [role=option] { min-height:53px; }
.color-options.liquid-track::before { border-radius:18px; }
.color-options.liquid-track.is-liquid-dragging>.liquid-target { color:#182e55; }
.color-swatch { box-shadow:inset 0 2px 2px #fff9,inset 0 -3px 4px #23345240,0 0 0 1px #7585a559,0 3px 6px #1e385b21; }
.liquid-track { --track-color:var(--accent-rgb); }
.category-filters.liquid-track,.sim-options.liquid-track,.nav-links.liquid-track,
.product-dialog .visual-modes,.view-positions,.photo-thumbs.liquid-track,.photo-gallery-thumbs.liquid-track {
  background:linear-gradient(125deg,#adbfde24,#ffffff40 45%,#c5c9ef26);
  border:1px solid #ffffffc9; box-shadow:inset 0 2px 4px #4d669612,inset 0 -1px 1px #fff;
}
.category-filters.liquid-track { border-radius:23px; padding:6px; gap:4px; }
.category-filters.liquid-track .category-filter { padding:10px 17px; }
.category-filters.liquid-track .category-filter.is-active,.category-filters.liquid-track.is-liquid-dragging>.liquid-target { color:rgb(var(--accent-rgb)); }
.nav-links.liquid-track { padding:4px; border-radius:99px; gap:2px; }
.nav-links.liquid-track>a { padding-inline:12px; }
.nav-links.liquid-track::before { border-radius:99px; }
.liquid-track::before {
  border:1px solid #fffffffc;
  background:radial-gradient(ellipse at 24% 0,#fff,transparent 58%),linear-gradient(140deg,#ffffffb3,#ffffff38 48%,rgb(var(--track-color)/.1));
  box-shadow:inset 0 2px 1px #fff,inset 2px 0 2px #e8faffc9,inset -2px -2px 2px #b5b2ef85,0 0 0 1px rgb(var(--track-color)/.12),0 5px 15px -8px rgb(var(--track-color)/.3);
  -webkit-backdrop-filter:blur(4px) saturate(180%); backdrop-filter:blur(4px) saturate(180%);
  transition:transform .42s cubic-bezier(.2,1.4,.36,1),width .3s cubic-bezier(.2,1.2,.36,1),height .3s cubic-bezier(.2,1.2,.36,1),opacity .18s,box-shadow .2s;
}
.liquid-track.is-liquid-dragging::before {
  background:radial-gradient(ellipse at 15% 0,#fff,transparent 60%),linear-gradient(140deg,#ffffffbd,#ecf9ff40 43%,#edddff66 80%,#ffffffb3);
  box-shadow:inset 0 3px 2px #fff,inset 3px 0 2px #d9f7fff0,inset -3px -2px 3px #b4a7eea6,0 0 0 1px #ffffffbd,0 10px 22px -10px rgb(var(--track-color)/.4);
  -webkit-backdrop-filter:blur(3px) saturate(205%) brightness(1.04); backdrop-filter:blur(3px) saturate(205%) brightness(1.04);
  transition:opacity .15s,box-shadow .15s;
}
.liquid-track.is-liquid-dragging>.liquid-target { text-shadow:0 1px 0 #fff8; }
.category-filters.liquid-track.is-liquid-dragging>.category-filter:not(.liquid-target) { color:#526481; }
.sim-options.liquid-track { border-radius:20px; }
.sim-options.liquid-track .sim-option input:checked+span { color:rgb(var(--accent-rgb)); }
:where(.glass-action) { position:relative; }
.glass-action:not(summary)::after { background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,15%),#ffffff9e,transparent 72%); box-shadow:inset 0 2px 2px #ffffffdc,inset -2px -1px 2px #b6cff678; }
/* Summary already owns its disclosure glyph; never replace it with a sheen. */
summary.glass-action::after { position:static; inset:auto; width:auto; height:auto; opacity:1; background:none; box-shadow:none; pointer-events:auto; }
.glass-action.is-glass-pressed { border-color:#fff; }
.product-dialog[open],.cart-dialog[open] {
  background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--finish-tint) 22%,transparent),transparent 65%),linear-gradient(140deg,#f7fafff5,#f1f4fcf5 65%,#f6f1fcf5);
  box-shadow:inset 0 2px 1px #fff,0 30px 90px #17336159;
}
.product-dialog .dialog-header,.cart-dialog .dialog-header,.photo-viewer-header,.photo-viewer-footer,.detail-purchase {
  background:linear-gradient(125deg,#ffffffc7,#ffffff73 62%,#d9e8ffa8);
  border-color:#ffffffeb; box-shadow:inset 0 1px 1px #fff,0 6px 18px -15px #294270;
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
}
.product-dialog .detail-summary { background:linear-gradient(110deg,#ffffff59,#ffffff08); }
.product-dialog .detail-summary .detail-price { color:#1b3157; }
.product-dialog .visual-stage { border-radius:26px; box-shadow:inset 0 1px 1px #fff,0 0 0 1px #b4c7e13d,0 16px 32px -24px #3c567d59; }
.product-dialog .visual-modes { padding:5px; border-radius:99px; }
.visual-modes.liquid-track::before,.visual-modes button { border-radius:99px; }
.product-dialog .visual-controls { background:var(--crystal); border-radius:22px; }
.product-dialog .detail-zoom { padding-inline:20px; }
.visual-color-note { color:#425778; }
.detail-shipping { color:#285e56; }
.detail-purchase .button { border-radius:19px; }
.cart-item { background:var(--crystal); border-color:#ffffffed; }
.cart-totals { background:linear-gradient(130deg,#ffffffb8,#dceaff66); }
.cart-total strong { color:#1e3e69; }
.cart-item .remove-item { border-radius:50%; min-width:44px; min-height:44px; background:var(--crystal); box-shadow:var(--crystal-shadow); }
.cart-item-top { gap:8px; }
.step,.faq-list details,.contact-panel { background:var(--crystal); border-color:#ffffffed; box-shadow:var(--crystal-shadow); }
.step-number { background:linear-gradient(135deg,#fff,#dddcfc78); color:#7852a5; border:1px solid #fff; box-shadow:var(--crystal-shadow); }
.contact-panel { background:radial-gradient(ellipse at 100% 0,#94cbfa69,transparent 63%),linear-gradient(125deg,#ffffffc7,#ede1ff8c); }
.faq-list summary { border-radius:17px; }
.faq-list details[open] { border-color:#c6b9e3; background:linear-gradient(125deg,#ffffffe0,#e8e9fcad); }
.toast { background:linear-gradient(120deg,#ffffffe6,#e8f2ffc9); color:#253b5a; }
.footer { border-top-color:#bcc8dc66; }
.glass-surface { position:relative; }
.glass-surface::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(ellipse 360px 230px at var(--light-x,50%) var(--light-y,0%),#ffffff4d,transparent 70%);
  box-shadow:inset 0 2px 1px #ffffffc9,inset -1px -1px 1px #c3cded45;
  transition:opacity .35s;
}
@media(hover:hover) {
  .glass-surface.is-prism-lit::after { opacity:1; }
  .product-card:hover { transform:translateY(-4px); box-shadow:var(--crystal-shadow),0 24px 45px -29px rgb(var(--accent-rgb)/.33); }
  .color-trigger:hover,.detail-button:hover { box-shadow:var(--crystal-shadow),0 6px 20px -12px rgb(var(--accent-rgb)/.35); }
}
@media(max-width:1100px) and (min-width:701px) {
  .nav-links.liquid-track>a { padding-inline:8px; }
  .nav-links.liquid-track { gap:0; }
  .nav { gap:12px; }
}
@media(max-width:800px) {
  .product-dialog[open],.cart-dialog[open] { border:0; }
  .product-dialog .detail-color-field { padding-block:12px; }
  .detail-purchase { box-shadow:inset 0 2px 1px #fff,0 -9px 25px -19px #2b496873; }
  .detail-purchase .button { min-height:52px; }
  .product-dialog .visual-stage { border-radius:22px; }
}
@media(max-width:700px) {
  .header { border-radius:23px; }
  .hero { gap:18px; padding-top:25px; }
  .hero h1 { font-size:clamp(2rem,8.7vw,3.2rem); line-height:1.08; }
  .hero-actions { gap:12px; }
  .hero-actions .text-link { padding:11px 12px; gap:7px; }
  .hero-actions .button { padding-inline:14px; gap:8px; }
  .hero-orbit { width:72%; height:60%; right:14%; top:20%; }
  .spotlight { border-radius:25px; }
  .hero-visual { padding-inline:0; }
  .benefits { border-radius:20px; }
  .catalog-controls { padding:13px 13px 0; border-radius:25px; }
  .catalog-refine>summary { padding:10px 13px; border-radius:16px; margin-top:3px; }
  .refine-fields { padding-top:12px; gap:10px; }
  .control-select { min-width:0; }
  .choice-picker .color-trigger { padding-inline:11px; font-size:1rem; }
  .controls-bottom { padding-block:12px; gap:10px; }
  .category-filters.liquid-track { padding:5px; border-radius:21px; }
  .category-filters.liquid-track .category-filter { padding-inline:16px; }
  .js-ready .mobile-dock.js-only {
    background:linear-gradient(125deg,#ffffffe0,#ffffffa1 46%,#dceaffad 80%,#ede3ffc2);
    border:1px solid #fff; border-radius:28px; padding:6px;
    box-shadow:inset 0 2px 1px #fff,inset -1px -1px 2px #aebddd73,0 1px 1px #fff8,0 10px 36px -13px #243b6a70;
    -webkit-backdrop-filter:blur(22px) saturate(185%); backdrop-filter:blur(22px) saturate(185%);
  }
  .mobile-dock.liquid-track::before { border-radius:22px; }
  .mobile-dock>a,.mobile-dock>button { min-height:58px; color:#405775; }
  .mobile-dock.liquid-track .is-active,.mobile-dock.liquid-track.is-liquid-dragging>.liquid-target { color:rgb(var(--accent-rgb)); }
  .mobile-dock.liquid-track.is-liquid-dragging>:not(.liquid-target) { color:#526580; }
  .product-card .product-info { padding:19px 20px 22px; }
  .product-card { border-radius:28px; }
  .section-heading { gap:12px; }
  .catalog-meta { flex-wrap:wrap; gap:5px 10px; }
}
@media(max-width:370px) {
  .hero-actions { gap:8px; }
  .hero-actions .button,.hero-actions .text-link { padding-inline:13px; }
  .product-card .product-info { padding-inline:16px; }
  .detail-purchase .button { font-size:.875rem; }
}
@media(prefers-reduced-motion:reduce) {
  .liquid-track::before,.glass-surface::after { transition:none; }
  .glass-action.is-glass-pressed { translate:none; scale:none; }
  .product-card:hover { transform:none; }
}
@media(prefers-reduced-transparency:reduce) {
  .glass,.mobile-dock,.js-ready .mobile-dock.js-only,.color-options,.color-trigger,.catalog-controls,.product-dialog[open],.cart-dialog[open],.detail-purchase,.liquid-track::before { background:#f5f7fc; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header,.mobile-dock,.js-ready .mobile-dock.js-only,.color-options,.detail-purchase { background:linear-gradient(125deg,#f7faff,#e4edfc); }
}
@media(forced-colors:active) {
  .hero h1>span { background:none; -webkit-text-fill-color:CanvasText; }
  .liquid-track::before,.color-options,.color-trigger { background:Canvas; border:1px solid ButtonText; box-shadow:none; }
  .liquid-track::before { border-color:Highlight; }
  .glass-surface::after { display:none; }
}