/* Customer workspace. Theme colors remain configurable by each store. */
.store-workspace { --sidebar-width: 238px; --gutter: 30px; font-size: 14px; line-height: 1.55; display: block; }
.store-workspace::before, .store-workspace::after { display: none; }
.ui-icon { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.store-workspace h1 { font-size: 28px; letter-spacing: -.045em; }
.store-workspace h2 { font-size: 19px; letter-spacing: -.035em; }
.store-workspace h3 { font-size: 15px; letter-spacing: -.025em; }
.store-workspace .btn { box-shadow: none; font-size: 13px; min-height: 40px; padding: 9px 16px; border-radius: 9px; }
.store-workspace .btn .ui-icon { width: 16px; height: 16px; }
.store-workspace .btn-primary { background: var(--primary); }
.store-workspace .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 3px 15px var(--primary-dim); }
.store-workspace .btn-sm { min-height: 36px; padding: 7px 12px; }
.store-workspace .card { background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: 13px; }
.store-workspace .card::before { display: none; }
.store-workspace .section, .store-workspace .store-section { padding-block: 30px; }
.store-workspace input, .store-workspace select, .store-workspace textarea { font-size: 14px; }
.icon-button { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-button:hover { color: var(--primary); background: var(--primary-dim); }
.skip-link { position: fixed; top: -70px; left: 260px; padding: 12px 20px; background: var(--primary); color: var(--on-primary); z-index: 100; }
.skip-link:focus { top: 8px; }
.store-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.workspace-brand { height: 87px; padding: 22px; display: flex; gap: 11px; align-items: center; color: var(--text); flex: none; }
.workspace-brand > img, .workspace-mark { height: 37px; width: 37px; flex: none; border-radius: 11px; object-fit: contain; }
.workspace-mark { display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.workspace-brand > span:last-child { min-width: 0; }
.workspace-brand b { font-size: 17px; letter-spacing: -.6px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-brand small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.brand-dot, .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: inline-block; }
.workspace-switch { margin: 0 17px 7px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 9px; display: flex; gap: 9px; align-items: center; }
.workspace-switch-icon { padding: 6px; background: var(--surface-2); border-radius: 7px; color: var(--text-2); }
.workspace-switch-icon .ui-icon { width: 16px; height: 16px; }
.workspace-switch small { color: var(--faint); font-size: 12px; letter-spacing: 1px; display: block; }
.workspace-switch b { display: block; font-size: 12px; font-weight: 500; }
.workspace-switch-dot { width: 5px; height: 5px; background: var(--primary); border-radius: 50%; margin-left: auto; }
.workspace-nav { padding: 0 12px 16px; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.nav-label { font-size: 13px; color: var(--faint); letter-spacing: 1.5px; font-weight: 600; margin: 24px 13px 10px; }
.workspace-nav a { display: flex; align-items: center; min-height: 41px; gap: 11px; padding: 10px 13px; border-radius: 8px; color: var(--muted); font-size: 13px; margin-bottom: 3px; }
.workspace-nav a > .ui-icon { width: 18px; height: 18px; }
.workspace-nav a > span { min-width: 0; }
.workspace-nav a.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; box-shadow: inset 2px 0 var(--primary); }
.workspace-nav a:hover { color: var(--text); background: var(--surface-2); }
.workspace-nav .nav-new { margin-left: auto; font-size: 12px; padding: 2px 5px; border: 1px solid var(--border-lit); color: var(--primary); border-radius: 4px; white-space: nowrap; }
.workspace-nav .nav-category { min-height: 32px; padding-block: 7px; }
.nav-category i { width: 6px; height: 6px; border: 1px solid var(--muted); border-radius: 2px; margin-inline: 6px; }
.nav-category small { margin-left: auto; font-size: 12px; color: var(--faint); }
.notification-count { padding: 0 6px; border-radius: 4px; color: var(--primary); background: var(--primary-dim); margin-left: auto; }
.sidebar-bottom { padding: 10px 18px 17px; flex: none; }
.sidebar-help { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 15px; }
.sidebar-help > .ui-icon { color: var(--primary); width: 23px; height: 23px; margin-bottom: 10px; }
.sidebar-help b { display: block; font-size: 12px; }
.sidebar-help p { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 6px 0 12px; }
.sidebar-help a { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.sidebar-help a .ui-icon { width: 14px; height: 14px; }
.seller-switch { display: flex; align-items: center; gap: 9px; padding: 17px 3px; color: var(--muted); font-size: 12px; }
.seller-switch .ui-icon { width: 15px; height: 15px; }.seller-switch .ui-icon:last-child { margin-left: auto; }
.sidebar-credit { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .2px; color: var(--faint); padding: 3px; white-space: nowrap; }
.sidebar-credit a { color: var(--muted); font-weight: 800; letter-spacing: .5px; font-size: 12px; }
.sidebar-credit a span { color: var(--primary); margin-left: 2px; }
.workspace-main { margin-left: var(--sidebar-width); min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }
.workspace-topbar { position: sticky; top: 0; z-index: 25; min-height: 73px; display: flex; align-items: center; padding: 12px var(--gutter); gap: 25px; border-bottom: 1px solid var(--border); background: var(--bg); }
.topbar-location { display: flex; gap: 10px; align-items: center; font-size: 12px; white-space: nowrap; }
.topbar-location span { color: var(--faint); }.topbar-location .ui-icon { width: 12px; height: 12px; color: var(--faint); }.topbar-location b { font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.workspace-search { margin-inline: auto; display: flex; align-items: center; gap: 9px; flex: 1; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; height: 37px; color: var(--faint); }
.workspace-search .ui-icon { width: 16px; height: 16px; }
.store-workspace .workspace-search input { background: transparent; border: none; box-shadow: none; font-size: 12px; padding: 0; min-width: 0; width: 100%; color: var(--text); height: 100%; }
.workspace-search kbd { border: 1px solid var(--border); padding: 0 5px; font-size: 12px; border-radius: 4px; }
.topbar-actions { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.local-badge { font-size: 12px; letter-spacing: 1px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--faint); }
.topbar-balance { display: flex; gap: 9px; align-items: center; color: var(--text); padding-right: 15px; border-right: 1px solid var(--border); }
.topbar-balance small { display: block; font-size: 12px; color: var(--faint); }.topbar-balance b { font-size: 13px; }.topbar-balance > .ui-icon { color: var(--muted); width: 17px; height: 17px; }.topbar-balance > .ui-icon:last-child { color: var(--primary); width: 13px; height: 13px; }
.notification-button { border: none; }.notification-button i { position: absolute; top: 6px; right: 8px; border: 2px solid var(--bg); width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.store-workspace .usermenu summary { width: 33px; height: 33px; font-size: 13px; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); }
.logout-button { background: none; border: none; font: inherit; color: var(--muted); cursor: pointer; padding: 10px 15px; width: 100%; text-align: left; }.logout-button:hover { color: var(--primary); }
.sidebar-toggle, .sidebar-close, .sidebar-scrim, .mobile-dock, .mobile-brand, .mobile-search { display: none; }
.workspace-page { padding: 30px var(--gutter) 38px; max-width: 1700px; margin: auto; }
.welcome-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; gap: 15px; }
.eyebrow { font-size: 12px; letter-spacing: 1.8px; color: var(--muted); font-weight: 500; margin-bottom: 9px; }
.welcome-heading h1 { margin: 0 0 7px; font-size: clamp(21px,1.9vw,29px); font-weight: 600; }.heading-dot { color: var(--primary); }
.welcome-heading p { margin: 0; font-size: 13px; color: var(--muted); }
.store-online { display: flex; gap: 7px; align-items: center; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--muted); flex: none; }
.store-online i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.discovery-layout { display: grid; grid-template-columns: minmax(0,1fr) 246px; gap: 24px; align-items: start; }.discovery-layout.catalog-only { grid-template-columns: 1fr; }.discovery-content { min-width: 0; }
.spotlight { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--border-lit); border-radius: 16px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); min-height: 284px; display: flex; }
.spotlight::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--primary-dim) 1px,transparent 1px),linear-gradient(90deg,var(--primary-dim) 1px,transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(90deg,transparent 35%,#000); opacity: .6; z-index: -1; }
.spotlight-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .13; z-index: -1; }
.spotlight-copy { position: relative; z-index: 3; padding: 30px; width: 63%; }
.spotlight-label { display: flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 1.3px; color: var(--primary); }.spotlight-label .ui-icon { width: 12px; height: 12px; }
.spotlight-copy h2 { font-size: clamp(25px,2.5vw,40px); font-weight: 600; line-height: 1.15; letter-spacing: -.06em; margin: 17px 0 12px; max-width: 14ch; }.spotlight-copy h2 em { font-style: normal; color: var(--primary); }.spotlight-copy p { font-size: 12px; color: var(--muted); max-width: 32ch; margin-bottom: 22px; }
.spotlight-copy .btn { font-size: 12px; gap: 20px; }
.spotlight-note { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 16px; }.spotlight-note .ui-icon { width: 11px; height: 11px; color: var(--primary); }
.spotlight-art { position: absolute; width: 340px; height: 285px; right: -22px; top: 50%; transform: translateY(-50%); }
.orbit { position: absolute; width: 285px; height: 285px; border: 1px solid var(--border-lit); border-radius: 50%; top: 10px; left: 30px; }.orbit-two { width: 225px; height: 225px; top: 40px; left: 60px; }
.digital-card { position: absolute; width: 186px; height: 220px; border-radius: 15px; padding: 20px; box-shadow: 0 15px 30px #0003; display: flex; flex-direction: column; }
.digital-card > span { font-size: 12px; letter-spacing: 1px; font-weight: 600; }.digital-card b { font-size: 20px; line-height: 1.12; font-weight: 500; letter-spacing: -.7px; }.digital-card small { font-size: 12px; letter-spacing: 1.3px; margin-top: 7px; }
.card-back { top: 16px; left: 126px; background: #c5b5ee; color: #332743; transform: rotate(13deg); }.card-back > .ui-icon { width: 55px; height: 55px; margin-block: 23px; stroke-width: 1; }
.card-front { top: 55px; left: 62px; transform: rotate(-11deg); background: color-mix(in srgb, var(--primary) 36%, #e9f4e3); color: #19332a; }
.art-apps { display: flex; gap: 7px; margin: 22px 0; }.art-apps i { background: #fff8; border: 1px solid #fff9; padding: 7px; border-radius: 9px; display: grid; place-items: center; }.art-apps .ui-icon { width: 20px; height: 20px; }
.digital-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid #19332a25; padding-top: 12px; }.digital-card-footer span { font-size: 12px; }.digital-card-footer .ui-icon { width: 18px; height: 18px; }
.art-spark { position: absolute; color: var(--primary); font-size: 23px; }.art-spark-one { top: 10px; left: 46px; }.art-spark-two { bottom: 10px; right: 20px; font-size: 16px; }
.art-floating-label { position: absolute; right: 27px; bottom: 24px; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 3px 15px #0002; border-radius: 7px; padding: 9px 12px; font-size: 12px; transform: rotate(3deg); }.art-floating-label .ui-icon { color: var(--primary); width: 12px; height: 12px; margin-right: 5px; }
.assurance-strip { display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 15px 3px; border-bottom: 1px solid var(--border); }
.assurance-strip span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }.assurance-strip b { font-weight: 400; }.assurance-strip .ui-icon { width: 14px; height: 14px; color: var(--primary); }
.discovery-section { margin-top: 27px; }.catalog-only .catalog-section { margin-top: 0; }
.discovery-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }.discovery-section-head h2 { font-size: 16px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 9px; }.discovery-section-head h2 > .ui-icon { color: var(--primary); width: 17px; height: 17px; }.discovery-section-head h2 > span { color: var(--faint); font: 500 7px var(--font); letter-spacing: 1.1px; border: 1px solid var(--border); padding: 3px 6px; border-radius: 4px; }
.discovery-section-head h2 > .result-count { font-size: 13px; letter-spacing: 0; background: var(--surface); }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }.text-link .ui-icon { width: 13px; height: 13px; }
.carousel-controls { display: flex; gap: 5px; }.carousel-controls .icon-button { width: 26px; height: 26px; border-radius: 6px; }.carousel-controls .ui-icon { width: 13px; height: 13px; }.carousel-controls button:first-child .ui-icon { transform: rotate(180deg); }
.featured-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px)/2); overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1px; }.featured-track::-webkit-scrollbar { display: none; }
.featured-card { display: flex; align-items: center; gap: 11px; padding: 12px; min-width: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); scroll-snap-align: start; }.featured-card:hover { border-color: var(--border-lit); background: var(--surface-2); }
.featured-art { display: grid; place-items: center; width: 55px; height: 59px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--item-accent) 17%, var(--surface)); border: 1px solid color-mix(in srgb, var(--item-accent) 23%, var(--surface)); overflow: hidden; }.featured-art img { width: 100%; height: 100%; object-fit: cover; }.featured-art b { font-size: 32px; font-weight: 700; color: var(--item-accent); letter-spacing: -2px; }
.featured-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.featured-info small { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }.featured-info > b { font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.featured-info > span { color: var(--primary); font-size: 12px; font-weight: 600; }.featured-card > .ui-icon { margin-left: auto; width: 14px; height: 14px; color: var(--faint); }
.catalog-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }.category-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px 0; }.category-tabs a { white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--muted); font-size: 12px; border: 1px solid var(--border); border-radius: 7px; }.category-tabs .ui-icon { width: 13px; height: 13px; }.category-tabs a.active { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }.category-tabs a:hover { color: var(--primary); }
.catalog-sort { display: flex; align-items: center; flex: none; margin-left: auto; color: var(--faint); }.catalog-sort .ui-icon { width: 13px; height: 13px; }.catalog-sort select { font-size: 13px; background: none; border: none; padding: 6px; color: var(--muted); max-width: 128px; box-shadow: none; }.catalog-sort option { background: var(--surface); color: var(--text); }
.volume-benefits { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 14px; padding: 10px 13px; }.volume-benefits summary { cursor: pointer; color: var(--primary); font-size: 12px; }.volume-benefits summary span { color: var(--muted); font-size: 13px; margin-left: 8px; }.volume-benefits summary .ui-icon { width: 14px; height: 14px; }
.workspace-products { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }.catalog-only .workspace-products { grid-template-columns: repeat(4,minmax(0,1fr)); }
.workspace-product { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: none; color: var(--text); overflow: hidden; }.workspace-product::before { display: none; }.workspace-product:hover { border-color: var(--border-2); box-shadow: 0 7px 20px #0002; transform: translateY(-3px); }.workspace-product.is-out { opacity: .65; }
.workspace-product .product-img { position: relative; height: 135px; aspect-ratio: auto; background: var(--surface-2); overflow: hidden; }.workspace-product .product-img > img { width: 100%; height: 100%; object-fit: cover; }.product-artwork { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb,var(--item-accent) 9%,var(--surface)); overflow: hidden; }.product-art-grid { position: absolute; width: 160px; height: 160px; border: 1px solid color-mix(in srgb,var(--item-accent) 15%,transparent); border-radius: 50%; transform: rotate(-30deg); }.product-art-grid::before { content: ''; position: absolute; inset: 20px; border: 1px solid color-mix(in srgb,var(--item-accent) 18%,transparent); border-radius: 50%; }.product-art-grid::after { content: ''; position: absolute; inset: 40px -40px; border-block: 1px solid color-mix(in srgb,var(--item-accent) 12%,transparent); }
.product-monogram { font-size: 72px; line-height: 1; font-weight: 700; font-family: var(--font-display); color: var(--item-accent); letter-spacing: -5px; text-shadow: 0 4px 0 color-mix(in srgb,var(--item-accent) 20%,var(--surface)); transform: rotate(-8deg); transition: transform .3s; }.workspace-product:hover .product-monogram { transform: rotate(0) scale(1.08); }.product-art-label { position: absolute; bottom: 9px; left: 12px; font-size: 12px; letter-spacing: 1.6px; color: var(--item-accent); opacity: .65; text-transform: uppercase; }.product-art-spark { position: absolute; right: 21px; top: 38px; color: var(--item-accent); opacity: .5; font-size: 17px; }
.product-pick, .product-discount { position: absolute; left: 9px; top: 9px; display: flex; gap: 3px; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 3px 6px; font-size: 12px; border-radius: 4px; color: var(--text-2); }.product-pick .ui-icon { width: 9px; height: 9px; color: var(--primary); }.product-discount { background: var(--primary); color: var(--on-primary); font-weight: 600; border-color: transparent; }
.product-media-arrow { position: absolute; right: 9px; bottom: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; padding: 4px; display: flex; color: var(--muted); }.product-media-arrow .ui-icon { width: 12px; height: 12px; transform: rotate(-45deg); }
.workspace-product .product-body { padding: 14px 13px 12px; flex: 1; display: flex; flex-direction: column; }.product-overline { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 7px; }.product-overline > span:first-child { color: var(--faint); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.product-availability { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }.product-availability i { width: 4px; height: 4px; background: var(--primary); border-radius: 50%; }.product-availability.unavailable i { background: var(--faint); }
.workspace-product h3 { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.product-variant-chips { display: flex; gap: 4px; flex-wrap: wrap; min-height: 21px; margin-bottom: 12px; }.product-variant-chips span { color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font-size: 12px; }
.product-subline { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); min-height: 21px; margin: 0 0 12px; flex-wrap: wrap; }.product-subline .ui-icon { width: 10px; height: 10px; }.product-subline > span { color: var(--faint); }
.workspace-product .product-meta { border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; align-items: end; gap: 5px; }.product-price-stack { display: flex; flex-direction: column; }.product-price-stack > small { font-size: 12px; letter-spacing: 1px; color: var(--faint); margin-bottom: 1px; }.workspace-product .price { font-size: 17px; line-height: 1.4; letter-spacing: -.5px; color: var(--text); font-weight: 600; }.workspace-product .price small { font-size: 12px; color: var(--faint); }.product-choose { display: flex; align-items: center; gap: 3px; color: var(--primary); font-size: 12px; margin-bottom: 3px; white-space: nowrap; }.product-choose .ui-icon { width: 11px; height: 11px; }
.catalog-empty { padding: 55px 20px; text-align: center; border: 1px dashed var(--border-2); border-radius: 14px; }.catalog-empty > .ui-icon { color: var(--muted); margin-bottom: 15px; width: 30px; height: 30px; }.catalog-empty p { font-size: 13px; color: var(--muted); }
.discovery-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 20px; }.rail-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }.rail-heading > span:first-child { display: flex; border: 1px solid var(--border); padding: 6px; border-radius: 8px; }.rail-heading .ui-icon { width: 16px; height: 16px; color: var(--primary); }.rail-heading small { font-size: 12px; letter-spacing: 1px; color: var(--muted); }.rail-heading .status-dot { margin-left: auto; }
.personal-card h3 { font-size: 22px; font-weight: 500; line-height: 1.25; margin-bottom: 11px; }.personal-card p { font-size: 12px; color: var(--muted); margin-bottom: 20px; }.personal-card .rail-caption { font-size: 13px; margin-bottom: 5px; }.rail-balance { font-size: 29px; font-weight: 500; letter-spacing: -1.5px; margin-bottom: 22px; }.rail-balance small { font-size: 12px; letter-spacing: 0; margin-left: 6px; color: var(--faint); }
.rail-secondary { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--muted); padding-top: 13px; }.rail-secondary .ui-icon { width: 12px; height: 12px; }
.rail-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }.rail-title h3 { font-size: 14px; font-weight: 500; margin: 0; }.rail-title .ui-icon { width: 15px; height: 15px; color: var(--faint); }
.steps-card ol { padding: 0; margin: 0; list-style: none; }.steps-card li { display: flex; gap: 12px; position: relative; }.steps-card li + li { margin-top: 20px; }.steps-card li:not(:last-child)::after { content: ''; position: absolute; left: 11px; width: 1px; background: var(--border); top: 28px; bottom: -15px; }.steps-card li > span { font-size: 12px; font-family: var(--mono); flex: none; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; }.steps-card li b { font-size: 12px; font-weight: 500; }.steps-card li p { font-size: 13px; color: var(--faint); margin: 4px 0 0; line-height: 1.7; }
.rail-support { border: 1px solid var(--border-lit); background: color-mix(in srgb,var(--primary) 5%,var(--surface)); border-radius: 13px; padding: 20px; color: var(--text); }.rail-support > div { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; color: var(--primary); }.rail-support > div > span { font-size: 12px; letter-spacing: 1px; }.rail-support > div .ui-icon { width: 18px; height: 18px; }.rail-support h3 { font-size: 22px; line-height: 1.25; font-weight: 500; margin-bottom: 10px; }.rail-support p { font-size: 12px; color: var(--muted); margin-bottom: 20px; }.rail-support > span { display: flex; justify-content: space-between; font-size: 13px; color: var(--primary); }.rail-support > span .ui-icon { width: 14px; height: 14px; }
.reminder-nudge { display: flex; align-items: center; gap: 10px; padding: 2px 5px; }.reminder-nudge > .ui-icon { color: var(--muted); width: 16px; height: 16px; }.reminder-nudge > .ui-icon:last-child { width: 12px; height: 12px; margin-left: auto; }.reminder-nudge b { display: block; font-size: 12px; color: var(--text-2); font-weight: 500; }.reminder-nudge small { display: block; font-size: 12px; color: var(--faint); margin-top: 4px; }
.recent-purchase { display: flex; align-items: center; gap: 8px; padding-block: 11px; border-top: 1px solid var(--border); }.recent-purchase > span:first-child { color: var(--muted); }.recent-purchase > span:nth-child(2) { min-width: 0; }.recent-purchase b { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }.recent-purchase small { display: block; font-size: 12px; color: var(--faint); }.recent-purchase > .ui-icon { margin-left: auto; width: 12px; height: 12px; color: var(--faint); }
.builder-banner { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: 13px; margin-top: 25px; background: var(--surface); }.builder-banner-icon { padding: 15px; border: 1px solid var(--border-lit); background: var(--primary-dim); border-radius: 11px; }.builder-banner-icon .ui-icon { width: 25px; height: 25px; }.builder-banner > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }.builder-banner small { color: var(--primary); font-size: 12px; letter-spacing: 1px; }.builder-banner b { font-size: 18px; letter-spacing: -.5px; color: var(--text); font-weight: 500; }.builder-banner > .btn { margin-left: auto; }
.compact-combos { grid-template-columns: repeat(2,minmax(0,1fr)); }.compact-combos .combo-card-media { height: 95px; aspect-ratio: auto; }.compact-combos .combo-card-body { padding: 15px; }.compact-combos .combo-list { font-size: 12px; }.compact-combos .combo-card h3 { font-size: 14px; }.compact-combos .combo-card .price { font-size: 18px; }.compact-combos .combo-card { box-shadow: none; border-radius: 12px; }
.workspace-footer { margin-top: auto; padding: 22px var(--gutter); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 15px; font-size: 12px; color: var(--faint); }.workspace-footer > div { display: flex; gap: 17px; }.workspace-footer a { color: var(--muted); }.workspace-footer .ui-icon { width: 10px; height: 10px; }.workspace-footer i { font-style: normal; margin: 0 7px; }
.flash-wrap { padding-top: 16px; }
/* Product choices and account utilities. */
[hidden] { display: none !important; }
.plan-fieldset { border: none; margin: 22px 0 0; padding: 0; min-width: 0; }.plan-fieldset legend { font-size: 12px; color: var(--primary); letter-spacing: .5px; }.plan-fieldset legend span { color: var(--text-2); margin-left: 8px; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.detail-art { height: 360px; max-height: 48vh; position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }.detail-art .product-monogram { font-size: 150px; }.detail-art .product-art-grid { width: 280px; height: 280px; }.detail-art .product-art-label { font-size: 12px; bottom: 20px; left: 22px; }.detail-art .product-art-spark { font-size: 27px; top: 55px; right: 45px; }.detail-art img { height: 100%; width: 100%; object-fit: cover; }
.detail-trust { display: flex; justify-content: space-around; padding: 18px 0; gap: 12px; color: var(--muted); font-size: 12px; }.detail-trust .ui-icon { width: 14px; height: 14px; color: var(--primary); margin-right: 5px; }.detail-content > p { font-size: 13px; line-height: 1.9; }.detail-specs { margin-block: 19px; }.detail-specs .k,.detail-specs .v { display: block; }.detail-specs .v { font-size: 12px; }.purchase-box { padding: 19px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }.purchase-box .qty-row { margin-bottom: 17px; }.purchase-box .qty-label { font-size: 13px; }.purchase-box .qty-picker { height: 35px; }.purchase-box .qty-picker input { width: 44px; height: 35px; }.purchase-box .qty-picker button { width: 31px; min-height: 31px; }.purchase-box .small { font-size: 12px; }.purchase-summary { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; margin-bottom: 12px; border-top: 1px solid var(--border); }.purchase-summary > span { font-size: 12px; color: var(--text-2); }.purchase-summary small { display: block; font-size: 13px; color: var(--faint); margin-top: 5px; }.purchase-summary strong { font-size: 24px; font-weight: 500; letter-spacing: -.6px; }.store-workspace .product-detail { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 30px; }
.variant-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,152px),1fr)); gap: 9px; margin-block: 14px; }.variant-option { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--border-2); background: var(--surface); border-radius: 10px; cursor: pointer; color: var(--text); position: relative; }.variant-option.is-selected, .variant-option:has(input:checked) { border-color: var(--primary); background: var(--primary-dim); box-shadow: 0 0 0 1px var(--primary); }.variant-option:has(input:disabled) { opacity: .45; cursor: not-allowed; }.variant-option input { width: 14px; height: 14px; accent-color: var(--primary); flex: none; }.variant-option-detail { flex: 1; min-width: 0; }.variant-option-detail b, .variant-option-detail small { display: block; }.variant-option-detail small { font-size: 12px; color: var(--muted); margin-top: 3px; }.variant-option-price { color: var(--primary); font-size: 14px; font-weight: 600; }.variant-caption { color: var(--muted); font-size: 12px; }
.store-workspace .pdetail { gap: 30px; }.store-workspace .pdetail-img { max-height: 400px; }.store-workspace .pdetail h1 { font-size: 30px; }.store-workspace .account-head { margin-bottom: 25px; }.store-workspace .account-cards { grid-template-columns: 2fr 1fr 1fr; gap: 15px; }.store-workspace .price-xl { font-size: 30px; }.account-quicklinks { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }.account-quicklink { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; }.account-quicklink > .ui-icon { color: var(--primary); }.account-quicklink b { display: block; font-size: 13px; font-weight: 500; color: var(--text); }.account-quicklink small { font-size: 12px; color: var(--muted); }.account-quicklink > .ui-icon:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--muted); }
/* Private after-sales conversations. */
.support-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-bottom: 25px; }.support-stat { padding: 20px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; }.support-stat strong { display: block; font-size: 26px; font-weight: 500; }.support-stat span { font-size: 12px; color: var(--muted); }.support-ticket-list { display: grid; gap: 10px; }.support-ticket-row { display: flex; gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); }.support-ticket-row:hover { border-color: var(--border-lit); }.support-ticket-number { color: var(--primary); font-family: var(--mono); font-size: 13px; }.support-ticket-content { flex: 1; min-width: 0; }.support-ticket-content strong { display: block; }.support-ticket-content small { color: var(--muted); }.support-ticket-content h3 { margin-bottom: 5px; }.support-ticket-arrow { color: var(--muted); }.support-workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px; align-items: start; }.support-context { position: sticky; top: 100px; }.support-context h3 { margin-top: 12px; line-height: 1.45; }.support-coverage { background: var(--primary-dim); border: 1px solid var(--border-lit); padding: 15px; border-radius: 10px; margin-block: 18px; }.support-coverage strong { font-size: 13px; }.support-coverage p { margin-bottom: 0; margin-top: 6px; }.support-form .field { margin: 18px 0; }.support-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }.support-form input:not([type=file]), .support-form select, .support-form textarea { width: 100%; }.support-upload { border: 1px dashed var(--border-2); border-radius: 10px; padding: 16px; background: var(--bg); }.support-upload input { max-width: 100%; width: 100%; font-size: 12px; }.support-upload input::file-selector-button { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); padding: 8px; border-radius: 6px; cursor: pointer; margin-right: 9px; }.support-upload p { margin: 10px 0 0; }.support-conversation { display: flex; flex-direction: column; gap: 18px; }.support-message { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }.support-message-team { border-color: var(--border-lit); background: color-mix(in srgb,var(--primary) 3%,var(--surface)); }.support-message header { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }.support-message header time { margin-left: auto; color: var(--faint); font-size: 12px; }.support-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--primary); background: var(--primary-dim); font-size: 13px; }.support-message-body { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }.support-evidence-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }.support-evidence { width: 135px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: block; }.support-evidence img { width: 100%; height: 100px; object-fit: cover; }.support-evidence span { display: block; padding: 6px; font-size: 13px; }.support-page .page-head { margin: 20px 0 25px; }.evidence-preview { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }.evidence-preview img { width: 75px; height: 65px; object-fit: cover; border: 1px solid var(--border); border-radius: 7px; }
.notification-list { display: grid; gap: 12px; }.notification-card { display: flex; gap: 17px; }.notification-card.is-unread { border-color: var(--border-lit); background: color-mix(in srgb,var(--primary) 3%,var(--surface)); }.notification-icon { display: grid; place-items: center; background: var(--primary-dim); border-radius: 10px; width: 40px; height: 40px; color: var(--primary); flex: none; }.notification-content { flex: 1; min-width: 0; }.notification-content h3 { margin: 9px 0; }.notification-content p { font-size: 13px; overflow-wrap: anywhere; }.notification-meta { display: flex; justify-content: space-between; align-items: center; }.notification-meta .small { font-size: 12px; }.notification-filters { margin-block: 20px; }
@media (min-width: 1700px) { .workspace-products { grid-template-columns: repeat(4,minmax(0,1fr)); }.spotlight-copy h2 { font-size: 43px; }.spotlight-art { right: 45px; } }
@media (max-height: 830px) and (min-width: 961px) { .sidebar-help { display: none; }.nav-label { margin-top: 17px; } }
@media (max-width: 1300px) { .store-workspace { --sidebar-width: 215px; --gutter: 24px; }.discovery-layout { grid-template-columns: minmax(0,1fr) 220px; gap: 18px; }.workspace-brand { padding-inline: 17px; }.workspace-nav a { font-size: 12px; gap: 9px; }.workspace-nav .nav-new { display: none; }.spotlight-art { right: -55px; transform: translateY(-50%) scale(.86); }.spotlight-copy { padding: 25px; }.rail-card, .rail-support { padding: 17px; }.workspace-topbar { gap: 18px; }.local-badge { display: none; }.topbar-location { display: none; }.workspace-search { margin-left: 0; max-width: 440px; }.workspace-products { grid-template-columns: repeat(2,minmax(0,1fr)); }.catalog-only .workspace-products { grid-template-columns: repeat(3,minmax(0,1fr)); }.product-availability, .product-overline > span:first-child { font-size: 12px; }.product-subline { font-size: 13px; }.product-choose { font-size: 13px; }.product-variant-chips span { font-size: 13px; }.product-price-stack > small { font-size: 12px; } }
@media (max-width: 1100px) { .discovery-layout { grid-template-columns: minmax(0,1fr); }.discovery-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 10px; }.discovery-rail .steps-card, .reminder-nudge { display: none; }.personal-card { padding: 20px; }.personal-card h3 br, .rail-support h3 br { display: none; }.personal-card h3,.rail-support h3 { font-size: 22px; }.rail-heading { margin-bottom: 15px; }.discovery-rail .rail-card:has(.recent-purchase) { grid-column: 1/-1; }.spotlight-art { right: 0; transform: translateY(-50%); }.workspace-products { grid-template-columns: repeat(3,minmax(0,1fr)); }.workspace-product .price { font-size: 18px; }.product-choose { font-size: 12px; }.product-subline { font-size: 12px; }.product-availability, .product-overline > span:first-child { font-size: 12px; }.product-variant-chips span { font-size: 12px; }.support-workspace { grid-template-columns: minmax(0,1fr); }.support-context { position: static; } }
@media (max-width: 960px) { .store-workspace { --sidebar-width: 240px; --gutter: 25px; }.store-sidebar { transform: translateX(-100%); transition: transform .22s ease; }.workspace-main { margin-left: 0; }.sidebar-toggle { display: flex; }.sidebar-close { display: flex; position: absolute; right: 12px; top: 17px; width: 27px; height: 27px; background: var(--surface); }.sidebar-close .ui-icon { width: 14px; height: 14px; }.workspace-brand { padding-right: 43px; }.workspace-brand b { font-size: 15px; }.sidebar-open .store-sidebar { transform: translateX(0); }.sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: #0009; z-index: 35; backdrop-filter: blur(3px); }.sidebar-open { overflow: hidden; }.workspace-products, .catalog-only .workspace-products { grid-template-columns: repeat(3,minmax(0,1fr)); }.workspace-product .product-img { height: 145px; }.spotlight-copy h2 { font-size: 38px; }.spotlight-art { right: 30px; }.discovery-layout { gap: 16px; }.product-choose { font-size: 13px; }.featured-track { grid-auto-columns: calc((100% - 12px)/2); }.workspace-footer { flex-direction: column; }.skip-link { left: 20px; } }
@media (max-width: 600px) { .store-workspace { --gutter: 16px; font-size: 14px; }.workspace-topbar { min-height: 61px; padding: 10px 16px; gap: 10px; }.workspace-topbar > .sidebar-toggle { width: 30px; height: 30px; border: 0; margin-left: -5px; }.mobile-brand { display: block; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -.4px; max-width: 41vw; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.workspace-search { display: none; }.topbar-actions { gap: 4px; }.topbar-actions .btn { min-height: 31px; padding: 6px 10px; font-size: 12px; }.topbar-actions .btn .ui-icon { display: none; }.topbar-balance { display: none; }.topbar-actions .usermenu summary { height: 30px; width: 30px; font-size: 12px; }.notification-button { width: 31px; height: 31px; }.notification-button .ui-icon { width: 18px; height: 18px; }.workspace-page { padding: 22px 16px 26px; }.welcome-heading { margin-bottom: 16px; align-items: start; }.welcome-heading h1 { font-size: 22px; max-width: 24ch; line-height: 1.2; }.welcome-heading .eyebrow { font-size: 12px; letter-spacing: 1.1px; margin-bottom: 8px; }.welcome-heading p { font-size: 12px; }.store-online { display: none; }.mobile-search { display: flex; height: 41px; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; align-items: center; gap: 8px; padding: 0 11px; margin-bottom: 20px; }.mobile-search > .ui-icon { width: 17px; height: 17px; color: var(--faint); }.store-workspace .mobile-search input { background: none; border: none; box-shadow: none; padding: 0; font-size: 12px; height: 100%; min-width: 0; flex: 1; }.mobile-search button { display: flex; border: none; background: none; color: var(--primary); padding: 6px; }.mobile-search button .ui-icon { width: 17px; height: 17px; }.spotlight { min-height: 205px; border-radius: 12px; }.spotlight-copy { padding: 20px; width: 70%; }.spotlight-copy h2 { font-size: 26px; margin: 12px 0 10px; line-height: 1.12; max-width: 13ch; }.spotlight-label { font-size: 12px; letter-spacing: .7px; gap: 3px; }.spotlight-label .ui-icon { width: 9px; height: 9px; }.spotlight-copy p { font-size: 13px; line-height: 1.55; margin-bottom: 15px; max-width: 25ch; }.spotlight-copy .btn { min-height: 33px; font-size: 13px; padding: 7px 10px; gap: 13px; }.spotlight-copy .btn .ui-icon { width: 13px; height: 13px; }.spotlight-note { display: none; }.spotlight-art { right: -123px; top: 52%; transform: translateY(-50%) scale(.57); transform-origin: 50% 50%; }.card-front { left: 76px; }.art-floating-label { display: none; }.assurance-strip { padding: 12px 0; gap: 5px; }.assurance-strip span { font-size: 12px; gap: 4px; }.assurance-strip .ui-icon { width: 12px; height: 12px; }.discovery-section { margin-top: 23px; }.discovery-section-head { margin-bottom: 13px; gap: 5px; }.discovery-section-head h2 { font-size: 14px; gap: 6px; }.discovery-section-head h2 > span { font-size: 12px; letter-spacing: .7px; padding: 3px 4px; }.discovery-section-head h2 > .ui-icon { width: 15px; height: 15px; }.discovery-section-head .text-link { font-size: 12px; gap: 4px; }.discovery-section-head .text-link .ui-icon { width: 11px; height: 11px; }.featured-track { grid-auto-columns: 82%; gap: 10px; margin-right: -16px; padding-right: 16px; }.featured-card { padding: 10px; gap: 10px; min-height: 76px; }.featured-art { height: 51px; width: 51px; }.featured-art b { font-size: 29px; }.featured-info small { font-size: 12px; }.featured-info > b { font-size: 12px; }.featured-info > span { font-size: 12px; }.carousel-controls .icon-button { height: 23px; width: 23px; }.catalog-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }.category-tabs { width: 100%; }.category-tabs a { font-size: 13px; padding: 6px 10px; }.catalog-sort { margin-left: 0; }.catalog-sort select { font-size: 13px; }.workspace-products, .catalog-only .workspace-products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.workspace-product { border-radius: 10px; }.workspace-product .product-img { height: 112px; }.product-monogram { font-size: 59px; }.product-pick { font-size: 12px; top: 7px; left: 7px; }.product-pick .ui-icon { height: 8px; width: 8px; }.product-art-label { font-size: 12px; left: 9px; }.product-art-spark { font-size: 14px; right: 17px; }.workspace-product .product-body { padding: 11px 10px 10px; }.product-overline { margin-bottom: 6px; gap: 4px; }.product-overline > span:first-child { font-size: 12px; letter-spacing: .6px; }.product-availability { font-size: 12px; gap: 3px; }.product-availability i { height: 3px; width: 3px; }.workspace-product h3 { font-size: 12px; margin-bottom: 6px; }.product-variant-chips { gap: 3px; margin-bottom: 9px; min-height: 18px; }.product-variant-chips span { font-size: 12px; padding: 2px 4px; }.product-subline { font-size: 12px; min-height: 18px; margin-bottom: 9px; }.product-subline > span { display: none; }.product-subline .ui-icon { width: 9px; height: 9px; }.workspace-product .product-meta { padding-top: 8px; align-items: center; }.product-price-stack > small { font-size: 12px; }.workspace-product .price { font-size: 15px; }.workspace-product .price small { display: none; }.product-choose { font-size: 12px; gap: 2px; margin: 4px 0 0; }.product-choose .ui-icon { height: 9px; width: 9px; }.product-media-arrow { right: 7px; bottom: 7px; padding: 3px; }.product-media-arrow .ui-icon { width: 10px; height: 10px; }.builder-banner { padding: 15px; gap: 12px; margin-top: 20px; flex-wrap: wrap; }.builder-banner-icon { padding: 10px; }.builder-banner-icon .ui-icon { width: 20px; height: 20px; }.builder-banner b { font-size: 16px; }.builder-banner small { font-size: 12px; }.builder-banner > span:nth-child(2) { font-size: 12px; }.builder-banner > .btn { width: 100%; min-height: 34px; font-size: 12px; }.discovery-rail { display: flex; gap: 12px; margin-top: 4px; }.discovery-rail .personal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 15px; padding: 17px; }.personal-card .rail-heading { grid-column: 1/-1; margin-bottom: 2px; }.personal-card h3 { font-size: 18px; margin-bottom: 0; grid-column: 1/-1; }.personal-card p { font-size: 13px; margin: 0; grid-column: 1/-1; }.personal-card .btn { font-size: 12px; margin-top: 5px; }.personal-card .rail-secondary { padding-top: 5px; }.personal-card .rail-caption { grid-column: 1/-1; }.personal-card .rail-balance { font-size: 24px; margin: 0; grid-column: 1/-1; }.discovery-rail .rail-support { display: block; padding: 17px; }.rail-support > div { margin-bottom: 10px; }.rail-support h3 { font-size: 18px; }.rail-support p { font-size: 12px; margin-bottom: 12px; }.rail-support h3 br { display: none; }.compact-combos { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.compact-combos .combo-card { scroll-snap-align: start; }.compact-combos .combo-card-media { height: 80px; }.workspace-footer { font-size: 12px; padding: 18px 16px 96px; gap: 9px; }.workspace-footer > div { gap: 14px; }.mobile-dock { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; min-height: 64px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); box-shadow: 0 -4px 20px #0002; }.mobile-dock a,.mobile-dock button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--faint); background: none; border: none; font: inherit; font-size: 12px; cursor: pointer; border-radius: 9px; }.mobile-dock .ui-icon { width: 19px; height: 19px; }.mobile-dock .active { color: var(--primary); background: var(--primary-dim); }.sidebar-help { display: none; }.workspace-nav a { min-height: 43px; font-size: 13px; }.sidebar-bottom { padding-bottom: 90px; }.store-workspace .section,.store-workspace .store-section { padding-block: 22px; }.store-workspace .section h1,.store-workspace .store-section h1 { font-size: 24px; }.store-workspace .account-cards { grid-template-columns: 1fr 1fr; }.store-workspace .balance-card { grid-column: 1/-1; }.store-workspace .account-head { align-items: start; }.store-workspace .account-head p { font-size: 12px; }.account-quicklinks { grid-template-columns: 1fr; gap: 10px; }.account-quicklink { padding: 15px; }.support-stats { gap: 8px; }.support-stat { padding: 12px; }.support-stat strong { font-size: 22px; }.support-stat span { font-size: 13px; }.support-ticket-row { padding: 14px; gap: 10px; flex-wrap: wrap; }.support-ticket-content { flex-basis: 70%; }.support-message { padding: 15px; }.support-message header { flex-wrap: wrap; }.support-message header time { font-size: 12px; }.support-evidence { width: 95px; }.support-evidence img { height: 75px; }.notification-card { padding: 14px; gap: 10px; }.notification-icon { width: 31px; height: 31px; border-radius: 8px; }.notification-icon .ui-icon { width: 17px; height: 17px; }.notification-content h3 { font-size: 14px; }.notification-content p { font-size: 12px; }.notification-content .btn { font-size: 13px; }.variant-options { grid-template-columns: 1fr; }.variant-option { min-height: 54px; }.store-workspace .pdetail-img { max-height: 230px; }.volume-benefits summary span { display: block; margin-top: 4px; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media(max-width:700px) { .store-workspace .product-detail { grid-template-columns: 1fr; gap: 16px; }.detail-art { height: 205px; }.detail-art .product-monogram { font-size: 110px; }.detail-trust { padding: 12px 0; font-size: 13px; }.detail-content .variant-options { grid-template-columns: repeat(2,minmax(0,1fr)); }.detail-content .variant-option { flex-wrap: wrap; padding: 12px; gap: 7px; }.detail-content .variant-option-price { width: 100%; padding-left: 21px; font-size: 14px; }.detail-content .variant-option-detail b { font-size: 12px; }.detail-content .variant-option-detail small { font-size: 12px; }.detail-content .price-xl { font-size: 27px; }.purchase-box .qty-row { flex-wrap: wrap; }.detail-specs { gap: 10px; }.detail-specs .v { font-size: 12px; } }
.workspace-nav { scrollbar-color: var(--border-2) transparent; scrollbar-width: thin; }
@media(max-width:600px) { .welcome-heading > div { min-width: 0; }.welcome-heading h1 { max-width: 100%; font-size: 21px; }.spotlight-copy { width: 84%; padding: 18px; }.spotlight-copy h2 { font-size: 24px; max-width: none; margin: 10px 0 9px; }.spotlight-copy p { font-size: 13px; max-width: 26ch; margin-bottom: 12px; }.spotlight-art { right: -151px; transform: translateY(-50%) scale(.45); opacity: .85; }.spotlight { min-height: 188px; }.is-landing .catalog-sort { display: none; }.is-landing .volume-benefits { padding: 8px 10px; }.is-landing .volume-benefits summary span { display: none; }.store-workspace .variant-option { min-height: 50px; } }
.detail-specs { gap: 1px; grid-template-columns: repeat(3,minmax(0,1fr)); }.detail-specs > div { padding: 13px; }.detail-specs .k { font-size: 12px; }
@media(max-width:960px) { .store-sidebar { visibility: hidden; }.sidebar-open .store-sidebar { visibility: visible; } }
@media(max-width:600px) { .detail-specs { gap: 1px; }.detail-specs > div { padding: 10px; }.detail-specs .k { font-size: 12px; } }

/* =====================================================================
   Capa base — claridad por encima de efecto

   Tres reglas que se siguen en todo el archivo:

   1. Superficies solidas. Nada de vidrio detras del texto: el desenfoque
      baja la legibilidad justo donde el cliente lee precios.
   2. Un solo acento. El verde significa "esto se puede tocar" o "esto va
      bien". Si se usa de adorno deja de querer decir nada.
   3. Movimiento corto. 120ms de color o de borde. Nada se levanta ni late.
   ===================================================================== */

.store-workspace {
    --topbar-h: 60px;
    --line: color-mix(in srgb, var(--text) 12%, transparent);
    --line-soft: color-mix(in srgb, var(--text) 7%, transparent);
    --raise: color-mix(in srgb, var(--text) 4%, var(--surface));
    --tap: 44px;
    --quick: .12s ease;
    --gutter: clamp(16px, 2.4vw, 30px);
    font-size: 14px;
    line-height: 1.55;
}

body.store-workspace { background-image: none; background: var(--bg); }
.store-workspace::before, .store-workspace::after { display: none; }

/* Foco visible siempre: se navega con teclado mas de lo que parece */
.store-workspace :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ------------------------------------------------------------ Jerarquia */

.store-workspace h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.store-workspace h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; }
.store-workspace h3 { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.store-workspace .kicker,
.store-workspace .nav-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ------------------------------------------------------------ Barra lateral */

/* Anclada y solida. Es un punto de referencia fijo, no un elemento mas. */
.store-sidebar {
    inset: 0 auto 0 0;
    height: 100dvh;
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.workspace-brand { height: auto; padding: 18px 16px; border-bottom: 1px solid var(--line-soft); }
.workspace-brand > img, .workspace-mark {
    height: 34px; width: 34px;
    border-radius: 9px;
    box-shadow: none;
}
.workspace-mark { background: var(--primary); color: var(--on-primary); }
.workspace-brand b { font-size: .98rem; font-weight: 650; }

.workspace-switch {
    margin: 12px 12px 4px;
    padding: 10px 11px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--raise);
    box-shadow: none;
}
.workspace-switch::before { display: none; }

.workspace-nav { padding: 8px 10px 16px; }

.workspace-nav a {
    position: relative;
    min-height: var(--tap);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--text-2);
    transition: background var(--quick), color var(--quick);
}
.workspace-nav a:hover { background: var(--raise); color: var(--text); transform: none; }

/* Activo: barra a la izquierda y fondo tenue. Se distingue de un hover. */
.workspace-nav a.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 600;
    box-shadow: none;
}
.workspace-nav a.active::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.sidebar-help {
    background: var(--raise);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    box-shadow: none;
}

