/* TUG LOCI Tools v6 */

/* ---------- Standalone Page FETCH ---------- */
.tug-page-fetch{--tug-fetch-bg:#f5f0e6;--tug-fetch-ink:#232323;--tug-fetch-accent:#d7a72d;--tug-fetch-border:rgba(35,35,35,.16);--tug-fetch-card:#fff;box-sizing:border-box;width:100%;margin:22px 0 28px;background:var(--tug-fetch-bg);color:var(--tug-fetch-ink);border:1px solid var(--tug-fetch-border)}
.tug-page-fetch *, .tug-page-fetch *::before,.tug-page-fetch *::after{box-sizing:border-box}
.tug-page-fetch__inner{max-width:1076px;margin:0 auto;padding:18px 20px}
.tug-page-fetch__copy{text-align:center;margin-bottom:10px}
.tug-page-fetch__title{margin:0 0 5px!important;font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.2}
.tug-page-fetch__intro{margin:0 auto;max-width:850px}
.tug-page-fetch__form{max-width:1076px;margin:0 auto}
.tug-page-fetch__field-wrap{display:flex;gap:0}
.tug-page-fetch__input{flex:1 1 auto;min-width:0;padding:12px 14px;border:1px solid rgba(0,0,0,.28);background:#fff;color:#111;font:inherit;border-radius:3px 0 0 3px}
.tug-page-fetch__button{flex:0 0 auto;padding:12px 22px;border:0;background:#222;color:#fff;font:inherit;font-weight:800;letter-spacing:.03em;cursor:pointer;border-radius:0 3px 3px 0}
.tug-page-fetch__examples{margin:6px 2px 0;font-size:.9em;opacity:.78}
.tug-page-fetch__status{max-width:1076px;margin:11px auto 0;font-size:.96em}
.tug-page-fetch__results{max-width:1076px;margin:10px auto 0;display:grid;gap:9px}
.tug-page-fetch__result{background:var(--tug-fetch-card);border:1px solid var(--tug-fetch-border);padding:13px 15px;text-align:left;width:100%;cursor:pointer;color:inherit;font:inherit}
.tug-page-fetch__result-kicker{display:block;font-size:.76em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
.tug-page-fetch__result-title{display:block;font-size:1.08em;font-weight:800}
.tug-page-fetch__result-snippet{display:block;margin-top:4px;line-height:1.45;opacity:.82}
.tug-page-fetch__browse{display:block;width:fit-content;margin:12px auto 0;color:inherit;font-weight:800;text-decoration:none}
.tug-page-fetch__match{scroll-margin-top:110px}
.tug-page-fetch__match.tug-page-fetch__flash{animation:tug-fetch-flash 1.35s ease-out}
@keyframes tug-fetch-flash{0%{background:rgba(215,167,45,.38)}100%{background:transparent}}

/* ---------- LOCI Top ---------- */
.tug-loci-top{
  --tug-primary:#E8B33C;
  --tug-secondary:#222;
  --tug-support:#777;
  --tug-bg:#C9BDA7;
  --tug-text:#222;
  --tug-intro-text:#fff;
  --tug-desktop-x:50%;--tug-desktop-y:50%;
  --tug-tablet-x:50%;--tug-tablet-y:50%;
  --tug-mobile-x:50%;--tug-mobile-y:50%;
  position:relative;width:100%;margin:0;color:var(--tug-text);box-sizing:border-box;background:transparent;
}
.tug-loci-top *, .tug-loci-top *::before,.tug-loci-top *::after{box-sizing:border-box}

/* Escape narrow legacy page columns. v6 also marks clipping ancestors in JS so older theme containers cannot squeeze the LOCI top. */
.tug-loci-breakout-ancestor{overflow:visible!important;overflow-x:visible!important;clip-path:none!important}
.wp-block-shortcode:has(.tug-loci-top){overflow:visible!important;max-width:none!important}
.tug-loci-top__fullbleed{position:relative!important;width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;left:auto!important;right:auto!important;overflow:visible!important;background:#fff}
.tug-loci-top__frame{width:1460px!important;max-width:100vw!important;margin:0 auto!important;background:#fff}

/* Desktop frame is a true 1460 x 470. On narrower desktop screens it scales proportionally until the tablet breakpoint. */
/* Desktop hero stays in the normal WordPress page. Give that block the CSS class `tug-desktop-banner`.
   The plugin swaps in the controlled tablet/mobile banner below 1100px. */
.tug-desktop-banner{display:block!important}
.tug-loci-top__responsive-banner{display:none;width:100%!important;min-height:0;overflow:hidden;background:#eee}
.tug-loci-top__responsive-banner picture,.tug-loci-top__responsive-banner img{display:block;width:100%;height:100%}
.tug-loci-top__responsive-banner img{object-fit:cover}

/* Shop identity above the concierge strip. */
.tug-loci-top__welcome{text-align:center;padding:12px 24px 10px;background:#fff}
.tug-loci-top__title{margin:0!important;color:var(--tug-primary)!important;font-size:clamp(24px,1.9vw,31px)!important;line-height:1.08!important;font-weight:800!important;letter-spacing:-.01em}
.tug-loci-top__subtitle{margin:5px 0 0!important;color:var(--tug-support)!important;font-size:clamp(16px,1.2vw,20px)!important;line-height:1.28!important;font-weight:600!important}

/* Concierge copy gets its own readable strip with editable background + text colors. */
.tug-loci-top__intro{width:100%;margin:0;padding:14px 20px;background:var(--tug-bg)!important;color:var(--tug-intro-text)!important;text-align:left;font-size:15px;line-height:1.48}
.tug-loci-top__intro p{margin:0;color:inherit!important}

/* Guidance dropdowns come before FETCH and span the full 1460px frame. */
.tug-loci-top__accordions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0;padding:0;text-align:left;background:#fff}
.tug-loci-top__accordion{margin:0;border:0;background:transparent}
.tug-loci-top__accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:10px 16px;background:var(--tug-primary)!important;color:var(--tug-secondary)!important;font-weight:800;text-transform:uppercase;cursor:pointer;border-radius:0;font-size:13px}
.tug-loci-top__accordion summary::-webkit-details-marker{display:none}
.tug-loci-top__accordion summary span{font-size:19px;line-height:1;color:var(--tug-secondary)!important}
.tug-loci-top__accordion[open] summary span{transform:rotate(45deg)}
.tug-loci-top__accordion-content{padding:12px 14px;background:#fff;border:1px solid rgba(0,0,0,.12);border-top:0;font-size:14.5px;line-height:1.45;color:var(--tug-text)}
.tug-loci-top__accordion-content p{margin:0 0 8px}.tug-loci-top__accordion-content p:last-child{margin-bottom:0}

/* FETCH + Scroll are paired shopper choices. FETCH is primary; Browse is a smaller secondary path. */
.tug-loci-top__options{width:100%;margin:16px auto 0;background:#fff;padding:0 20px 10px}
.tug-loci-top__fetch{margin:0}
.tug-loci-top .tug-page-fetch{margin:0!important;background:transparent!important;border:0!important;padding:0!important;color:var(--tug-text)!important}
.tug-loci-top .tug-page-fetch__inner{max-width:820px!important;padding:0!important;margin:0 auto!important}
.tug-loci-top .tug-page-fetch__copy{margin-bottom:6px!important;text-align:center}
.tug-loci-top .tug-page-fetch__title{color:var(--tug-text)!important;font-size:17px!important;line-height:1.2!important;margin:0 0 6px!important;font-weight:700!important}
.tug-loci-top .tug-page-fetch__form{max-width:820px!important;margin:0 auto!important}
.tug-loci-top .tug-page-fetch__field-wrap{display:flex;max-width:820px;margin:0 auto;gap:0}
.tug-loci-top .tug-page-fetch__input{min-width:0;flex:1;border:2px solid var(--tug-primary)!important;border-radius:3px 0 0 3px!important;padding:9px 13px!important;font-size:15px!important;background:#fff!important;color:var(--tug-text)!important;min-height:42px}
.tug-loci-top .tug-page-fetch__button{border:2px solid #E9983E!important;border-left:0!important;border-radius:0 3px 3px 0!important;background:#E9983E!important;color:#fff!important;font-weight:800!important;text-transform:lowercase!important;padding:0 24px!important;min-height:42px!important;cursor:pointer}
.tug-loci-top .tug-page-fetch__examples{margin:5px 0 0!important;font-size:12.5px!important;color:var(--tug-text)!important;opacity:.78;text-align:center}
.tug-loci-top .tug-page-fetch__status{max-width:820px!important;margin:7px auto 0!important;color:var(--tug-text)!important}
.tug-loci-top .tug-page-fetch__results{max-width:820px!important;margin:8px auto 0!important;text-align:left}
.tug-loci-top .tug-page-fetch__browse{display:none!important}

/* Browse is intentionally smaller than FETCH so it reads as the secondary path. */
.tug-loci-top__browse-zone{width:min(560px,100%);margin:18px auto 0;padding:0;background:transparent;line-height:0}
.tug-loci-top__browse{display:block;width:100%;margin:0;padding:0;border:0!important;outline:0!important;text-decoration:none!important;line-height:0;background:#000;overflow:hidden}
.tug-loci-top__browse img{display:block;width:100%;height:auto;max-height:50px;object-fit:contain;margin:0;padding:0;border:0!important;outline:0!important;box-shadow:none!important;vertical-align:top}

@media(max-width:1100px){
  .tug-loci-top__frame{width:100vw}
  .tug-desktop-banner{display:none!important}
  .tug-loci-top__responsive-banner{display:block!important;height:42vw!important;max-height:430px!important}
  .tug-loci-top__responsive-banner img{object-position:var(--tug-tablet-x) var(--tug-tablet-y)}
  .tug-loci-top__welcome{padding:11px 18px 9px}
  .tug-loci-top__intro{padding:13px 18px;font-size:14.5px}
  .tug-loci-top__accordion summary{font-size:12px;padding:9px 11px}
  .tug-loci-top__options{width:100%;padding-left:4vw;padding-right:4vw}
}

@media(max-width:760px){
  .tug-page-fetch{margin:14px 0 20px}.tug-page-fetch__inner{padding:17px 14px}.tug-page-fetch__field-wrap{display:block}.tug-page-fetch__input,.tug-page-fetch__button{width:100%}.tug-page-fetch__button{margin-top:8px}
  .tug-loci-top__frame{width:100vw}
  .tug-loci-top__responsive-banner{height:83.333vw!important;max-height:500px!important}
  .tug-loci-top__responsive-banner img{object-position:var(--tug-mobile-x) var(--tug-mobile-y)}
  .tug-loci-top--hide-mobile{display:none!important}
  .tug-loci-top__welcome{padding:11px 13px 9px}
  .tug-loci-top__title{font-size:23px!important}.tug-loci-top__subtitle{font-size:16px!important}
  .tug-loci-top__intro{padding:12px 14px;font-size:14px;line-height:1.42}
  .tug-loci-top__accordions{grid-template-columns:1fr;gap:4px}
  .tug-loci-top__options{width:100%;margin-top:11px;padding:0 12px 9px}
  .tug-loci-top .tug-page-fetch__field-wrap{display:block}.tug-loci-top .tug-page-fetch__input{width:100%;border-radius:3px!important;border:2px solid var(--tug-primary)!important;min-height:42px}.tug-loci-top .tug-page-fetch__button{width:100%;margin-top:5px;border:2px solid #E9983E!important;border-radius:3px!important;min-height:40px}
  .tug-loci-top .tug-page-fetch__title{font-size:16px!important}.tug-loci-top .tug-page-fetch__examples{font-size:12px!important;line-height:1.35}
  .tug-loci-top__browse-zone{width:min(430px,92%);margin-top:14px}
}
