/* Trove Hub custom layer for MONO 1.1.4 — V6
   Theme-scoped customizations; no Additional Header/Footer code required. */

/* =====================================================
   COLOR SYSTEM
   Global palette values come from Theme settings.
   Nothing below hard-locks the storefront to white.
   ===================================================== */

body[data-theme="light"] {
  background: var(--trove-background) !important;
  color: var(--trove-text) !important;

  --color-primary: var(--trove-primary) !important;
  --color-on-primary: #ffffff !important;
  --color-primary-container: var(--trove-soft) !important;
  --color-on-primary-container: var(--trove-text) !important;

  --color-background: var(--trove-background) !important;
  --color-on-background: var(--trove-text) !important;
  --color-surface: var(--trove-background) !important;
  --color-on-surface: var(--trove-text) !important;

  --color-surface-container-lowest: var(--trove-background) !important;
  --color-surface-container-low: color-mix(in srgb, var(--trove-surface) 45%, var(--trove-background)) !important;
  --color-surface-container: var(--trove-surface) !important;
  --color-surface-container-high: color-mix(in srgb, var(--trove-soft) 60%, var(--trove-background)) !important;
  --color-surface-container-highest: var(--trove-soft) !important;
  --color-surface-variant: color-mix(in srgb, var(--trove-primary) 16%, var(--trove-background)) !important;
  --color-on-surface-variant: var(--trove-muted) !important;

  --color-secondary: var(--trove-accent) !important;
  --color-tertiary: var(--trove-primary) !important;
}

body[data-theme="light"] main,
body[data-theme="light"] #app {
  background: var(--trove-background) !important;
}

/* Product/media canvases stay clean; cards follow the editable surface palette. */
body[data-theme="light"] [ui-section="product-grid"] .product-item,
body[data-theme="light"] [ui-section="product-slider"] .product-item,
body[data-theme="light"] [ui-section="single-collection"] .product-item {
  background: var(--trove-background) !important;
  border-color: color-mix(in srgb, var(--trove-primary) 22%, var(--trove-background)) !important;
}

body[data-theme="light"] [ui-slot="badge"][data-mode="filled"],
body[data-theme="light"] .trove-accent {
  --color-badge: var(--trove-accent);
}

/* =====================================================
   COMPACT HEADER
   ===================================================== */

[ui-section="header"] {
  gap: 7px !important;
  padding-block: 2px 8px !important;
}

[ui-section="header"] .logo {
  width: min(176px, 52vw) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

[ui-section="header"] .logo > img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

[ui-section="header"] > .heading {
  margin: 0 !important;
  line-height: 1.15 !important;
}

[ui-section="header"] > .subheading {
  margin: 0 !important;
  line-height: 1.35 !important;
}

[ui-section="header"] .social-links {
  margin-block-start: 4px !important;
  gap: 8px !important;
}

@media (max-width: 769px) {
  [ui-section="header"] {
    gap: 5px !important;
    padding-block: 0 5px !important;
  }

  [ui-section="header"] .logo {
    width: min(158px, 50vw) !important;
  }
}

/* =====================================================
   PRODUCT IMAGES — NEVER CROP
   ===================================================== */

[ui-section="product-grid"] .product-item .media > img,
[ui-section="product-slider"] .product-item .media > img,
[ui-section="single-collection"] .collections-list .product-item .media > img,
[ui-section="search"] .product-item .image > img,
[ui-block="product"] .media > a img,
[ui-section="product-information"] > .media img,
[ui-section="single-product"] .core .media img,
.product-drawer img {
  object-fit: contain !important;
  background: #fff;
}

/* =====================================================
   TWO PRODUCTS PER ROW ON MOBILE
   ===================================================== */

@media (max-width: 769px) {
  [ui-section="product-grid"] .list,
  [ui-section="single-collection"] .collections-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  [ui-section="product-grid"] .product-item .content .name,
  [ui-section="single-collection"] .product-item .content .name,
  [ui-section="product-slider"] .product-item .content .name,
  [ui-block="product"] .content .title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
  }

  [ui-section="product-grid"] .product-item .content .price,
  [ui-section="single-collection"] .product-item .content .price,
  [ui-section="product-slider"] .product-item .content .price {
    font-size: 0.9rem;
  }
}