/* ------------------------------------------------------------ Contenido */

.workspace-main { margin-left: var(--sidebar-width); }

.workspace-topbar {
    top: 0;
    margin: 0;
    min-height: 60px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    backdrop-filter: none;
    box-shadow: none;
}

/* ------------------------------------------------------------ Superficies */

.store-workspace .card,
.store-workspace .product,
.store-workspace .combo-card,
.store-workspace .pick-row,
.store-workspace .order-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: none;
    transition: border-color var(--quick), background var(--quick);
}

/* Al pasar por encima solo se enciende el filo: basta para decir
   "esto se puede tocar" sin mover la pagina. */
.store-workspace .product:hover,
.store-workspace .combo-card:hover,
.store-workspace .pick-row:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    box-shadow: none;
}

/* ------------------------------------------------------------ Precio y estado */

/* Lo que el cliente busca con la mirada: que se vea antes que nada. */
.store-workspace .price {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}
.store-workspace .price small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--faint);
    text-decoration: line-through;
    margin-left: 6px;
}
.store-workspace .price-xl { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem); }

.store-workspace .badge {
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 8px;
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------------------ Botones */

.store-workspace .btn {
    min-height: var(--tap);
    padding: 11px 18px;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 600;
    transition: background var(--quick), border-color var(--quick), color var(--quick);
}
.store-workspace .btn:hover { transform: none; }

/* Solido, no degradado: el degradado en un boton grande cansa y envejece */
.store-workspace .btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    box-shadow: none;
}
.store-workspace .btn-primary:hover {
    background: color-mix(in srgb, var(--primary) 86%, #fff);
    border-color: color-mix(in srgb, var(--primary) 86%, #fff);
    filter: none;
    box-shadow: none;
}
.store-workspace .btn-primary:disabled,
.store-workspace .btn-primary[disabled] {
    background: var(--raise);
    border-color: var(--line);
    color: var(--faint);
    cursor: not-allowed;
}

.store-workspace .btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-2);
}
.store-workspace .btn-ghost:hover { background: var(--raise); color: var(--text); }

