/* PHONE MX · a shared glass finish without continuous animation or extra media. */
:root {
  --bg:#edf0f7;
  --text:#1b263b;
  --muted:#526078;
  --crystal:linear-gradient(125deg,#ffffffb8 0%,#ffffffe0 8%,#ffffff64 47%,#e7ecf57a 100%);
  --crystal-edge:#ffffffd9;
  --crystal-shadow:inset 0 1.5px 1px #fff,inset 1px 0 1px #ffffffa6,inset 0 -1px 1px #ffffffa8,0 7px 22px -12px #34435c30,0 0 0 1px #7e8ea312;
  --glass:var(--crystal);
}
body {
  background:radial-gradient(ellipse 900px 750px at 100% 0,#becdeb80,transparent 78%),radial-gradient(ellipse 640px 900px at -10% 12%,#ddbbca4d,transparent 80%),linear-gradient(155deg,#f4f5f9,#e9eef7 54%,#f4f2f6);
}
.ambient { opacity:.4; }
.glass,.spotlight,.floating-shipping,.catalog-controls,.contact-panel,.step,.cart-item,.cart-totals,.order-ready {
  background:var(--crystal);
  border:1px solid var(--crystal-edge);
  box-shadow:var(--crystal-shadow);
}
.header,.mobile-dock {
  background:linear-gradient(120deg,#ffffffe0,#ffffff6b 45%,#ecf0fa96);
  border-color:#fffffff0;
  box-shadow:var(--crystal-shadow),0 12px 36px -22px #2c416b66;
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
}
.mobile-dock .is-active {
  background:linear-gradient(130deg,#ffffffef,#ffffff63);
  box-shadow:inset 0 1px 1px #fff,0 4px 12px -7px #30416370;
}
.catalog-controls { -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); }
.product-card {
  border:1px solid #fffffff0;
  border-radius:26px;
  background:var(--crystal);
  box-shadow:var(--crystal-shadow),0 14px 35px -26px #263c6250;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.product-card .product-info { background:transparent; border-top-color:#ffffffd9; }
.product-card .product-media { margin:7px 7px 0; border-radius:20px; overflow:hidden; }
.product-card .photo-window { border-radius:20px; }
.brand-heading>span,.condition,.product-note.condition {
  background:linear-gradient(125deg,#ffffffc7,#e5f0e979);
  border-color:#ffffffec;
  box-shadow:inset 0 1px 0 #fff,0 1px 4px #36485f0a;
}
.benefits { border-color:#b9c7dc66; }
.faq-list details {
  border:1px solid #ffffffdb;
  background:var(--crystal);
  border-radius:20px;
  padding-inline:20px;
  margin-bottom:10px;
  box-shadow:var(--crystal-shadow);
}
.faq-list summary { padding-block:18px; }
.faq-list p { padding-bottom:20px; }
.contact-panel { background:linear-gradient(125deg,#ffffffb8,#e1e8f794 68%,#efdae759); }

/* Raised controls catch light while retaining a dark, stable text color. */
.icon-button,.detail-button,.favorite-button,.round-link,.photo-expand,.search-field,
.order-field input,.order-field textarea,.order-field select,.color-trigger,
.sim-option span,.product-dialog .detail-tools button,.product-dialog .quantity-control,
.product-dialog .detail-zoom,.cart-item .quantity-control,.photo-viewer-button {
  background:linear-gradient(130deg,#fffffff2,#ffffff7a 52%,#e2e8f087);
  border:1px solid #ffffffed;
  box-shadow:var(--crystal-shadow);
}
.search-field { box-shadow:inset 0 1px 3px #4b627012,inset 0 -1px 0 #fff,0 0 0 1px #a6b2c226; }
.search-field input { background:transparent; border:0; box-shadow:none; }
.round-link { color:var(--text); }
.color-trigger {
  min-height:50px;
  border-radius:18px;
  color:var(--text);
  box-shadow:var(--crystal-shadow),0 4px 14px -8px #3b4b664d;
  transition:background .24s,box-shadow .24s,border-color .24s,transform .2s;
}
.color-trigger[data-placeholder=true] { color:#526078; }
.color-trigger[aria-expanded=true] {
  border-color:#fff;
  background:linear-gradient(125deg,#fffffff7,#eef2f6a3 70%,#dce3efad);
  box-shadow:var(--crystal-shadow),0 0 0 1px #78899d59,0 8px 22px -13px #364d7680;
}
.color-trigger[aria-invalid=true] { border-color:var(--red); box-shadow:var(--crystal-shadow),0 0 0 1px #be163a35; }
.color-value,.color-option-label { flex:1; min-width:0; }
.color-chevron { transition:transform .22s,margin .22s; }
.color-swatch {
  display:block;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:1px solid #ffffffd9;
  border-radius:50%;
  background:radial-gradient(ellipse at 28% 16%,#ffffff9e,transparent 57%),var(--finish-color,#c8cedb);
  box-shadow:inset 0 -2px 3px #0c173326,inset 0 1px 1px #ffffffd6,0 0 0 1px #33425c24,0 2px 4px #24314816;
}
.color-trigger[data-placeholder=true]>.color-swatch { display:none; }
.color-trigger>.color-swatch { animation:finish-reveal .24s ease-out; }

/* The list is real translucent glass; the placeholder is never an option. */
.color-options {
  padding:7px;
  border:1px solid #fffffff2;
  border-radius:24px;
  background:linear-gradient(125deg,#ffffffb3,#ffffff5c 36%,#e0e5ee80 100%);
  color:#1b263b;
  box-shadow:inset 0 1.5px 1px #fff,inset 1px 0 1px #ffffffcf,inset 0 -1px 1px #ffffffa6,0 0 0 1px #7c899a38,0 16px 46px -15px #27334f66;
  -webkit-backdrop-filter:blur(24px) saturate(175%);
  backdrop-filter:blur(24px) saturate(175%);
  transform-origin:50% 0;
  animation:glass-reveal .23s cubic-bezier(.2,.75,.25,1);
  scrollbar-width:thin;
  scrollbar-color:#7c8ba459 transparent;
}
.color-options[data-direction=up] { transform-origin:50% 100%; }
.color-options [role=option] {
  min-height:51px;
  padding:12px;
  gap:12px;
  border:1px solid transparent;
  border-radius:17px;
  transition:background .18s,box-shadow .18s,border-color .18s;
}
.color-options [role=option]+[role=option] { margin-top:3px; }
.color-options [role=option].is-active {
  background:linear-gradient(135deg,#ffffff94,#ffffff40);
  border-color:#ffffffa6;
  box-shadow:inset 0 1px 1px #fff,0 3px 9px -7px #36446045;
}
.color-options [role=option][aria-selected=true] {
  color:#18253b;
  background:linear-gradient(135deg,#ffffffe0,#ffffff60);
  border-color:#ffffffed;
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 0 #ffffffa6,0 4px 12px -7px #30416359;
  font-weight:650;
}
.color-options [role=option][aria-selected=true]::after {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#ffffffc9;
  color:#a71338;
  box-shadow:inset 0 1px 0 #fff,0 1px 4px #36445b1c;
}
.sim-option span { border-radius:16px; transition:background .2s,box-shadow .2s,border-color .2s; }
.sim-option input:checked+span {
  background:linear-gradient(125deg,#fff5f8ed,#f2dae494);
  border-color:#bd3a5980;
  color:#971536;
  box-shadow:inset 0 1.5px 1px #fff,0 0 0 1px #b02b4721,0 4px 12px -9px #a4194099;
}
.button.primary,.detail-purchase .primary,.product-dialog .detail-info .primary {
  border:1px solid #ffffff80;
  background:linear-gradient(160deg,#d3506ced 0%,#c32247f2 42%,#a71237ed 100%);
  color:#fff;
  box-shadow:inset 0 1.5px 1px #ffffff9e,inset 0 -1px 1px #720c2b40,0 6px 18px -10px #af163b80;
}
.order-button,.add-button,.category-filter.is-active {
  background:linear-gradient(145deg,#586880ed,#283951f0 55%,#1e2b40eb);
  border:1px solid #ffffff7a;
  box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 0 #16203b26,0 4px 12px -8px #192b5380;
}
.button.secondary,.detail-purchase .secondary,.product-dialog .detail-info .secondary {
  background:linear-gradient(135deg,#fffffff2,#e2eee58c);
  border:1px solid #ffffffed;
  color:#215c3d;
  box-shadow:var(--crystal-shadow);
}

/* The sheet keeps its independent scroll area and unobstructed purchase bar. */
.product-dialog[open],.cart-dialog[open] {
  background:radial-gradient(ellipse at 100% 0,#cedaf270,transparent 60%),radial-gradient(ellipse at 0 40%,#e9d0dc40,transparent 60%),linear-gradient(125deg,#f9fbfff0,#f4f6fae6);
  border-color:#fffffff0;
  box-shadow:inset 0 1.5px 1px #fff,0 26px 90px #2435554d;
}
.product-dialog::backdrop,.cart-dialog::backdrop,.photo-viewer::backdrop {
  background:#2939514a;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}
.product-dialog .dialog-header,.cart-dialog .dialog-header,.photo-viewer-header,.photo-viewer-footer,.detail-purchase {
  background:linear-gradient(125deg,#ffffffb8,#ffffff69 55%,#e9eef994);
  border-color:#ffffffd9;
  box-shadow:inset 0 1px 0 #fff,0 2px 14px -10px #2d426b4d;
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
}
.product-dialog .dialog-header .icon-button { background:var(--crystal); border:1px solid #fff; box-shadow:var(--crystal-shadow); }
.product-dialog .detail-summary { background:linear-gradient(115deg,#ffffff7a,#ffffff21); border-color:#ffffffb3; }
.product-dialog .detail-media { background:transparent; }
.product-dialog .visual-stage {
  border:1px solid #fffffff2;
  border-radius:24px;
  box-shadow:inset 0 1px 1px #fff,0 5px 20px -16px #34466d40;
}
.product-dialog .visual-modes,.product-dialog .visual-controls {
  background:linear-gradient(125deg,#dbe2ed88,#ffffff5c);
  border:1px solid #ffffffe8;
  border-radius:19px;
  box-shadow:inset 0 1px 2px #30426812,inset 0 -1px 0 #fff,0 4px 14px -10px #34436835;
}
.visual-modes button,.product-dialog .visual-controls button { border-radius:14px; }
.visual-modes button[aria-pressed=true],.product-dialog .visual-controls button[aria-pressed=true] {
  background:var(--crystal);
  border-color:#fff;
  color:var(--text);
  box-shadow:var(--crystal-shadow);
}
.product-dialog .photo-thumbs button { background:var(--crystal); border-color:#fff; box-shadow:var(--crystal-shadow); border-radius:14px; }
.product-dialog .photo-thumbs button[aria-pressed=true] { border-color:#be3053; box-shadow:inset 0 1px 0 #fff,0 0 0 2px #be305314,0 3px 10px #4c335719; }
.product-dialog .detail-zoom { border-radius:99px; }
.detail-purchase { box-shadow:inset 0 1px 0 #fff,0 -8px 24px -17px #30416247; }
.detail-purchase .button { border-radius:18px; }
.cart-item,.cart-totals { border-radius:22px; }
.cart-totals { margin-top:16px; }
.order-field input,.order-field textarea,.order-field select { border-radius:16px; }
.toast { background:#ffffffc9; border:1px solid #fff; box-shadow:var(--crystal-shadow); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.photo-viewer-button { color:var(--text); }

@keyframes glass-reveal { from { opacity:0; transform:translateY(-3px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes finish-reveal { from { opacity:.4; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@media (hover:hover) {
  .color-options [role=option]:hover { background:#ffffffa3; border-color:#ffffffd9; }
  .color-trigger:hover,.detail-button:hover { border-color:#fff; box-shadow:var(--crystal-shadow),0 7px 20px -13px #34497073; }
  .product-card:hover { box-shadow:var(--crystal-shadow),0 20px 36px -24px #304b7580; }
}
@media (max-width:800px) {
  .product-dialog[open],.cart-dialog[open] { border:0; }
  .product-dialog .detail-color-field { padding-block:12px; }
  .product-dialog .detail-summary { padding-block:12px; }
  .product-dialog .visual-stage { border-radius:22px; }
  .detail-purchase { padding-top:12px; }
}
@media (max-width:380px) {
  .color-trigger { gap:9px; padding-inline:11px; }
  .color-options [role=option] { padding-inline:10px; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .color-options,.color-trigger>.color-swatch { animation:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .glass,.product-card,.catalog-controls,.color-options,.color-trigger,.product-dialog[open],.cart-dialog[open],.detail-purchase { background:#f5f7fc; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .color-options { background:linear-gradient(125deg,#f8faff,#e6ebf3); }
  .header,.mobile-dock { background:#f4f7fc; }
}
@media (forced-colors:active) {
  .color-options,.color-trigger,.color-options [role=option] { border:1px solid ButtonText; background:Canvas; color:CanvasText; box-shadow:none; }
  .color-options [role=option][aria-selected=true] { outline:2px solid Highlight; outline-offset:-3px; }
}