/* ShopWay surface: one continuous background, live DOM controls above it. */
:root {
  --sw-day-panel: rgba(255, 253, 247, 0.74);
  --sw-day-panel-soft: rgba(255, 253, 247, 0.56);
  --sw-night-panel: rgba(8, 20, 43, 0.76);
  --sw-night-panel-soft: rgba(8, 20, 43, 0.58);
}

/* The original solid body paint hid the fixed background layer everywhere except the hero. */
html { background: #f4e7c7; }
body { background: transparent !important; }
body[data-theme='night'] { background: transparent !important; }

/* A single portrait asset fills the entire app. Never tile, crop into panels or repeat it. */
body::before {
  background:
    linear-gradient(180deg, rgba(255, 252, 244, .15), rgba(255, 249, 232, .06)),
    url('/shopway-bg-day-mobile-v1.png') center top / cover fixed no-repeat !important;
}

body[data-theme='night']::before {
  background:
    linear-gradient(180deg, rgba(4, 10, 22, .10), rgba(4, 10, 22, .24)),
    url('/shopway-bg-night-mobile-v1.png') center top / cover fixed no-repeat !important;
}

/* The hero is a readable, dimensional surface — never a second pasted wallpaper. */
.hero-card {
  background:
    radial-gradient(ellipse at 16% 12%, rgba(255, 244, 213, .86), transparent 42%),
    radial-gradient(ellipse at 88% 95%, rgba(203, 162, 75, .16), transparent 45%),
    linear-gradient(118deg, rgba(255, 253, 247, .94), rgba(255, 253, 247, .68)) !important;
  backdrop-filter: blur(10px) saturate(1.04);
  box-shadow: 0 16px 36px rgba(16, 41, 75, .14), inset 0 1px 0 rgba(255,255,255,.84) !important;
}

body[data-theme='night'] .hero-card {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(55, 88, 135, .30), transparent 42%),
    radial-gradient(ellipse at 91% 91%, rgba(211, 158, 66, .16), transparent 43%),
    linear-gradient(118deg, rgba(7, 18, 38, .95), rgba(7, 18, 38, .69)) !important;
  backdrop-filter: blur(10px) saturate(1.04);
}

/* Genuine alpha portrait: it sits directly on the material surface with no
 * circle, panel, crop mask or second copy of the background. */
.hero-card .assistant-portrait {
  right: -11px;
  bottom: -8px;
  width: 51%;
  height: auto;
  border-radius: 0;
  opacity: 1;
  mix-blend-mode: normal;
  /* The cutout must stay unprocessed: filters brighten semi-transparent hair
   * pixels into a visible halo on dark surfaces. */
  filter: none !important;
  mask-image: none;
  -webkit-mask-image: none;
}