.store-workspace .btn-lg { min-height: 50px; font-size: .98rem; }

/* ------------------------------------------------------------ Formularios */

.store-workspace label,
.store-workspace .field > label {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-2);
}

/*
 * Las exclusiones van dentro de :where(), no encadenadas.
 *
 * Tres :not() seguidos suman 30 puntos de especificidad y dejaban esta
 * regla -una regla BASE, la que menos deberia pesar- en 41. Cualquier
 * componente que envolviera un campo en su propia caja perdia: el input
 * conservaba fondo, borde y padding propios y se veia una caja dentro de
 * otra. Se notaba en el buscador de la cabecera y en el campo del monto
 * de /recargar.
 *
 * :where() selecciona exactamente lo mismo y aporta CERO: la regla baja a
 * 11 y un componente vuelve a poder decir lo suyo sin !important.
 *
 * Es el mismo arreglo que se le hizo a ui.css en la 3.21.0; esta hoja
 * hermana se habia quedado atras.
 */
.store-workspace input:where(:not([type="checkbox"], [type="radio"], [type="file"])),
.store-workspace select,
.store-workspace textarea {
    min-height: var(--tap);
    padding: 11px 13px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: .93rem;
    box-shadow: none;
    transition: border-color var(--quick), box-shadow var(--quick);
}
.store-workspace input:focus,
.store-workspace select:focus,
.store-workspace textarea:focus {
    border-color: var(--primary);
    background: var(--bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    outline: none;
}
.store-workspace ::placeholder { color: var(--faint); opacity: 1; }

.store-workspace .hint {
    margin-top: 6px;
    font-size: .8rem;
    color: var(--muted);
}

.icon-button {
    width: 38px; height: 38px;
    border-radius: 9px;
    border: 1px solid var(--line);
    transition: background var(--quick), color var(--quick);
}
.icon-button:hover { background: var(--raise); color: var(--text); }

/* ------------------------------------------------------------ Tablas */

.store-workspace table.table th {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--faint);
}
.store-workspace table.table td { padding-block: 13px; font-size: .9rem; }
.store-workspace table.table tbody tr:hover { background: var(--raise); }

/* ------------------------------------------------------------ Movil */

@media (max-width: 960px) {
    .workspace-main { margin-left: 0; }

    .store-sidebar {
        width: min(86%, 320px);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: none;
    }
    .sidebar-open .store-sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); }
}

/* =====================================================================
   Entrar y crear cuenta

   Dos columnas en pantalla ancha: a la izquierda lo que prometemos, a la
   derecha el formulario. Antes era una tarjeta sola en medio de mucho
   negro; esa mitad vacia ahora trabaja. En movil cae la columna de marca
   y queda solo el formulario, que es a lo que se viene.
   ===================================================================== */

.store-workspace.is-access {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: clamp(16px, 4vw, 40px);
}

/* Una pantalla que diseno el tema: el nucleo no le impone encuadre ni
   margenes. El ancho, el fondo y el ritmo de la pagina son suyos; lo unico
   que sigue poniendo NetwilOne es la cabecera del documento. */
.store-workspace.is-theme {
    display: block;
    min-height: 100dvh;
    padding: 0;
}

.store-workspace.is-access:has(.access-split) {
    padding: 0;
    place-items: stretch;
}

.access-split {
    display: grid;
    min-height: 100dvh;
    width: 100%;
}

/* En una sola columna el formulario se centra y se separa del borde: el
   relleno del layout se anula arriba para que la mitad de marca pueda
   llegar a pegarse a los lados de la pantalla. */
.access-split > .access-screen {
    margin: auto;
    max-width: 512px;
    padding: clamp(16px, 5vw, 40px);
}

/* La mitad de marca. Se apoya en el color del tema, asi que cada tienda
   la ve con su propio acento sin configurar nada. */
.access-pitch { display: none; }

