/* video-viewer-949ce574d94a838f.css */
/* artifacts/gropet/src/components/video/product-video-viewer.css */
.yg-product-video-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #080808;
  color: #fff;
  isolation: isolate;
}
.yg-video-scroller {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.yg-video-scroller::-webkit-scrollbar {
  display: none;
}
.yg-video-slide {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.yg-video-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yg-video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .4),
      transparent 22%,
      transparent 45%,
      rgba(0, 0, 0, .78) 90%);
}
.yg-video-back,
.yg-video-mute {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #0009;
  color: #fff;
  backdrop-filter: blur(8px);
}
.yg-video-back {
  left: max(14px, env(safe-area-inset-left));
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
}
.yg-video-mute {
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
}
.yg-video-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.yg-video-play {
  width: 76px;
  height: 76px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #0008;
  color: white;
  backdrop-filter: blur(4px);
}
.yg-video-details {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  right: 86px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  z-index: 20;
  text-shadow: 0 1px 6px #0008;
}
.yg-video-seller {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}
.yg-video-seller > span:first-child {
  flex: none;
}
.yg-video-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.yg-video-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  margin-top: 6px;
  color: #ffd000;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.yg-video-contact {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
}
.yg-video-contact .yg-product-whatsapp svg {
  color: #fff !important;
}
body:has([data-product-video-viewer]) .yg-notification-viewport {
  z-index: 1200;
}
.yg-video-actions {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 180px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.yg-video-actions .yg-product-comments-trigger {
  width: 48px;
  min-height: 44px;
  height: auto;
  padding: 8px 5px;
}
.yg-video-actions .yg-product-comments-trigger svg {
  width: 21px;
  height: 21px;
}
.yg-video-actions .yg-comments-desktop-caption {
  display: none;
}
.yg-product-video-viewer button:focus-visible,
.yg-product-video-viewer a:focus-visible {
  outline: 2px solid #ffd000;
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .yg-video-media {
    object-fit: contain;
  }
  .yg-video-details {
    left: max(24px, calc(50% - 260px));
    right: calc(50% - 180px);
  }
  .yg-video-contact {
    left: max(24px, calc(50% - 260px));
    right: max(24px, calc(50% - 260px));
  }
  .yg-video-actions {
    right: max(24px, calc(50% - 254px));
  }
}
@media (max-height: 600px) {
  .yg-video-actions {
    bottom: 85px;
    gap: 7px;
  }
  .yg-video-actions > div > button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .yg-video-seller {
    margin-bottom: 5px;
  }
  .yg-video-title {
    font-size: 16px;
  }
  .yg-video-price {
    font-size: 22px;
  }
}

.yg-video-tile-photo{position:relative}.yg-centered-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid #ffffffb3;background:#0009;color:white;box-shadow:0 4px 12px #0004;backdrop-filter:blur(4px)}.yg-centered-video-play:focus-visible{outline:2px solid white;outline-offset:4px}body:has([data-product-video-viewer]) .yg-notification-viewport [toast-close]{opacity:1}.yg-community-pc-card:has(>.yg-video-search-play-frame){position:relative}.yg-video-search-play-frame{position:absolute;top:0;left:0;right:0;aspect-ratio:4/5;z-index:20;pointer-events:none}.yg-video-search-play-frame>.yg-centered-video-play{pointer-events:auto}
/* mobile-seven-ce987060c0c386ae.css */
/* artifacts/gropet/src/components/video/product-video-viewer.css */
.yg-product-video-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #080808;
  color: #fff;
  isolation: isolate;
}
.yg-video-scroller {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.yg-video-scroller::-webkit-scrollbar {
  display: none;
}
.yg-video-slide {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.yg-video-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yg-video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .4),
      transparent 22%,
      transparent 45%,
      rgba(0, 0, 0, .78) 90%);
}
.yg-video-back,
.yg-video-mute {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #0009;
  color: #fff;
  backdrop-filter: blur(8px);
}
.yg-video-back {
  left: max(14px, env(safe-area-inset-left));
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
}
.yg-video-mute {
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
}
.yg-video-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.yg-video-play {
  width: 76px;
  height: 76px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #0008;
  color: white;
  backdrop-filter: blur(4px);
}
.yg-video-details {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  right: 86px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  z-index: 20;
  text-shadow: 0 1px 6px #0008;
}
.yg-video-seller {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}
.yg-video-seller > span:first-child {
  flex: none;
}
.yg-video-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.yg-video-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  margin-top: 6px;
  color: #ffd000;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.yg-video-contact {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
}
.yg-video-contact .yg-product-whatsapp svg {
  color: #fff !important;
}
body:has([data-product-video-viewer]) .yg-notification-viewport {
  z-index: 1200;
}
.yg-video-actions {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 180px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.yg-video-actions .yg-product-comments-trigger {
  width: 48px;
  min-height: 44px;
  height: auto;
  padding: 8px 5px;
}
.yg-video-actions .yg-product-comments-trigger svg {
  width: 21px;
  height: 21px;
}
.yg-video-actions .yg-comments-desktop-caption {
  display: none;
}
.yg-product-video-viewer button:focus-visible,
.yg-product-video-viewer a:focus-visible {
  outline: 2px solid #ffd000;
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .yg-video-media {
    object-fit: contain;
  }
  .yg-video-details {
    left: max(24px, calc(50% - 260px));
    right: calc(50% - 180px);
  }
  .yg-video-contact {
    left: max(24px, calc(50% - 260px));
    right: max(24px, calc(50% - 260px));
  }
  .yg-video-actions {
    right: max(24px, calc(50% - 254px));
  }
}
@media (max-height: 600px) {
  .yg-video-actions {
    bottom: 85px;
    gap: 7px;
  }
  .yg-video-actions > div > button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .yg-video-seller {
    margin-bottom: 5px;
  }
  .yg-video-title {
    font-size: 16px;
  }
  .yg-video-price {
    font-size: 22px;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .yg-video-actions {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
    gap: 14px;
    transform: scale(.8);
    transform-origin: bottom right;
  }
  .yg-video-details {
    left: max(12px, env(safe-area-inset-left));
    right: 76px;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  }
}

/* Only the seven approved mobile-web refinements; desktop retains its live CSS. */
.yg-mobile-play-marker,.yg-mobile-video-photo-link{display:none}
@media(max-width:767px){
.yg-mobile-play-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;width:60px;height:60px;align-items:center;justify-content:center;border:1px solid #ffffffb3;border-radius:50%;background:#0008;color:white;z-index:20;pointer-events:none}
.yg-mobile-play-marker svg{width:28px;height:28px}
.yg-mobile-video-photo-link{display:block;position:absolute;inset:0;z-index:20}
*:has(>a>.yg-mobile-play-marker)>.yg-centered-video-play,
*:has(>.yg-mobile-play-marker)>.yg-centered-video-play{display:none!important}
.yg-featured-card{width:calc(75% + 6px);margin-inline:auto;padding-bottom:10.56px}
.yg-featured-card .yg-featured-media{padding-top:10.56px!important}
.yg-featured-card .yg-featured-media>.flex{aspect-ratio:15/22!important}
.yg-featured-card .yg-featured-photo{aspect-ratio:15/22}
.yg-featured-card .yg-featured-media::after{inset:10.56px 12px 0;border:2.3px solid #cfa94d!important;box-shadow:inset 0 0 0 1px rgba(255,238,184,.45),0 1px 5px rgba(117,87,24,.14)}
.yg-shop-card{width:82.8%;margin-inline:auto;--yg-shop-height-offset:11px}
.yg-shop-card.has-product-dots{--yg-shop-height-offset:13.5px}
.yg-shop-slide{aspect-ratio:auto;padding-top:calc(124.471618358% - var(--yg-shop-height-offset))}
[data-search-page] .yg-search-mobile-tile{width:82.8%}
[data-search-page] .yg-search-mobile-photo{padding-top:calc(124.471618358% - 15px)}
.ymh-card{height:clamp(67.34px,18.2cqw,78.26px);gap:3.64px;padding:3.64px}
.ymh-card svg{width:23.66px;height:23.66px}
.ymh-card span{font-size:clamp(7.644px,2.184cqw,10.01px)}
[data-testid="link-sell-upload-video"] p:nth-of-type(2){color:#ffd000;font-weight:800;font-size:14px}
}
/* tiles-premium-r7-7ca1e66fff24.css */
/* Yoogola web overlay v2: one product tile design for the market lane and search pages,
   premium call button, sponsored ring. Mobile only (max-width: 767px). Every selector is
   scoped to [data-market-lane-page] or [data-search-page]. Replaces tiles-premium v1. Mobile rules are inside the media query;
   the avatar fallback at the end applies at every width. */
@media (max-width: 767px) {
  /* 1. Tile size. Market lane: 10% wider than the old 82.8% (91.08% of the row), capped at the
     screen minus 16px; the photo offset is scaled by 1.1 so the photo keeps its aspect ratio.
     Search: exactly the same width and photo ratio as the market lane tile. */
  [data-market-lane-page] .yg-shop-card {
    width: min(91.08%, calc(100vw - 16px));
    --yg-shop-height-offset: 12.1px;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-search-mobile-tile {
    --yg-tile-w: min(91.08%, calc(100vw - 16px));
    width: var(--yg-tile-w);
    margin-inline: calc((100% - var(--yg-tile-w)) / 2);
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-search-mobile-photo {
    padding-top: calc(124.471618358% - 12.1px);
  }

  /* 2. Shop header, the same on both pages.
     Row 1: avatar, shop name + verified badge ............ location
     Row 2: call + Enter Shop ............................. price
     .yg-shop-head wraps the header and the price; the header and its identity block use
     display: contents so all parts share one grid and the price can never overlap the buttons. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar name loc";
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 10px 14px;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-info,
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-identity { display: contents; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-info > a:first-child { grid-area: avatar; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-identity > div:first-child {
    grid-area: name;
    min-width: 0;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-identity > div:first-child > a {
    flex: 0 1 auto;
    min-width: 0;
  }
  /* Shop name: up to two lines, wrapping only between words, ellipsis after the second line. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
  }
  /* Location: end of row 1 (only rendered when the shop has one). */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-identity > div:nth-child(2) {
    grid-area: loc;
    justify-self: end;
    min-width: 0;
    max-width: 8.5rem;
    margin-top: 0;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-location {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Row 2: buttons far left, price at the end. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: start;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
  }

  /* 2b. Search tile: copy the market lane header and footer sizes exactly (the market lane values
     come from page-scoped rules that do not reach the search page). */
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-avatar {
    width: 30px !important;
    height: 30px !important;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-avatar > div {
    font-size: 13px;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-name {
    font-size: 15px !important;
    line-height: 18.75px !important;
    letter-spacing: -0.375px !important;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-location {
    font-size: 10px !important;
    line-height: 15px !important;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-view {
    min-width: 132px !important;
    height: 42px !important;
    padding-inline: 14px !important;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-view span {
    font-size: 14px !important;
    line-height: 21px !important;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-search-mobile-tile .yg-search-mobile-info {
    padding: 12px 142.2px 8px 12px !important;
    background-color: #fff;
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-search-mobile-tile .yg-search-mobile-product-actions {
    gap: 12px !important;
    bottom: 16.5px !important;
    top: auto !important;
  }

  @media (max-width: 360px) {
    :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-view {
      min-width: 116px !important;
      height: 40px !important;
      padding-inline: 10px !important;
    }
    :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-shop-head .yg-shop-view span {
      font-size: 13px !important;
      line-height: 19.5px !important;
    }
  }
  /* One price per tile: the selling price only (the crossed-out original price is not shown). */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price .yg-shop-was {
    display: none !important;
  }
  /* Long amounts: the font steps down with the length of the amount (data-yg-len, commas and
     decimals included) so it always fits on row 2 at 360px. 13px is the floor; amounts too long
     for that (13+ characters) move to their own line under the buttons, still at 13px. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="7"]  { --yg-price-fs: 21px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="8"]  { --yg-price-fs: 19px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="9"]  { --yg-price-fs: 17.5px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="10"] { --yg-price-fs: 16px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="11"] { --yg-price-fs: 14.5px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len="12"] { --yg-price-fs: 13.5px; }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price:is([data-yg-len="13"], [data-yg-len="14"], [data-yg-len="15"], [data-yg-len="16"], [data-yg-len="17"], [data-yg-len="18"], [data-yg-len="19"], [data-yg-len="20"]) {
    --yg-price-fs: 13px;
    grid-row: 3;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head > .yg-shop-price[data-yg-len] :is(.yg-discovery-price, .yg-discovery-price > span) {
    font-size: var(--yg-price-fs, 22.5px) !important;
  }

  /* 3. Call and Enter Shop buttons: today's size and colours (green call with white phone icon,
     black Enter Shop) inside the same thin gold ring as the sponsored tile. Static, no animation. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions .yg-shop-call {
    width: 42px !important;
    height: 42px !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    background:
      linear-gradient(#128C4A, #128C4A) padding-box,
      linear-gradient(135deg, #FFE27A 0%, #FFD000 28%, #B8860B 58%, #FFD000 80%, #FFE9A3 100%) border-box !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions .yg-shop-call svg {
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
    stroke: #fff !important;
  }
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions .yg-shop-view {
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(135deg, #FFE27A 0%, #FFD000 28%, #B8860B 58%, #FFD000 80%, #FFE9A3 100%) border-box !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14) !important;
  }

  /* Enter Shop: 10% shorter than today (132px -> 118.8px; 116px -> 104.4px at 360px), same height. */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions .yg-shop-view {
    width: 118.8px !important;
    min-width: 118.8px !important;
    padding-inline: 8px !important;
    gap: 5px !important;
  }
  @media (max-width: 360px) {
    :is([data-market-lane-page], [data-search-page]) .yg-shop-head .yg-shop-actions .yg-shop-view {
      width: 104.4px !important;
      min-width: 104.4px !important;
      padding-inline: 6px !important;
      gap: 4px !important;
    }
  }

  /* 4. Bottom: product name, then the description where the price used to be (two lines max). */
  :is([data-market-lane-page], [data-search-page]) .yg-shop-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 3px 0 0;
    color: #6B6B6B;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* 5. Sponsored tile: 10% wider than calc(75% + 6px), plus a static premium ring. */
  [data-market-lane-page] .yg-featured-card {
    width: min(calc(82.5% + 6.6px), calc(100vw - 16px));
    border: 1.5px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, #FFE27A 0%, #FFD000 28%, #B8860B 58%, #FFD000 80%, #FFE9A3 100%) border-box;
    box-shadow:
      0 0 0 1px rgba(10, 10, 10, 0.55),
      0 0 14px rgba(255, 208, 0, 0.32),
      0 6px 18px rgba(10, 10, 10, 0.10);
  }
  [data-market-lane-page] .yg-featured-card .yg-featured-ad-badge {
    z-index: 4;
  }
}

/* Shop avatar fallback (all screen sizes): when the avatar image fails to load it is hidden and
   the shop's first letter, rendered underneath, is shown instead. */
.yg-shop-avatar > img[hidden] {
  display: none !important;
}
.yg-shop-avatar > img:not([hidden]) + .yg-avatar-fallback {
  display: none !important;
}

/* Release 4: product tiles 10% shorter overall on mobile (market lane, category views and search).
   Only the photo absorbs it: header (106px), footer (77px), width and buttons are unchanged.
   Tile = 185px + photo, photo = 124.471618358% - 12.1px of the inner width, so the new photo is
   0.9 x photo - 18.5px = 112.024456522% - 29.39px. The paid Sponsored card is not affected. */
@media (max-width: 767px) {
  [data-market-lane-page] .yg-shop-card:not(.yg-featured-card) .yg-shop-slide {
    padding-top: calc(112.024456522% - 29.39px);
  }
  :is(.yg-search-signup-upgrade[data-search-page], [data-search-page]) .yg-search-mobile-photo {
    padding-top: calc(112.024456522% - 29.39px);
  }
}

/* Release 6: free Featured tile. Same tile as a product tile; a 3px muted-gold ring drawn inside the
   edge (outline with a negative offset, so the measured size does not change), no glow, no animation. */
@media (max-width: 767px) {
  [data-market-lane-page] .yg-free-featured .yg-shop-card {
    outline: 3px solid #B39A62;
    outline-offset: -3px;
    box-shadow: none !important;
    animation: none !important;
  }
  [data-market-lane-page] .yg-free-featured .yg-shop-card > .relative::before {
    content: "Featured";
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    padding: 3px 9px 3px 21px;
    border-radius: 999px;
    border: 1px solid rgba(179, 154, 98, 0.55);
    background: rgba(255, 255, 255, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B39A62' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") no-repeat 7px 50% / 11px 11px;
    color: #6E5A2C;
    font: 800 11px/16px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0.02em;
    pointer-events: none;
  }
}

/* Release 7: video tiles. The frame sits exactly over the poster image (placed by script), so nothing moves. */
.yg-vhost { position: relative; }
.yg-vframe { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; }
.yg-vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s ease; background: transparent; }
.yg-vframe[data-state="playing"] video { opacity: 1; }
.yg-vplay { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.18); transition: opacity 0.15s ease; }
.yg-vplay svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.yg-vframe--small .yg-vplay { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.yg-vframe--small .yg-vplay svg { width: 16px; height: 16px; margin-left: 2px; }
.yg-vframe[data-state="playing"] .yg-vplay { opacity: 0; }
/* Viewer: shown only when the browser refused sound. */
.yg-sound-blocked { position: absolute; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 58px); z-index: 31; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border: 1px solid #ffffff40; border-radius: 999px; background: #000b; color: #fff; text-align: left; backdrop-filter: blur(8px); white-space: nowrap; }
.yg-sound-blocked span { display: flex; flex-direction: column; line-height: 1.2; }
.yg-sound-blocked strong { font-size: 13px; font-weight: 800; }
.yg-sound-blocked small { font-size: 11px; font-weight: 600; color: #ffffffb3; }