/* Shared samples accent: route-only, no observer or legacy renderer. */
@property --yamm-samples-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.yamm-product-samples__sheet,
.yamm-cart-v2__modal.yamm-cart-modal--samples {
  border: 1px solid transparent !important;
  background: linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--yamm-samples-border-angle),#d4a0b3,#d6ba8b,#b8c6a3,#9dbfc9,#b5a7ce,#d4a0b3) border-box !important;
  animation: yamm-samples-border-turn 12s linear infinite;
}

@keyframes yamm-samples-border-turn {
  to { --yamm-samples-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .yamm-product-samples__card,
  .yamm-product-samples__sheet,
  .yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],
  .yamm-cart-v2__item--samples,
  .yamm-cart-v2__modal.yamm-cart-modal--samples { animation: none; }
}

/* The controls must keep a real box, independent of the custom text font. */
.yamm-cart-modal__sample-check {
  display: block;
  box-sizing: border-box;
}
.yamm-product-samples__head button,
.yamm-cart-modal--samples .yamm-cart-modal__close {
  color: #111;
  font-family: Arial,sans-serif;
}

/* One sample-card presentation on product pages and in the cart. */
.yamm-product-samples__card,
.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"] {
  width: 100%;
  min-height: 94px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) 20px;
  align-items: center;
  gap: 16px;
  border-radius: 16px !important;
  color: #111;
  font-family: var(--yamm-font-ui);
  text-align: left;
}
.yamm-product-samples__card img,
.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"] img {
  display: block;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 0;
  object-position: center;
  object-fit: cover;
  border-radius: 6px;
}
.yamm-product-samples__copy { min-width: 0; display: block; }
.yamm-product-samples__copy strong { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 400; letter-spacing: normal; }
.yamm-product-samples__copy small { display: block; overflow: hidden; color: #999; font-size: 13px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.yamm-product-samples__arrow { justify-self: end; font-size: 22px; font-weight: 400; }
@media (max-width: 900px) {
  .yamm-product-samples__card,
  .yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"] { min-height: 82px; grid-template-columns: 78px minmax(0,1fr) 18px; padding: 8px 11px; gap: 12px; }
  .yamm-product-samples__card img,
  .yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"] img { width: 78px; height: 78px; }
  .yamm-product-samples__copy strong { font-size: 13px; }
  .yamm-product-samples__copy small { font-size: 12px; }
}

/* Archive #314: the original 1px conic ring and four-second rotation.
 * Scoped CSS replaces the old document-wide class-adding observer. */
:is(.yamm-product-samples__card,.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],.yamm-cart-v2__item--samples) {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  background: #fff !important;
  animation: none;
}
:is(.yamm-product-samples__card,.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],.yamm-cart-v2__item--samples)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg,#ff003c,#ff7a00,#ffcc00,#a6ff00,#00ff9d,#00d5ff,#0066ff,#7f00ff,#ff00bf,#ff003c);
  animation: yamm-samples-archive-ring 4s linear infinite;
  z-index: -2;
  pointer-events: none;
}
:is(.yamm-product-samples__card,.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],.yamm-cart-v2__item--samples)::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 14px;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}
:is(.yamm-product-samples__card,.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],.yamm-cart-v2__item--samples) > * { position: relative; z-index: 1; }
.yamm-cart-v2__item--samples,
.yamm-cart-v2__item--samples::before,
.yamm-cart-v2__item--samples::after { border-radius: 0 !important; }
@keyframes yamm-samples-archive-ring {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.yamm-product-samples__card,.yamm-cart-v2__extra-card[data-yamm-cart-modal="samples"],.yamm-cart-v2__item--samples)::before { animation: none; }
}

/* The same selected/limit states in both samples pickers. */
:is(.yamm-product-samples__list,.yamm-cart-modal__samples-list) :is(.yamm-product-samples__item,.yamm-cart-modal__sample):has(input:checked) {
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--yamm-samples-border-angle),#ff003c,#ff7a00,#ffcc00,#00ff9d,#00d5ff,#7f00ff,#ff00bf,#ff003c) border-box;
  animation: yamm-samples-border-turn 8s linear infinite;
}
/* Reserve equal inset and spacing before selection, so rows never touch. */
.yamm-product-samples__body .yamm-product-samples__list,
.yamm-cart-modal__samples .yamm-cart-modal__samples-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px;
  border-top: 0;
}
.yamm-product-samples__list .yamm-product-samples__item,
.yamm-cart-modal__samples-list .yamm-cart-modal__sample {
  margin: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-bottom-color: #e6e6e6;
  border-radius: 8px;
}
:is(.yamm-product-samples__item,.yamm-cart-modal__sample).is-limit-disabled {
  opacity: .38;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  :is(.yamm-product-samples__list,.yamm-cart-modal__samples-list) :is(.yamm-product-samples__item,.yamm-cart-modal__sample):has(input:checked) { animation: none; }
}