.access-pitch-body { margin: auto 0; }

.access-pitch h2 {
    margin: 0 0 22px;
    font-size: clamp(1.5rem, 1.9vw, 2rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    max-width: 19ch;
}

.access-pitch-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.access-pitch-points li {
    position: relative;
    padding-left: 30px;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.45;
}
.access-pitch-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12em;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .16);
    border: 1px solid rgba(var(--primary-rgb), .4);
}
.access-pitch-points li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: .42em;
    width: 4px;
    height: 8px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.access-pitch-foot {
    margin: 0;
    font-size: .85rem;
    color: var(--faint);
    max-width: 34ch;
}

.access-screen { width: 100%; max-width: 448px; }

.access-card {
    padding: clamp(24px, 4vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.access-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: var(--text);
    font-weight: 650;
    font-size: 1rem;
}
.access-brand img, .access-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    object-fit: contain;
}
.access-mark {
    display: grid;
    place-items: center;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}

.access-card h1 { margin-bottom: 6px; }
.access-sub { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }

.access-form .field { margin-bottom: 16px; }
.access-form .btn { margin-top: 6px; }

.opcional {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--faint);
    margin-left: 4px;
}

.access-alt {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-size: .88rem;
    color: var(--muted);
}
.access-alt a { color: var(--primary); font-weight: 600; }

.access-help { text-align: center; font-size: .82rem; color: var(--faint); margin: 12px 0 0; }

.access-back { text-align: center; margin: 18px 0 0; font-size: .85rem; }
.access-back a { color: var(--muted); }
.access-back a:hover { color: var(--primary); }

.access-flashes { width: 100%; max-width: 448px; margin: 0 auto 14px; }

/* Con dos columnas el aviso no puede empujar nada: flota arriba. */
.store-workspace.is-access:has(.access-split) .access-flashes {
    position: fixed;
    inset: 14px 14px auto;
    z-index: 30;
    margin: 0 auto;
}

.dev-banner {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    background: #FFB74D;
    color: #1A1200;
    padding: 7px 16px;
    text-align: center;
    font-weight: 600;
    font-size: .82rem;
}

/* El selector de orden se queda corto al crecer el relleno del campo */
.catalog-sort select { min-width: 172px; padding-right: 30px; }

/* =====================================================================
   Tarjeta de producto — que la imagen luzca

   El catalogo mezcla logos cuadrados, caratulas altas y capturas anchas.
   Recortarlas todas a un mismo alto arruinaba la mitad, asi que la imagen
   va entera y el marco lo rellena ella misma, desenfocada por detras.
   ===================================================================== */

.workspace-product .product-img {
    height: auto;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--item-accent) 7%, var(--surface-2));
    isolation: isolate;
}

/* Capa de atras: la propia imagen, ampliada y desenfocada. Da un fondo
   con los colores del producto sin inventar ninguno. */
.workspace-product .product-img > img.product-shot-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(24px) saturate(150%);
    transform: scale(1.25);
    opacity: .5;
    z-index: 0;
}

/* Capa de delante: entera, nunca recortada */
.workspace-product .product-img > img.product-shot {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 16px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.workspace-product:hover .product-shot { transform: scale(1.06); }

/* Velo inferior: mantiene legibles las etiquetas sobre imagenes claras */
.product-img-scrim {
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    z-index: 2;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 75%, transparent));
    pointer-events: none;
}

.workspace-product .product-discount,
.workspace-product .product-pick,
.workspace-product .product-media-arrow { z-index: 3; }

/* Agotado: se dice con todas las letras, no solo bajando la opacidad */
.product-soldout {
    position: absolute;
    z-index: 3;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}
.workspace-product.is-out { opacity: 1; }
.workspace-product.is-out .product-shot,
.workspace-product.is-out .product-artwork { filter: grayscale(1); opacity: .55; }
.workspace-product.is-out .product-shot-bg { opacity: .22; filter: blur(24px) grayscale(1); }

/* El monograma de los productos sin imagen tambien gana aire */
.workspace-product .product-artwork { z-index: 1; }
.product-monogram { font-size: 82px; }

@media (max-width: 960px) {
    .workspace-product .product-img { aspect-ratio: 5 / 4; height: auto; }
    .product-shot { padding: 12px; }
    .product-monogram { font-size: 64px; }
}

/* =====================================================================
   Repaso de detalles
   ===================================================================== */

/* ---- Cifras de soporte

   La clase estaba puesta sobre el numero en vez de sobre la tarjeta, asi
   que el numero se llevaba el relleno y el borde de un recuadro entero y
   quedaba enorme entre dos textos. Ahora es una tarjeta normal: etiqueta
   arriba, numero grande, y la explicacion debajo. */

.support-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.support-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
}
.support-stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
}
.support-stat > strong {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
/* En cero no hay nada que mirar: se apaga para que destaque lo que si hay */
.support-stat:has(> strong:only-of-type) { min-height: 0; }
.support-stat-hint {
    font-size: 0.8rem;
    color: var(--faint);
    line-height: 1.45;
}
/* El buscador de "Tus reportes": el mismo grupo que el selector de compras. */
.support-search { margin-bottom: 14px; }
.support-search .small { margin: 8px 0 0; }

/* ---- Tarjetas de producto: mas bajas en pantalla grande

   Con 4:3 y cuatro columnas ocupaban demasiado alto en escritorio y
   obligaban a bajar para ver la segunda fila. */
@media (min-width: 961px) {
    .workspace-product .product-img { aspect-ratio: 16 / 10; }
    .workspace-product .product-body { padding: 13px 13px 12px; }
    .workspace-product h3 { font-size: .95rem; margin-bottom: 7px; }
    .workspace-product .price { font-size: 1.18rem; }
}

@media (min-width: 1500px) {
    .workspace-products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
}

/* ---- Textos de apoyo, ya legibles */
.product-overline > span:first-child,
.product-availability { font-size: 0.8rem; letter-spacing: .04em; }
.product-price-stack > small { font-size: 0.8rem; letter-spacing: .08em; }
.product-choose { font-size: 0.8rem; }
.product-subline { font-size: 0.8rem; }
.product-variant-chips span { font-size: 0.8rem; padding: 3px 7px; }
.workspace-footer { font-size: 0.8rem; }
.sidebar-credit { font-size: 0.8rem; }
.sidebar-credit a { font-size: 0.8rem; }
.assurance-strip span { font-size: 0.8rem; }
.featured-info small { font-size: 0.8rem; letter-spacing: .05em; }
.spotlight-label { font-size: 0.8rem; letter-spacing: .1em; }
.discovery-section-head h2 > span { font-size: 0.8rem; }
.product-art-label { font-size: 0.8rem; }
.mobile-dock a, .mobile-dock button { font-size: 0.8rem; }

/* El velo tapaba la parte baja de las imagenes que van contenidas (una
   caratula alta pierde ahi su titulo). La flecha ya trae su propio fondo,
   asi que basta con una insinuacion para separar imagen y texto. */
.product-img-scrim {
    height: 26%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 42%, transparent));
}

/* Notificaciones: menos alto por aviso, para ver mas de una sin bajar */
.notification-card { padding: 15px 17px; gap: 13px; }
.notification-card .btn { min-height: 34px; padding: 7px 12px; font-size: .8rem; }
.notification-content h3 { margin-bottom: 3px; }
.notification-content p { margin-bottom: 10px; }

/* =====================================================================
   Ficha de producto

   Direccion "Panel de compra": a la izquierda solo contenido, sin marcos
   que compitan; a la derecha UNA tarjeta con todo lo que se decide y se
   paga. Menos superficies, menos etiquetas sueltas.

   El nivel de precio dejo de ser un chip verde flotando junto al precio:
   ahora es la linea que lo encabeza, que es donde significa algo.
   ===================================================================== */

/* Migas con separador propio. Antes iban pegadas a una barra suelta y
   parecian una ruta de archivos rota. */
.store-workspace .crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.store-workspace .crumbs > * { color: var(--muted); font-weight: 500; }
.store-workspace .crumbs > b { color: var(--text); font-weight: 600; }
.store-workspace .crumbs > * + *::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-right: 10px;
    vertical-align: middle;
    border-top: 1.5px solid var(--faint);
    border-right: 1.5px solid var(--faint);
    transform: rotate(45deg);
}

.store-workspace .product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin-inline: auto;
}

.detail-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* ------------------------------------------------ La pieza ---------- */

/* Sin borde: la imagen es el contenido, no una ficha dentro de un marco. */
.store-workspace .detail-art {
    position: relative;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--item-accent, var(--primary)) 7%, var(--surface));
}
.detail-art > img.product-shot-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(38px) saturate(160%);
    transform: scale(1.35);
    opacity: .5;
    z-index: 0;
}
/* Absoluta y con medidas explicitas, las dos cosas a proposito.
   Un porcentaje de alto no resuelve contra un contenedor cuya altura sale
   de aspect-ratio: se vuelve automatico, la imagen crece a su tamano
   natural y una caratula vertical acaba cortada por el overflow. Y fijar
   las cuatro esquinas tampoco basta, porque en una imagen el alto
   automatico vuelve al tamano natural igualmente. Posicionada, los
   porcentajes si resuelven contra la caja del contenedor, y contain
   acomoda dentro tanto una caratula alta como una apaisada. */
.detail-art > img.product-shot {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 1;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    object-fit: contain;
    filter: drop-shadow(0 22px 50px rgba(0, 0, 0, .6));
}

/* ------------------------------------------------ Titular ----------- */

.detail-lede { display: flex; flex-direction: column; gap: 12px; }

.detail-kicker {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}
.store-workspace .detail-lede h1 {
    margin: 0;
    font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -.035em;
}
.store-workspace .detail-lede p {
    margin: 0;
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-2);
}

/* ------------------------------------------------ Ficha tecnica ----- */

/* Definiciones, no tres cajas. Una linea arriba las separa y ya. */
.store-workspace .detail-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding-top: 24px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    overflow: visible;
}
.store-workspace .detail-specs > div { padding: 0; background: none; }
.store-workspace .detail-specs .k {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.store-workspace .detail-specs .v {
    display: block;
    margin-top: 7px;
    font-size: 1.05rem;
    font-weight: 600;
}

.detail-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
}
.detail-note .ui-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--primary); }
.detail-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.detail-note a:hover { color: var(--primary); }

/* ------------------------------------------------ La tarjeta -------- */

.buy-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.buy-price { display: flex; flex-direction: column; gap: 5px; }
.buy-tier { font-size: .88rem; color: var(--muted); }
.buy-tier b { font-weight: 600; color: var(--text-2); }
.store-workspace .buy-price .price-xl {
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}
.buy-price del { font-size: .95rem; }

.store-workspace .plan-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.store-workspace .plan-fieldset legend {
    padding: 0;
    margin-bottom: 11px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
}
.store-workspace .buy-card .variant-options {
    margin: 0;
    /* Una columna dentro de la tarjeta: con 430px de ancho, tres planes en
       rejilla dejan una fila rota y cada uno se queda sin sitio para leerse. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.store-workspace .buy-card .variant-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    min-height: 0;
}
.store-workspace .buy-card .variant-option-detail { flex: 1; min-width: 0; }
.store-workspace .buy-card .variant-option-detail b { font-size: .95rem; }
.store-workspace .buy-card .variant-option-detail small { font-size: .8rem; margin-top: 2px; }
/* El precio a la derecha, en la misma linea: apilado, cada plan ocupaba
   118px y la tarjeta crecia mas que toda la columna de al lado. */
.store-workspace .buy-card .variant-option-price {
    flex: none;
    font-size: 1rem;
    font-weight: 600;
}

.store-workspace .buy-card .qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    flex-wrap: wrap;
}
.store-workspace .buy-card .qty-label { font-size: .92rem; color: var(--text-2); }
.store-workspace .buy-card .qty-row .small { margin-left: auto; }

.store-workspace .buy-card .purchase-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.store-workspace .buy-card .purchase-summary > span { font-size: .95rem; color: var(--text-2); }
.store-workspace .buy-card .purchase-summary small { display: block; margin-top: 4px; color: var(--faint); }
.store-workspace .buy-card .purchase-summary strong {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

/* El boton y su nota cierran la tarjeta sin separacion extra. */
.store-workspace .buy-card .btn-block { margin-top: -4px; }
.store-workspace .buy-card .btn-primary { min-height: 52px; font-size: .95rem; }

@media (min-width: 961px) {
    .store-workspace .product-detail {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
        gap: 48px;
        align-items: start;
    }
    /* Lo que se queda quieto es la pieza: la imagen y de que va. Lo que
       baja es la tarjeta, que es donde se elige y se paga, y ademas es la
       columna larga. Mas peso que la regla de store.css, que deja esto
       estatico. */
    .store-workspace .detail-main {
        position: sticky;
        top: calc(var(--topbar-h) + 18px);
        align-self: start;
    }

    /* La imagen se ajusta a lo que quede de pantalla para que la columna
       entera quepa: una columna pegajosa mas alta que la ventana esconde
       su propio final y no hay forma de verlo. */
    .store-workspace .detail-art { max-height: clamp(200px, 40dvh, 420px); }
}

@media (max-width: 960px) {
    .store-workspace .product-detail { gap: 26px; }
    .store-workspace .detail-art { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
    .store-workspace .detail-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; }
    .store-workspace .detail-specs .v { font-size: .95rem; }
    .buy-card { padding: 18px; gap: 18px; }
}

/* =====================================================================
   Paginacion

   Aparece en cuanto una lista pasa de una pagina. Sin esto el historial
   de un cliente de un ano era un scroll sin fondo.
   ===================================================================== */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.pager-count { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.pager-links { display: flex; align-items: center; gap: 4px; }

.pager-links a,
.pager-links .is-now,
.pager-links .is-off,
.pager-links .pager-gap {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 8px;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.pager-links a {
    color: var(--text-2);
    border: 1px solid var(--line);
    transition: border-color var(--quick), color var(--quick), background var(--quick);
}
.pager-links a:hover { color: var(--text); background: var(--raise); border-color: var(--line-soft); }

.pager-links .is-now {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}
.pager-links .is-off { color: var(--faint); border: 1px solid var(--line-soft); }
.pager-links .pager-gap { color: var(--faint); min-width: 22px; padding: 0; }

@media (max-width: 600px) {
    .pager { justify-content: center; }
    .pager-count { width: 100%; text-align: center; }
}

/* =====================================================================
   Programa de distribuidor (lado del cliente)
   ===================================================================== */

.reseller-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
}

.reseller-state { border-left: 3px solid var(--line); }
.reseller-state.is-ok   { border-left-color: var(--primary); }
.reseller-state.is-wait { border-left-color: #FFC24D; }
.reseller-state.is-no   { border-left-color: #FF8A8A; }
.reseller-state h2, .reseller-state h3 { margin-bottom: 6px; }

.reseller-quote {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--raise);
    border: 1px solid var(--line-soft);
    font-size: .88rem;
    color: var(--text-2);
}

.reseller-points {
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.reseller-points li {
    position: relative;
    padding-left: 24px;
    font-size: .86rem;
    color: var(--text-2);
}
.reseller-points li::before {
    content: '';
    position: absolute;
    left: 0; top: .4em;
    width: 12px; height: 6px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .reseller-layout { grid-template-columns: 1fr; }
}

/* Dos columnas en el registro cuando hay sitio. El correo cruza entero:
   es el dato del que depende todo lo demas. */
@media (min-width: 620px) {
    .access-split > .access-screen-wide { max-width: 600px; }
    .access-form .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
        align-items: start;
    }
    .access-form .field-grid > .field-wide { grid-column: 1 / -1; }
}

/* A partir de aqui cabe la columna de marca al lado del formulario. */
@media (min-width: 1000px) {
    .access-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

    .access-pitch {
        display: flex;
        flex-direction: column;
        padding: clamp(36px, 4.4vw, 64px);
        border-right: 1px solid var(--line);
        background:
            radial-gradient(120% 90% at 12% 8%, rgba(var(--primary-rgb), .16), transparent 62%),
            linear-gradient(160deg, rgba(var(--surface-rgb), .9), transparent 70%);
    }

    .access-pitch .access-brand { margin-bottom: 0; }

    .access-split > .access-screen {
        max-width: 520px;
        padding: clamp(24px, 4vw, 48px);
    }
    .access-split > .access-screen-wide { max-width: 616px; }

    /* Con la marca al lado, repetirla dentro de la tarjeta sobra. */
    .access-brand-sm { display: none; }

    .access-card {
        border: 0;
        background: none;
        padding: 0;
    }
}

/* =====================================================================
   Portada de bienvenida (visitante sin cuenta)

   Es la primera impresion, asi que la portada ocupa la pantalla entera:
   la foto de portada de la tienda detras, un degradado que la funde con
   el fondo, y encima el titulo. Debajo ya se puede leer con calma.

   Todo se apoya en los tokens del tema, asi que cada tienda la ve con su
   color, su tipografia y sus redondeos sin tocar nada aqui.
   ===================================================================== */

/* La portada manda en el layout de acceso: sin relleno y a lo ancho. */
.store-workspace.is-access:has(.welcome) {
    place-items: start stretch;
    padding: 0;
}

.welcome { width: 100%; }

.welcome-section {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(44px, 6vw, 84px) clamp(16px, 4vw, 36px) 0;
}

/* ------------------------------------------------ Barra de arriba ---- */

.welcome-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px clamp(16px, 4vw, 36px);
    background: rgba(var(--bg-rgb), .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}

.welcome-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    min-width: 0;
}
.welcome-nav-brand b {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.welcome-nav-brand img, .welcome-mark {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 10px;
    object-fit: contain;
}
.welcome-mark {
    display: grid;
    place-items: center;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}

.welcome-nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.welcome-nav-link {
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    color: var(--muted);
    font-size: .9rem;
    font-weight: 550;
}
.welcome-nav-link:hover { color: var(--text); }

/* ------------------------------------------------ Presentacion ------- */

.welcome-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(60px, 11vh, 120px) clamp(16px, 4vw, 36px) 0;
    text-align: center;
    overflow: hidden;
}

/* La foto y, si no hay, dos manchas de color del propio tema. El degradado
   de abajo la funde con el fondo para que no haya un corte seco. */
.welcome-hero-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center 22%;
    background-size: cover;
    background-repeat: no-repeat;
    /* Sin foto de portada el hero no se queda en negro: tres manchas del
       propio tema y una malla finisima le dan profundidad. */
    background-image:
        radial-gradient(70% 58% at 14% -10%, rgba(var(--primary-rgb), .5), transparent 62%),
        radial-gradient(58% 52% at 90% 0%, rgba(var(--secondary-rgb), .38), transparent 62%),
        radial-gradient(120% 75% at 50% 106%, rgba(var(--primary-rgb), .16), transparent 62%),
        linear-gradient(rgba(var(--text-rgb), .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--text-rgb), .06) 1px, transparent 1px);
    background-size: cover, cover, cover, 58px 58px, 58px 58px;
}
/* Sin foto solo hace falta fundir el final con el fondo. Oscurecerlo todo
   apagaria las luces que son, precisamente, lo unico que hay. */