/* =====================================================
   MOBILE MENU — TROVE HUB ACCORDION
   Parent title navigates; arrow expands children.
   ===================================================== */

#menu .trove-menu-links {
  gap: 4px !important;
}

#menu .trove-menu-links > .link {
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-block: 2px;
}

#menu .trove-menu-links > .link:last-child {
  border-bottom: 0;
}

#menu .trove-menu-links > .link > a[ui-slot="button"] {
  width: 100%;
  justify-content: flex-start !important;
  text-align: start;
}

#menu .trove-parent-row {
  display: flex;
  align-items: center;
  width: 100%;
}

#menu .trove-parent-row > a[ui-slot="button"] {
  flex: 1;
  min-width: 0;
  justify-content: flex-start !important;
  text-align: start;
}

#menu .trove-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease, background-color .2s ease;
}

#menu .trove-submenu-toggle:hover {
  background: var(--color-surface-container);
}

#menu .trove-menu-parent.is-open > .trove-parent-row > .trove-submenu-toggle {
  transform: rotate(180deg);
}

#menu .trove-submenu {
  display: none;
  width: 100%;
  margin: 2px 0 7px;
  padding: 4px 0 4px 14px;
  list-style: none;
  border-inline-start: 2px solid color-mix(in srgb, var(--trove-primary) 35%, transparent);
}

#menu .trove-menu-parent.is-open > .trove-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#menu .trove-submenu li {
  list-style: none;
}

#menu .trove-submenu li > a[ui-slot="button"] {
  width: 100%;
  justify-content: flex-start !important;
  padding-block: 7px;
  font-size: .94em;
  opacity: .82;
  text-align: start;
}

/* =====================================================
   FLOATING WHATSAPP
   ===================================================== */

.trove-whatsapp-float {
  position: fixed;
  z-index: 90;
  inset-inline-end: 18px;
  inset-block-end: 20px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  text-decoration: none;
}

.trove-whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (max-width: 769px) {
  .trove-whatsapp-float {
    inset-inline-end: 14px;
    inset-block-end: 16px;
    width: 50px;
    height: 50px;
  }
}

/* =====================================================
   V6 — RESPONSIVE HOMEPAGE POLISH
   Mobile and desktop are intentionally styled differently.
   ===================================================== */

/* Header: keep the logo prominent without an oversized empty band. */
@media (max-width: 769px) {
  #youcan-section--header {
    border-block-width: 4px !important;
  }

  [ui-section="header"] {
    padding-block: 0 !important;
    min-height: 0 !important;
  }

  [ui-section="header"] .logo {
    width: min(154px, 48vw) !important;
  }
}

/* Homepage media/video: clean rounded frame when enabled. */
[ui-section="media"] {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--trove-primary) 70%, transparent);
  border-radius: var(--radius-section);
  box-shadow: 3px 3px 0 var(--trove-primary);
  background: var(--trove-background);
}

[ui-section="media"] iframe,
[ui-section="media"] > img,
[ui-section="media"] blockquote {
  border-radius: inherit;
}

/* -----------------------------------------------------
   WHY SHOP WITH US — shared structure
   ----------------------------------------------------- */
[ui-section="multicolumn"] {
  gap: 18px !important;
}

[ui-section="multicolumn"] .head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
}

[ui-section="multicolumn"] .head .title {
  width: 100%;
  margin: 0 !important;
}

[ui-section="multicolumn"] .head .section-description {
  width: 100%;
  margin: 0 !important;
  color: var(--trove-muted);
  line-height: 1.45;
}