body[data-theme='night'] .hero-card .assistant-portrait {
  /* No filter, glow, rim light, disk or duplicate background: the image alpha
   * is the only edge around the portrait. */
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.flow-panel,
.status-strip,
.success-card {
  background: linear-gradient(140deg, var(--sw-day-panel), var(--sw-day-panel-soft)) !important;
  backdrop-filter: blur(9px) saturate(1.03);
}

body[data-theme='night'] .flow-panel,
body[data-theme='night'] .status-strip,
body[data-theme='night'] .success-card {
  background: linear-gradient(140deg, var(--sw-night-panel), var(--sw-night-panel-soft)) !important;
}

.brand-chip,
.catalog-card,
.service-included,
.service-option,
.account-card,
.catalog-empty {
  background: rgba(255, 253, 247, .64) !important;
  backdrop-filter: blur(8px) saturate(1.02);
}

body[data-theme='night'] .brand-chip,
body[data-theme='night'] .catalog-card,
body[data-theme='night'] .service-included,
body[data-theme='night'] .service-option,
body[data-theme='night'] .account-card,
body[data-theme='night'] .catalog-empty {
  background: rgba(7, 18, 38, .68) !important;
}


body:not([data-theme='night']) .hero-card h1,
body:not([data-theme='night']) .hero-card p:not(.eyebrow) {
  color: #10294b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.84);
}

body[data-theme='night'] .hero-card p:not(.eyebrow) {
  color: #e7edf5;
}

/* Discovery is a real catalogue entry point, not a pasted marketing picture. */
.discovery-section { margin: 24px 0 8px; }
.segment-control { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 12px; }
.segment { flex: 0 0 auto; min-height: 35px; border: 1px solid rgba(185, 151, 75, .30); border-radius: 13px; padding: 0 13px; background: rgba(255,253,247,.46); color: var(--ink); font: 800 11px/1 inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.segment.is-active { background: linear-gradient(155deg,#294b78,#0a1e3d); color: #fff7e5; border-color: #d6af56; box-shadow: 0 4px 0 #071a32, inset 0 1px 0 rgba(255,244,211,.32); }
.segment:active { transform: translateY(2px); }
.discovery-heading { margin: 1px 0 11px; }
.discovery-heading h2 { margin: 0; color: var(--ink); font: 700 22px/1.02 Georgia, serif; letter-spacing: -.04em; }
.discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.discovery-card { position: relative; isolation: isolate; min-height: 111px; overflow: hidden; border: 1px solid rgba(214,175,86,.46); border-radius: 20px; padding: 14px; color: #fff8e8; text-align: left; cursor: pointer; transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, filter .18s ease; }
.discovery-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.14) 0 1px, transparent 1px 4px); opacity: .78; }
.discovery-card::after { content: ''; position: absolute; z-index: -1; right: -26px; bottom: -34px; width: 126px; height: 126px; border: 1px solid rgba(255,231,171,.66); border-radius: 46% 54% 50% 50%; box-shadow: inset 0 0 30px rgba(255,255,255,.12), 0 0 20px rgba(220,171,69,.20); transform: rotate(21deg); }
.discovery-card span { display:block; color: rgba(255,245,220,.72); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.discovery-card strong { display:block; margin-top: 13px; font-size: 16px; line-height: 1.02; }
.discovery-card i { position:absolute; right: 14px; bottom: 11px; color:#f2c96e; font: 700 25px/1 Georgia,serif; }
.discovery-card--accessories { background: linear-gradient(145deg,#0e284c,#315d8a); }
.discovery-card--bags { background: linear-gradient(145deg,#42312e,#92704e); }
.discovery-card--clothing { background: linear-gradient(145deg,#253660,#77578a); }
.discovery-card--shoes { background: linear-gradient(145deg,#1a4057,#35778a); }
.discovery-card:hover,.discovery-card:focus-visible { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 11px 23px rgba(16,41,75,.19),0 0 0 3px rgba(214,175,86,.13); outline:none; }
.discovery-card:active { transform: translateY(3px) scale(.99); box-shadow: 0 4px 10px rgba(16,41,75,.16),inset 0 2px 10px rgba(0,0,0,.16); }

/* A gallery action remains visibly separate from an external URL.  It is never
 * exposed as a public image and the request cannot pretend that it is a source. */
.visual-search { display:grid; gap:9px; border:1px solid rgba(214,175,86,.46); border-radius:18px; padding:12px; background:linear-gradient(145deg,rgba(255,253,247,.54),rgba(244,219,158,.22)); }
.visual-search strong { display:block; color:var(--ink); font-size:12px; }
.visual-search small,.field-hint { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.visual-upload { display:inline-flex !important; width:max-content; align-items:center; border:1px solid #d6af56; border-radius:12px; padding:10px 12px; background:linear-gradient(155deg,#294b78,#0a1e3d); color:#fff8e8 !important; cursor:pointer; font-size:11px !important; box-shadow:0 4px 0 #071a32,inset 0 1px 0 rgba(255,244,211,.28); }
.visual-upload input { position:absolute; width:1px !important; height:1px !important; padding:0 !important; overflow:hidden; opacity:0; }
#photo-preview { width:100%; max-height:172px; object-fit:cover; border:1px solid rgba(214,175,86,.55); border-radius:13px; }
body[data-theme='night'] .visual-search { background:linear-gradient(145deg,rgba(8,25,48,.77),rgba(34,50,77,.44)); }

/* ShopWay Mini App button mechanics. This is the single authoritative layer
 * for the button component, based on the reviewed Grok patch. Default is
 * deliberately calm; stronger champagne light appears only on a real press. */
.sw-btn {
  --sw-glow:0 0 12px 2px rgba(212,175,120,.28),0 0 28px 4px rgba(212,175,120,.12);
  --sw-lift:0px;
  --sw-bg-top:#f7f0e6;
  --sw-bg-bot:#ebe0d2;
  --sw-fg:#1a2744;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:3rem;
  padding:.75rem 1.75rem;
  border:1px solid rgba(212,175,120,.62) !important;
  border-radius:1.125rem !important;
  background:linear-gradient(180deg,rgba(255,248,240,.14) 0%,transparent 45%),linear-gradient(180deg,var(--sw-bg-top) 0%,var(--sw-bg-bot) 100%) !important;
  color:var(--sw-fg) !important;
  font:500 13px/1 inherit;
  letter-spacing:.01em;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 0 rgba(255,236,210,.45) inset,0 2px 6px rgba(26,39,68,.08),0 8px 20px rgba(26,39,68,.06),var(--sw-glow) !important;
  transform:translateY(var(--sw-lift));
  transition:transform 180ms ease-out,box-shadow 180ms ease-out,filter 180ms ease-out,background 180ms ease-out !important;
}
.sw-btn--dark,
body[data-theme='night'] .sw-btn:not(.sw-btn--light) {
  --sw-bg-top:#1e2a44;
  --sw-bg-bot:#152038;
  --sw-fg:#f3e6d4;
  box-shadow:0 1px 0 rgba(243,230,212,.12) inset,0 2px 8px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.22),var(--sw-glow) !important;
}
.sw-btn:hover:not(:disabled),
.sw-btn:focus-visible:not(:disabled) {
  --sw-lift:-1px;
  --sw-glow:0 0 16px 3px rgba(212,175,120,.42),0 0 36px 6px rgba(212,175,120,.18);
}
.sw-btn:active:not(:disabled),
.sw-btn.is-active:not(:disabled) {
  --sw-lift:2px;
  --sw-glow:0 0 22px 4px rgba(212,175,120,.55),0 0 48px 8px rgba(212,175,120,.28);
  transition-duration:90ms !important;
}
.sw-btn:focus-visible:not(:disabled) { outline:2px solid rgba(212,175,120,.9); outline-offset:3px; }
.sw-btn:disabled { --sw-lift:0px; --sw-glow:0 0 8px 1px rgba(212,175,120,.12); opacity:.48; cursor:not-allowed; pointer-events:none; }
.catalog-favourite,.icon-button,.nav-item--main span { transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.catalog-favourite:active,.icon-button:active,.nav-item--main:active span { transform:translateY(2px) scale(.96); box-shadow:0 0 11px rgba(242,185,66,.60); }
.brand-chip,.catalog-card,.quick-card,.segment { transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease,filter .18s ease,border-color .18s ease !important; }
.brand-chip:hover,.brand-chip:focus-visible,.catalog-card:hover,.catalog-card:focus-visible { transform:translateY(-2px); border-color:rgba(232,187,86,.86); box-shadow:0 12px 22px rgba(7,23,50,.16),0 0 0 2px rgba(234,187,82,.10); outline:none; }
.brand-chip:active,.catalog-card:active { transform:translateY(2px) scale(.995); box-shadow:0 3px 8px rgba(7,23,50,.13),inset 0 1px 8px rgba(9,28,57,.09); }
.plain-button:hover,.plain-button:focus-visible { color:#c18a24; text-shadow:0 0 10px rgba(232,184,73,.30); outline:none; }

/* Thin vector icon system: recognisable at a glance and light enough for a Mini App. */
.category-icons { position:absolute; right:12px; bottom:11px; display:flex; gap:5px; align-items:center; color:#f5cf79 !important; }
.category-icons svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 4px rgba(0,0,0,.22)); }
.discovery-card--accessories .category-icons svg { width:20px; height:20px; }
.discovery-card strong { margin-top: 12px; }
.catalog-card .card-size-note { display:block; min-height:25px; margin-top:7px; color:var(--muted); font-size:9px; line-height:1.32; }
.source-section { margin-top:26px; }
.source-country-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.source-country { min-height:96px; padding:13px 10px; text-align:left; }
.source-country strong { display:block; font:700 16px/1.05 Georgia,serif; }
.source-country small { display:block; margin-top:8px; color:var(--muted); font-size:9px; line-height:1.28; }
.country-choice { display:grid; gap:6px; margin-bottom:15px; padding:13px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.45); }
body[data-theme='night'] .country-choice { background:rgba(8,20,41,.44); }
.country-choice > strong { font-size:12px; }
.country-choice > small { color:var(--muted); font-size:10px; line-height:1.35; }
.country-choice__actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.country-choice__actions .sw-btn { min-height:36px; padding:8px 11px; font-size:10px; }
.country-choice__actions .sw-btn.is-selected { --sw-bg-top:#17385f; --sw-bg-bot:#0c1d38; --sw-fg:#fff4d5; --sw-glow:0 0 10px 1px rgba(231,184,74,.45),0 5px 0 rgba(5,14,31,.55); border-color:rgba(239,199,96,.85); }
.catalog-economy { display:flex; align-items:center; gap:6px; width:100%; margin-top:9px; border:0; border-radius:10px; padding:7px 8px; background:rgba(214,175,86,.13); color:var(--ink); font:800 9px/1.2 inherit; text-align:left; cursor:pointer; }
.catalog-economy span { color:#a77a25; font-size:13px; }
.catalog-status { display:block; margin-top:7px; color:#a77a25; font-size:9px; font-weight:800; line-height:1.25; }
.catalog-card.is-stale { opacity:.88; }
.catalog-card.is-stale .catalog-image { filter:saturate(.74); }
.catalog-more { display:flex; width:100%; margin-top:14px; }
@media (max-width:460px) { .source-country-grid { grid-template-columns:1fr; } .source-country { min-height:64px; } .source-country small { margin-top:4px; } }

@media (prefers-reduced-motion: reduce) {
  .sw-btn,
  .sw-btn:hover:not(:disabled),
  .sw-btn:focus-visible:not(:disabled),
  .sw-btn:active:not(:disabled),
  .sw-btn.is-active:not(:disabled) { --sw-lift:0px; transition:none !important; }
  .discovery-card,.segment { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .hero-card,
  .sw-btn,
  .brand-chip,
  .catalog-card,
  .service-option,
  .quick-card {
    transition: none !important;
  }
}