/* ===== Shopping directory — full-width  sidebar | results | map  shell =====
   TYPE, and why it is deliberately two faces:
   Montserrat is the BRAND face — the Lowcountry / Lowcountry Magazine wordmark
   is set in it, so the masthead and the nav beside it keep it. It is a display
   face and reads correctly at that size.
   It is NOT used here. Micro-labels in this directory run 10-11px uppercase
   under 1.5px letterspacing, where Montserrat's wide geometric bowls go soft
   and its sidebearings pull words apart. Those use Archivo, a grotesque drawn
   for small sizes, loaded via lc_enqueue_label_font() in lc-mall-map.php.
   Masthead face vs label face is the system. Do not "unify" them.
   ========================================================================== */
#lc-shops{--lc-ink:#1d2721;--lc-muted:#6b7772;--lc-line:#e3e6e3;--lc-bg:#fff;--lc-bg-soft:#f6f7f5;--lc-accent:#2f6f57;--lc-gold:#b8863b;--lc-head:78px;
  color:var(--lc-ink);background:var(--lc-bg);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}   /* break out of the theme content column to full width */
#lc-shops *{box-sizing:border-box}
#lc-shops .lc-town,#lc-shops .lc-card-cat,#lc-shops .lc-label,#lc-shops .lc-sidebar h3{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px}

/* Top bar: result count + mobile toggles */
#lc-shops .lc-topbar{display:flex;align-items:center;gap:12px;padding:11px 22px;border-bottom:1px solid var(--lc-line)}
#lc-shops .lc-count{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:11px;letter-spacing:1px;color:var(--lc-muted);text-transform:uppercase;margin:0;flex:1}

/* Body: sidebar | results | map */
#lc-shops .lc-body{display:flex;align-items:flex-start}
#lc-shops .lc-sidebar{flex:0 0 258px;width:258px;padding:16px 18px;border-right:1px solid var(--lc-line);
  position:sticky;top:var(--lc-head);align-self:flex-start;max-height:calc(100vh - var(--lc-head));overflow:auto}
#lc-shops .lc-sidebar h3{margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--lc-line);color:var(--lc-muted)}
#lc-shops .lc-sidebar h3:first-child{margin-top:0}
#lc-shops .lc-search{width:100%;padding:9px 10px;border:1px solid var(--lc-line);border-radius:4px;font-family:"PT Serif",Georgia,serif;font-size:14px}
#lc-shops .lc-towns{display:flex;flex-wrap:wrap;gap:6px}
#lc-shops .lc-town{padding:6px 10px;border:1px solid var(--lc-line);border-radius:2px;background:var(--lc-bg);cursor:pointer;color:var(--lc-ink);line-height:1.2}
#lc-shops .lc-town.is-active{background:var(--lc-ink);border-color:var(--lc-ink);color:#fff}
#lc-shops select.lc-select{width:100%;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;padding:9px 10px;border:1px solid var(--lc-line);border-radius:4px;background:var(--lc-bg);color:var(--lc-ink)}
#lc-shops .lc-clear{margin-top:18px;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:var(--lc-accent);background:none;border:none;cursor:pointer;padding:0;display:none}
#lc-shops .lc-clear.on{display:inline-block}

/* Results column — the one that scrolls */
#lc-shops .lc-results{flex:1;min-width:0;padding:16px 22px}
#lc-shops .lc-card{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:12px;border:1px solid var(--lc-line);border-radius:6px;margin-bottom:12px;cursor:pointer;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
#lc-shops .lc-card:hover,#lc-shops .lc-card.is-active{box-shadow:0 6px 20px rgba(0,0,0,.09);border-color:var(--lc-accent)}
/* Featured = a PAID placement, so it is disclosed in words rather than by a
   coloured edge. A 3px gold border told the reader nothing — it neither
   identified the shop as promoted nor stood out much — and a bar down one side
   of a card is a well-worn tell. The label is more prominent for the advertiser
   and honest for the reader, which is the only combination worth shipping. */