.welcome-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
}

/* Con foto si: el texto tiene que leerse encima de lo que sea que suban.
   Son portadas de juegos y peliculas, llenas de letras y de fuego, asi que
   ademas del velo general hay un foco oscuro justo detras del titulo. */
.welcome-hero-art.has-photo::after {
    background:
        radial-gradient(58% 52% at 50% 32%, rgba(var(--bg-rgb), .86), transparent 72%),
        linear-gradient(
            to bottom,
            rgba(var(--bg-rgb), .68) 0%,
            rgba(var(--bg-rgb), .8) 45%,
            var(--bg) 100%
        );
}

/* Y una sombra bajo el texto, que ninguna foto es del todo predecible. */
.welcome-hero:has(.has-photo) .welcome-hero-inner h1,
.welcome-hero:has(.has-photo) .welcome-sub {
    text-shadow: 0 2px 20px rgba(0, 0, 0, .65), 0 1px 4px rgba(0, 0, 0, .5);
}

.welcome-hero-inner { position: relative; max-width: 900px; margin-inline: auto; }


.welcome-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    padding: 5px 14px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid rgba(var(--primary-rgb), .34);
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.welcome-hero h1 {
    font-family: var(--font-display, inherit);
    font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.2rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
    margin: 0 0 20px;
}
.welcome-hero h1 > span { display: block; }

.welcome-grad {
    background: var(--accent-grad, linear-gradient(120deg, var(--primary), var(--secondary)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Un respiro a la derecha: las colas de las letras se cortaban. */
    padding-right: .08em;
    /* El relleno es transparente, asi que text-shadow no pinta nada aqui.
       drop-shadow si, porque trabaja sobre lo que se ve. */
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55)) drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

.welcome-sub {
    max-width: 56ch;
    margin: 0 auto;
    font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
    line-height: 1.55;
    color: var(--text-2);
}

.welcome-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.welcome-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 32px 0 0;
    padding: 0;
}
.welcome-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--border);
    background: rgba(var(--surface-rgb), .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .88rem;
    color: var(--text-2);
}
.welcome-chips li::before {
    content: "";
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2);
}

.welcome-stats {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(18px, 4vw, 46px);
    width: 100%;
    max-width: 780px;
    margin: clamp(46px, 7vw, 78px) auto 0;
    padding: clamp(20px, 3vw, 28px) clamp(18px, 4vw, 40px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px);
    background: rgba(var(--surface-rgb), .62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.welcome-stats > div { display: flex; flex-direction: column; align-items: center; }
.welcome-stats b {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.welcome-stats span {
    margin-top: 4px;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ------------------------------------------------ Secciones ---------- */

.welcome-label {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.welcome-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.welcome-section-head h2 {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: 750;
    letter-spacing: -.03em;
}

.welcome-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.welcome-cats span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    font-size: .82rem;
    color: var(--muted);
}
.welcome-cats i {
    font-style: normal;
    font-size: .74rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
    gap: 14px;
}

.welcome-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    background: var(--surface);
    color: var(--text);
    transition: transform var(--med, .26s) var(--ease, ease),
                border-color var(--med, .26s) var(--ease, ease),
                box-shadow var(--med, .26s) var(--ease, ease);
}
.welcome-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-rgb), .5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.welcome-card-img {
    position: relative;
    display: grid;
    place-items: center;
    height: 152px;
    overflow: hidden;
    background: var(--bg);
}
.welcome-card-img > b { font-size: 2.4rem; font-weight: 700; color: var(--faint); }

/* La misma imagen dos veces: borrosa de fondo para llenar, entera delante. */
.welcome-card-img > img.product-shot-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(22px) saturate(1.25);
    transform: scale(1.2);
    opacity: .5;
}
.welcome-card-img > img.product-shot {
    position: relative;
    max-width: 84%;
    max-height: 82%;
    object-fit: contain;
    transition: transform var(--med, .26s) var(--ease, ease);
}
.welcome-card:hover .product-shot { transform: scale(1.05); }

.welcome-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 15px 15px; }
.welcome-card-body small {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.welcome-card-body strong { font-size: .97rem; font-weight: 600; }

.welcome-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.welcome-card-foot .price { font-size: 1.12rem; font-weight: 700; }
.welcome-ready {
    font-style: normal;
    font-size: .74rem;
    color: var(--primary);
    white-space: nowrap;
}

.welcome-note { margin-top: 18px; text-align: center; font-size: .88rem; color: var(--muted); }

/* ------------------------------------------------ Como funciona ------ */

.welcome-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}
.welcome-steps li {
    position: relative;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px);
    background:
        linear-gradient(165deg, rgba(var(--primary-rgb), .07), transparent 55%),
        var(--surface);
}
.welcome-steps b {
    display: block;
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(var(--primary-rgb), .55);
    font-variant-numeric: tabular-nums;
}
.welcome-steps strong { display: block; margin-bottom: 7px; font-size: 1.05rem; font-weight: 650; }
.welcome-steps span { color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* ------------------------------------------------ Cierre ------------- */

.welcome-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(38px, 6vw, 64px) clamp(20px, 4vw, 40px);
    border: 1px solid rgba(var(--primary-rgb), .28);
    border-radius: var(--radius-lg, 18px);
    background:
        radial-gradient(80% 130% at 50% 0%, rgba(var(--primary-rgb), .18), transparent 65%),
        var(--surface);
}
.welcome-cta h2 {
    margin: 0 0 10px;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: 750;
    letter-spacing: -.03em;
}
.welcome-cta p { color: var(--muted); margin: 0 auto; max-width: 48ch; }

.welcome-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1180px;
    margin: clamp(40px, 6vw, 70px) auto 0;
    padding: 22px clamp(16px, 4vw, 36px) 34px;
    border-top: 1px solid var(--border);
    font-size: .84rem;
    color: var(--faint);
}
.welcome-foot a { color: var(--muted); }
.welcome-foot a:hover { color: var(--primary); }

@media (max-width: 600px) {
    .welcome-nav-link { display: none; }
    .welcome-hero { padding-top: 44px; }
    .welcome-actions .btn { width: 100%; }
    .welcome-stats { gap: 14px 26px; }
    .welcome-section-head { margin-bottom: 18px; }
}

/* Quien pide menos movimiento no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    .welcome-card, .welcome-card-img > img.product-shot { transition: none; }
    .welcome-card:hover { transform: none; }
    .welcome-card:hover .product-shot { transform: none; }
}

/* =====================================================================
   Inicio del cliente

   El problema era el hueco: la columna de la derecha medía 600px y el
   catálogo seguía 1500px más abajo, así que media pantalla quedaba en
   negro. Ahora la columna acompaña mientras se recorre el catálogo.
   ===================================================================== */

@media (min-width: 1101px) {
    .discovery-layout { align-items: start; }

    .discovery-rail {
        position: sticky;
        top: calc(var(--topbar-h) + 18px);
        align-self: start;
        /* Si la columna no cabe en la pantalla se desplaza por dentro, sin
           barra a la vista: lo de abajo sigue siendo alcanzable. */
        max-height: calc(100dvh - var(--topbar-h) - 34px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .discovery-rail::-webkit-scrollbar { width: 0; }
}

/* Titulo de seccion con mas presencia. Antes competia de tu a tu con el
   texto de al lado y la pagina se leia como una lista sin jerarquia. */
.discovery-section-head h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.03em;
}
.discovery-section-head h2 > span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 4px 7px;
    border-radius: 5px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.discovery-section-head .result-count {
    color: var(--muted);
    background: var(--raise, var(--surface-2));
}

/* La tira de garantias hacia una linea suelta entre dos bloques. Con caja
   propia deja de parecer texto huerfano. */
.assurance-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px 18px;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.assurance-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    color: var(--muted);
}
.assurance-strip b { font-weight: 550; color: var(--text-2); }
.assurance-strip .ui-icon { width: 15px; height: 15px; color: var(--primary); }

/* Destacados: la tarjeta se levanta como las del catalogo. */
.featured-card {
    transition: transform var(--med, .26s) var(--ease, ease),
                border-color var(--med, .26s) var(--ease, ease);
}
.featured-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .featured-card { transition: none; }
    .featured-card:hover { transform: none; }
}

/* En el inicio se muestran ocho productos: con cuatro por fila salen dos
   filas exactas, en vez de una fila de cinco y otra rota de tres. */
@media (min-width: 1500px) {
    .is-landing .workspace-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* El precio tachado se pegaba al enlace de la derecha. Baja a su propia
   linea y deja respirar a los dos. */
.product-price-stack { min-width: 0; }
.workspace-product .price small {
    display: block;
    margin-top: 1px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--faint);
    text-decoration: line-through;
}
.workspace-product .product-meta { align-items: flex-end; gap: 10px; }
.product-choose { white-space: nowrap; }

/* El catalogo no lleva columna al lado, asi que a partir de 1500px cabe
   otra tarjeta mas por fila. Cuatro tarjetas a 330px se veian enormes. */
@media (min-width: 1500px) {
    .catalog-only .workspace-products {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
    }
}

/* =====================================================================
   Armador de combos: elegir la opcion dentro de la fila

   El mismo servicio puede entrar varias veces con duraciones distintas,
   asi que el desplegable elige a que opcion apunta el contador y debajo
   quedan a la vista las que ya llevas de ese producto.
   ===================================================================== */

.pick-variant { display: flex; flex: none; }
.pick-variant select {
    min-height: 36px;
    max-width: 170px;
    padding: 6px 30px 6px 11px;
    font-size: .86rem;
    border-radius: var(--radius-sm, 7px);
    border: 1px solid var(--border-2);
    background-color: var(--surface-2);
    color: var(--text);
}
.pick-variant select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.pick-chosen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* Cada ficha quita esa opcion del combo. Se ve que se puede pulsar. */
.pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid rgba(var(--primary-rgb), .34);
    background: rgba(var(--primary-rgb), .11);
    color: var(--primary);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.pick-chip::after {
    content: "\00d7";
    font-size: .95rem;
    line-height: 1;
    opacity: .7;
}
.pick-chip:hover { background: rgba(var(--primary-rgb), .2); }
.pick-chip:hover::after { opacity: 1; }

/* En el resumen, la opcion va bajo el nombre y no compite con el. */
.sum-item-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-item-name b { font-weight: 600; }
.sum-item-name small { font-size: .78rem; color: var(--muted); }

@media (max-width: 720px) {
    .pick-variant select { max-width: 100%; width: 100%; }
}

/* =====================================================================
   Descripciones largas en la ficha

   Se recorta a unas pocas lineas y se despliega a peticion. El boton solo
   aparece si el texto de verdad no cabe: en una descripcion de dos lineas
   un "Leer mas" es ruido.
   ===================================================================== */

