/* Topa: unified storefront cards and revised profile hierarchy. */
:root {
  --bg: #EAF3F0;
  --content-width:min(1240px,calc(100% - 96px));
  --surface: #FCFEFD;
  --ink: #073F47;
  --muted: #365F65;
  --line: #BDD5CF;
  --field-line: #577F83;
  --soft: #DDEDE7;
  --card-line: #B8D4CC;
  --card-surface: #FCFEFD;
  --card-surface-end: #E1F3ED;
  --card-radius: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --selection-bg:#D5ECE5;
  --selection-ink:#07535F;
  --selection-line:#79ADA5;
}
:root[data-theme=dark] {
  /* Functional surface shades derived from Profundo, not new brand accents. */
  --bg: #062E35;
  --surface: #0A3B43;
  --ink: #F2FBFA;
  --muted: #BAD4D5;
  --line: #28525A;
  --field-line: #54868C;
  --soft: #0A3B43;
  --card-line: #3B6167;
  --card-surface: #0C444D;
  --card-surface-end: #0B5059;
  --selection-bg:#214F54;
  --selection-ink:#DFF7F2;
  --selection-line:#5B9997;
}
body {font-size:16px;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
.wrap {width:var(--content-width)}
.demo-banner {background:var(--soft);color:var(--muted);font-size:11px;padding:5px 12px;letter-spacing:0}
.site-header {height:88px;gap:46px;border-bottom-color:var(--line)}
.wordmark {font-size:44px;font-weight:750;letter-spacing:-2.8px;line-height:1;white-space:nowrap;flex-shrink:0}
.wordmark-o {position:relative;display:inline-block;color:inherit!important}
.wordmark-center {position:absolute;display:block;width:5px;height:5px;border-radius:50%;background:var(--gold);left:50%;top:53%;transform:translate(-50%,-50%)}
.header-section {font-size:13px;font-weight:550;color:var(--muted)}
.intro {padding:40px 0 34px;gap:70px;align-items:center}
.intro h1 {font-size:clamp(52px,5.15vw,72px);font-weight:650;line-height:1.01;letter-spacing:-.055em;font-optical-sizing:auto}
.intro>p {font-size:16px;line-height:1.8;max-width:335px;padding:0;color:var(--muted);text-wrap:pretty}
.intro strong {font-weight:500}
.title-stop {color:var(--ink)}
.search-form {background:var(--soft);border:1px solid var(--field-line);border-radius:16px;grid-template-columns:minmax(190px,1fr) 240px auto;padding:17px 15px 17px 27px;gap:24px;position:relative}
.search-form label>span {font-size:12px;font-weight:500;margin-bottom:10px;line-height:1.3}
.search-form input,.search-form select {font-size:17px;font-weight:450;line-height:1.5;min-height:28px;padding:0;border-radius:0}
.search-form input::placeholder {color:var(--muted)}
.search-form select {font-weight:550}
.zone-field {padding-left:26px;border-color:var(--line)}
/* The focus indicator surrounds the field group, never the input's label. */
.search-form input:focus-visible,.search-form select:focus-visible {outline:none}
.search-form:has(input:focus-visible),.search-form:has(select:focus-visible) {outline:2px solid var(--focus);outline-offset:-2px;border-color:transparent}
.search-form label:focus-within>span {color:var(--ink)}
.search-form label>span {position:relative}
.search-form label>span::before {content:'';position:absolute;left:-13px;top:5px;width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px var(--primary);opacity:0}
.search-form label:focus-within>span::before {opacity:1}
.primary {font-size:14px;letter-spacing:-.005em;font-weight:600;border-radius:10px;min-height:54px;padding:15px 22px;transition:transform 125ms var(--ease-out),background-color 150ms ease}
.search-button {min-height:64px;display:flex;align-items:center;justify-content:center;gap:20px;padding-inline:24px;white-space:nowrap}
.target-mark {display:inline-block;position:relative;width:25px;height:25px;flex:0 0 25px;border:1.5px solid currentColor;border-radius:50%;color:inherit}
.target-ring {position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%;opacity:.55}
.target-dot {position:absolute;width:5px;height:5px;left:50%;top:50%;margin:-2.5px 0 0 -2.5px;background:var(--gold);border-radius:50%;opacity:1}
.search-notes {font-size:12px;margin-top:18px;gap:24px;line-height:1.6}
.search-notes strong {font-weight:550}
.meeting-dot {width:14px;height:14px;flex-basis:14px;border-width:1.5px;margin-top:1px}
.meeting-dot::after {width:4px;height:4px;left:3.5px;top:3.5px}
.discovery {padding-top:40px}
.results-heading {margin-bottom:27px;gap:24px}
.results-heading h2 {font-size:29px;font-weight:600;line-height:1.15;letter-spacing:-.035em}
.results-heading p {font-size:12px;margin-top:9px}
.order-note {font-size:11px!important}
.view-controls {border-color:var(--line)}
.modalities {gap:30px}
.view-button {font-size:14px;font-weight:500;min-height:44px;padding-bottom:13px;border-bottom-width:2px}
.view-button[aria-pressed=true] {font-weight:600}
.pickup-option {font-size:12px;gap:9px;padding-bottom:13px}
.pickup-option input {width:16px;height:16px}
.categories {gap:10px;margin:20px 0 26px}
.categories button {border:1px solid transparent;background:var(--soft);padding:10px 16px;min-height:44px;font-size:14px;font-weight:500;line-height:1.4;border-radius:10px}
.categories button[aria-pressed=true] {font-weight:600;background:var(--selection-bg);color:var(--selection-ink);border-color:var(--selection-line)}
.store-grid {gap:34px 28px}
.store {display:flex;flex-direction:column;border:1px solid var(--card-line);border-radius:var(--card-radius);background-color:var(--card-surface);background-image:linear-gradient(150deg,var(--card-surface) 18%,var(--card-surface-end));padding:10px;isolation:isolate}
.store-art {width:100%;flex-shrink:0;height:185px;border-radius:10px;align-items:flex-start;justify-content:center;padding:27px 30px;box-shadow:none}
.art-name {font-size:46px;font-weight:650;letter-spacing:-.05em;text-align:left;line-height:1;max-width:88%}
.art-line {font-size:11px;font-weight:450;line-height:1.5;letter-spacing:.005em;margin-top:15px;max-width:80%}
.art-nativa .art-name {font-size:49px;font-weight:450;letter-spacing:-.035em}
.art-marea .art-name {font-size:39px;font-weight:650;line-height:.98;max-width:150px}
.art-patio .art-name {font-size:49px;font-weight:600;letter-spacing:-.06em}
.art-lila .art-name {font-size:41px;font-weight:500;letter-spacing:-.04em}
.art-oliva .art-name {font-size:49px;font-weight:500;letter-spacing:-.045em}
.store-meta {display:flex;flex-direction:column;flex:1;width:100%;padding:17px 6px 6px}
.store h3 {font-size:18px;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.store-place {font-size:11px}
.store-category {font-size:13px;margin-top:5px;line-height:1.5}
.store-bottom {border-top:0;padding-top:17px;margin-top:auto;font-size:11px;line-height:1.5}
.store-open {font-weight:550;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.store-open::after {content:none}
.store-target {position:absolute;right:18px;bottom:18px;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(1.08);pointer-events:none}
.store-target .target-ring {inset:6px}
.store-target .target-dot {opacity:0;transform:scale(.9)}
.store-art.image-cover {padding:0;background:#F2FBFA}
.reference-image {width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block}
.reference-caption {position:absolute;bottom:12px;left:13px;background:#FFFFFF;color:#476D72;font-size:9px;line-height:1.4;padding:4px 7px;border-radius:4px;letter-spacing:0}
.image-cover .store-target {color:#073F47;background:#FFFFFF;right:12px;top:12px;bottom:auto}
.image-cover .store-target .target-dot {background:var(--gold)}
.profile-art.image-cover {height:156px}
.store[aria-current=true] {outline:none;border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.store[aria-current=true] .store-art {box-shadow:none}
.store[aria-current=true] .store-target,.store:focus-visible .store-target {opacity:1;transform:none}
.store[aria-current=true] .store-target .target-dot,.store:focus-visible .store-target .target-dot {opacity:1;transform:none}
.store:focus-visible {outline:2px solid var(--focus);outline-offset:6px}
.profile {width:min(590px,100%);background:var(--bg);border-left:1px solid var(--line)}
.profile::backdrop {background:rgba(3,27,31,.18)}
.profile-inner {padding:22px 36px 0}
.profile-toolbar {margin-bottom:16px;font-size:11px;letter-spacing:0}
.profile-toolbar .text-button {display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;text-decoration:none}
.profile-toolbar .text-button::before {content:none}
.profile-art {height:156px;padding:24px 28px;border-radius:10px}
.profile-art .art-name {font-size:52px;font-weight:600;max-width:90%}
.profile-art.art-marea .art-name {font-size:46px;max-width:180px}
.profile-art .art-line {font-size:12px}
.profile-heading {padding:0 0 22px}
.profile-title-row {display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:0}
.profile-title {font-size:37px;font-weight:600;letter-spacing:-.04em;margin:0}
.profile-selection {display:flex;align-items:center;gap:9px;font-size:10px;font-weight:450;color:var(--muted);white-space:nowrap}
.profile-selection .target-mark {width:21px;height:21px;flex-basis:21px;color:var(--ink)}
.profile-selection .target-ring {inset:3px}
.profile-subtitle {font-size:13px;margin-top:9px;line-height:1.6;color:var(--ink)}
.profile-subtitle>span {display:block;color:var(--muted);font-size:11px;margin-top:3px;font-variant-numeric:tabular-nums}
.profile-desc {font-size:14px;line-height:1.8;margin-top:22px;max-width:52ch;color:var(--muted)}
.detail-section {padding:23px 0;border-color:var(--line)}
.detail-section h3 {font-size:13px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.detail-section p {font-size:13px;line-height:1.8}
.profile-categories span {border:0;background:var(--soft);font-size:11px;padding:6px 11px;border-radius:5px}
.profile-offer {padding:22px 0 19px}
.detail-section .profile-stock-note {font-size:11px;line-height:1.6;margin-top:11px}
.purchase-list {list-style:none;margin:0;padding:0;display:grid;gap:13px;font-size:13px;line-height:1.6}
.purchase-list li {display:flex;gap:11px;align-items:flex-start}
.option-marker {display:block;flex:0 0 6px;height:6px;margin-top:7px;border:1px solid var(--muted);border-radius:50%}
.purchase-list .delivery-match {padding:12px 14px;background:var(--soft);border-radius:6px}
.delivery-match .option-marker {background:var(--gold);border-color:var(--gold)}
.delivery-match small {display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.6}
.detail-section .delivery-context {font-size:11px;line-height:1.6;margin-top:12px}
.location-facts {display:grid;grid-template-columns:1fr 1.6fr;gap:24px;margin:0;font-size:13px;line-height:1.7}
.location-facts dt {font-size:11px;color:var(--muted);margin-bottom:4px}
.location-facts dd {margin:0;font-variant-numeric:tabular-nums}
.detail-section .profile-fixture-note {font-size:10px;margin-top:12px;color:var(--muted)}
.profile-about {border-bottom:0}
.profile-note {font-size:11px;line-height:1.7;margin-top:22px}
.profile-contact {padding-top:15px;border-color:var(--line)}
.profile-contact p {font-size:11px;line-height:1.5}
.profile-contact .contact-context {margin:0 0 10px;min-height:0;text-align:left;color:var(--ink);font-size:12px;font-weight:500}
.profile-contact .primary {font-size:14px;min-height:52px}
.search-guidance {background:var(--soft);border-left-width:2px;font-size:13px;padding:14px 18px;line-height:1.7}
.empty h3 {font-size:27px;font-weight:600;letter-spacing:-.03em}
.discovery-foot {font-size:11px;border-color:var(--line);margin-top:42px;padding:25px 0 32px}
.discovery-foot>span {font-weight:500}
@media(hover:hover) and (pointer:fine) {
  .store {transition:border-color 160ms ease}
  .store .store-art {transition:none}
  .store:hover {border-color:var(--field-line)}
  .store:hover .store-art {transform:none;box-shadow:none}
  .store-target {transition:transform 160ms var(--ease-out),opacity 125ms ease}
  .store-target .target-dot {transition:transform 160ms var(--ease-out),opacity 125ms ease}
  .store:hover .store-target,.store:hover .store-target .target-dot {opacity:1;transform:none}
  .store:hover .store-open {text-decoration:none}
  .categories button:hover:not([aria-pressed=true]) {background:var(--line)}
  .search-button:hover .target-ring {opacity:1}
}
html[data-input=keyboard] button:active {transform:none}
html[data-input=keyboard] .store-target,html[data-input=keyboard] .target-dot {transition:none}
@media(max-width:1050px) {
  :root {--content-width:calc(100% - 64px)}
  .wrap {width:var(--content-width)}
  .intro {gap:40px}.intro h1 {font-size:60px}.intro>p {font-size:15px;max-width:290px}
  .search-form {grid-template-columns:minmax(160px,1fr) 190px auto;gap:19px;padding:16px 13px 16px 23px}
  .zone-field {padding-left:20px}.search-button {padding-inline:19px;gap:14px}
  .search-form input,.search-form select {font-size:16px}
  .store-art {height:175px;padding:24px}.store-grid {gap:30px 22px}
  .art-name {font-size:40px}.art-nativa .art-name {font-size:44px}.art-marea .art-name {font-size:36px}.art-lila .art-name {font-size:35px}
}
@media(max-width:760px) {
  :root {--content-width:calc(100% - 40px)}
  .wrap {width:var(--content-width)}.site-header {height:76px}.wordmark {font-size:39px}.wordmark-center {width:4px;height:4px}
  .intro {padding:33px 0 27px}.intro h1 {font-size:53px;letter-spacing:-.052em;line-height:1.02}
  .intro>p {max-width:440px;font-size:14px;line-height:1.75;margin-top:23px}
  
  .search-form {grid-template-columns:minmax(0,1fr) auto;padding:21px 18px 17px;gap:18px 14px;border-radius:14px}
  .query-field {padding-bottom:18px;border-bottom:1px solid var(--line)}.search-form label>span {font-size:11px;margin-bottom:11px}
  .search-form input {font-size:16px;line-height:1.5;min-height:28px}.zone-field {padding:0;border-left:0}
  .search-form select {font-size:14px;min-height:27px}.search-button {font-size:12px;min-height:54px;padding:12px 15px;gap:12px}
  .search-button .target-mark {width:21px;height:21px;flex-basis:21px}.search-button .target-ring {inset:3px}
  .search-notes {font-size:11px;line-height:1.7;margin-top:16px}.search-notes strong {display:block;margin-bottom:4px}
  .meeting-dot {margin-top:3px}.discovery {padding-top:34px}.results-heading {margin-bottom:22px}
  .results-heading h2 {font-size:27px;font-weight:600}.results-heading p {font-size:12px;margin-top:9px}
  .results-heading .order-note {font-size:11px;margin-top:12px}.modalities {gap:23px}.view-button {font-size:13px;min-height:44px}
  .pickup-option {font-size:11px;padding-top:5px;padding-bottom:12px}.view-controls {gap:10px}
  .categories {gap:7px;margin:18px 0 23px}.categories button {min-height:44px;padding:10px 13px;font-size:13px;border-radius:10px}
  .store-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 17px}.store {padding:8px}.store-art {height:148px;padding:19px 15px;border-radius:8px}
  .art-name {font-size:34px;max-width:100%;letter-spacing:-.05em}.art-line {font-size:9px;max-width:100%;margin-top:12px}
  .art-nativa .art-name {font-size:35px}.art-marea .art-name {font-size:30px;max-width:110px}.art-patio .art-name {font-size:36px}.art-lila .art-name {font-size:29px}.art-oliva .art-name {font-size:36px}
  .store h3 {font-size:16px;font-weight:600}.store-meta {padding:14px 2px 4px}.store-place {font-size:11px;margin-top:5px}
  .store-category {font-size:12px;min-height:36px;margin-top:6px}.store-bottom {display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:10px;margin-top:auto;padding-top:16px}.store-open {font-size:11px;margin-top:0}
  .store-target {width:26px;height:26px;bottom:13px;right:13px}.store-target .target-ring {inset:4px}
  .profile {width:100%;border:0}.profile-inner {padding:14px 23px 0}.profile-toolbar {margin-bottom:15px}
  .profile-art {height:132px;padding:22px 25px}.profile-art .art-name {font-size:42px}.profile-art.art-marea .art-name {font-size:37px;max-width:160px}
  .profile-art.image-cover {height:132px}
  .profile-heading {padding-bottom:19px}
  .profile-title-row {margin-top:0;gap:12px}.profile-title {font-size:33px}.profile-selection>span:first-child {display:none}
  .profile-desc {font-size:14px;line-height:1.8;margin-top:21px}.profile-subtitle {font-size:12px}
  .profile-offer {padding-top:19px}.detail-section {padding-block:20px}.profile-offer {padding-bottom:17px}
  .profile-contact {padding-top:13px}.profile-contact p {font-size:10px}.profile-contact .contact-context {font-size:11px;margin-bottom:8px}.profile-note {font-size:11px}
  .discovery-foot {margin-top:34px;font-size:11px;padding:23px 0 28px}.discovery-foot>span {margin-top:14px}
}
@media(max-width:370px) {
  :root {--content-width:calc(100% - 32px)}
  .wrap {width:var(--content-width)}.intro h1 {font-size:47px}.search-form {padding:19px 15px 15px;gap:17px 9px}
  .site-header {gap:16px}.intro h1 {font-size:clamp(39px,12.5vw,46px)}
  .search-button {font-size:11px;padding-inline:12px;gap:8px}.search-button .target-mark {width:18px;height:18px;flex-basis:18px}.search-button .target-ring {inset:3px}
  .search-form select {font-size:13px}.store-grid {gap:24px 13px}.store-art {height:140px;padding-inline:13px}
  .art-name {font-size:30px}.art-nativa .art-name {font-size:31px}.art-marea .art-name {font-size:27px}.art-patio .art-name {font-size:33px}.art-lila .art-name {font-size:26px}.art-oliva .art-name {font-size:32px}
  .store h3 {font-size:15px}.view-button {font-size:13px}.modalities {gap:18px}
  .profile-title {font-size:30px}.profile-selection {gap:0}
}
@media(prefers-reduced-motion:reduce) {
  .store-target,.store-target .target-dot,.primary {transition:none!important}
  .store:hover .store-art {transform:none}
}

/* v83: native popups need their own opaque surface, not the select's transparent field. */
select {color-scheme:inherit}
select option,select optgroup {background-color:var(--surface);color:var(--ink)}
