@layer components, pages;

@layer components {
  .recommendation-shell { width: min(100% - clamp(1.5rem, 4vw, 3rem), 76rem); margin-inline: auto; }
  .recommendation-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
  .recommendation-heading h2 { color: #343a40; font-size: clamp(1.55rem, 3vw, 2.35rem); }
  .recommendation-heading p:last-child { margin-top: .35rem; color: #68717a; }
  .recommendation-heading > a { display: inline-flex; min-height: 2.75rem; align-items: center; color: #343a40; font-weight: 800; text-underline-offset: .25em; }
  .recommendation-eyebrow { margin-bottom: .45rem; color: #9a6b12; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
  .recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .recommendation-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .recommendation-card { overflow: hidden; border: 1px solid #dce3e8; border-radius: 1.1rem; background: #fff; box-shadow: 0 .5rem 1.6rem rgb(52 58 64 / 6%); }
  .recommendation-card > a { display: block; overflow: hidden; aspect-ratio: 1.08 / 1; background: #f3f4f4; }
  .recommendation-card picture, .recommendation-card img { width: 100%; height: 100%; }
  .recommendation-card img { box-sizing: border-box; padding: 7%; object-fit: contain; transition: transform .22s ease; }
  .recommendation-card:hover img { transform: scale(1.035); }
  .recommendation-card > div { padding: 1rem; }
  .recommendation-card span { color: #7a838b; font-size: .72rem; }
  .recommendation-card h3 { min-height: 2.6em; margin-top: .3rem; font-size: .95rem; }
  .recommendation-card h3 a { color: #343a40; text-decoration: none; }
  .recommendation-card strong { display: block; margin-top: .6rem; color: #343a40; font-size: 1.05rem; }
  .recommendation-card form { margin-top: .8rem; }
  .recommendation-card button, .bundle-card button { display: inline-flex; width: 100%; min-height: 2.8rem; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: .7rem; background: #343a40; color: #fff; cursor: pointer; font-weight: 800; }
  .recommendation-line-link, .recommendation-line-order a { display: inline-flex; width: 100%; min-height: 2.8rem; align-items: center; justify-content: center; gap: .45rem; border-radius: .7rem; background: #06c755; color: #fff; font-weight: 800; text-decoration: none; }
  .recommendation-line-order { display: grid; gap: .65rem; padding-left: 1.5rem; border-left: 1px solid #e2ded5; }
  .recommendation-line-order span { color: #68717a; font-size: .8rem; }
  .recommendation-card button:disabled, .bundle-card button:disabled { cursor: wait; opacity: .65; }
  .recommendation-card .ui-icon, .bundle-card .ui-icon { width: 1.1rem; height: 1.1rem; }
  .recommendation-announcement { min-height: 1.5rem; margin-top: .75rem; color: #11643d; font-size: .82rem; font-weight: 750; }
}

@layer pages {
  .recommendation-section { padding-block: clamp(2.75rem, 6vw, 4.5rem); border-top: 1px solid #e2e5e7; }
  .recommendation-section--bestsellers { border-top: 0; background: #f6f7f7; }
  .recommendation-section--bundle { background: #f4f1eb; }
  .bundle-card { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem; align-items: center; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #dad6cd; border-radius: 1.25rem; background: #fff; }
  .bundle-products { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; }
  .bundle-products article { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .bundle-products picture { display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: .85rem; background: #f3f4f4; }
  .bundle-products img { width: 100%; height: 100%; padding: 7%; object-fit: contain; }
  .bundle-products h3 { color: #343a40; font-size: .95rem; }
  .bundle-products strong { display: block; margin-top: .35rem; color: #343a40; }
  .bundle-plus { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: #ece7dc; color: #5c5549; font-size: 1.2rem; font-weight: 900; }
  .bundle-card form { padding-left: 1.5rem; border-left: 1px solid #e2ded5; }
  .bundle-card form > div { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
  .bundle-card form span { color: #68717a; font-size: .8rem; }
  .bundle-card form strong { color: #343a40; }
}

@media (max-width: 60rem) {
  .recommendation-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundle-card { grid-template-columns: 1fr; }
  .bundle-card form { padding: 1rem 0 0; border-top: 1px solid #e2ded5; border-left: 0; }
}

@media (max-width: 42rem) {
  .recommendation-heading { align-items: flex-start; flex-direction: column; }
  .recommendation-grid, .recommendation-grid--four { display: grid; grid-auto-columns: minmax(15rem, 82vw); grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .recommendation-card { scroll-snap-align: start; }
  .bundle-products { grid-template-columns: 1fr; }
  .bundle-products article { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .bundle-plus { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .recommendation-card img { transition: none; }
}