[ui-section="multicolumn"] .list .column-item .media > img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

[ui-section="multicolumn"] .list .column-item .info {
  align-items: center;
  text-align: center;
  min-width: 0;
}

[ui-section="multicolumn"] .list .column-item .info .heading {
  width: 100%;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

[ui-section="multicolumn"] .list .column-item .info .description {
  color: var(--trove-muted);
}

[ui-section="multicolumn"] .list .column-item .info .description,
[ui-section="multicolumn"] .list .column-item .info .description p {
  margin: 0 !important;
}

/* Desktop/tablet: compact premium cards in one row when space allows. */
@media (min-width: 770px) {
  [ui-section="multicolumn"] .head .title {
    font-size: clamp(26px, 2.2vw, 34px) !important;
  }

  [ui-section="multicolumn"] .head .section-description {
    font-size: 15px !important;
  }

  [ui-section="multicolumn"] .list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  [ui-section="multicolumn"] .list .column-item {
    min-width: 0;
    min-height: 190px;
    padding: 12px 16px 18px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  [ui-section="multicolumn"] .list .column-item .media,
  [ui-section="multicolumn"] .list .column-item .media[data-aspect-ratio="landscape"] {
    width: 78px !important;
    height: 78px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 78px;
    border-radius: 18px;
  }

  [ui-section="multicolumn"] .list .column-item .info .heading {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  [ui-section="multicolumn"] .list .column-item .info .description {
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* Mobile: deliberately airy, one benefit under another — no cramped 2x2 boxes. */
@media (max-width: 769px) {
  [ui-section="multicolumn"] {
    gap: 22px !important;
  }

  [ui-section="multicolumn"] .head {
    gap: 8px !important;
    padding-inline: 10px;
  }

  [ui-section="multicolumn"] .head .title {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.15 !important;
  }

  [ui-section="multicolumn"] .head .section-description {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  [ui-section="multicolumn"] .list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  [ui-section="multicolumn"] .list > li {
    width: 100% !important;
  }

  [ui-section="multicolumn"] .list .column-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 22px 10px 28px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  [ui-section="multicolumn"] .list .column-item .media,
  [ui-section="multicolumn"] .list .column-item .media[data-aspect-ratio="landscape"] {
    width: min(152px, 44vw) !important;
    height: min(152px, 44vw) !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    border-radius: 28px !important;
  }

  [ui-section="multicolumn"] .list .column-item .info {
    width: 100%;
    gap: 8px;
  }

  [ui-section="multicolumn"] .list .column-item .info .heading {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  [ui-section="multicolumn"] .list .column-item .info .description {
    max-width: 92%;
    margin-inline: auto !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}

/* -----------------------------------------------------
   COLLECTIONS — no cut-off cards on either layout
   ----------------------------------------------------- */
[ui-section="collections"] {
  --item-size: 100% !important;
}

[ui-section="collections"] .list {
  padding-inline: 0 !important;
  padding-block-end: 3px !important;
}

@media (min-width: 770px) {
  [ui-section="collections"] {
    --per-page: 3 !important;
    --item-size: 100% !important;
  }
}

@media (max-width: 769px) {
  [ui-section="collections"] {
    --per-page: 1 !important;
    --item-size: 100% !important;
  }

  [ui-section="collections"] .list [ui-slot="carousel-item"] {
    width: 100% !important;
    min-width: 100% !important;
  }

  [ui-section="collections"] .collection-item {
    width: calc(100% - 4px) !important;
    margin-inline: 0 4px !important;
    box-sizing: border-box !important;
  }
}

/* -----------------------------------------------------
   REVIEWS — full cards, gold stars
   ----------------------------------------------------- */
[ui-section="testimonials"] {
  --item-size: 100% !important;
}

[ui-section="testimonials"] .list {
  padding-inline: 0 !important;
}

[ui-section="testimonials"] .list .testimonial-item {
  box-shadow: 2px 2px 0 var(--color-primary) !important;
}

[ui-section="testimonials"] .stars,
[ui-section="testimonials"] .stars svg {
  color: #D4AF37 !important;
}

[ui-section="testimonials"] .testimonial-item .content {
  line-height: 1.55;
}

[ui-section="testimonials"] .testimonial-item .author {
  font-weight: 600;
}

@media (min-width: 770px) {
  [ui-section="testimonials"] {
    --per-page: 2 !important;
    --item-size: 100% !important;
  }
}

@media (max-width: 769px) {
  [ui-section="testimonials"] {
    --per-page: 1 !important;
    --item-size: 100% !important;
  }

  [ui-section="testimonials"] .list .testimonial-item {
    width: calc(100% - 4px) !important;
    min-width: calc(100% - 4px) !important;
    margin-inline: 0 4px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}

/* -----------------------------------------------------
   FOOTER — cleaner on mobile, roomy on desktop
   ----------------------------------------------------- */
@media (min-width: 770px) {
  [ui-section="footer"] {
    gap: 14px !important;
  }
}

@media (max-width: 769px) {
  [ui-section="footer"] {
    gap: 10px !important;
    padding-inline: 8px !important;
  }

  [ui-section="footer"] .copyright {
    height: 32px !important;
    padding-inline: 12px !important;
    font-size: .9rem !important;
  }

  [ui-section="footer"] .links {
    gap: 6px 8px !important;
    line-height: 1.6 !important;
    font-size: .86rem !important;
  }
}



/* =====================================================
   V6 FINAL — MOBILE PRODUCT SECTIONS
   Keep product cards, remove the heavy outer section frame.
   ===================================================== */
@media (max-width: 769px) {
  [ui-section="product-grid"],
  [ui-section="product-slider"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
  }

  [ui-section="product-grid"] .head,
  [ui-section="product-slider"] .head {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-inline: 0 !important;
    padding-block: 4px 10px !important;
  }

  [ui-section="product-grid"] .list {
    padding: 0 !important;
  }

  [ui-section="product-slider"] {
    --per-page: 2 !important;
    --item-size: 100% !important;
    --gap: 10px !important;
  }

  [ui-section="product-slider"] .list {
    margin: 0 !important;
    padding-block-end: 3px !important;
  }
}


/* V7.2 responsive polish (safe rebuild) */
/* Product sections: open layout on both desktop and mobile. */
[ui-section="product-grid"],
[ui-section="product-slider"] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: transparent !important;
}
[ui-section="product-grid"] .head,
[ui-section="product-slider"] .head {
  border: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
  padding-block: 4px 12px !important;
}

@media (min-width: 770px) {
  [ui-section="product-grid"] .list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding-inline: 0 !important;
  }
  [ui-section="product-slider"] {
    --per-page: 4 !important;
    --item-size: 100% !important;
    --gap: 18px !important;
  }
  [ui-section="product-slider"] .list { margin-inline: 0 !important; }
}

/* Collections: lighter cards, no awkward cropped preview. */
[ui-section="collections"] .list .collection-item {
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  background: var(--color-background) !important;
}
[ui-section="collections"] .list .collection-item:hover {
  transform: none !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.06) !important;
}
@media (min-width:770px) {
  [ui-section="collections"] { --per-page: 3 !important; }
  [ui-section="collections"] .collection-item { padding: 10px 12px !important; }
}
@media (max-width:769px) {
  [ui-section="collections"] { --per-page: 1 !important; --item-size: 100% !important; }
  [ui-section="collections"] .list [ui-slot="carousel-item"] { width: 100% !important; min-width: 100% !important; }
  [ui-section="collections"] .collection-item { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
}

/* Why Shop With Us — compact on mobile, open four-column on desktop. */
[ui-section="multicolumn"] .head { flex-direction: column !important; align-items: center !important; text-align:center !important; gap:6px !important; }
[ui-section="multicolumn"] .head .section-description { margin:0 !important; color:var(--color-on-surface-variant); }
@media (min-width:770px) {
  [ui-section="multicolumn"] { gap: 20px !important; }
  [ui-section="multicolumn"] .list { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:18px !important; }
  [ui-section="multicolumn"] .list .column-item { min-height:0 !important; padding:10px 12px 14px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; flex-direction:column !important; justify-content:flex-start !important; text-align:center !important; gap:10px !important; }
  [ui-section="multicolumn"] .list .column-item .media { width:88px !important; height:88px !important; aspect-ratio:1/1 !important; flex:0 0 88px !important; overflow:visible !important; }
  [ui-section="multicolumn"] .list .column-item .media img { width:100% !important; height:100% !important; object-fit:contain !important; }
  [ui-section="multicolumn"] .list .column-item .info .heading { font-size:18px !important; white-space:normal !important; }
  [ui-section="multicolumn"] .list .column-item .info .description { font-size:14px !important; line-height:1.45 !important; }
}
@media (max-width:769px) {
  [ui-section="multicolumn"] { gap:14px !important; }
  [ui-section="multicolumn"] .head { padding-inline:8px !important; }
  [ui-section="multicolumn"] .head .title { font-size:24px !important; line-height:1.2 !important; }
  [ui-section="multicolumn"] .head .section-description { font-size:14px !important; line-height:1.4 !important; }
  [ui-section="multicolumn"] .list { display:grid !important; grid-template-columns:1fr !important; gap:0 !important; }
  [ui-section="multicolumn"] .list .column-item { padding:14px 8px 16px !important; gap:10px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; flex-direction:column !important; text-align:center !important; }
  [ui-section="multicolumn"] .list .column-item .media,
  [ui-section="multicolumn"] .list .column-item .media[data-aspect-ratio] { width:92px !important; height:92px !important; aspect-ratio:1/1 !important; flex:0 0 92px !important; overflow:visible !important; border-radius:18px !important; }
  [ui-section="multicolumn"] .list .column-item .media img { width:100% !important; height:100% !important; object-fit:contain !important; }
  [ui-section="multicolumn"] .list .column-item .info { gap:4px !important; }
  [ui-section="multicolumn"] .list .column-item .info .heading { font-size:18px !important; line-height:1.25 !important; white-space:normal !important; }
  [ui-section="multicolumn"] .list .column-item .info .description { max-width:300px !important; margin-inline:auto !important; font-size:14px !important; line-height:1.45 !important; }
}

/* Reviews: clean spacing before footer. */
[ui-section="testimonials"] { margin-block-end: 8px; }
@media (min-width:770px) { [ui-section="testimonials"] { --per-page:3 !important; } }

/* WhatsApp: smaller and away from the browser bottom chrome on mobile. */
@media (max-width:769px) {
  .trove-whatsapp-float { width:44px !important; height:44px !important; inset-inline-end:10px !important; inset-block-end:74px !important; box-shadow:0 4px 14px rgba(0,0,0,.18) !important; }
  .trove-whatsapp-float svg { width:23px !important; height:23px !important; }
}

/* =====================================================
   V7.5 SAFE POLISH — visual-only overrides
   ===================================================== */
/* Collections: more compact, especially on mobile. */
[ui-section="collections"] .list .collection-item{padding:8px 10px!important;gap:10px!important}
[ui-section="collections"] .list .collection-item .media{width:36px!important}
[ui-section="collections"] .list .collection-item .media[data-aspect-ratio="landscape"]{width:54px!important}
@media(max-width:769px){
 [ui-section="collections"]{--per-page:1!important;--item-size:100%!important;--gap:8px!important}
 [ui-section="collections"] .list .collection-item{min-height:54px!important;border-radius:12px!important}
 [ui-section="collections"] .list .collection-item .name{font-size:14px!important}
}
/* Why Shop With Us: tighter rhythm without touching section Liquid. */
@media(min-width:770px){
 [ui-section="multicolumn"] .list .column-item .media{width:96px!important;height:96px!important;flex-basis:96px!important}
 [ui-section="multicolumn"] .list .column-item{padding-block:8px 12px!important}
}
@media(max-width:769px){
 [ui-section="multicolumn"] .list .column-item{padding-block:10px 12px!important}
 [ui-section="multicolumn"] .list .column-item .media,[ui-section="multicolumn"] .list .column-item .media[data-aspect-ratio]{width:88px!important;height:88px!important;flex-basis:88px!important}
}
/* Product sections: keep the proven 4 desktop / 2 mobile layout. */
@media(max-width:769px){
 [ui-section="product-grid"] .list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 [ui-section="product-slider"]{--per-page:2!important;--gap:10px!important}
}

/* =====================================================
   V7.6.3 — MOBILE STOREFRONT POLISH
   Tighter section rhythm + distraction-free WhatsApp.
   ===================================================== */

.trove-whatsapp-float {
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease, box-shadow .18s ease;
  will-change: opacity, transform;
}

.trove-whatsapp-float.is-scrolling {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) scale(.9);
  pointer-events: none !important;
}

@media (max-width: 769px) {
  /* Video -> Collections: remove the oversized dead space without
     making the page feel cramped. */
  body main .youcan-section:has([ui-section="video-hero"]) {
    border-block-end-width: 7px !important;
  }

  body main .youcan-section:has([ui-section="collections"]) {
    border-block-start-width: 7px !important;
    border-block-end-width: 10px !important;
  }

  /* Collections -> Products: keep a clean, consistent visual rhythm. */
  body main .youcan-section:has([ui-section="product-grid"]) {
    border-block-start-width: 10px !important;
  }

  /* Compact the collections block itself slightly on mobile. */
  [ui-section="collections"] {
    gap: 9px !important;
  }

  [ui-section="collections"] .head .title,
  [ui-section="product-grid"] .head .title {
    line-height: 1.2 !important;
  }
}


/* =====================================================
   V7.6.4.2 — SAFE EDITABLE ANNOUNCEMENT BAR
   Global settings + lightweight message rotation.
   ===================================================== */
.trove-announcement-safe {
  position: relative;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #48513F;
  color: #FFFFFF;
  text-align: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .15px;
}
.trove-announcement-safe .trove-announcement-message {
  display: none;
  width: 100%;
}
.trove-announcement-safe .trove-announcement-message.is-active {
  display: block;
  animation: troveAnnouncementFade .24s ease both;
}
@keyframes troveAnnouncementFade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Homepage collections carousel: restore the compact slider feel. */
@media(max-width:769px){
  [ui-section="collections"]{
    --per-page:2!important;
    --item-size:85%!important;
    --gap:8px!important;
  }
  [ui-section="collections"] .list .collection-item{
    min-height:52px!important;
    padding:7px 9px!important;
    gap:8px!important;
  }
  [ui-section="collections"] .list .collection-item .media{width:34px!important}
  [ui-section="collections"] .list .collection-item .media[data-aspect-ratio="landscape"]{width:48px!important}
  [ui-section="collections"] .list .collection-item .name{
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}


/* =====================================================
   V7.6.5 FINAL — final storefront polish
   ===================================================== */
/* Announcement: use Mono's native ui-marquee engine for a true seamless loop. */
ui-marquee.trove-announcement-safe{
  padding:6px 0!important;
  white-space:nowrap;
  overflow:hidden;
  direction:ltr;
}
ui-marquee.trove-announcement-safe [ui-marquee="track"]{will-change:transform}
ui-marquee.trove-announcement-safe .trove-announcement-group{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
}
ui-marquee.trove-announcement-safe [ui-marquee="item"]{
  display:inline-flex;
  flex:none;
  align-items:center;
  padding-inline:24px!important;
  min-width:max-content;
  direction:initial;
}


[ui-section="collections"] .head{gap:10px!important}
[ui-section="collections"] .trove-collections-title-link{color:inherit;text-decoration:none;min-width:0}
[ui-section="collections"] .trove-collections-show-all{margin-inline-start:auto;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--color-primary);text-decoration:none;white-space:nowrap}
[ui-section="collections"] .trove-collections-show-all span{font-size:17px;line-height:1;vertical-align:-1px}

@media(max-width:769px){
  /* Compact swipeable collections: one card plus a visible hint of the next. */
  [ui-section="collections"]{--per-page:2!important;--item-size:72%!important;--gap:8px!important}
  [ui-section="collections"] .list [ui-slot="carousel-item"]{width:72%!important;min-width:72%!important}
  [ui-section="collections"] .list .collection-item{width:100%!important;min-height:50px!important;margin:0!important;padding:7px 9px!important;gap:8px!important}
  [ui-section="collections"] .list .collection-item .media{width:32px!important}
  [ui-section="collections"] .list .collection-item .media[data-aspect-ratio="landscape"]{width:44px!important}
  [ui-section="collections"] .trove-collections-show-all{font-size:12px}

  /* Trust benefits: force the intended compact 2 x 2 mobile layout. */
  [ui-section="multicolumn"] .list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;gap:10px!important}
  [ui-section="multicolumn"] .list>li{display:flex!important;min-width:0!important;width:auto!important}
  [ui-section="multicolumn"] .list>li>.column-item{width:100%!important;height:auto!important;min-height:0!important;padding:10px 7px!important;gap:6px!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
  [ui-section="multicolumn"] .list .column-item .media,[ui-section="multicolumn"] .list .column-item .media[data-aspect-ratio]{width:60px!important;height:60px!important;flex:0 0 60px!important}
  [ui-section="multicolumn"] .list .column-item .info .heading{font-size:13px!important;line-height:1.2!important;white-space:normal!important}
  [ui-section="multicolumn"] .list .column-item .info .description{font-size:11px!important;line-height:1.35!important}
}


/* V7.6.5.2 — isolated products-by-collection section */
[ui-section="category-products"]{display:flex;flex-direction:column;gap:14px}
[ui-section="category-products"] .head{display:flex;align-items:center;gap:10px}
[ui-section="category-products"] .head .title{margin:0}
[ui-section="category-products"] .head a{margin-inline-start:auto;font-size:13px;font-weight:600;color:var(--color-primary);text-decoration:none;white-space:nowrap}
[ui-section="category-products"] .list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
[ui-section="category-products"] .list>li{min-width:0}
[ui-section="category-products"] .product-item{display:flex;gap:8px;flex-direction:column;height:100%}
[ui-section="category-products"] .product-item .media{position:relative!important;display:block;width:100%;aspect-ratio:1/1;overflow:hidden!important;border-radius:var(--radius-card)}
[ui-section="category-products"] .product-item .media>img{display:block;width:100%;height:100%;object-fit:contain!important;background:#fff}
[ui-section="category-products"] .product-item .media>.product-badge{position:absolute!important}
[ui-section="category-products"] .product-item .content{display:flex;flex:1;flex-direction:column;gap:8px}
[ui-section="category-products"] .product-item .content .name{overflow:hidden;font:var(--font-title-sm);text-decoration:none;color:inherit}
[ui-section="category-products"] .product-item .content .price{display:flex;flex:1;gap:4px}
[ui-section="category-products"] .product-item .content .price .compare-at{opacity:.5;text-decoration:line-through}
@media(max-width:769px){
 [ui-section="category-products"] .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 [ui-section="category-products"] .product-item .content .name{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important;overflow:hidden;line-height:1.35;min-height:2.7em}
 [ui-section="category-products"] .head a{font-size:12px}
}