.detail-desc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.store-workspace .detail-desc p {
    margin: 0;
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.detail-desc.is-open p { -webkit-line-clamp: unset; overflow: visible; }

.detail-more {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.detail-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* =====================================================================
   Movil: que lo que se compra desde el telefono se pueda leer

   Tres cosas estaban rotas de verdad, no de gusto:
   el armador arrastraba la pagina entera a lo ancho, su boton de comprar
   vivia escondido detras de un desplegable, y el pie de las tarjetas
   metia el precio y el enlace en la misma linea de 144px.
   ===================================================================== */

/* ------------------------------------------------ 1. El armador cabia mal */

/* Un hijo de rejilla o de flex no encoge por debajo de su contenido salvo
   que se le diga. Sin esto la columna de servicios medía 519px dentro de
   una pantalla de 390 y toda la pagina se iba de lado. */
.builder-pick, .pick-list, .pick-row, .pick-body { min-width: 0; }

@media (max-width: 720px) {
    .pick-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        padding: 14px;
    }
    .pick-img { flex: none; }
    .pick-body { flex: 1 1 auto; }

    /* La opcion cruza entera: es la decision de la fila. */
    .pick-variant { order: 3; flex: 1 1 100%; }
    .pick-variant select { width: 100%; max-width: none; min-height: 44px; font-size: .95rem; }

    /* Y abajo, precio a la izquierda y el contador a la derecha. */
    .pick-price { order: 4; flex: 1 1 auto; margin-left: 0; font-size: 1.1rem; font-weight: 700; }
    .pick-row .qty-picker { order: 5; flex: none; margin-left: auto; }
    .pick-row .qty-picker button { width: 42px; min-height: 42px; }
    .pick-row .qty-picker input { width: 48px; height: 42px; font-size: 1rem; }

    .pick-chip { padding: 4px 10px; font-size: .82rem; }
}

/* ------------------------------------------------ 2. Comprar, a la vista */

.sum-quick { display: none; }

@media (max-width: 940px) {
    .sum-quick {
        display: block;
        padding: 0 clamp(14px, 4vw, 20px) calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .sum-quick .btn { min-height: 50px; font-size: .98rem; }

    /* El tirador ya no cierra la barra: debajo va el boton, asi que su
       relleno inferior sobra. */
    .sum-handle { padding-bottom: 10px; }

    /* Aire para que la barra no tape el ultimo servicio de la lista. */
    .builder .wrap { padding-bottom: 176px; }
}

@media (max-width: 600px) {
    /* Dos barras fijas en la misma esquina se tapan entre si. Mientras
       armas un combo manda la del combo. */
    body:has(.builder) .mobile-dock { display: none; }
    .builder .wrap { padding-bottom: 168px; }
}

/* ------------------------------------------------ 3. Tarjetas de producto */

@media (max-width: 600px) {
    .workspace-product .product-body { padding: 12px 11px 11px; }

    /* Categoria y disponibilidad no caben en la misma linea de 144px:
       se pisaban. La disponibilidad baja a la suya. */
    .workspace-product .product-overline { flex-wrap: wrap; gap: 3px 8px; }
    .workspace-product .product-availability { flex-basis: 100%; }

    .workspace-product h3 { font-size: .92rem; line-height: 1.3; margin-bottom: 8px; }

    /* Fichas mas apretadas: asi entran dos por linea en vez de una. */
    .product-variant-chips { gap: 4px; margin-bottom: 10px; min-height: 0; }
    .product-variant-chips span { padding: 2px 6px; font-size: .76rem; }

    /* El pie deja de ser dos columnas. El precio manda, y "Elegir plan"
       sobra: la tarjeta entera ya es un enlace y la flecha esta sobre la
       imagen. */
    .workspace-product .product-meta { display: block; padding-top: 9px; }
    .workspace-product .product-choose { display: none; }
    .workspace-product .price { font-size: 1.18rem; font-weight: 700; }
    .product-price-stack > small { font-size: .72rem; }

    /* El tachado no se aprieta contra el precio. */
    .workspace-product .price small { display: block; margin-top: 2px; }
}

/* ------------------------------------------------ 4. Remates de movil */

@media (max-width: 600px) {
    /* Botones y campos con tamano de dedo, no de raton. */
    .store-workspace .btn-lg { min-height: 50px; }
    .store-workspace .buy-card .btn-primary { min-height: 50px; }

    /* La barra de compra de la ficha, completa y sin apreturas. */
    .store-workspace .buy-card .qty-row { gap: 10px; }
    .store-workspace .buy-card .qty-picker button { width: 40px; min-height: 40px; }
    .store-workspace .buy-card .qty-picker input { width: 46px; height: 40px; }

    /* Los escalones de descuento, dos por linea en vez de tres apretados. */
    .ladder-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }

    /* La tira de garantias del inicio, una debajo de otra y legible. */
    .assurance-strip { flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 15px; }

    /* El aviso de armar combo sube al inicio: que se vea sin bajar. */
    .builder-banner { margin-top: 14px; }
}

/* =====================================================================
   MOTOR DE TEMAS

   Todo lo de aqui abajo esta apagado por defecto. Se enciende solo cuando
   un tema instalado lo pide desde su theme.json, con una clase en el
   <body>. Una tienda con un tema de fabrica no ve ni una de estas reglas,
   asi que nada de esto puede cambiarle el aspecto a quien no lo pidio.

       "layout": { "menu": "superior", "dock": "pegado", ... }
       "fondos": { "menu": "assets/foto.webp", ... }
       "menu_inferior": ["inicio", "catalogo", "combos", "soporte"]

   Se escribe pensando en las dos pantallas, y cada eje sabe en cual manda:
   las variantes de "menu" solo cambian algo en escritorio -en el telefono
   el menu lateral ya se pliega solo- y las de "dock" solo en el telefono,
   que es donde existe el menu de abajo.
   ===================================================================== */

/* ---------------------------------------------------------- 1. Fondos */

/*
 * El velo es lo que hace que una foto de fondo no se coma el texto. Cada
 * zona tiene el suyo y el tema puede ajustarlo desde sus "vars" si quiere
 * mas o menos transparencia.
 */
.store-workspace {
    --velo-pagina:  color-mix(in srgb, var(--bg) 78%, transparent);
    --velo-menu:    color-mix(in srgb, var(--surface) 84%, transparent);
    --velo-barra:   color-mix(in srgb, var(--bg) 86%, transparent);
    --velo-hero:    color-mix(in srgb, var(--surface) 70%, transparent);
    --velo-tarjeta: color-mix(in srgb, var(--surface) 60%, transparent);
    --velo-pie:     color-mix(in srgb, var(--bg) 82%, transparent);
    --velo-acceso:  color-mix(in srgb, var(--bg) 72%, transparent);
}

.con-fondo-pagina {
    background-image: var(--fondo-pagina);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* El contenido se apoya sobre el velo, no sobre la foto. */
.con-fondo-pagina .workspace-main,
.con-fondo-pagina.is-theme,
.con-fondo-pagina.is-access { background-color: var(--velo-pagina); }

.con-fondo-menu .store-sidebar {
    background-image: linear-gradient(var(--velo-menu), var(--velo-menu)), var(--fondo-menu);
    background-size: cover;
    background-position: center;
}

.con-fondo-barra .workspace-topbar {
    background-image: linear-gradient(var(--velo-barra), var(--velo-barra)), var(--fondo-barra);
    background-size: cover;
    background-position: center;
}

.con-fondo-hero .home-state,
.con-fondo-hero .spotlight,
.con-fondo-hero .welcome-hero {
    background-image: linear-gradient(var(--velo-hero), var(--velo-hero)), var(--fondo-hero);
    background-size: cover;
    background-position: center;
}

/* En las tarjetas el fondo va solo donde no hay foto de producto: si el
   producto trae imagen, manda la suya. */
.con-fondo-tarjeta .workspace-product .product-artwork {
    background-image: linear-gradient(var(--velo-tarjeta), var(--velo-tarjeta)), var(--fondo-tarjeta);
    background-size: cover;
    background-position: center;
}

.con-fondo-pie .workspace-footer {
    background-image: linear-gradient(var(--velo-pie), var(--velo-pie)), var(--fondo-pie);
    background-size: cover;
    background-position: center;
}

.con-fondo-acceso.is-access,
.con-fondo-acceso.is-theme {
    background-image: linear-gradient(var(--velo-acceso), var(--velo-acceso)), var(--fondo-acceso);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* En el telefono las fotos fijas saltan al hacer scroll. */
@media (max-width: 760px) {
    .con-fondo-pagina,
    .con-fondo-acceso.is-access,
    .con-fondo-acceso.is-theme { background-attachment: scroll; }
}

/* ----------------------------------------------------------- 2. Menu */

/*
 * Menu arriba. Solo en escritorio: por debajo de 960px el menu lateral ya
 * se convierte en cajon deslizante y en barra inferior, que es lo que
 * funciona en un telefono. Forzar una fila horizontal ahi seria peor.
 */
@media (min-width: 961px) {
    .lay-menu-superior .store-sidebar {
        position: sticky;
        top: 0;
        inset-inline: auto;
        width: auto;
        height: auto;
        z-index: 41;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 var(--gutter);
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .lay-menu-superior .workspace-main { margin-left: 0; }

    .lay-menu-superior .workspace-brand { height: 58px; padding: 0 18px 0 0; flex: none; }
    .lay-menu-superior .workspace-brand small { display: none; }

    /* El menu de casa es una columna con scroll vertical; aqui pasa a ser
       una fila con scroll horizontal, y hay que decir las dos cosas. */
    .lay-menu-superior .workspace-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        flex: 1;
        min-width: 0;
    }
    .lay-menu-superior .workspace-nav a { margin-bottom: 0; }
    /* La marca del activo se dibuja abajo, no a la izquierda. */
    .lay-menu-superior .workspace-nav a.active { box-shadow: inset 0 -2px var(--primary); }
    .lay-menu-superior .workspace-nav::-webkit-scrollbar { display: none; }
    .lay-menu-superior .workspace-nav a { white-space: nowrap; min-height: 38px; padding: 8px 12px; }

    /* Lo que no cabe en una fila: se va, no se aprieta. */
    .lay-menu-superior .nav-label,
    .lay-menu-superior .workspace-switch,
    .lay-menu-superior .sidebar-bottom,
    .lay-menu-superior .nav-category small { display: none; }

    /* La barra de siempre pierde su borde para no duplicar la linea. */
    .lay-menu-superior .workspace-topbar { border-top: 0; }

    /*
     * Menu minimo: solo iconos. El nombre de cada seccion sigue estando en
     * el HTML para quien navegue con lector de pantalla; lo que se esconde
     * es el texto, no la informacion.
     */
    .lay-menu-minimo { --sidebar-width: 74px; }
    .lay-menu-minimo .workspace-nav a { justify-content: center; padding-inline: 0; }
    .lay-menu-minimo .workspace-nav a > span,
    .lay-menu-minimo .nav-label,
    .lay-menu-minimo .workspace-brand > span,
    .lay-menu-minimo .workspace-switch,
    .lay-menu-minimo .sidebar-help,
    .lay-menu-minimo .sidebar-credit,
    .lay-menu-minimo .seller-switch span,
    .lay-menu-minimo .nav-category small { display: none; }
    .lay-menu-minimo .workspace-brand { justify-content: center; padding-inline: 0; }
    .lay-menu-minimo .seller-switch { justify-content: center; }
}

/* ---------------------------------------------- 3. Menu inferior (movil) */

/*
 * El menu de abajo del telefono.
 *
 * Solo existe por debajo de 600px: es el ancho en el que el menu lateral ya
 * es un cajon cerrado y hace falta algo siempre a la vista. Por eso todo
 * este bloque vive dentro de esa medida -en el escritorio no hay nada que
 * cambiar- y por eso el ultimo hueco es siempre el boton "Mas": es la unica
 * puerta al menu completo desde un telefono.
 *
 * Los destinos los elige el tema en su theme.json ("menu_inferior"); esto
 * solo decide la FORMA. El de fabrica es "flotante".
 */

@media (max-width: 600px) {

    /* --- Pegado: de borde a borde, apoyado en el filo de la pantalla.
           Es la barra clasica de aplicacion: ocupa menos alto y no deja
           ver pagina por los lados. */
    .store-workspace.lay-dock-pegado .mobile-dock {
        left: 0;
        right: 0;
        bottom: 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: var(--surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
    }
    /* Pegada al borde, la pastilla del activo queda muy justa arriba. */
    .store-workspace.lay-dock-pegado .mobile-dock .active::before { top: 0; }

    /* --- Iconos: sin texto. Cabe un destino mas y la barra pesa menos,
           a cambio de que haya que reconocer el dibujo.

           El nombre NO se borra del HTML, se esconde: quien navegue con
           lector de pantalla lo sigue oyendo. Esconder la informacion y
           esconder el texto no es lo mismo. */
    .store-workspace.lay-dock-iconos .mobile-dock { min-height: 54px; }
    .store-workspace.lay-dock-iconos .mobile-dock a > span,
    .store-workspace.lay-dock-iconos .mobile-dock button > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .store-workspace.lay-dock-iconos .mobile-dock .ui-icon { width: 23px; height: 23px; }
    .store-workspace.lay-dock-iconos .mobile-dock .active::before { top: 50%; transform: translate(-50%, -50%); }

    /*
     * --- Oculto: no hay menu inferior.
     *
     * Para temas que quieren la pantalla entera y se conforman con el boton
     * de menu de la barra de arriba, que sigue ahi y sigue abriendo el
     * cajon. No deja a nadie sin navegacion; deja un toque mas de distancia.
     *
     * Con la barra fuera, el hueco que se le reservaba al pie y al final del
     * cajon sobra: sin esto quedaria una franja vacia al fondo de la pagina.
     */
    .store-workspace.lay-dock-oculto .mobile-dock { display: none; }
    .store-workspace.lay-dock-oculto .workspace-footer { padding-bottom: 26px; }
    .store-workspace.lay-dock-oculto .sidebar-bottom { padding-bottom: 20px; }

    /*
     * --- Propio: el tema trae su dock.html.
     *
     * No se le aplica ninguna variante -su HTML es suyo y no tiene por que
     * tener las piezas que estas reglas mueven-, pero el hueco del pie se
     * le sigue reservando: su barra tambien tapa el fondo de la pagina.
     */
}

/* ------------------------------------------------------ 4. Productos */

/* --- Lista: una columna, imagen al lado. Lee muy bien en el telefono. */
.lay-prod-lista .workspace-products,
.lay-prod-lista.catalog-only .workspace-products { grid-template-columns: minmax(0, 1fr); }
.lay-prod-lista .workspace-product { flex-direction: row; align-items: stretch; }
.lay-prod-lista .workspace-product .product-img {
    width: 172px;
    height: auto;
    min-height: 118px;
    flex: none;
}
.lay-prod-lista .workspace-product .product-body { flex: 1; }
.lay-prod-lista .product-media-arrow { display: none; }

/* --- Mosaico: piezas de distinto tamano, como un tablero. */
.lay-prod-mosaico .workspace-products,
.lay-prod-mosaico.catalog-only .workspace-products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-flow: dense;
}
.lay-prod-mosaico .workspace-product:nth-child(7n + 1) { grid-column: span 2; }
.lay-prod-mosaico .workspace-product:nth-child(7n + 1) .product-img { height: 210px; }

/* --- Vitrina: pocas piezas, muy grandes. Para catalogos cortos y caros. */
.lay-prod-vitrina .workspace-products,
.lay-prod-vitrina.catalog-only .workspace-products {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}
.lay-prod-vitrina .workspace-product .product-img { height: 230px; }
.lay-prod-vitrina .workspace-product .product-body { padding: 18px 17px 16px; }

@media (max-width: 960px) {
    .lay-prod-mosaico .workspace-products,
    .lay-prod-mosaico.catalog-only .workspace-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lay-prod-vitrina .workspace-products,
    .lay-prod-vitrina.catalog-only .workspace-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lay-prod-vitrina .workspace-product .product-img { height: 175px; }
}

@media (max-width: 600px) {
    /* La lista se mantiene en el telefono: es donde mejor funciona. */
    .lay-prod-lista .workspace-products,
    .lay-prod-lista.catalog-only .workspace-products { grid-template-columns: minmax(0, 1fr); }
    .lay-prod-lista .workspace-product .product-img { width: 116px; min-height: 104px; height: auto; }

    .lay-prod-mosaico .workspace-product:nth-child(7n + 1) { grid-column: span 2; }
    .lay-prod-mosaico .workspace-product:nth-child(7n + 1) .product-img { height: 150px; }

    .lay-prod-vitrina .workspace-products,
    .lay-prod-vitrina.catalog-only .workspace-products { grid-template-columns: minmax(0, 1fr); }
    .lay-prod-vitrina .workspace-product .product-img { height: 190px; }
}

/* --- Como se acomoda la foto del producto dentro de su marco */
.img-recorte .workspace-product .product-shot { object-fit: cover; }
.img-recorte .workspace-product .product-shot-bg { display: none; }
.img-completa .workspace-product .product-shot { object-fit: contain; }

/* ------------------------------------------------------ 5. Densidad */

.dens-comoda { --gutter: 38px; }
.dens-comoda .workspace-products { gap: 22px; }
.dens-comoda .workspace-product .product-body { padding: 18px 17px 16px; }
.dens-comoda .discovery-section { margin-top: 38px; }

.dens-compacta { --gutter: 18px; }
.dens-compacta .workspace-products { gap: 10px; }
.dens-compacta .workspace-product .product-body { padding: 10px 10px 9px; }
.dens-compacta .workspace-product .product-img { height: 112px; }
.dens-compacta .discovery-section { margin-top: 18px; }

@media (max-width: 600px) {
    .dens-comoda { --gutter: 18px; }
}

/* ---------------------------------------------------- 6. Animaciones */

/* Sin animaciones: para tiendas que quieren algo seco, o equipos lentos. */
.anim-ninguna *,
.anim-ninguna *::before,
.anim-ninguna *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
}

/* Vivas: la tarjeta se levanta mas, la foto respira y las piezas entran
   escalonadas al cargar la pagina. */
.anim-vivas .workspace-product {
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease, border-color .2s ease;
}
.anim-vivas .workspace-product:hover {
    transform: translateY(-7px) scale(1.012);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
    border-color: var(--primary);
}
.anim-vivas .workspace-product .product-shot { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.anim-vivas .workspace-product:hover .product-shot { transform: scale(1.06); }

.anim-vivas .featured-card,
.anim-vivas .combo-card { transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease; }
.anim-vivas .featured-card:hover,
.anim-vivas .combo-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .32); }

.anim-vivas .workspace-nav a { transition: transform .16s ease, background .16s ease, color .16s ease; }
.anim-vivas .workspace-nav a:hover { transform: translateX(3px); }

@keyframes tema-entrada {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.anim-vivas .workspace-products > .workspace-product {
    animation: tema-entrada .46s cubic-bezier(.2, .8, .2, 1) both;
}
/* Solo las primeras: escalonar cien tarjetas retrasaria la ultima medio
   minuto. De la novena en adelante entran todas juntas. */
.anim-vivas .workspace-products > .workspace-product:nth-child(1) { animation-delay: .02s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(2) { animation-delay: .06s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(3) { animation-delay: .10s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(4) { animation-delay: .14s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(5) { animation-delay: .18s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(6) { animation-delay: .22s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(7) { animation-delay: .26s; }
.anim-vivas .workspace-products > .workspace-product:nth-child(8) { animation-delay: .30s; }

.anim-vivas .home-state,
.anim-vivas .spotlight { animation: tema-entrada .5s cubic-bezier(.2, .8, .2, 1) both; }

/*
 * Quien pidio en su sistema que no le muevan la pantalla manda sobre el
 * tema. No es una preferencia estetica: hay gente a la que el movimiento
 * le produce mareo.
 */
@media (prefers-reduced-motion: reduce) {
    .anim-vivas *,
    .anim-vivas *::before,
    .anim-vivas *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: .01s !important;
    }
    .anim-vivas .workspace-product:hover { transform: none; }
}

/* =====================================================================
   UN PEDIDO, VISTO POR EL CLIENTE

   El caso dificil es el combo: varios servicios, cada uno con sus datos, y
   alguien que quiere encontrar el suyo rapido o mandarselo entero a otra
   persona. Se diseña para el telefono primero, que es donde se abre esto.
   ===================================================================== */

/* ---------------------------------------------------------- Cabecera */

.pd-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pd-cabeza-txt { min-width: 0; }

.pd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--primary-dim);
    border: 1px solid var(--border-lit);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pd-tag .ui-icon { width: 13px; height: 13px; }

.pd-cabeza h1 {
    margin: 0 0 8px;
    font-size: clamp(22px, 4.5vw, 32px);
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
.pd-meta > span { display: inline-flex; align-items: center; gap: 6px; }
/* Un punto separa sin ensuciar; el primero no lo lleva. */
.pd-meta > span + span::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
.pd-meta-ok { color: var(--primary); font-weight: 600; }

.pd-cabeza-pago {
    flex: none;
    text-align: right;
    padding: 12px 16px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.pd-cabeza-pago > span { display: block; font-size: 12px; color: var(--muted); }
.pd-cabeza-pago > b {
    display: block;
    font-size: 22px;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.pd-cabeza-pago > small { display: block; margin-top: 3px; font-size: 12px; color: var(--primary); }

/* ------------------------------------------------- Lo que trae el combo */

.pd-trae {
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 12px;
}
.pd-trae-tit {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 10px;
}
.pd-trae-lista {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Muchos servicios ruedan de lado en vez de romper la caja. */
    overflow-x: auto;
    scrollbar-width: none;
}
.pd-trae-lista::-webkit-scrollbar { display: none; }
.pd-trae-lista a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease;
}
.pd-trae-lista a:hover { border-color: var(--primary); color: var(--text); }

/* La cara del producto. Con imagen o con su inicial: nunca un hueco. */
.pd-mini {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-3);
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
}
.pd-mini img { width: 100%; height: 100%; object-fit: cover; }
.pd-mini-lg { width: 46px; height: 46px; border-radius: 11px; font-size: 19px; }

/* -------------------------------------------------------- Copiar todo */

.pd-copiar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 13px;
    border: 1px solid var(--border-lit);
    background:
        radial-gradient(120% 100% at 0% 0%, var(--primary-dim), transparent 62%),
        var(--surface);
    margin-bottom: 18px;
}
.pd-copiar-txt { flex: 1; min-width: 0; }
.pd-copiar-txt b { display: block; font-size: 15px; }
.pd-copiar-txt span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.pd-copiar .btn { flex: none; }

/* El texto que se copia existe, pero no se ve ni ocupa sitio. */
.pd-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ------------------------------------------------------ Cada servicio */

.pd-lista { display: grid; gap: 10px; }

.pd-item {
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .16s ease;
}
.pd-item[open] { border-color: var(--border-2); }
.pd-item.is-out, .pd-item.is-old { opacity: .82; }

.pd-item > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
    /* Area de toque comoda en el telefono. */
    min-height: 62px;
}
.pd-item > summary::-webkit-details-marker { display: none; }
.pd-item > summary:hover { background: var(--surface-2); }

.pd-item-txt { flex: 1; min-width: 0; }
.pd-item-txt strong {
    display: block;
    font-size: 14.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.pd-item-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

.pd-item-estado { flex: none; }
.pd-item-flecha { flex: none; color: var(--faint); display: flex; transition: transform .2s ease; }
.pd-item-flecha .ui-icon { width: 16px; height: 16px; transform: rotate(90deg); }
.pd-item[open] .pd-item-flecha { transform: rotate(180deg); }

.pd-item-cuerpo {
    padding: 4px 15px 15px;
    border-top: 1px solid var(--border);
    margin-top: -1px;
}

/* ---- Los datos de acceso */

.pd-datos {
    display: grid;
    /* Columnas anchas: un correo largo no deberia partirse en dos lineas.
       En el telefono cae a una sola por el minimo. */
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.pd-dato {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    min-width: 0;
}
.pd-dato-k {
    flex: none;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    min-width: 62px;
}
.pd-dato-v {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    /* Una clave larga parte en vez de estirar la caja. */
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}
.pd-dato-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    transition: color .16s ease, border-color .16s ease;
}
.pd-dato-btn .ui-icon { width: 15px; height: 15px; }
.pd-dato-btn:hover { color: var(--primary); border-color: var(--primary); }
.pd-dato-btn.ok { width: auto; padding-inline: 10px; color: var(--primary); border-color: var(--primary); }

/* ---- El mensaje de entrega, plegado */

.pd-mensaje { margin-top: 14px; }
.pd-mensaje > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-2);
    padding: 9px 0;
}
.pd-mensaje > summary:hover { color: var(--primary); }
.pd-mensaje pre {
    margin: 8px 0 10px;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pd-item-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.pd-pie { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* El aviso de copiado, en cualquier boton. */
.copy.ok { color: var(--primary); border-color: var(--primary); }

@media (max-width: 600px) {
    .pd-cabeza { gap: 12px; }
    .pd-cabeza-pago { width: 100%; text-align: left; }
    .pd-copiar { gap: 12px; }
    .pd-copiar .btn { width: 100%; justify-content: center; }
    .pd-item > summary { padding: 12px; gap: 10px; }
    .pd-mini-lg { width: 40px; height: 40px; }
    .pd-item-cuerpo { padding-inline: 12px; }
    /* La etiqueta arriba y el dato abajo: en 360px no caben al lado. */
    .pd-dato { flex-wrap: wrap; gap: 4px 10px; }
    .pd-dato-k { min-width: 0; width: 100%; }
    .pd-dato-v { flex: 1 1 auto; }
    .pd-item-acciones .btn { flex: 1; justify-content: center; }
}

/* =====================================================================
   UNA LISTA DE PEDIDOS

   Antes esto era una tabla, y en el telefono una tabla obliga a arrastrar
   de lado para llegar al precio. Cada pedido es ahora una tarjeta que se
   lee entera de arriba abajo, con las caratulas de lo que trae adelante.
   ===================================================================== */

.pl-lista { display: grid; gap: 9px; }

.pl-fila {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pl-fila:hover {
    border-color: var(--primary-ring, var(--primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    color: var(--text);
}
.pl-fila.is-out { opacity: .62; }

/* Las caratulas, un poco montadas: ocupan menos y se leen como un grupo. */
.pl-caras { display: flex; flex: none; }
.pl-caras .pd-mini { box-shadow: 0 0 0 2px var(--surface); }
.pl-caras .pd-mini + .pd-mini { margin-left: -9px; }
.pl-mas { font-size: 11px; background: var(--surface-3); color: var(--muted); }

.pl-txt { flex: 1; min-width: 0; }
.pl-txt strong {
    display: block;
    font-size: 14.5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.pl-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.pl-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--muted);
}
.pl-sub > span { display: inline-flex; align-items: center; gap: 6px; }
.pl-sub > span + span::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
.pl-ahorro { color: var(--primary); }

.pl-der {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pl-precio {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.pl-go { flex: none; display: flex; color: var(--faint); transition: transform .18s ease; }
.pl-go .ui-icon { width: 16px; height: 16px; }
.pl-fila:hover .pl-go { transform: translateX(3px); color: var(--primary); }

@media (max-width: 560px) {
    /*
     * En el telefono el nombre necesita el ancho entero, asi que el precio
     * baja a su propia linea y la flecha sobra: la tarjeta ya es el enlace.
     */
    .pl-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            'caras texto'
            'pie   pie';
        gap: 8px 11px;
        padding: 12px;
    }
    .pl-caras { grid-area: caras; }
    .pl-txt { grid-area: texto; }
    .pl-der {
        grid-area: pie;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 9px;
        border-top: 1px solid var(--border);
    }
    .pl-precio { font-size: 15px; }
    .pl-go { display: none; }
    /* El ahorro baja solo; si baja arrastrando su punto parece una vineta. */
    .pl-ahorro { flex: 1 1 100%; }
    .pl-sub > span + .pl-ahorro::before { display: none; }
}

/*
 * Telegram en la bandeja del cliente.
 *
 * La tarjeta se distingue del resto de la lista sin gritar: es una oferta,
 * no un aviso, y tiene que leerse como algo que se puede ignorar. El .check
 * vive aqui porque la tienda no carga app.css, donde esta el del panel.
 */
.telegram-card { border-color: var(--border-lit); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.telegram-card h2 { font-size: 1.05rem; margin-bottom: 6px; }
.telegram-card p { font-size: .85rem; }
.telegram-card .badge { flex: none; }
.telegram-card .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 5px 0; font-size: .85rem; }
.telegram-card .check input { width: 17px; height: 17px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--primary); cursor: pointer; }
.telegram-card .check .small { display: block; }

/*
 * La etiqueta de una cuenta entregada por garantia.
 *
 * Se distingue de la etiqueta de combo por el color, no por la forma: las dos
 * dicen "esto no es una compra normal" y conviene que se lean igual de rapido.
 */
.pl-tag-garantia { background: var(--primary-dim); border-color: var(--primary-ring); color: var(--primary); }

/* =====================================================================
 * Soporte en la tienda: la pantalla de un caso.
 *
 * Mismas reglas que en el panel -la hoja es otra porque la tienda no carga
 * app.css-: en la columna estrecha solo lineas cortas, y lo que tenga
 * parrafo o boton va en la principal.
 * ===================================================================== */

/* Declara su propio flex: ya no lo hereda de .page-head, que ahora apila. */
.sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sup-head-main { min-width: 0; }
.sup-head-main h1 { overflow-wrap: anywhere; }
.sup-head-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.sup-head-meta > span { position: relative; }
.sup-head-meta > span + span::before { content: ""; position: absolute; left: -9px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.sup-main { display: grid; gap: 18px; min-width: 0; }
.sup-block { min-width: 0; }
.sup-block-title { font-size: 1rem; margin: 0 0 12px; }

/* "Te cambiamos la cuenta": lo primero que busca quien acaba de recibirla. */
.sup-listo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start;
             border-color: var(--border-lit); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.sup-listo-icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
                   background: var(--primary-dim); color: var(--primary); }
.sup-listo-icono .ui-icon, .sup-listo-icono svg { width: 22px; height: 22px; }
.sup-listo-txt { min-width: 0; }
.sup-listo-txt h2 { margin: 4px 0 6px; font-size: 1.2rem; }
.sup-listo-txt p { margin: 0; font-size: .9rem; line-height: 1.6; }
.sup-listo-cta { grid-column: 2; justify-self: start; margin-top: 14px; }

.sup-aside { display: grid; gap: 14px; align-content: start; }
.sup-aside-title { font-size: 1.02rem; margin: 8px 0 4px; line-height: 1.35; overflow-wrap: anywhere; }
.sup-break { overflow-wrap: anywhere; }

@media (max-width: 700px) {
    .sup-head-main h1 { font-size: 1.45rem; }
    .sup-main { gap: 14px; }
    .sup-listo { grid-template-columns: minmax(0, 1fr); }
    .sup-listo-icono { display: none; }
    .sup-listo-cta { grid-column: 1; width: 100%; justify-self: stretch; }
}

/*
 * La fila de renovar, dentro de cada cuenta del pedido.
 *
 * Se separa del resto con un fondo propio para que no parezca otra accion
 * mas: es una decision con dinero, y conviene que se lea como un bloque.
 * En telefono el boton pasa debajo y ocupa el ancho.
 */
.pd-renovar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
              margin-top: 14px; padding: 14px 16px; border-radius: 10px;
              border: 1px solid var(--border-lit); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.pd-renovar-txt { display: grid; gap: 3px; min-width: 0; flex: 1 1 15rem; }
.pd-renovar-txt strong { font-size: .9rem; }
.pd-renovar-txt span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.pd-renovar form { flex: none; }

@media (max-width: 600px) {
    .pd-renovar { padding: 13px; }
    .pd-renovar form, .pd-renovar .btn { width: 100%; }
}

/* =====================================================================
 * El selector de compra al abrir un reporte.
 *
 * Por debajo es un grupo de radios completo: sin JavaScript se sigue
 * pudiendo elegir, enviar y recorrer con el teclado. El buscador solo
 * esconde filas.
 * ===================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; border: 0; }

.picker { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.picker > legend { padding: 0; font-size: 13px; font-weight: 500; margin-bottom: 9px; }

/* ------------------------------------------------------------ Buscador */
.picker-form { margin-bottom: 12px; }
.picker-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 10px; }

/*
 * Un marco, tres piezas: lupa, campo y boton.
 *
 * El campo no lleva borde ni fondo propios -los toma del grupo- y el boton va
 * pegado por dentro. Es lo que separa un buscador de "un campo con un boton
 * suelto al lado", que es como se veia cuando cada pieza tenia su caja.
 *
 * El foco se pinta en el GRUPO, no en el campo, para que se ilumine entero.
 */
.picker-search { display: flex; align-items: stretch; overflow: hidden;
                 border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
                 background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.picker-search:hover { border-color: var(--border-2); }
.picker-search:focus-within { border-color: var(--primary-ring); box-shadow: 0 0 0 3px var(--primary-dim); }

/* La lupa va en --muted, no en --faint: en un tema oscuro --faint queda casi
   invisible sobre el fondo del campo, que es lo que le pasaba. */
.picker-search-ico { flex: none; display: grid; place-items: center; padding: 0 4px 0 14px; color: var(--muted); }
.picker-search-ico .ui-icon { width: 18px; height: 18px; }

.store-workspace .picker-search-input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none;
                       padding: 13px 12px; font: inherit; font-size: 14px; color: var(--text);
                       border-radius: 0; }
.store-workspace .picker-search-input:focus { outline: 0; box-shadow: none; }
/* La cruz nativa de type=search se pisaba con el boton: fuera, y limpiar se
   hace borrando o con "ver las ultimas". */
.picker-search-input::-webkit-search-cancel-button,
.picker-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.picker-search-go { flex: none; border: 0; border-left: 1px solid var(--border);
                    background: var(--primary); color: var(--on-primary);
                    font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
                    padding: 0 20px; cursor: pointer; transition: background .15s; }
.picker-search-go:hover { background: var(--primary-hover, var(--primary)); }
.picker-search-go:active { background: var(--primary-active, var(--primary)); }
.picker-search-go:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }

.picker-estado { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.picker-estado strong { color: var(--text); font-weight: 600; }
/* La lista se pega al buscador: buscar y elegir son el mismo gesto. */
.picker-shell { margin-top: 0; }
.picker-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------- Dos columnas
 *
 * Elegir la compra y contar el problema son dos tareas distintas, y en
 * escritorio caben una al lado de la otra: se ve el problema que escribes y
 * la cuenta que elegiste a la vez, sin subir y bajar. En una sola columna la
 * lista empujaba el formulario fuera de la pantalla.
 *
 * El envio cruza las dos columnas porque cierra las dos.
 */
@media (min-width: 900px) {
    /*
     * La pagina se ensancha solo aqui.
     *
     * El ancho de lectura normal -720px- es el correcto para una columna,
     * pero partido en dos deja 293px por lado: ahi no cabe "#1024 - 14 sep
     * 2026 - vence 14 oct 2026" ni el nombre del producto, y cada fila
     * pasaba a medir 115px en vez de 66px. Con dos columnas el contenido
     * es el doble, asi que el contenedor tambien.
     */
    .crear-wrap { max-width: 1040px; }
    /* Lo que se lee -el titulo, el aviso, el buscador- no se estira con la
       pagina: un parrafo de 1040px de ancho se pierde de renglon, y un campo
       de busqueda de un metro de largo no invita a escribir tres digitos. */
    .crear-wrap > .page-head { max-width: 640px; }
    .crear-wrap > .picker-form { max-width: 560px; }
    .picker-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                    gap: 0 28px; align-items: start; }
    .picker-shell > .picker { grid-column: 1; margin-bottom: 0; }
    .picker-shell > .crear-campos { grid-column: 2; grid-row: 1; min-width: 0; }
    .picker-shell > .alert, .picker-shell > .btn { grid-column: 1 / -1; }
    /* La lista puede crecer mas: al lado tiene el formulario, no debajo. */
    .picker-shell .picker-lista { max-height: 460px; }
}

/* ------------------------------------------------------------ La lista */
/*
 * Con tope de alto y scroll propio: 200 compras sin esto empujarian el resto
 * del formulario a un kilometro, y el buscador es justo lo que hace que el
 * scroll no haga falta.
 */
.picker-lista { display: grid; gap: 8px; max-height: 384px; overflow-y: auto; padding: 2px;
                margin: 0 -2px; overscroll-behavior: contain; }

/*
 * Dos detalles que costaron caro, los dos por especificidad y contencion.
 *
 * 1. El selector lleva .picker-lista delante porque estas filas son <label>
 *    dentro de .support-form, y ".support-form label { display: block }"
 *    -0,1,1- le ganaba a ".picker-item" -0,1,0-. Cada fila salia apilada y
 *    medía 118 px en vez de 50.
 *
 * 2. position: relative NO es decorativo. El radio de dentro va en absolute,
 *    y sin un ancestro posicionado se colocaba respecto a .workspace-main:
 *    escapaba del contenedor con scroll y estiraba el documento cientos de
 *    pixeles -de ahi el hueco enorme bajo el pie, que crecia con el numero
 *    de compras-.
 */
.picker-lista .picker-item { display: flex; align-items: center; gap: 13px; padding: 13px 15px;
               position: relative; cursor: pointer; margin: 0;
               border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
               transition: border-color .15s, background .15s; }
/* [hidden] tiene que ganarle al display:flex de arriba, o el filtro no filtra. */
.picker-lista .picker-item[hidden] { display: none; }
.picker-item:hover { border-color: var(--border-lit); }
.picker-item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

/* El circulito propio: el radio del sistema no se puede pintar igual. */
.picker-marca { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border-2);
                display: grid; place-items: center; transition: border-color .15s; }
.picker-marca::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
                       transform: scale(0); transition: transform .15s; }
.picker-item input:checked + .picker-marca { border-color: var(--primary); }
.picker-item input:checked + .picker-marca::after { transform: scale(1); }
.picker-item:has(input:checked) { border-color: var(--primary-ring); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
/* El foco se ve aunque el radio real este escondido. */
.picker-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.picker-cuerpo { flex: 1; min-width: 0; display: grid; gap: 3px; }
/*
 * Una linea por dato, y la fila mide siempre lo mismo.
 *
 * Un nombre largo se corta con puntos suspensivos en vez de partirse: en una
 * lista que se recorre con la vista buscando una compra, filas de alto
 * distinto cuestan mas de leer que un nombre entero. El nombre completo esta
 * a un clic, en Mis compras.
 */
.picker-titulo { font-size: 14px; font-weight: 500;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-tag { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 5px; margin-right: 5px;
              background: var(--primary-dim); border: 1px solid var(--primary-ring); color: var(--primary); }
/*
 * La meta si puede pasar a segunda linea, y a proposito.
 *
 * Un nombre de producto se recorta sin perder nada -esta arriba, completo, en
 * Mis compras-, pero el numero y las fechas son justo lo que se busca aqui:
 * cortarlas dejaria filas que no dicen cuando vence. En columna estrecha
 * -1100px con la barra lateral son 372px por lado- baja el bloque entero;
 * cada dato, eso si, entero y sin partirse por la mitad.
 */
.picker-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px;
               color: var(--muted); }
.picker-meta > span { white-space: nowrap; }
.picker-num { font-family: var(--mono, monospace); color: var(--primary); }
.picker-estado-b { flex: none; }
.picker-vacio { margin: 12px 0 0; }

@media (max-width: 600px) {
    /* El boton se encoge antes que el campo: escribir importa mas que pulsar,
       y con el teclado abierto el campo es lo unico que se ve. */
    .picker-search-go { padding: 0 14px; font-size: 13px; }
    .picker-search-ico { padding-left: 11px; }
    .store-workspace .picker-search-input { padding: 12px 10px; font-size: 15px; }
    .picker-lista { max-height: 320px; gap: 7px; }
    /*
     * En el telefono la fila se reparte en rejilla, no en flex.
     *
     * Con flex el chip de estado se iba solo a una tercera linea y la fila
     * medía 143px: en los 320px de lista caben tres. En rejilla el nombre
     * ocupa el ancho entero arriba -que es lo que hay que leer, y con la
     * etiqueta "Garantía #2" delante necesita sitio- y abajo comparten
     * renglon la meta y el chip. 92px, y no se recorta ni oculta nada.
     *
     * .picker-cuerpo pasa a display:contents para que el nombre y la meta
     * sean celdas de la fila; si no, irian los dos dentro de una sola.
     */
    .picker-lista .picker-item { display: grid; padding: 12px 13px;
                    grid-template-columns: auto minmax(0, 1fr) auto;
                    column-gap: 11px; row-gap: 3px; align-items: center; }
    .picker-cuerpo { display: contents; }
    .picker-marca { grid-column: 1; grid-row: 1 / span 2; }
    .picker-titulo { grid-column: 2 / -1; grid-row: 1; font-size: 13.5px; }
    .picker-meta { grid-column: 2; grid-row: 2; }
    .picker-estado-b { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* Invitacion a los avisos por Telegram, debajo de la cabecera del pedido. */
.pd-tg {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 13px;
    border: 1px solid rgba(var(--primary-rgb), .34);
    background: rgba(var(--primary-rgb), .08);
}
.pd-tg[hidden] { display: none; }
.pd-tg-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), .16);
    color: var(--primary);
}
.pd-tg-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pd-tg-txt > span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.pd-tg-acciones { display: flex; gap: 8px; flex: none; align-items: center; }
.pd-tg-acciones form { margin: 0; }
@media (max-width: 620px) {
    .pd-tg { flex-wrap: wrap; }
    .pd-tg-acciones { width: 100%; }
    .pd-tg-acciones > * { flex: 1 1 0; }
    .pd-tg-acciones .btn { width: 100%; justify-content: center; }
}

/* ==============================================================
 * Notificaciones del cliente: pestañas Avisos | Preferencias
 *
 * Las preferencias son una tabla de interruptores (tema x canal) que se
 * guardan solos. Todo con las variables del tema, asi que cada tienda lo
 * ve con sus colores.
 * ============================================================== */

.nt-tabs {
    display: inline-flex; gap: 4px; padding: 4px; margin: 18px 0 16px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    max-width: 100%;
}
.nt-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 9px;
    color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background var(--quick, .15s), color var(--quick, .15s);
}
.store-workspace .nt-tab:hover { color: var(--text); }
.store-workspace .nt-tab.is-on, .store-workspace .nt-tab.is-on:hover { background: var(--primary); color: var(--on-primary, #000); }
.nt-count {
    min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    background: var(--primary-dim); color: var(--primary);
}
.nt-tab.is-on .nt-count { background: rgba(0, 0, 0, .18); color: inherit; }
.nt-dots { display: inline-flex; gap: 3px; }
.nt-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); opacity: .6; }
.nt-dots i.is-on { background: #3ddc84; opacity: 1; }
.nt-tab.is-on .nt-dots i { box-shadow: 0 0 0 1.5px var(--on-primary, #000); }

.nt-panel[hidden] { display: none; }
.nt-panel .notification-filters { margin-top: 0; }
.nt-panel .notification-filters { flex-wrap: wrap; gap: 8px; }
.nt-leer { margin: 0 0 0 auto; }

/* ------------------------------------------------ Canales */
.nt-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; margin-bottom: 14px; }
.nt-canal {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
}
.nt-canal.is-on { border-color: var(--border-lit, var(--border)); }
.nt-canal-ico {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border-radius: 10px; background: var(--surface-2, var(--surface)); color: var(--muted);
}
.nt-canal.is-on .nt-canal-ico { background: var(--primary-dim); color: var(--primary); }
.nt-canal-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nt-canal-txt b { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-canal-txt small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-estado { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, var(--surface)); color: var(--muted); }
.nt-canal.is-on .nt-estado { background: rgba(61, 220, 132, .14); color: #3ddc84; }
.nt-canal form { margin: 0; flex: none; }
.nt-canal-acciones { display: flex; gap: 6px; flex: none; }

/* ------------------------------------------------ Tabla de interruptores */
.nt-tabla { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.nt-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--nt-cols, 2), 92px);
    align-items: center; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.nt-fila:first-child { border-top: 0; }
.nt-cabeza { background: var(--surface-2, var(--surface)); padding-block: 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nt-col { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text); min-width: 0; }
.nt-col svg { color: var(--primary); }
.nt-col em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.nt-col.is-off { opacity: .45; }
.nt-tema { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-tema b { font-size: 14px; }
.nt-tema small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.nt-celda { display: flex; justify-content: center; }

.nt-switch { position: relative; display: inline-flex; cursor: pointer; }
.nt-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nt-switch span {
    display: block; width: 44px; height: 26px; border-radius: 999px; flex: none; box-sizing: border-box;
    background: var(--surface-2, #333); border: 1px solid var(--border-2, var(--border));
    position: relative; transition: background var(--quick, .15s), border-color var(--quick, .15s);
}
.nt-switch span::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
    background: var(--faint, #888); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s ease, background .2s ease;
}
.nt-switch input:checked + span { background: var(--primary); border-color: var(--primary); }
.nt-switch input:checked + span::after { transform: translateX(18px); background: var(--on-primary, #fff); }
.nt-switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.nt-switch.is-off { opacity: .4; cursor: not-allowed; }
.nt-switch.is-off input { cursor: not-allowed; }
.nt-switch.is-saving span { opacity: .6; }

.nt-pie {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--border);
    background: var(--primary-dim);
}
.nt-pie-ico {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--primary); color: var(--on-primary, #000);
}
.nt-pie-ico .ui-icon, .nt-pie-ico svg { width: 15px; height: 15px; }
.nt-pie-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-guardado { font-size: 13px; font-weight: 700; color: var(--text); transition: color .2s; }
.nt-guardado.is-ok { color: var(--primary); }
.nt-guardado.is-bad { color: #ff6b6b; }
.nt-pie-txt small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.nt-pie-txt a { color: var(--primary); font-weight: 600; text-decoration: none; }
.nt-pie-txt a:hover { text-decoration: underline; }
.nt-form { margin: 0; }
.nt-form:empty { display: none; }

/* ------------------------------------------------ Telefono */
@media (max-width: 600px) {
    .nt-tabs { display: flex; width: 100%; margin: 14px 0 12px; }
    .nt-tab { flex: 1; justify-content: center; padding: 9px 10px; font-size: 13px; }
    .nt-canal { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .nt-canal-ico { width: 34px; height: 34px; }
    .nt-canal-acciones { width: 100%; }
    .nt-canal-acciones form { flex: 1; }
    .nt-canal-acciones .btn { width: 100%; justify-content: center; }
    .nt-fila { grid-template-columns: minmax(0, 1fr) repeat(var(--nt-cols, 2), 64px); gap: 4px; padding: 11px 12px; }
    .nt-col em { font-size: 10px; }
    .nt-pie { padding: 11px 12px; gap: 10px; }
    .nt-cabeza > span:first-child { font-size: 11px; }
    .nt-tema b { font-size: 13px; }
    .nt-tema small { font-size: 11px; }
    .nt-col svg { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------
 * Compra sin cuenta: el resumen de compra y la pagina del pedido.
 * Solo lo que no traen las piezas de siempre (buy-card, variant-option,
 * purchase-summary, pd-datos), y siempre con las variables del tema.
 *
 * En escritorio el resumen es dos columnas: los pasos a la izquierda y el
 * pedido con el total y el boton a la derecha, pegado al bajar. En el
 * telefono se apila en ese orden y el boton queda al final.
 * ------------------------------------------------------------------ */
.store-workspace .guest-order .card { margin-top: 16px; }

/* Cabecera, pasos y resumen con el mismo ancho: nada sobresale. */
.store-workspace .guest-checkout .wrap { max-width: 1120px; }
.store-workspace .gc-head { margin-bottom: 18px; }
.store-workspace .gc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 20px;
    align-items: start;
}
.store-workspace .gc-main { display: grid; gap: 16px; min-width: 0; }
.store-workspace .gc-side { position: sticky; top: 92px; min-width: 0; }

/* Los pasos: un numero que guia y el contenido debajo. */
.store-workspace .gc-step { padding: 22px; }
.store-workspace .gc-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.store-workspace .gc-step-head h3 { font-size: 17px; }
.store-workspace .gc-step-num {
    display: grid; place-items: center; flex: none;
    width: 32px; height: 32px;
    border-radius: var(--radius-pill);
    background: var(--primary); color: var(--on-primary);
    font-weight: 800; font-size: 14px;
}
.store-workspace .gc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store-workspace .gc-fields .field { margin: 0; }
.store-workspace .gc-step .hint { margin-top: 10px; }

.store-workspace .gc-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
/* Cada pasarela en una fila: circulo, logo, nombre y comision, total. El
   ".store-workspace label" del nucleo la volveria un bloque apilado. */
.store-workspace .gc-step .gc-methods .variant-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; min-height: 0;
}
.store-workspace .gc-step .gc-methods .variant-option-detail { flex: 1; min-width: 0; }
.store-workspace .gc-step .gc-methods .variant-option-detail b { font-size: 1rem; }
.store-workspace .gc-step .gc-methods .variant-option-price { flex: none; font-size: 1.05rem; font-weight: 700; }
.store-workspace .gc-method-logo {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--surface-3);
}
.store-workspace .gc-method-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Confianza: tres lineas cortas, sin caja propia. */
.store-workspace .gc-trust { list-style: none; margin: 0; padding: 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.store-workspace .gc-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); }
.store-workspace .gc-trust li b { color: var(--text); font-weight: 700; }
.store-workspace .gc-trust .ui-icon { flex: none; width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }

/* El resumen. */
.store-workspace .gc-summary { margin: 0; padding: 22px; }
.store-workspace .gc-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.store-workspace .gc-items { display: grid; margin: 4px 0 6px; max-height: 320px; overflow-y: auto; }
.store-workspace .gc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; min-width: 0;
    border-bottom: 1px solid var(--border);
}
.store-workspace .gc-items .gc-item:last-child { border-bottom: 0; }
.store-workspace .gc-item-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.store-workspace .gc-item-txt strong { overflow-wrap: anywhere; line-height: 1.3; }
.store-workspace .gc-item-price { white-space: nowrap; }

.store-workspace .gc-lines { margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.store-workspace .gc-lines > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.store-workspace .gc-lines dt { color: var(--muted); }
.store-workspace .gc-lines dd { margin: 0; font-weight: 600; white-space: nowrap; }
.store-workspace .gc-line-save dd { color: var(--success); }
.store-workspace .gc-total { margin-bottom: 14px; }

/* La pagina del pedido. */
.store-workspace .guest-order .gc-venta .gc-item { border-bottom: 0; padding-top: 0; }
.store-workspace .gc-estado { text-align: left; }
.store-workspace .gc-cuenta { border-style: dashed; }

/* La ficha: "o" entre comprar sin cuenta y entrar. */
.store-workspace .buy-guest-or {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 10px; color: var(--muted); font-size: 12px;
}
.store-workspace .buy-guest-or::before,
.store-workspace .buy-guest-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 1100px) {
    .store-workspace .gc-trust { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 960px) {
    .store-workspace .gc-layout { grid-template-columns: 1fr; }
    .store-workspace .gc-side { position: static; }
    .store-workspace .gc-items { max-height: none; }
}
/*
 * Telefono: menos texto y menos saltos de linea. La explicacion de cada paso
 * se va (el titulo ya lo dice), la pasarela cabe en una fila con su nombre
 * entero y la confianza pasa a tres chips cortos.
 */
@media (max-width: 600px) {
    .store-workspace .gc-head { margin-bottom: 12px; }
    .store-workspace .gc-main { gap: 12px; }
    .store-workspace .gc-step, .store-workspace .gc-summary { padding: 16px; }
    .store-workspace .gc-step-head { align-items: center; gap: 10px; margin-bottom: 14px; }
    .store-workspace .gc-step-head h3 { font-size: 16px; line-height: 1.25; }
    .store-workspace .gc-step-head p { display: none; }
    .store-workspace .gc-step-num { width: 26px; height: 26px; font-size: 13px; }
    .store-workspace .gc-fields { grid-template-columns: 1fr; gap: 10px; }
    .store-workspace .gc-step .hint { font-size: 12px; }

    .store-workspace .gc-step .gc-methods .variant-option { gap: 10px; padding: 12px; }
    .store-workspace .gc-method-logo { width: 32px; height: 32px; }
    .store-workspace .gc-step .gc-methods .variant-option-detail b {
        font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .store-workspace .gc-step .gc-methods .variant-option-detail small { white-space: nowrap; }
    .store-workspace .gc-step .gc-methods .variant-option-price { font-size: 1rem; }

    .store-workspace .gc-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; }
    .store-workspace .gc-trust li {
        flex-direction: column; align-items: center; text-align: center; gap: 6px;
        padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius);
        background: var(--surface); font-size: 12px; line-height: 1.25;
    }
    .store-workspace .gc-trust-more { display: none; }
    .store-workspace .gc-trust .ui-icon { margin: 0; }
}

/* ------------------------------------------------------------------
 * Reportar un problema: elegir el servicio (pedidos agrupados) y el
 * formulario con el servicio ya fijo. Solo variables del tema.
 * ------------------------------------------------------------------ */
.store-workspace .rp-page .wrap { max-width: 820px; }
.store-workspace .rp-buscar { margin-bottom: 14px; }

/* Los pedidos: un combo es un bloque con sus servicios dentro. */
.store-workspace .rp-lista { display: grid; gap: 12px; }
.store-workspace .rp-pedido {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); overflow: hidden;
}
.store-workspace .rp-pedido-cab {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.store-workspace .rp-pedido-cab strong { font-size: 15px; }
.store-workspace .rp-pedido-tag {
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary); background: var(--primary-dim);
    padding: 3px 8px; border-radius: var(--radius-pill);
}
.store-workspace .rp-servicios { display: grid; }
.store-workspace .rp-servicio {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; color: var(--text); min-width: 0;
    border-top: 1px solid var(--border);
    transition: background .15s ease;
}
.store-workspace .rp-servicios .rp-servicio:first-child { border-top: 0; }
.store-workspace .rp-pedido.is-varios .rp-servicio { padding-left: 24px; }
.store-workspace .rp-servicio-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.store-workspace .rp-servicio-txt strong { overflow-wrap: anywhere; line-height: 1.3; }
.store-workspace .rp-servicio-go {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 7px 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-2); font-size: 13px; font-weight: 700; color: var(--primary);
}
.store-workspace .rp-servicio-go .ui-icon { width: 15px; height: 15px; }
@media (hover: hover) {
    .store-workspace .rp-servicio:hover { background: var(--surface-2); }
    .store-workspace .rp-servicio:hover .rp-servicio-go { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
}
.store-workspace .rp-vacio { padding: 20px; border: 1px dashed var(--border-2); border-radius: var(--radius); text-align: center; }
.store-workspace .rp-pie { margin-top: 14px; text-align: center; }

/* El servicio fijo, arriba del formulario. */
.store-workspace .rp-fijo {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; margin: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
.store-workspace .rp-fijo-img { width: 52px; height: 52px; border-radius: 12px; font-size: 20px; }
.store-workspace .rp-fijo-txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.store-workspace .rp-fijo-txt strong { font-size: 17px; overflow-wrap: anywhere; }
.store-workspace .rp-fijo-kicker {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
.store-workspace .rp-fijo-kicker .ui-icon { width: 13px; height: 13px; }
.store-workspace .rp-fijo-badge { flex: none; }
.store-workspace .rp-fijo-nota { margin: 8px 2px 18px; }

/* El formulario, en tres pasos. */
.store-workspace .rp-form { padding: 22px; }
.store-workspace .rp-paso { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.store-workspace .rp-paso-tit {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; margin-bottom: 12px; padding: 0;
}
.store-workspace .rp-paso .field { margin: 10px 0 0; }

.store-workspace .rp-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.store-workspace .rp-motivo { position: relative; margin: 0; cursor: pointer; }
.store-workspace .rp-motivo input { position: absolute; opacity: 0; pointer-events: none; }
.store-workspace .rp-motivo span {
    display: inline-block; padding: 9px 14px;
    border: 1px solid var(--border-2); border-radius: var(--radius-pill);
    background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--text);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.store-workspace .rp-motivo input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.store-workspace .rp-motivo input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .store-workspace .rp-motivo:hover input:not(:checked) + span { border-color: var(--primary); } }

.store-workspace .rp-subir {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 16px; border: 1px dashed var(--border-2); border-radius: var(--radius);
    background: var(--bg); color: var(--text); margin: 0;
}
.store-workspace .rp-subir .ui-icon {
    width: 36px; height: 36px; padding: 8px; flex: none;
    border-radius: 10px; background: var(--primary-dim); color: var(--primary);
}
.store-workspace .rp-subir span { display: grid; gap: 2px; }
.store-workspace .rp-subir small { color: var(--muted); font-size: 12px; }
@media (hover: hover) { .store-workspace .rp-subir:hover { border-color: var(--primary); } }
/* El campo real queda disponible para el teclado y los lectores. */
.store-workspace .rp-subir-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.store-workspace .rp-subir-input:focus-visible + .rp-previas,
.store-workspace .rp-subir:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.store-workspace .rp-previas { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.store-workspace .rp-previas:empty { display: none; }
.store-workspace .rp-previa { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.store-workspace .rp-previa img { width: 100%; height: 100%; object-fit: cover; }
.store-workspace .rp-previa-quitar {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: rgb(0 0 0 / .65); color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.store-workspace .rp-subir-aviso { margin: 8px 0 0; font-size: 13px; color: var(--danger, #e5484d); }

@media (max-width: 600px) {
    .store-workspace .rp-form { padding: 16px; }
    .store-workspace .rp-fijo { padding: 14px; gap: 12px; flex-wrap: wrap; }
    .store-workspace .rp-fijo-img { width: 44px; height: 44px; }
    .store-workspace .rp-fijo-txt { flex-basis: calc(100% - 56px); }
    .store-workspace .rp-fijo-txt strong { font-size: 16px; }
    .store-workspace .rp-fijo-badge { margin-left: 56px; }
    .store-workspace .rp-motivo span { font-size: 13px; padding: 8px 12px; }
    .store-workspace .rp-servicio { gap: 10px; padding: 12px; flex-wrap: wrap; }
    .store-workspace .rp-pedido.is-varios .rp-servicio { padding-left: 12px; }
    .store-workspace .rp-servicio-txt { flex-basis: calc(100% - 60px); }
    .store-workspace .rp-servicio-badge { margin-left: 56px; }
    .store-workspace .rp-servicio-go { margin-left: auto; }
}