/* Lowcountry Store — storefront styles. Inherits the theme's palette (currentColor +
   neutral grays); image-first cards, classic left-sidebar cart layout, fluid width. */

/* Full-bleed breakout: the app escapes the theme's boxed content column and uses the
   whole viewport, with fluid gutters. */
#lc-store-app { width: 100vw; position: relative; left: 50%; margin-left: -50vw;
  padding: 0 clamp(16px, 3.5vw, 56px) 60px; box-sizing: border-box; }
#lc-store-app .lcs-h { margin: 24px 0 4px; font-size: 1.9rem; }
#lc-store-app .lcs-sub { margin: 0 0 14px; opacity: .7; }
#lc-store-app .lcs-meta { margin: 4px 0 10px; font-size: .85rem; opacity: .6; }
#lc-store-app .lcs-h3 { margin: 10px 0 10px; font-size: 1.25rem; }
.lcs-shelves .lcs-h3 { margin-top: 26px; }

/* ask — fluid: tracks the page width like everything else */
.lcs-ask { width: 100%; }
.lcs-ask-form { display: flex; gap: 8px; }
.lcs-ask-input { flex: 1; padding: 13px 16px; font-size: 1rem; border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px; background: #fff; min-width: 0; }
.lcs-ask-input:focus { outline: 2px solid rgba(0,0,0,.35); outline-offset: 1px; }
.lcs-ask-btn { padding: 13px 26px; border: 0; border-radius: 999px; background: #1a1a1a; color: #fff;
  font-size: 1rem; cursor: pointer; }
.lcs-ask-btn:hover { opacity: .85; }
.lcs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.lcs-chip { border: 1px solid rgba(0,0,0,.15); background: transparent; border-radius: 999px;
  padding: 6px 14px; font-size: .85rem; cursor: pointer; color: inherit; }
.lcs-chip:hover { background: rgba(0,0,0,.06); }
.lcs-thread { margin-top: 16px; }
.lcs-msg { margin: 10px 0; }
.lcs-msg-user { font-weight: 600; }
.lcs-msg-user::before { content: 'You — '; opacity: .5; font-weight: 400; }
.lcs-msg-ai .lcs-msg-text { line-height: 1.55; white-space: pre-wrap; }
.lcs-thinking { opacity: .55; font-style: italic; }

/* body split: sidebar + main (the classic cart layout) */
.lcs-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(18px, 2.5vw, 40px);
  align-items: start; margin-top: 10px; }
.lcs-main { min-width: 0; }
.lcs-mobile-filters { display: none; }

/* sidebar filter groups */
.lcs-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto;
  padding-right: 4px; }
.lcs-fgroup { border-bottom: 1px solid rgba(0,0,0,.09); padding: 2px 0; }
.lcs-fgroup-h { display: flex; justify-content: space-between; align-items: center; width: 100%;
  border: 0; background: transparent; padding: 11px 2px; font-size: .82rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer; color: inherit; }
.lcs-fgroup-h i { font-style: normal; transition: transform .15s; }
.lcs-fgroup.open .lcs-fgroup-h i { transform: rotate(180deg); }
.lcs-fgroup-b { display: none; padding: 2px 2px 12px; }
.lcs-fgroup.open .lcs-fgroup-b { display: block; }
.lcs-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .9rem;
  cursor: pointer; }
.lcs-check input { accent-color: #1a1a1a; width: 16px; height: 16px; margin: 0; flex: none; }
.lcs-check span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lcs-check b { font-weight: 400; font-size: .75rem; opacity: .5; margin-left: 2px; }
.lcs-select { padding: 8px 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px;
  background: #fff; font-size: .9rem; color: inherit; }
.lcs-select-full { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.lcs-fgroup-b .lcs-toggle { margin: 0 6px 8px 0; }

/* color swatches */
.lcs-swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.22);
  padding: 0; display: inline-block; flex: none; }
.lcs-swatch-sm { width: 17px; height: 17px; vertical-align: middle; }

/* store filter chip */
.lcs-store-link { border: 0; background: transparent; padding: 0; color: inherit; font: inherit;
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25);
  text-underline-offset: 2px; }
