/* ==========================================================================
   SOPHOLIAGE — RETAIL STOREFRONT COMPONENT
   Depends on theme.css (colors, .btn, .card, .badge, .field).
   Scoped under .sf- (Storefront) prefix to avoid collisions.
   ========================================================================== */

.sf-widget {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Toolbar: category filters + cart button
   ------------------------------------------------------------------------- */
.sf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.sf-filter-chip {
  font-family: var(--font-tabs);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5em 1.1em;
  font-size: var(--fs-sm);
  cursor: pointer;
  background: var(--color-bg);
  transition: all var(--duration-fast) var(--ease-standard);
}
.sf-filter-chip:hover { border-color: var(--color-sage); }
.sf-filter-chip.is-active {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
  color: var(--color-cream);
}

.sf-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6em 1.2em;
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.sf-cart-btn:hover { border-color: var(--color-sage); }
.sf-cart-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--color-mauve);
  color: var(--color-cream);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Product grid
   ------------------------------------------------------------------------- */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.sf-product-card { display: flex; flex-direction: column; }
.sf-product-card .card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Placeholder swatch until real product photography is wired to each SKU */
.sf-product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background:
    repeating-linear-gradient(135deg, var(--color-cream-deep), var(--color-cream-deep) 10px, var(--color-bg-raised) 10px, var(--color-bg-raised) 20px);
}

.sf-product-card__badges { display: flex; gap: 0.4em; margin-bottom: 0.4em; }

.sf-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0.3em 0 0.6em;
}
.sf-product-card__price { font-weight: 700; color: var(--color-moss); font-size: var(--fs-md); }
.sf-product-card__price--was { text-decoration: line-through; color: var(--color-text-muted); font-size: var(--fs-sm); }

.sf-variant-select {
  width: 100%;
  margin-bottom: 0.6em;
  padding: 0.5em 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.sf-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Cart drawer
   ------------------------------------------------------------------------- */
.sf-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 42, 34, 0.5);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease-standard);
}
.sf-cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.sf-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-med) var(--ease-standard);
}
.sf-cart-overlay.is-open .sf-cart-drawer { transform: translateX(0); }

.sf-cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sf-cart-drawer__close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 0.2em 0.4em;
}

.sf-cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.sf-cart-drawer__footer { padding: var(--space-4); border-top: 1px solid var(--color-border); }

.sf-cart-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sf-cart-item:last-child { border-bottom: none; margin-bottom: 0; }
.sf-cart-item__thumb {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(135deg, var(--color-cream-deep), var(--color-cream-deep) 6px, var(--color-bg-raised) 6px, var(--color-bg-raised) 12px);
}
.sf-cart-item__name { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.1em; }
.sf-cart-item__variant { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 0.4em; }
.sf-cart-item__row { display: flex; justify-content: space-between; align-items: center; }

.sf-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.sf-qty-stepper button {
  width: 1.8rem; height: 1.8rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-accent-strong);
}
.sf-qty-stepper span { min-width: 1.6rem; text-align: center; font-size: var(--fs-sm); }

.sf-cart-item__remove {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.sf-cart-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-6) var(--space-2); }

.sf-cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.sf-toast {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--color-accent-strong);
  color: var(--color-cream);
  padding: 0.7em 1.4em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-med) var(--ease-standard);
}
.sf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------------
   Checkout step (contact + card, inside the same drawer)
   ------------------------------------------------------------------------- */
.sf-card-element-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85em;
  background: var(--color-bg);
}
.sf-card-mock {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  text-align: center;
}
.sf-checkout-banner {
  display: none;
  background: rgba(160,90,78,0.12);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.9em;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.sf-checkout-banner.is-visible { display: block; }

.sf-fulfillment-toggle {
  display: flex;
  gap: 0.6em;
  margin-bottom: var(--space-3);
}
.sf-fulfillment-option {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.sf-fulfillment-option.is-selected { border-color: var(--color-accent-strong); background: var(--color-bg-raised); }
.sf-fulfillment-option input { display: none; }
.sf-fulfillment-option__title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.2em; }
.sf-fulfillment-option__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }

.sf-shipping-banner {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6em 1em;
  font-size: var(--fs-sm);
  color: var(--color-accent-strong);
  margin-bottom: var(--space-3);
}

.sf-pickup-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  padding: 0.7em 1em;
  margin-bottom: var(--space-3);
}

.sf-cart-subtotal-row--minor {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-bottom: 0.3em;
}


/* -------------------------------------------------------------------------
   Search, sort, filters and view modes
   ------------------------------------------------------------------------- */
.sf-controls { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.sf-controls__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

.sf-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sf-search, .sf-select {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 0.55em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.sf-search { flex: 1 1 14em; min-width: 12em; }
.sf-check { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs-sm); cursor: pointer; }
.sf-clear {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: none;
  border: none;
  color: var(--color-accent-strong);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4em 0.2em;
}

.sf-icon { display: inline-flex; }
.sf-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon svg rect, .sf-icon svg circle { fill: currentColor; stroke: none; }
.sf-icon svg [d] { fill: none; }

/* "Filters & sort" and the view switch are shaped and colored differently from the category chips above
   (pills on a soft tan background with icons, instead of outlined boxes with a green fill). */
.sf-more-toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background: var(--color-cream-deep);
  border: none;
  border-radius: 999px;
  padding: 0.6em 1.2em;
  cursor: pointer;
}
.sf-more-toggle[aria-expanded="true"] { background: var(--color-bg-raised); box-shadow: inset 0 0 0 1.5px var(--color-accent-strong); }

.sf-views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-cream-deep);
  border-radius: 999px;
}
.sf-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.5em 0.95em;
  cursor: pointer;
}
.sf-view-btn[aria-pressed="true"] { background: var(--color-bg); color: var(--color-ink); box-shadow: 0 1px 3px rgba(46,42,34,0.25); }

.sf-count { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* On phones and small windows the search / sort / filters fold away behind one button. */
@media (max-width: 999px) {
  .sf-more-toggle { display: inline-flex; }
  .sf-more { display: none; flex-direction: column; align-items: stretch; }
  .sf-more.is-open { display: flex; }
  .sf-search { flex: none; min-width: 0; width: 100%; }
}

/* View: list = one product per row, picture on the left */
.sf-grid--list { grid-template-columns: 1fr; gap: var(--space-3); }
.sf-grid--list .sf-product-card { flex-direction: row; align-items: stretch; }
.sf-grid--list .sf-product-card .card__media { flex: 0 0 170px; height: auto; min-height: 8em; aspect-ratio: auto; }
.sf-grid--list .sf-product-card .card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sf-grid--list .sf-product-card .btn { align-self: flex-start; width: auto; }
@media (max-width: 999px) { .sf-grid--list .sf-product-card .card__media { flex-basis: 110px; } }

/* View: compact = small tiles, no description */
.sf-grid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.sf-grid--compact .sf-product-card .card__meta { display: none; }
.sf-grid--compact .sf-product-card .card__body { padding: 0.6em 0.7em 0.8em; }
.sf-grid--compact .sf-product-card .card__title { font-size: var(--fs-sm); }
.sf-grid--compact .sf-product-card .card__media { aspect-ratio: 1 / 1; }
.sf-grid--compact .sf-product-card .sf-variant-select { font-size: var(--fs-xs); padding: 0.35em 0.4em; }
.sf-grid--compact .sf-product-card .btn { padding: 0.5em 0.6em; font-size: var(--fs-xs); }

/* "…more" link under the short description, and the full-details pop-up */
.card__meta .sf-readmore { all: unset; display: inline; font: inherit; color: var(--color-accent-strong, #3d5a3d); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.card__meta .sf-readmore:hover, .card__meta .sf-readmore:focus-visible { text-decoration-thickness: 2px; }
.sf-modal-open { overflow: hidden; }
.sf-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(30, 30, 20, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sf-modal__box { position: relative; background: #f4efe0; border-radius: 12px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.sf-modal__img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px 12px 0 0; }
.sf-modal__body { padding: 1.2em 1.4em 1.5em; }
.sf-modal__desc { white-space: pre-line; line-height: 1.6; }
.sf-modal__close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(244, 239, 224, 0.92); font-size: 1.6rem; line-height: 1; cursor: pointer; }