#lc-shops .lc-card.is-featured .lc-card-cat::after{
  content:"Featured";margin-left:8px;padding:2px 6px;
  background:var(--lc-gold);color:#fff;border-radius:2px;letter-spacing:1px}
#lc-shops .lc-card img{width:132px;height:104px;object-fit:cover;border-radius:4px;background:var(--lc-bg-soft)}
/* No image element beside it — the shop has no photograph, so the text takes the whole card.
   A card grid is not a ruled list: holding the thumbnail column open for a lone entry would
   read as a card that lost its picture, where closing up reads as a card that never had one.
   The background on the rule above is why the element has to be absent rather than merely
   emptied: a source-less image element still paints that 132x104 fill. */
#lc-shops .lc-card > div:only-child{grid-column:1 / -1}
/* Loading ghost (lc-motion.css, specimen 01) — the placeholder's thumbnail has to
   be the SAME size as the real one or the list still jumps when the shops land,
   which is the entire point of having a ghost. The dimensions live here, next to
   the card they mirror, because the 959px rule below resizes both together and the
   motion kernel has no business knowing this directory's breakpoint. */
#lc-shops .lc-skel-grid{--lc-skel-thumb:132px;--lc-skel-thumb-h:104px;--lc-skel-radius:6px}
#lc-shops .lc-card h3{font-family:"PT Serif",Georgia,serif;font-size:18px;margin:0 0 3px}
#lc-shops .lc-card-cat{color:var(--lc-muted);margin:0 0 6px}
#lc-shops .lc-card-rating{font-size:13px;color:var(--lc-ink)}
#lc-shops .lc-empty{font-family:"PT Serif",Georgia,serif;color:var(--lc-muted);padding:24px 4px}

/* Map — sticky right */
#lc-shops .lc-map{flex:0 0 38%;min-width:340px;position:sticky;top:var(--lc-head);height:calc(100vh - var(--lc-head));border-left:1px solid var(--lc-line)}
#lc-shops #lc-map{width:100%;height:100%}

#lc-shops .lc-toggle,#lc-shops .lc-filters-toggle{display:none}

/* ---- Mobile: sidebar = bottom sheet, map behind a toggle ---- */
@media(max-width:960px){
  #lc-shops .lc-body{flex-direction:column}
  #lc-shops .lc-sidebar{position:fixed;inset:auto 0 0 0;top:auto;width:100%;max-height:80vh;z-index:1200;background:#fff;
    border-right:none;border-top:1px solid var(--lc-line);transform:translateY(100%);transition:transform .25s;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
  #lc-shops .lc-sidebar.lc-open{transform:translateY(0)}
  #lc-shops .lc-results{padding:12px 16px;width:100%}
  #lc-shops .lc-map{flex-basis:auto;width:100%;height:72vh;position:relative;top:0;border-left:none}
  #lc-shops:not(.show-map) .lc-map{display:none}
  #lc-shops.show-map .lc-results{display:none}
  #lc-shops .lc-card{grid-template-columns:100px 1fr}
  #lc-shops .lc-card img{width:100px;height:84px}
  #lc-shops .lc-skel-grid{--lc-skel-thumb:100px;--lc-skel-thumb-h:84px}
  #lc-shops .lc-topbar{position:sticky;top:0;background:#fff;z-index:30}
  #lc-shops .lc-toggle,#lc-shops .lc-filters-toggle{display:inline-block;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;padding:8px 14px;border:1px solid var(--lc-line);border-radius:999px;background:#fff;cursor:pointer;color:var(--lc-ink)}

  /* ---- site bottom bar adopted (lc-mobile-nav funnel reveal) ----------------
     When the shared bar takes over Filters + Map, the page's own floating
     buttons are redundant — hide them so mobile shows ONE bar. .lc-has-bottombar
     is added by adoptBottomBar() ONLY after the handover succeeds; absent the
     bar the floating buttons stay as the fallback. */
  #lc-shops.lc-has-bottombar .lc-toggle,
  #lc-shops.lc-has-bottombar .lc-filters-toggle{display:none}

  /* addReveal MOVES .lc-sidebar into .lc-bottombar__panel (at <body> level,
     OUTSIDE #lc-shops). The panel supplies the scroll + skin, so we only need to
     neutralise the mobile bottom-SHEET positioning the sidebar carries and give
     it sane full-width padding. */
  .lc-bottombar__panel .lc-sidebar{
    position:static;transform:none;inset:auto;z-index:auto;
    width:auto;max-width:none;max-height:none;overflow:visible;
    border-top:0;border-right:0;box-shadow:none;background:transparent;
    padding:4px 2px}

  /* Map action button's pressed accent (aria-pressed toggles inside the bar). */
  #lc-bottombar .lc-shop-mapbtn[aria-pressed="true"]{color:var(--lc-accent,#2f6f57)}
}

