/* Silvee storefront polish. Added 2026-10-31. Phone-first: desktop is unchanged
   apart from the photo placeholder tone. Delete mu-plugins/005-storefront-polish.php to undo. */
@media (max-width: 767px) {
  /* Homepage: jewellery on the first screen, then the words. It used to be four
     bullets, a paragraph, two buttons and four pills before any photo. */
  section.sj-strip { padding: 6px 0; }
  /* Keep the list's bottom margin: the hero overlaps this strip by 23px and would cover the second row. */
  section.sj-strip .sj-strip__list { grid-template-columns: auto auto; justify-content: space-between; gap: 2px 8px; padding: 0; }
  section.sj-strip .sj-strip__list li { font-size: clamp(11px, 3.1vw, 12px); gap: 6px; line-height: 1.5; white-space: nowrap; }
  section.sj-section.sj-hero { padding-top: 12px; padding-bottom: 8px; }
  section.sj-hero .sj-hero__grid { gap: 10px; }
  section.sj-hero .sj-hero__image-wrap { order: -1; border: 0; }
  section.sj-hero .sj-hero__image { aspect-ratio: 5 / 4; object-fit: cover; object-position: center 72%; }
  section.sj-hero .sj-hero__copy { padding: 16px; }
  section.sj-hero .sj-hero__copy .sj-kicker { font-size: 11px; margin-bottom: 6px; }
  section.sj-hero .sj-hero__copy h1 { font-size: 23px; line-height: 1.2; margin: 0 0 8px; }
  section.sj-hero .sj-hero__copy .sj-lead { font-size: 14px; line-height: 1.5; margin: 0; }
  section.sj-hero .sj-actions { flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
  section.sj-hero .sj-actions .sj-btn { flex: 1 1 0; width: auto; min-height: 44px; padding: 0 8px; font-size: 13.5px; white-space: nowrap; }
  section.sj-hero .sj-badges { display: none; }
}

@media (max-width: 350px) {
  section.sj-strip .sj-strip__list li { white-space: normal; }
}

@media (max-width: 767px) {
  /* Product page: the trust badges were a 510px tall stack. Four across keeps
     them visible and brings Description and Related Products up the page. */
  .elementor-48 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .elementor-48 > section.elementor-top-section { margin: 0 !important; padding: 0 !important; width: auto !important; }
  .elementor-48 .elementor-container { flex-direction: column; align-items: center; min-height: 0 !important; }
  .elementor-48 .elementor-column { width: 100% !important; min-height: 0 !important; }
  .elementor-48 .elementor-widget-wrap { padding: 0 !important; justify-content: center; }
  .elementor-48 .elementor-widget { margin: 0 !important; }
  .elementor-48 img { width: 34px !important; max-width: none !important; height: auto !important; display: block; margin: 0 auto 4px; }
  .elementor-48 h1, .elementor-48 h2, .elementor-48 h3, .elementor-48 h4, .elementor-48 h5, .elementor-48 h6,
  .elementor-48 p, .elementor-48 .elementor-heading-title, .elementor-48 .elementor-widget-container {
    font-size: 12px !important; line-height: 1.3 !important; text-align: center !important; margin: 0 !important; padding: 0 !important;
  }
  /* The chat bubble covered the sticky Buy Now button and the "More" tab. Hugging
     the edge keeps it off the homepage buttons on every phone height. */
  .chaty-widget { bottom: 96px !important; right: 8px !important; }
}

/* A quiet tone behind product photos, so a grid reads as loading rather than empty. */
.content-product .product-image-wrapper,
.etheme-product-grid-image a { background: #f7f4ef; }