.lcs-store-link:hover { text-decoration-color: currentColor; }
.lcs-store-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px;
  padding: 7px 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; font-size: .88rem;
  background: rgba(0,0,0,.03); }
.lcs-chip-x { border: 0; background: transparent; font-size: 1.05rem; cursor: pointer;
  padding: 0 2px; line-height: 1; color: inherit; opacity: .6; }
.lcs-chip-x:hover { opacity: 1; }

/* card rows + grid — fluid, fills whatever width the viewport gives */
.lcs-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 230px);
  gap: 14px; overflow-x: auto; padding: 6px 2px 12px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; }
.lcs-row .lcs-card { scroll-snap-align: start; }
.lcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-top: 8px; }

/* card */
.lcs-card { display: flex; flex-direction: column; text-decoration: none !important;
  color: inherit !important; border-radius: 10px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0,0,0,.08); transition: box-shadow .15s, transform .15s; cursor: pointer; }
.lcs-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.lcs-card-imgwrap { position: relative; display: block; aspect-ratio: 1 / 1.05; overflow: hidden;
  background: #f2f1ef; }
.lcs-card-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcs-badge { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: .68rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 4px; background: #1a1a1a; color: #fff; }
.lcs-badge-sale { background: #a33; }
.lcs-badge-local { background: #3d5a46; left: auto; right: 44px; }
.lcs-badge-inline { position: static; margin-left: 6px; right: auto; }
.lcs-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.lcs-card-title { font-size: .92rem; font-weight: 600; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcs-card-store { font-size: .78rem; opacity: .65; }
.lcs-card-price { font-size: .95rem; font-weight: 700; margin-top: 2px; }
.lcs-card-price s { opacity: .5; font-weight: 400; margin-left: 6px; }

/* hearts + try-on */
.lcs-heart { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: rgba(0,0,0,.35);
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.lcs-heart svg { display: block; }
.lcs-heart.on { color: #c0392b; }
.lcs-heart:hover { transform: scale(1.1); }
@keyframes lcs-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.lcs-heart.pop, .lcs-qv-fav.pop { animation: lcs-pop .3s ease; }
.lcs-tryon-btn { position: absolute; bottom: 8px; right: 8px; z-index: 2; border: 0;
  border-radius: 999px; background: rgba(26,26,26,.85); color: #fff; font-size: .72rem;
  padding: 5px 11px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.lcs-card:hover .lcs-tryon-btn { opacity: 1; }
@media (hover: none) { .lcs-tryon-btn { opacity: 1; } }

/* toggles */
.lcs-toggle { padding: 8px 14px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px;
  background: transparent; font-size: .9rem; cursor: pointer; color: inherit; }
.lcs-toggle.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.lcs-clear { opacity: .65; margin-top: 12px; }
.lcs-count { min-height: 1.2em; }
.lcs-more { display: block; margin: 26px auto 0; padding: 11px 30px; border: 1px solid rgba(0,0,0,.25);
  border-radius: 999px; background: transparent; font-size: .95rem; cursor: pointer; color: inherit; }
.lcs-more:hover { background: rgba(0,0,0,.06); }

/* What the infinite-scroll observer watches. It is deliberately NOT the button: the two used
   to be one element, which is why the button could never be hidden without stopping the
   scrolling with it. 1px rather than 0, because a zero-height box is not reliably reported as
   intersecting. */
.lcs-sentinel { height: 1px; }

/* Auto-loading works, so the button is the answer to a failure and not the furniture at the
   end of every page. A reader who reaches the bottom and meets a button presses it, whatever
   it was there for, so leaving it on screen makes it the primary control by accident.

   Hidden visually and kept in the tab order rather than removed, so a reader moving by keyboard
   still meets a real control - focusing it drops this rule and the button returns at full size. */
.lcs-more.is-auto:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* fitting room */
.lcs-fit { max-width: 700px; }
.lcs-fit h4 { font-size: 1.3rem; }
.lcs-fit-how { font-size: .92rem; line-height: 1.5; opacity: .8; margin: 4px 0 6px; }
.lcs-fit-sec { margin-top: 16px; }
.lcs-fit-sec h5 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; }
.lcs-fit-sec h5 i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400;
  opacity: .6; }
.lcs-fit-tips { font-size: .88rem; line-height: 1.55; background: rgba(0,0,0,.035);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; }
.lcs-fit-thumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lcs-fit-thumb { position: relative; width: 84px; height: 106px; border-radius: 9px;
  overflow: hidden; background: #f2f1ef; }
.lcs-fit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcs-fit-add { width: 84px; height: 106px; border: 1.5px dashed rgba(0,0,0,.3); border-radius: 9px;
  background: transparent; cursor: pointer; font-size: .78rem; color: inherit; padding: 6px; }
.lcs-fit-add:hover { background: rgba(0,0,0,.04); }
.lcs-fit-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; line-height: 20px;
  padding: 0; cursor: pointer; }
.lcs-fit-remember { margin-top: 10px; font-size: .84rem; }
.lcs-fit-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 6px;
  border-radius: 9px; cursor: pointer; }
.lcs-fit-item:hover { background: rgba(0,0,0,.035); }
.lcs-fit-item input { accent-color: #1a1a1a; width: 16px; height: 16px; flex: none; }
.lcs-fit-item img { width: 44px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.lcs-fit-item-t { font-size: .86rem; line-height: 1.35; min-width: 0; }
.lcs-fit-item-t b { font-weight: 400; opacity: .6; font-size: .78rem; }
.lcs-fit-item .lcs-fit-x { position: static; margin-left: auto; background: rgba(0,0,0,.15);
  color: #333; }
.lcs-fit-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lcs-fit-gen:disabled { opacity: .5; cursor: wait; }
.lcs-fit-note { font-size: .85rem; opacity: .75; }
.lcs-fit-result { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); }
.lcs-fit-result img { width: 100%; border-radius: 10px; display: block; }
.lcs-fit-result-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lcs-fit-buy { text-decoration: none !important; font-size: .82rem; }
.lcs-fit-pill { bottom: 68px; }
@media (max-width: 560px) { .lcs-fit-result { grid-template-columns: 1fr; } }

/* favorites pill + drawer */
.lcs-fav-pill { position: fixed; right: 18px; bottom: 18px; z-index: 998; border: 0;
  border-radius: 999px; background: #1a1a1a; color: #fff; font-size: .95rem; padding: 11px 18px;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.lcs-drawer { position: fixed; top: 0; right: -420px; width: min(400px, 92vw); height: 100vh;
  z-index: 999; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.15);
  transition: right .25s ease; display: flex; flex-direction: column; }
.lcs-drawer.open { right: 0; }
.lcs-drawer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
.lcs-drawer-close { border: 0; background: transparent; font-size: 1.5rem; cursor: pointer;
  line-height: 1; padding: 2px 8px; color: inherit; }
.lcs-drawer-body { overflow-y: auto; padding: 14px; }
.lcs-grid-drawer { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; }

/* product quick view */
.lcs-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.lcs-modal-box { position: relative; background: #fff; border-radius: 14px; max-width: 480px;
  width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px; }
.lcs-modal-box h4 { margin: 0 30px 6px 0; font-size: 1.05rem; }
.lcs-modal-box .lcs-drawer-close { position: absolute; top: 10px; right: 10px; }
.lcs-modal-body { margin-top: 12px; text-align: center; }
.lcs-tryon-img { max-width: 100%; border-radius: 10px; }
.lcs-modal-body .lcs-ask-btn { display: inline-block; margin-top: 10px; text-decoration: none; }
.lcs-qv { max-width: 820px; }
.lcs-qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.lcs-qv-imgwrap { border-radius: 10px; overflow: hidden; background: #f2f1ef; }
.lcs-qv-imgwrap img { width: 100%; display: block; }
.lcs-qv-info h4 { margin: 0 24px 4px 0; font-size: 1.2rem; line-height: 1.3; }
.lcs-qv-store { margin: 0 0 8px; font-size: .85rem; opacity: .75; }
.lcs-qv-price { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.lcs-qv-price s { opacity: .5; font-weight: 400; margin-left: 8px; }
.lcs-qv-blurb { font-size: .92rem; line-height: 1.5; margin: 0 0 12px; }
.lcs-qv-opts { font-size: .82rem; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 5px;
  align-items: center; }
.lcs-qv-opts span { opacity: .55; margin-right: 3px; text-transform: uppercase; font-size: .68rem;
  letter-spacing: .06em; }
.lcs-qv-opts em { font-style: normal; border: 1px solid rgba(0,0,0,.15); border-radius: 5px;
  padding: 2px 8px; }
.lcs-qv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; align-items: center; }
.lcs-qv-buy { text-decoration: none !important; }
.lcs-qv-fav.on { background: #c0392b; border-color: #c0392b; color: #fff; }
@media (max-width: 560px) { .lcs-qv-grid { grid-template-columns: 1fr; } }

/* mobile: filters live in the SITE bottom bar's funnel reveal (lc-mobile-nav addReveal
   moves .lcs-side into .lc-bottombar__panel and back to the grid on desktop). The inline
   "Filters & sort" toggle only exists as the no-bottombar fallback. */
@media (max-width: 860px) {
  #lc-store-app .lcs-h { font-size: 1.5rem; }
  .lcs-ask-btn { padding: 13px 18px; }
  .lcs-body { grid-template-columns: 1fr; }
  .lcs-mobile-filters { display: block; width: 100%; margin-bottom: 4px; }
  .lcs-body > .lcs-side { display: none; position: static; max-height: none; }
  .lcs-body.filters-open > .lcs-side { display: block; border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px; padding: 6px 14px 10px; background: rgba(0,0,0,.02); }
  .lcs-body.lcs-has-bottombar .lcs-mobile-filters { display: none; }
  .lcs-row { grid-auto-columns: minmax(150px, 170px); }
  .lcs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* inside the bottom-bar panel: plain full-width block, its own scroll/skin */
.lc-bottombar__panel .lcs-side { display: block; position: static; max-height: none;
  overflow: visible; padding: 14px 16px; }

/* ---------------------------------------------------------------- nothing matched
   The warm ground is the tone the card image wells already use, so the block reads as the
   surface the results would have sat on rather than as a card floating over the page.

   The micro-labels take the theme's UI face through --lc-sans, the same indirection the other
   lc-* surfaces use. The store's own filter chrome renders in the browser's default button face
   because nothing declares a family on those buttons; that is an accident rather than a system,
   so it is not copied here. */
.lcs-void,
.lcs-side-note { --lcs-ui: var(--lc-sans, "Montserrat", "Helvetica Neue", Arial, sans-serif); }

.lcs-void { background: #f2f1ef; border-radius: 10px; padding: 30px 32px 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  column-gap: clamp(28px, 4vw, 56px); row-gap: 24px; align-items: start; margin: 2px 0 0; }
.lcs-void-say { grid-column: 1; }
h3.lcs-void-h { font-family: "Playfair Display", serif; font-size: 1.55rem; font-weight: 400;
  line-height: 1.25; color: #2d2e33; margin: 0 0 10px; max-width: 22ch; }
.lcs-void-p { font-size: .95rem; line-height: 1.6; color: #4a4b51; margin: 0; max-width: 46ch; }

.lcs-void-acts { grid-column: 2; }
.lcs-void-lbl { font-family: var(--lcs-ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #5d5e64; margin: 0 0 2px; padding: 0 2px; }
.lcs-void-list { list-style: none; margin: 0 0 14px; padding: 0; }
.lcs-void-list li { margin: 0; border-top: 1px solid rgba(0, 0, 0, .1); }

/* The whole row is the control, so the target is the row and not the word at its end. The
   negative margin lets the hover ground run wider than the rules above it, which is what makes
   the row read as lifting off the panel rather than as a highlighted table cell. */
.lcs-void-drop { display: flex; align-items: baseline; gap: 12px; text-align: left;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  padding: 11px 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 7px;
  transition: background .16s ease, color .16s ease; }
.lcs-void-drop:hover { background: #fff; }
.lcs-void-drop:focus-visible { background: #fff; outline: 2px solid #1a1a1a; outline-offset: -2px; }

/* A fixed label column, so the values line up whatever the dimension is called. */
.lcs-void-dim { flex: none; min-width: 78px; font-family: var(--lcs-ui); font-size: .68rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5d5e64; }
.lcs-void-val { flex: 1 1 auto; min-width: 0; font-size: .98rem; color: #2d2e33;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcs-void-act { flex: none; font-family: var(--lcs-ui); font-size: .8rem; color: #5d5e64; }
.lcs-void-drop:hover .lcs-void-act,
.lcs-void-drop:focus-visible .lcs-void-act { color: #1a1a1a; }

.lcs-void-clear { background: #1a1a1a; color: #fff; border-color: #1a1a1a; width: 100%; }
.lcs-void-clear:hover { opacity: .85; }
.lcs-void-clear:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

.lcs-void-shelf { margin-top: 32px; }

/* Sits at the top of the filter aside whenever a filter is on, and travels with the aside into
   the mobile bottom-bar panel because it is a child of it. The bottom rule continues the
   .lcs-fgroup rhythm, so it reads as the first item of the list rather than a card above it. */
.lcs-side-note { margin: 0 0 2px; padding: 0 2px 12px; font-family: var(--lcs-ui);
  font-size: .78rem; line-height: 1.45; color: #5d5e64;
  border-bottom: 1px solid rgba(0, 0, 0, .09); }

/* Kept in the accessibility tree and out of the layout — the same technique .lcs-more.is-auto
   already uses above, so the headline is announced once rather than printed twice. */
.lcs-vis-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 860px) {
  .lcs-void { grid-template-columns: 1fr; padding: 22px 20px; row-gap: 20px; }
  .lcs-void-say,
  .lcs-void-acts { grid-column: 1; }
  h3.lcs-void-h { font-size: 1.3rem; max-width: none; }
  .lcs-void-p { max-width: none; }
  .lcs-void-shelf { margin-top: 26px; }
}

/* How much comes back if this filter goes. Five rows reading 0, 0, 288, 0, 0 answer the
   question the panel exists to answer, and no amount of prose does.

   Its own column rather than part of the value, so the numbers line up and can be compared down
   the list — which is the whole use. Empty until the count arrives, and empty forever if it
   never does, so the row never reserves space for something that is not coming. */
.lcs-void-n { flex: none; font-family: var(--lcs-ui); font-size: .78rem; color: #5d5e64;
  font-variant-numeric: tabular-nums; }
.lcs-void-n:empty { display: none; }
.lcs-void-drop:hover .lcs-void-n,
.lcs-void-drop:focus-visible .lcs-void-n { color: #2d2e33; }

/* At narrow widths the count takes its own line rather than the value's space.
   Measured at 414: with all four parts on one line the value truncated to "Home...", "$25 t..."
   and "On s...", so the row named a count precisely and the filter it belonged to not at all.
   The reader cannot act on a control that will not say what it removes.

   ⛔ Shortening the count to a bare number instead was rejected: a lone figure beside a filter
   reads as how many MATCH it, which is the ambiguity the whole panel exists to remove. */
@media (max-width: 860px) {
  .lcs-void-drop { flex-wrap: wrap; }
  .lcs-void-n { order: 3; flex: 1 0 100%; padding-left: 90px; margin-top: 3px; }
}