/* map pins */
.lc-pin{background:var(--lc-accent,#2f6f57);color:#fff;font:600 11px Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.lc-pin.is-active{background:#b8863b;transform:scale(1.25)}

/* marker popup = mini card w/ thumbnail (matches other directories) */
.leaflet-popup-content{margin:0;width:212px !important}
.leaflet-popup-content-wrapper{padding:0;overflow:hidden;border-radius:6px}
.lc-pop{width:212px}
.lc-pop-img{width:100%;height:118px;object-fit:cover;display:block;background:#f6f7f5}
.lc-pop-body{padding:10px 12px 12px}
.lc-pop-cat{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:#6b7772;margin:0 0 3px}
.lc-pop-name{font-family:"PT Serif",Georgia,serif;font-size:16px;line-height:1.25;margin:0 0 5px;color:#1d2721}
.lc-pop-rating{font-size:12px;color:#1d2721;margin:0 0 9px}
.lc-pop-btn{display:inline-block;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:#fff;background:#2f6f57;padding:7px 13px;border-radius:2px;text-decoration:none}
.lc-pop-btn:hover{background:#255a46}

/* ---- Let the photograph reach the edges and take the menu on top of it ----------------
   Everything between the top of the document and the hero is removed rather than reduced:
   the theme's 70px section padding, the 40px wrapper margin, and the container's own gutter
   and max-width. What is left is a block that fills the viewport because its parents no
   longer constrain it — no 100vw and no negative margin anywhere, which is the arithmetic
   that overflows by the scrollbar width and loops against the sticky header.
   .tm-header-placeholder is not padding. theme.js injects that element to hold space for the
   overlaid navigation, which is why fighting `* + .uk-margin-medium` never moved it. With it
   gone the hero rises under the header, which is the point: the menu belongs ON the picture.
   The margin reset needs the weight because UIkit sets it through `* + .uk-margin-medium`
   with !important of its own. Every rule rides the body class, which exists only when a
   photograph resolved — on a page with no hero the header stays solid and the spacing stands. */
body.lc-shopping-page .tm-header-placeholder{display:none}
body.lc-shopping-page #tm-main{padding-top:0}
body.lc-shopping-page #tm-main > .uk-container{max-width:none;padding-left:0;padding-right:0}
body.lc-shopping-page #tm-main .uk-margin-medium:has(> .lc-shopping-hero){margin-top:0!important}

/* ===== Shopping landing hero (emitted by lc-shop-directory.php section 9) ==========
   Height comes from the type inside it and nothing else. There is no min-height and no vh
   here on purpose: the photograph is atmosphere rather than the subject, so it is a ground
   for the title, and padding it out to a fraction of the viewport would push the directory
   the reader came for below the fold.
   Full width, but structurally: no max-width and no gutter, filling whatever its parents
   give it. The parents are unconstrained by the block above, so this reaches both edges
   without a single viewport unit — see that block for why the vw route is barred. */
.lc-shopping-hero{
  position:relative;width:auto;margin:0 0 22px;
  /* A band this shallow is a thin slice of a 4:3 photograph, so the position is doing real
     work rather than trimming edges. Halfway down is where the shopfronts and their awnings
     sit; higher up is empty sky and lower is bare roadway, and both read as nothing. Phone
     width takes a deeper slice of the same frame than the desktop band does, so any change
     here has to be checked at BOTH widths — a crop that looks composed at 1200px can pull
     something unwanted into view at 384px. */
  background-size:cover;background-position:center 50%;background-color:#1d2721;
  display:flex;align-items:flex-end;
}
/* A short band never reaches a transparent stop, so this darkens the whole frame rather than
   fading out — type at the top of the band would otherwise sit on bright sky. */
/* Top padding is the menu's room, not decoration: the navigation now sits ON the photograph,
   so the title has to start below it. The side padding is 22px to match .lc-topbar, which
   puts the title's left edge on the same line as the shop count directly beneath it. */
.lc-shopping-hero-scrim{
  width:100%;padding:104px 22px 34px;
  background:linear-gradient(to top,rgba(12,16,14,.84) 0%,rgba(12,16,14,.60) 58%,rgba(12,16,14,.34) 100%);
}
/* The theme colours headings itself and wins on specificity — state every colour here rather
   than inheriting, or the H1 renders near-black on the photograph. */
.lc-shopping-hero h1{
  font-family:"PT Serif",Georgia,serif;font-weight:700;color:#fff;
  font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 8px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.lc-shopping-hero p{
  font-family:"PT Serif",Georgia,serif;font-size:clamp(.95rem,1.25vw,1.05rem);line-height:1.45;
  color:rgba(255,255,255,.92);margin:0;max-width:78ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* The heading lives in the hero now; the theme's copy of it would be the same word twice.
   The body class is only present when a photograph resolved, so this can never hide the
   title on a page that has no hero. */
body.lc-shopping-page .uk-article-title{display:none}
@media(max-width:640px){
  /* The mobile header is shorter than the desktop one, so it needs less room over the
     picture — but it is still over it. 22px stays, to hold the count bar's line. */
  .lc-shopping-hero-scrim{padding:86px 22px 26px}
  .lc-shopping-hero p{font-size:.95rem}
}

/* ===== District deep-dive: the same tuck /shopping/ and /find-a-court/ use =============
   Every rule rides .lc-district-page, which exists only when the term actually has a
   photograph — a district without one keeps the solid header and its typographic band,
   because a transparent header over no background renders the whole nav invisible.
   .tm-header-placeholder is an element theme.js injects to hold space for the overlaid
   navigation, not padding; hiding it is what lets the picture rise under the menu. */
body.lc-district-page .tm-header-placeholder{display:none}
body.lc-district-page #tm-main{padding-top:0}
body.lc-district-page #tm-main > .uk-container{max-width:none;padding-left:0;padding-right:0}
body.lc-district-page .uk-margin-medium:has(> .lc-district-hero--img){margin-top:0!important}
/* Full width structurally — no max-width and no gutter, so the block fills whatever its
   parents give it. No 100vw and no negative margin: that arithmetic overflows by the
   scrollbar width and loops against the sticky header. */
/* width:100% is load-bearing, not belt-and-braces. The band carries aspect-ratio:21/6, so
   with only a max-height set the ratio resolves the WIDTH from the height — 320 x 3.5 gave
   a 1120px band on a 1425px viewport and a white strip down the right. An explicit width
   makes the ratio yield to it and drive the height instead. */
body.lc-district-page .lc-district-hero--img{max-width:none;width:100%;margin:0;max-height:320px}
/* The title is bottom-aligned, so the menu lands on the top of the frame where the old
   scrim was almost clear. This adds the top darkening the navigation needs to stay legible
   without touching the bottom gradient the title already relies on. */
body.lc-district-page .lc-district-hero-scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.18) 90px,rgba(0,0,0,.02) 40%,rgba(0,0,0,.60));
  padding-top:96px}
@media(max-width:959px){
  /* The band has to hold the logo AND the title below it, and 21/6 at phone width is only
     about 118px, so the floor rises rather than the type shrinking. */
  body.lc-district-page .lc-district-hero--img{min-height:240px}
  body.lc-district-page .lc-district-hero-scrim{padding-top:78px}
}

/* district deep-dive hero (unchanged) */
.lc-district-hero{max-width:1520px;margin:26px auto 4px;padding:0 clamp(20px,4vw,56px)}
.lc-district-kicker{margin:0 0 6px;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#9a938a}
.lc-district-hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.05;margin:0;color:#111}
.lc-district-hero .lc-district-blurb{font-size:15px;color:#666;max-width:65ch;margin:10px 0 0}
.lc-district-hero--img{max-width:1520px;margin:14px auto 4px;padding:0;background:#111 center/cover no-repeat;aspect-ratio:21/6;min-height:170px;max-height:280px;overflow:hidden;display:flex}
.lc-district-hero-scrim{flex:1;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.02) 40%,rgba(0,0,0,.55));padding:20px clamp(20px,3vw,44px)}
.lc-district-hero--img .lc-district-kicker{color:rgba(255,255,255,.75)}
.lc-district-hero--img h1{color:#fff}
.lc-district-hero--img .lc-district-blurb{color:rgba(255,255,255,.92)}

/* ===== Store single — rendered by the ONE YT template (lcSingleShop) via [lc_shop_*] shortcodes ===== */
/* Hero image: CONSTRAINED, never the theme default's full-bleed blow-up */
.lc-shop-hero{margin:0;text-align:center}
.lc-shop-hero-img{display:inline-block;width:100%;max-width:820px;max-height:460px;height:auto;object-fit:cover;border-radius:8px;aspect-ratio:16/10}
.lc-shop-single{--lc-accent:#2f6f57;--lc-line:#e3e6e3;--lc-muted:#6b7772;font-family:"PT Serif",Georgia,serif;max-width:760px;margin:0 auto}
.lc-shop-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 0 12px}
.lc-chip{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;padding:5px 12px;border-radius:999px;background:var(--lc-line);color:#1d2721}
.lc-shop-chips a.lc-label{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:var(--lc-accent);text-decoration:none;border-bottom:1px solid var(--lc-accent)}
.lc-shop-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin:0 0 12px;font-family:"PT Serif",Georgia,serif;font-size:16px;color:#1d2721}
.lc-shop-rating{color:#b8863b}
.lc-shop-price{color:var(--lc-muted)}
.lc-shop-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:16px;color:#1d2721}
.lc-shop-facts a{color:var(--lc-accent);text-decoration:none}
.lc-shop-facts a:hover{text-decoration:underline}
.lc-shop-map{height:320px;border:1px solid var(--lc-line,#e3e6e3);border-radius:8px;overflow:hidden}
.lc-shop-hoursbox{margin:0 0 20px}
.lc-shop-h{font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:#6b7772;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #e3e6e3}
.lc-hours{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;margin:0;padding:10px 12px;background:#f6f7f5;border:1px solid var(--lc-line);border-radius:4px}
/* ===== "Explore nearby" rail (store single, rendered by lc-shops.js) =====
   The rail is placed by the builder into a plain column, OUTSIDE .lc-shop-single, so it
   inherits none of that block's custom properties. Declaring them here keeps the rail
   self-sufficient wherever the layout puts it — without this the separators and the hover
   colour resolved to nothing and silently dropped out. Every var() below also carries a
   literal fallback for the same reason.
   box-sizing is set on the rail's own classes, never globally: a page-wide reset changes
   how unrelated links measure elsewhere in this theme. */
#lc-shop-nearby{--lc-line:#e3e6e3;--lc-muted:#6b7772;--lc-ink:#1d2721;--lc-accent:#2f6f57;margin-top:0}
#lc-shop-nearby .lc-label{display:block;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:600;color:var(--lc-muted,#6b7772);margin:26px 0 6px}
#lc-shop-nearby .lc-label:first-child{margin-top:0}
.lc-nearby-link{box-sizing:border-box;display:block;padding:9px 0;text-decoration:none;
  color:var(--lc-ink,#1d2721);border-bottom:1px solid var(--lc-line,#e3e6e3)}
/* A group carrying photographs runs as a two-column row. The names sit on ONE edge whether
   or not a given item has a picture, because a text row that jumps back to the rail's left
   margin mid-list reads as images that failed rather than as a deliberate difference. The
   reserved column is empty space only — nothing is drawn in it, so it reads as an indent. */
.lc-nearby-link.is-illustrated{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
/* No thumbnail element beside it — either the item has no photograph, or its URL 404'd and
   the script dropped the element. Either way the text is pushed to the second column by
   hand: a lone child would land in the 64px track instead and wrap a word per line. */
.lc-nearby-link.is-illustrated .lc-nearby-text:only-child{grid-column:2}
.lc-nearby-thumb{display:block;width:64px;height:48px;object-fit:cover;transition:opacity .18s ease}
.lc-nearby-name{display:block;font-family:"PT Serif",Georgia,serif;font-size:15px;line-height:1.3;transition:color .18s ease}
/* 1.2px is the label tracking this directory uses everywhere else. It is not tuned to make
   any particular string fit: the line is kept short enough to clear the narrowest column
   instead, which is 262px just above the 960px breakpoint, not the 353px it reaches at
   1440. Tightening tracking to buy width only moves the wrap to a smaller screen. */
.lc-nearby-meta{display:block;margin-top:3px;font-family:Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform:uppercase;letter-spacing:1.2px;font-size:10px;color:var(--lc-muted,#6b7772)}
/* The photograph dims with the title so the row reads as one target rather than as a
   picture sitting next to a link. */
.lc-nearby-link:hover .lc-nearby-name{color:var(--lc-accent,#2f6f57)}
.lc-nearby-link:hover .lc-nearby-thumb{opacity:.85}
.lc-nearby-link:focus-visible{outline:2px solid var(--lc-accent,#2f6f57);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.lc-nearby-thumb,.lc-nearby-name{transition:none}}

/* ===== Single shop hero — the photograph owns the top of the viewport ==============
   The photo is the builder section's own background image, bound to the featured image,
   which is what lets the navigation overlay it. These rules own the scrim, the type, and
   the state a shop with no photograph falls back to. */
/* The theme's JS inserts an 80px spacer so page content clears an overlapping header. The
   photograph owns the top of the viewport here, so nothing needs clearing. The section's own
   opt-out attribute is not enough: the spacer is anchored to the first element matching
   [class*="uk-section"] after the header, and a styleless section carries no such class, so
   the spacer lands in the NEXT section instead — inside the action bar. Scoped to the single,
   since the shopping landing and district pages still want it. */
body.single-shop .tm-header-placeholder{display:none}
.lc-shophero{position:relative;
  /* Around 4% of shops carry no photograph. The section then renders no background layer
     at all, and light navigation text over a white page is invisible — so the plate below
     is what keeps the header and the title legible. Grain and an off-centre radial keep it
     reading as a cover rather than a flat fill. */
  background-color:#1d2721;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
                   radial-gradient(120% 95% at 18% 0%,#32473b 0%,#22302a 45%,#161d19 100%);}
/* Two scrims: the upper one keeps the overlaid navigation legible over a bright
   photograph, the lower one carries the title. */
.lc-shophero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,20,17,.62),rgba(15,20,17,0) 220px),
             linear-gradient(to top,rgba(15,20,17,.80),rgba(15,20,17,.22) 58%,rgba(15,20,17,.06));}
/* A photograph earns the full height; a plate does not. With no photo the builder renders no
   background layer, so that absence sizes the hero down — the shop's own details come nearer
   the first screen instead of sitting under a tall empty rectangle — and the scrim lifts,
   since it exists to hold the navigation legible over a BRIGHT photograph and over the plate
   it only flattens the gradient. The height arrives inline, so the override needs the weight. */
.lc-shophero:not(:has([class*="uk-background"])){min-height:clamp(340px,44vh,470px)!important}
.lc-shophero:not(:has([class*="uk-background"]))::after{
  background:linear-gradient(to bottom,rgba(15,20,17,.30),rgba(15,20,17,0) 190px)}
/* z-index lifts the type clear of the scrim, which paints as the section's last child. */
.lc-shop-heroinner{position:relative;z-index:1;color:#fff;padding-top:100px}
.lc-shop-eyebrow{font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;
  letter-spacing:2px;font-size:11px;font-weight:600;color:#f0e4cf;margin:0 0 10px}
.lc-shop-title{font-family:"PT Serif",Georgia,serif;font-weight:700;font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin:0 0 12px;color:#fff}
.lc-shop-herometa{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  font-family:"PT Serif",Georgia,serif;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.lc-shop-stars .lc-star{color:#b8863b}
.lc-shop-stars b{font-weight:700}
.lc-shop-rev{color:rgba(255,255,255,.75)}
.lc-shop-pricetag{font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:1px}

/* ===== Action bar — parks under the overlaid navigation ===== */
.lc-shopactions{background:#fff;border-bottom:1px solid var(--lc-line,#e3e6e3);position:sticky;top:0;z-index:20}
/* The desktop navigation stays stuck at 80px tall, so the bar parks beneath it. The mobile
   header is absolute and scrolls away with the page, so below the breakpoint top:0 is right. */
@media(min-width:960px){.lc-shopactions{top:80px}}
/* A shop with no website, phone or coordinates renders no buttons, but the builder still
   emits the section wrappers — without this the border draws as a stray line. */
.lc-shopactions:not(:has(.lc-shop-actionsinner)){display:none}
.lc-shop-actionsinner{display:flex;flex-wrap:wrap;gap:10px;padding:14px 0}
.lc-shop-btn{display:inline-flex;align-items:center;font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:600;text-decoration:none;
  padding:12px 20px;border-radius:2px;border:1px solid var(--lc-line,#e3e6e3);color:#1d2721;background:#fff;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.lc-shop-btn:hover{border-color:var(--lc-muted,#6b7772);background:#f6f7f5;color:#1d2721}
.lc-shop-btn:active{transform:translateY(1px)}
.lc-shop-btn:focus-visible{outline:2px solid var(--lc-accent,#2f6f57);outline-offset:2px}
.lc-shop-btn--primary{background:var(--lc-accent,#2f6f57);border-color:var(--lc-accent,#2f6f57);color:#fff}
.lc-shop-btn--primary:hover{background:#285f4a;border-color:#285f4a;color:#fff}

/* ===== Body blocks introduced with the hero ===== */
/* The About block carries the gap below itself rather than the map carrying one above it,
   so a shop with no prose starts its map level with the hours beside it. */
.lc-shop-aboutbox{margin:0 0 40px}
.lc-shop-about{font-family:"PT Serif",Georgia,serif;font-size:1.05rem;line-height:1.7;color:#1d2721;
  max-width:62ch;text-wrap:pretty;margin:0}
/* The map runs the width of the main column, so a 320px band reads as a strip rather than a
   place. Height is raised only where the column is wide. */
.lc-shop-findit .lc-shop-map{margin:0}
@media(min-width:960px){.lc-shop-findit .lc-shop-map{height:440px}}
.lc-shop-addr{font-family:"PT Serif",Georgia,serif;font-size:.98rem;line-height:1.6;color:#1d2721;margin:12px 0 0}
.lc-shop-tail{margin-top:30px;padding-top:18px;border-top:1px solid var(--lc-line,#e3e6e3)}
.lc-shop-tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.lc-shop-back{display:inline-block;font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:600;
  color:var(--lc-accent,#2f6f57);text-decoration:none}
.lc-shop-back:hover{color:#285f4a;text-decoration:underline}

@media(max-width:959px){
  /* dvh keeps the hero from resizing as a mobile browser's address bar collapses, and a
     shorter hero brings the shop's details nearer the first screen. The builder writes the
     height as an inline style on the background layer, so the override needs the weight.
     Both selectors are needed: with a photograph the height sits on the image layer, and
     without one it sits on the section itself. */
  .lc-shophero.uk-section,.lc-shophero .uk-section{min-height:clamp(400px,58dvh,600px)!important}
  /* The plate is shorter than a photograph at every width, so it needs restating here —
     the rule above matches the same element and would otherwise win on order. */
  .lc-shophero:not(:has([class*="uk-background"])).uk-section{min-height:clamp(330px,44dvh,430px)!important}
  .lc-shop-heroinner{padding-top:150px}
  .lc-shop-btn{padding:11px 16px}
}
@media(prefers-reduced-motion:reduce){.lc-shop-btn{transition:none}}