/* Cyara visual system — production sanitation layer */
:root {
  --cyara-content: 1320px;
  --cyara-radius-sm: 12px;
  --cyara-radius-md: 18px;
  --cyara-radius-lg: 22px;
  --cyara-type-xs: 12px;
  --cyara-type-sm: 14px;
  --cyara-type-body: 16px;
  --cyara-type-lead: 18px;
  --cyara-leading-body: 1.6;
}

html {
  overflow-x: hidden;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

html body .topbar {
  min-height: 36px;
  font-size: 11px;
  line-height: 1.25;
}

html body .shopNav {
  height: 78px;
  gap: 28px;
}

html body .shopBrand small {
  font-size: 10px;
}

html body .shopLinks {
  gap: 24px;
  font-size: 14px;
}

html body .navSearch input,
html body .mobileSearch input,
html body .navSearchLink {
  font-size: 14px;
}

html body .cartButton {
  font-size: 12px;
}

html body .seoBreadcrumb {
  display: flex;
  align-items: center;
  width: min(var(--cyara-content), calc(100% - 48px));
  min-height: 42px;
  margin: 14px auto 0;
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

html body .seoBreadcrumb ol {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .seoBreadcrumb li {
  display: flex;
  min-width: 0;
  align-items: center;
}

html body .seoBreadcrumb li + li::before {
  flex: none;
  margin-right: 9px;
  color: #aaa69e;
  content: "/";
}

html body .seoBreadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

html body .seoBreadcrumb a:hover {
  color: var(--ink);
}

html body .seoBreadcrumb [aria-current="page"] {
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .storeHero {
  height: 540px;
}

html body .storeHeroCopy {
  width: min(590px, 52%);
}

html body .storeHeroCopy h1 {
  max-width: 570px;
  margin: 18px 0;
  font-size: clamp(48px, 4.8vw, 66px) !important;
  line-height: 0.98 !important;
}

html body .storeHeroCopy > p,
html body .shopSection header p,
html body .categoryBanners p,
html body .aboutShop > div > p,
html body .homeSection header p,
html body .categoryHub header p,
html body .homeSplit p,
html body .marketBanner p,
html body .pageHero p,
html body .flowHeader p,
html body .storyHero p,
html body .policyPage header > p,
html body .visualEditorial p,
html body .detailStory p,
html body .related header p,
html body .checkoutHead p,
html body .cyaraAboutEyebrow,
html body .cyaraAboutSectionHead p,
html body .guidesCinemaCopy > p,
html body .guideSpotlight > div > p {
  font-size: 12px;
  line-height: 1.35;
}

html body .storeHeroCopy > span,
html body .pageHero span,
html body .visualEditorial span,
html body .homeSplit > div > span,
html body .guideSpotlight > div > span,
html body .dealSpotlightCopy > span,
html body .cyaraAboutHeroCopy > span,
html body .cyaraAboutClosingCopy > span,
html body .premiereSynopsis {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html body .storeHeroCopy a,
html body .storeHeroCopy > div > button,
html body .categoryBanners button,
html body .aboutShop > a,
html body .visualEditorial a,
html body .homeSection header > a,
html body .homeSplit a,
html body .marketBanner > a,
html body .primaryBuy,
html body .notifyProduct,
html body .guidesCinemaCopy > a,
html body .guideSpotlight > div > a,
html body .offersCatalogLink {
  min-height: 46px;
  font-size: 12px;
  line-height: 1.2;
}

html body .heroProduct {
  width: 270px;
  min-height: 150px;
}

html body .heroProduct > span,
html body .heroProduct small,
html body .heroProduct button,
html body .heroProduct > div > a {
  font-size: 12px;
}

html body .heroProduct b {
  font-size: 22px;
}

html body .trustStrip > div {
  min-height: 88px;
  padding: 18px 22px;
}

html body .trustStrip b {
  font-size: 15px;
}

html body .trustStrip small,
html body .offersTrustRail small {
  font-size: 12px;
  line-height: 1.45;
}

html body .shopSection,
html body .homeSection,
html body .simpleListing {
  padding-top: 76px;
  padding-bottom: 86px;
}

html body .shopSection h2,
html body .homeSection h2,
html body .categoryHub h2,
html body .homeSplit h2,
html body .visualEditorial h2,
html body .aboutShop h2,
html body .guideMoments h2,
html body .guidesCollection h2,
html body .offersCatalog h2,
html body .related header h2 {
  font-size: clamp(36px, 3.8vw, 52px) !important;
  line-height: 1 !important;
}

html body .marketPremiere h2 {
  font-size: clamp(36px, 3.8vw, 52px) !important;
  line-height: 1 !important;
}

html body .shopSection header div > small,
html body .shopSection > header > span,
html body .homeSection header > span,
html body .guideMoments header > span,
html body .guidesCollection header > span,
html body .offersCatalog header > span {
  font-size: 14px;
  line-height: 1.55;
}

html body .productGrid {
  align-items: stretch;
}

html body .productCard {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

html body .productImage {
  height: 246px;
}

html body .productInfo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px;
}

html body .productInfo > p,
html body .productBadge,
html body .related a small,
html body .guideCard small,
html body .categoryHub em,
html body .guideMoments small {
  font-size: 11px;
  line-height: 1.35;
}

html body .productInfo h3 {
  min-height: 44px;
  font-size: 20px;
  line-height: 1.12;
}

html body .productMeta,
html body .productInfo > small,
html body .related a > span {
  font-size: 12px;
  line-height: 1.5;
}

html body .productInfo > strong {
  font-size: 22px;
}

html body .cardActions {
  margin-top: auto;
}

html body .addButton {
  min-height: 44px;
  height: auto;
  font-size: 12px;
}

html body .categoryBanners article,
html body .categoryHub > div > a,
html body .guideMoments > div > a,
html body .offerPaths > a {
  height: 410px;
}

html body .categoryBanners h2,
html body .categoryHub b,
html body .guideMoments b,
html body .offerPaths h2 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1 !important;
}

html body .categoryHub small,
html body .guideCard p,
html body .cyaraAboutSteps p,
html body .cyaraAboutCommitments p,
html body .cyaraAboutValues p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body .pageHero {
  height: 360px;
}

html body .pageHero h1,
html body .detailBuy h1,
html body .checkoutHead h1,
html body .flowHeader h1,
html body .guidesCinemaCopy h1,
html body .offersCinemaCopy h1,
html body .cyaraAboutHero h1 {
  font-size: clamp(46px, 4.8vw, 64px) !important;
  line-height: 0.98 !important;
}

html body .catalogBar input,
html body .catalogBar select,
html body .filterToggle,
html body .catalogBody aside div > button,
html body .filters button,
html body .catalogPagination button,
html body .catalogPagination span {
  font-size: 13px;
}

html body .detailShort {
  font-size: 16px;
  line-height: 1.6;
}

html body .detailStats small,
html body .detailBuy > small,
html body .installments,
html body .stock b,
html body .stock small,
html body .paymentTrust,
html body .marketBuy b,
html body .marketBuy small,
html body .checkoutMl b,
html body .checkoutMl small {
  font-size: 12px;
  line-height: 1.45;
}

html body .detailStory h2,
html body .guideSpotlight h2,
html body .cyaraAboutIntro h2,
html body .cyaraAboutSectionHead h2,
html body .cyaraAboutTrustCopy h2,
html body .cyaraAboutClosingCopy h2,
html body .guidesManifesto h2,
html body .dealSpotlightCopy h2,
html body .offerChoice h2 {
  font-size: clamp(36px, 3.8vw, 52px) !important;
  line-height: 1 !important;
}

html body .detailStory > div > span,
html body .detailStory li,
html body .guideChecklist > span,
html body .cyaraAboutIntro > div:last-child > p,
html body .cyaraAboutSectionHead > span,
html body .cyaraAboutTrustCopy > span,
html body .offerChoice > p {
  font-size: 15px;
  line-height: 1.65;
}

html body .guideCard h3,
html body .cyaraAboutSteps h3 {
  font-size: 24px;
}

html body .guideCard em,
html body .guideMoments em,
html body .cyaraAboutActions a,
html body .cyaraAboutClosingActions a {
  font-size: 12px;
}

html body .guideCard,
html body .guideCardWide {
  min-height: 250px;
}

html body .cyaraAboutHero {
  min-height: 590px;
}

html body .cyaraAboutHeroCopy {
  padding-top: 76px;
}

html body .cyaraAboutProof span,
html body .cyaraAboutStatus header span,
html body .cyaraAboutStatus header small,
html body .cyaraAboutStatus article small,
html body .cyaraAboutStatus article em,
html body .cyaraAboutStatus footer a {
  font-size: 12px;
  line-height: 1.45;
}

html body .cyaraAboutSteps article,
html body .cyaraAboutValues article,
html body .cyaraAboutCommitments article {
  min-height: 0;
}

html body .faqList p,
html body .helpCTA p,
html body .contactCards p,
html body .contactLayout label,
html body .contactLayout input,
html body .contactLayout textarea,
html body .policyPage p,
html body .policyPage li {
  font-size: 15px;
  line-height: 1.65;
}

html body .flowHeader {
  padding-top: 56px;
  padding-bottom: 42px;
}

html body .checkoutForm label,
html body .checkoutForm input,
html body .checkoutForm select,
html body .checkoutForm textarea,
html body .orderSummary,
html body .cartItem,
html body .checkoutLoading {
  font-size: 14px;
}

html body .proFooter > div > b,
html body .footerNavigation b,
html body .footerContact b,
html body .footerPayments b {
  font-size: 16px;
}

html body .proFooter > div > a,
html body .footerNavigation a,
html body .footerContact,
html body .footerIdentity p,
html body .footerCompany,
html body .footerTrustBar,
html body .footerMarketplace,
html body .shopFooter p,
html body .shopFooter > small,
html body .shopFooter > div {
  font-size: 13px;
  line-height: 1.55;
}

html body .copyright {
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  html body .topbar {
    min-height: 30px;
    font-size: 10px;
  }

  html body .shopNav {
    height: 64px;
    padding-inline: 14px;
  }

  html body .shopBrand img {
    width: 34px;
    height: 34px;
  }

  html body .seoBreadcrumb {
    width: calc(100% - 24px);
    min-height: 36px;
    margin-top: 8px;
    padding: 0 2px;
    font-size: 12px;
  }

  html body .categoryGallery {
    padding-top: 6px;
  }

  html body .categoryCard {
    opacity: 1;
    animation: none !important;
    transform: none !important;
  }

  html body .storeHero {
    height: 560px;
  }

  html body .storeHeroCopy {
    inset: auto 20px 24px;
  }

  html body .storeHeroCopy h1,
  html body .pageHero h1,
  html body .detailBuy h1,
  html body .checkoutHead h1,
  html body .flowHeader h1,
  html body .guidesCinemaCopy h1,
  html body .offersCinemaCopy h1,
  html body .cyaraAboutHero h1 {
    margin-block: 12px 14px;
    font-size: clamp(34px, 10vw, 40px) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  html body .storeHeroCopy > span,
  html body .pageHero span,
  html body .visualEditorial span,
  html body .homeSplit > div > span,
  html body .guideSpotlight > div > span,
  html body .dealSpotlightCopy > span,
  html body .cyaraAboutHeroCopy > span,
  html body .cyaraAboutClosingCopy > span {
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  html body .storeHeroCopy > div {
    gap: 8px;
    margin-top: 18px;
  }

  html body .storeHeroCopy a,
  html body .storeHeroCopy > div > button {
    min-height: 42px;
    padding-inline: 13px;
    font-size: 11px;
  }

  html body .trustStrip > div {
    min-height: 70px;
    padding: 13px 16px;
  }

  html body .shopSection,
  html body .homeSection,
  html body .simpleListing {
    padding: 56px 12px 66px;
  }

  html body .shopSection h2,
  html body .homeSection h2,
  html body .categoryHub h2,
  html body .homeSplit h2,
  html body .visualEditorial h2,
  html body .aboutShop h2,
  html body .guideMoments h2,
  html body .guidesCollection h2,
  html body .offersCatalog h2,
  html body .related header h2,
  html body .marketPremiere h2,
  html body .detailStory h2,
  html body .guideSpotlight h2,
  html body .cyaraAboutIntro h2,
  html body .cyaraAboutSectionHead h2,
  html body .cyaraAboutTrustCopy h2,
  html body .cyaraAboutClosingCopy h2,
  html body .guidesManifesto h2,
  html body .dealSpotlightCopy h2,
  html body .offerChoice h2 {
    font-size: clamp(28px, 8.5vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }

  html body .productGrid {
    gap: 10px;
  }

  html body .productImage {
    height: 150px;
  }

  html body .productInfo {
    padding: 12px;
  }

  html body .productInfo h3 {
    min-height: 38px;
    margin: 7px 0 9px;
    font-size: 17px;
  }

  html body .productMeta {
    display: flex;
    min-height: 0;
    flex-wrap: wrap;
    gap: 4px 9px;
    padding-bottom: 10px;
    font-size: 11px;
    line-height: 1.35;
  }

  html body .productMeta span {
    display: inline-flex;
  }

  html body .productInfo > small {
    display: none;
  }

  html body .productInfo > strong {
    margin-bottom: 10px;
    font-size: 19px;
  }

  html body .addButton {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 11px;
  }

  html body .addButton span::after {
    font-size: 11px;
  }

  html body .categoryBanners article,
  html body .categoryHub > div > a,
  html body .guideMoments > div > a,
  html body .offerPaths > a {
    height: 340px;
  }

  html body .categoryBanners h2,
  html body .categoryHub b,
  html body .guideMoments b,
  html body .offerPaths h2 {
    font-size: 30px !important;
  }

  html body .pageHero {
    height: 310px;
  }

  html body .pageHero > div {
    right: 22px;
    left: 22px;
  }

  html body .catalogExperience {
    padding: 36px 12px 72px;
  }

  html body .detailBuy {
    padding: 24px 18px;
  }

  html body .detailImage {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  html body .detailStats {
    margin: 20px 0;
  }

  html body .detailStory > div,
  html body .guideSpotlight > div,
  html body .dealSpotlightCopy,
  html body .cyaraAboutClosingCopy {
    padding: 30px 22px;
  }

  html body .detailStory > div > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  html body .guideCard,
  html body .guideCardWide {
    min-height: 0;
  }

  html body .guideCard > div {
    height: 190px;
  }

  html body .guideCard > section {
    padding: 20px;
  }

  html body .guidesCinema,
  html body .offersCinema {
    height: 570px;
  }

  html body .guidesManifesto {
    margin-block: 58px;
  }

  html body .cyaraAboutHero {
    min-height: 610px;
  }

  html body .cyaraAboutHeroCopy {
    bottom: 118px;
    padding: 22px;
  }

  html body .cyaraAboutProof span {
    min-height: 34px;
    font-size: 11px;
  }

  html body .cyaraAboutIntro,
  html body .cyaraAboutTrust {
    padding-top: 58px;
    margin-block: 58px;
  }

  html body .cyaraAboutMethod {
    padding: 30px 18px;
  }

  html body .cyaraAboutValues {
    grid-template-columns: 1fr;
  }

  html body .cyaraAboutClosing {
    margin-top: 58px;
  }

  html body .flowHeader {
    padding: 38px 18px 28px;
  }

  html body .proFooter {
    gap: 28px;
    padding: 42px 22px 24px;
  }

  html body .footerCore,
  html body .footerNavigation,
  html body .footerTrustBar {
    gap: 24px;
  }
}

@media (max-width: 420px) {
  html body .storeHeroCopy > div {
    align-items: stretch;
    flex-direction: column;
  }

  html body .storeHeroCopy a,
  html body .storeHeroCopy > div > button {
    justify-content: center;
    width: 100%;
  }

  html body .productInfo > p,
  html body .productBadge {
    font-size: 10px;
  }

  html body .productMeta {
    font-size: 10px;
  }

  html body .purchaseRow {
    grid-template-columns: 82px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Rendering containment is deliberately limited to content after the first view. */
@supports (content-visibility: auto) {
  html body .shopSection:not(:first-of-type),
  html body .homeSection:not(:first-of-type),
  html body .related,
  html body .guideMoments,
  html body .guidesCollection,
  html body .offersCatalog,
  html body .cyaraAboutSteps,
  html body .cyaraAboutValues,
  html body .cyaraAboutCommitments,
  html body .faqList,
  html body .proFooter {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }
}

@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 140ms;
    animation-timing-function: ease-out;
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* The hero image is the home LCP: paint it immediately and animate only non-critical UI. */
html body .heroBg {
  animation: none;
}

.editorialReviewMeta {
  display: block;
  margin: -0.25rem 0 1rem;
  color: #6f6b64;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}