/* ==========================================================================
   SEGAFREDO — Template-level styles (collection, product, cart, pages)
   ========================================================================== */

/* ---------- Page banner (collection / page / blog) ---------- */
.page-banner { position: relative; overflow: hidden; background: var(--color-black); }
.page-banner__img { position: absolute; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; opacity: .55; mask-image: linear-gradient(90deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); }
.page-banner__inner { position: relative; padding-block: var(--space-7) var(--space-8); }
.page-banner h1 { max-width: 14ch; margin-bottom: var(--space-3); }
.page-banner__text { max-width: 38em; color: rgba(255,255,255,.88); font-size: var(--fs-lg); }
.page-banner--light { background: var(--color-grey-bg); color: var(--color-black); }
.breadcrumbs { margin-bottom: var(--space-5); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .6; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: inherit; }
.on-dark .breadcrumbs { color: #d9d9d9; }
.on-dark .breadcrumbs a:hover { color: #fff; }
.subnav-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin-top: var(--space-5); }
.subnav-chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.4rem 1rem; border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.subnav-chip:hover, .subnav-chip[aria-current="page"] { background: #fff; color: var(--color-black); border-color: #fff; }

/* ---------- Collection ---------- */
.collection { padding-top: var(--space-6); }
.collection__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-grey-border); }
.collection__count { margin: 0; font-size: var(--fs-sm); color: var(--color-grey-text); order: 3; width: 100%; }
.collection__sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; }
.collection__sort .select { min-height: 2.75rem; width: auto; }
@media (min-width: 990px) {
  .collection__filter-btn { display: none !important; }
  .collection__count { order: 0; width: auto; }
}
.collection__layout { display: grid; gap: var(--space-6); }
@media (min-width: 990px) { .collection__layout { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-7); align-items: start; } }

/* Facets: a drawer on mobile, a sticky sidebar on desktop */
@media (min-width: 990px) {
  .facets.drawer { position: sticky; top: calc(var(--header-height) + 1rem); transform: none; visibility: visible; width: auto; box-shadow: none; z-index: 1; background: transparent; }
  .facets .facets__head, .facets .facets__foot { display: none; }
  .facets .facets__body { padding: 0; overflow: visible; }
}
.facet { border-bottom: 1px solid var(--color-grey-border); }
.facet__summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.facet__summary::-webkit-details-marker { display: none; }
.facet__summary .icon { width: 1rem; height: 1rem; transition: transform var(--dur); }
.facet[open] .facet__summary .icon { transform: rotate(180deg); }
.facet__body { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); }
.facet__count { color: var(--color-grey-text); }
.facet__check.is-empty { opacity: .5; }
.price-range__inputs { display: flex; align-items: flex-end; gap: var(--space-2); }
.price-range__inputs .field { flex: 1; }
.price-range__inputs .input { min-height: 2.75rem; }
.price-range__inputs > span { padding-bottom: 0.8rem; }
.price-range__slider { position: relative; height: 1.5rem; margin: 0 0 var(--space-3); }
.price-range__slider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: var(--color-grey-border); transform: translateY(-50%); }
.price-range__fill { position: absolute; top: 50%; height: 4px; background: var(--color-red); transform: translateY(-50%); }
.price-range__slider input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-range__slider input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-black); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--color-black); cursor: pointer; }
.price-range__slider input::-moz-range-thumb { pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-black); border: 3px solid #fff; cursor: pointer; }
.price-range__slider input::-webkit-slider-runnable-track { background: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin-bottom: var(--space-5); }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0.3rem 0.8rem; border: 1px solid var(--color-black); background: #fff; font-size: var(--fs-xs); font-weight: 700; }
.filter-chip .icon { width: 0.85rem; height: 0.85rem; }
.filter-chip:hover { background: var(--color-black); color: #fff; }
.filter-chip--clear { border-color: transparent; text-decoration: underline; }
.collection__empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7) 0; }
.load-more { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.load-more__status { margin: 0; font-size: var(--fs-sm); color: var(--color-grey-text); }
.load-more__bar { width: 12rem; height: 3px; background: var(--color-grey-border); }
.load-more__bar span { display: block; height: 100%; background: var(--color-red); transition: width 300ms var(--ease); }
.price-range .hint { font-size: var(--fs-xs); color: var(--color-grey-text); margin: var(--space-2) 0 0; }

/* ---------- Product ---------- */
.product { padding-block: var(--space-5) var(--section-pad); }
.product__crumbs { color: var(--color-grey-text); }
.product__layout { display: grid; gap: var(--space-6); }
@media (min-width: 990px) { .product__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
@media (min-width: 990px) { .product__media { position: sticky; top: calc(var(--header-height) + 1.5rem); } }   /* sticky gallery */
.gallery { position: relative; }
.gallery__main { list-style: none; background: var(--color-grey-bg); }
.gallery__slide img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery .card__badges { top: var(--space-4); left: var(--space-4); }
.gallery__thumbs { list-style: none; display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.gallery__thumb { width: 5rem; padding: 0; border: 2px solid transparent; background: var(--color-grey-bg); }
.gallery__thumb[aria-current="true"] { border-color: var(--color-black); }
.gallery__thumb img { aspect-ratio: 1; object-fit: cover; }
.product__info { display: grid; gap: var(--space-4); align-content: start; }
.product__brand { display: inline-flex; align-items: center; gap: var(--space-3); justify-self: start; text-decoration: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.product__brand img { height: 2.25rem; width: auto; }
.product__brand:hover span { text-decoration: underline; }
.product__title { font-size: var(--fs-h2); margin: 0; }
.product__rating { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; font-size: var(--fs-sm); text-decoration: none; }
.product__price { font-size: 1.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.product__tax { margin: -0.5rem 0 0; font-size: var(--fs-xs); color: var(--color-grey-text); }
.product__options { display: grid; gap: var(--space-4); }
.purchase-options { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.purchase-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 2px solid var(--color-grey-border); cursor: pointer; }
.purchase-option:has(input:checked) { border-color: var(--color-black); }
.purchase-option input { margin-top: 0.25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--color-black); flex: none; }
.purchase-option__body { display: grid; gap: 0.2rem; flex: 1; }
.purchase-option__title { font-weight: 700; display: flex; gap: var(--space-2); align-items: center; }
.purchase-option__price { font-size: var(--fs-sm); }
.purchase-option__note { font-size: var(--fs-xs); color: var(--color-grey-text); }
.purchase-option__freq { padding: 0 var(--space-4) var(--space-2); }
.purchase-option__freq .select { min-height: 2.75rem; }
.bulk__options { display: flex; gap: var(--space-2); }
.bulk__btn { min-width: 3.5rem; min-height: 2.75rem; border: 2px dashed var(--color-grey-line); background: #fff; font-weight: 700; }
.bulk__btn[aria-pressed="true"] { border-style: solid; border-color: var(--color-black); background: var(--color-black); color: #fff; }
.bulk__note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-grey-text); }
.bulk .label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.product__actions { display: flex; gap: var(--space-3); }
.product__atc { flex: 1; min-height: 3.25rem; font-size: 0.9375rem; }
.product__quote-note { margin: 0; font-size: var(--fs-sm); color: var(--color-grey-text); }
.product__stock { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--color-success); font-weight: 600; }
.product__stock .icon { width: 1.1rem; height: 1.1rem; }
.product__stock.is-out { color: var(--color-error); }
.product__perks { list-style: none; display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--color-grey-bg); font-size: var(--fs-sm); }
.product__perks li { display: flex; align-items: center; gap: var(--space-3); }
.product__perks .icon { width: 1.25rem; height: 1.25rem; color: var(--color-red-strong); }
.accordion { border-top: 1px solid var(--color-grey-border); }
.accordion__item { border-bottom: 1px solid var(--color-grey-border); }
.accordion__item summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--dur); }
.accordion__item[open] summary .icon { transform: rotate(45deg); }
.accordion__body { padding-bottom: var(--space-5); font-size: var(--fs-sm); }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 0.6rem 0; border-bottom: 1px solid var(--color-grey-border); text-align: left; vertical-align: top; }
.specs th { width: 40%; font-weight: 600; color: var(--color-grey-text); }
.product__pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-grey-border); }
.product__pager a { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 700; max-width: 48%; }
.product__pager a[rel="next"] { text-align: right; }
.product__pager-label { display: block; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey-text); }

/* FBT */
.fbt__layout { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 990px) { .fbt__layout { grid-template-columns: 1fr auto; } }
.fbt__items { list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 750px) { .fbt__items { grid-template-columns: repeat(3, 1fr); } }
.fbt__item { position: relative; }
.fbt__plus { position: absolute; left: -1.1rem; top: 40%; width: 1.6rem; height: 1.6rem; display: none; place-items: center; background: var(--color-black); color: #fff; border-radius: 50%; font-weight: 700; z-index: 1; }
@media (min-width: 750px) { .fbt__plus { display: grid; } }
.fbt__card { position: relative; display: grid; gap: var(--space-2); height: 100%; padding: var(--space-4); background: #fff; border: 2px solid transparent; cursor: pointer; }
.fbt__card:has(input:checked) { border-color: var(--color-black); }
.fbt__card input { position: absolute; top: var(--space-3); left: var(--space-3); width: 1.25rem; height: 1.25rem; accent-color: var(--color-black); }
.fbt__card img { width: 7rem; margin-inline: auto; }
.fbt__name { font-weight: 600; font-size: var(--fs-sm); }
.fbt__price { font-weight: 700; }
.fbt__total { display: grid; gap: var(--space-3); justify-items: start; }
.fbt__total p { margin: 0; font-size: var(--fs-lg); }

/* Product reviews placeholder */
.reviews { display: grid; gap: var(--space-6); }
@media (min-width: 990px) { .reviews { grid-template-columns: 18rem 1fr; gap: var(--space-8); } }
.reviews__score { font-family: var(--font-heading); font-size: 4.5rem; line-height: 1; margin: 0 0 var(--space-2); }
.reviews__score span { font-size: 0.4em; color: var(--color-grey-text); }
.reviews__bars { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-xs); }
.reviews__bars li { display: grid; grid-template-columns: 3.5rem 1fr 1.5rem; gap: var(--space-2); align-items: center; }
.reviews__bar { height: 6px; background: #ddd; }
.reviews__bar span { display: block; height: 100%; background: var(--color-black); }
.reviews__list { list-style: none; display: grid; gap: var(--space-3); }
.review { padding: var(--space-5); background: #fff; }
.review__title { font-weight: 700; margin: var(--space-2) 0; }
.review__meta { font-size: var(--fs-xs); color: var(--color-grey-text); }

/* ---------- Cart page ---------- */
.cart-page__layout { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 990px) { .cart-page__layout { grid-template-columns: minmax(0, 1fr) 24rem; } }
.cart-page__head { display: flex; justify-content: space-between; padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-grey-border); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey-text); }
.cart-page .line { grid-template-columns: 6rem 1fr auto; }
.cart-page .line__media img { width: 6rem; height: 6rem; }
.cart-summary { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-grey-bg); }
@media (min-width: 990px) { .cart-summary { position: sticky; top: calc(var(--header-height) + 1rem); } }
.cart-summary h2 { margin: 0; }
.cart-summary .ship-bar { padding: 0; background: none; }
.cart-summary__pay { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--color-grey-text); }
.cart-summary__pay .icon { width: 1rem; height: 1rem; }
.cart-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7) 0; }

/* ---------- Search ---------- */
.search-page__form { display: flex; gap: var(--space-2); max-width: 40rem; margin-top: var(--space-5); }

/* ---------- Blog ---------- */
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.blog-filter .filter-chip[aria-pressed="true"] { background: var(--color-black); color: #fff; }
.blog-grid { list-style: none; display: grid; gap: var(--space-6); }
@media (min-width: 750px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } .blog-grid > li:first-child:not([hidden]) { grid-column: span 3; } }
.article-card { display: grid; gap: var(--space-4); height: 100%; }
.article-card__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-grey-bg); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__meta { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-grey-text); }
.article-card__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.article-card__title a { text-decoration: none; }
@media (min-width: 1200px) {
  .article-card--feature { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--space-7); }
  .article-card--feature .article-card__title { font-size: var(--fs-h2); }
}

/* ---------- For Business ---------- */
.routes { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 750px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; text-decoration: none; background: var(--color-black); }
.route-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.route-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.85)); }
.route-card__body { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1; display: grid; gap: var(--space-2); justify-items: start; }
.route-card__title { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1; text-transform: uppercase; }
.route-card__text { color: #e6e6e6; }
.route-card .link { color: #fff; }
.route-card:hover img { transform: scale(1.05); }
.route-card:hover { color: #fff; }
.quote-summary__items { margin: var(--space-5) auto; text-align: left; max-width: 34rem; }
.route { padding-block: var(--section-pad); border-top: 1px solid var(--color-grey-border); scroll-margin-top: var(--header-height); }
.route__grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 990px) { .route__grid { grid-template-columns: 1fr 1.1fr; } .route--reverse .route__info { order: 2; } }
.route__points { list-style: none; display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.route__points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.route__points .icon { width: 1.25rem; height: 1.25rem; color: var(--color-red); flex: none; margin-top: 0.15rem; }
.route__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: var(--space-5); }
.route__form { padding: var(--space-6); background: var(--color-grey-bg); border-top: 4px solid var(--color-red); scroll-margin-top: calc(var(--header-height) + 1rem); }
.route__form h3 { font-size: var(--fs-h3); }

/* ---------- Brand page ---------- */
.brand-hero { position: relative; overflow: hidden; }
.brand-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.brand-hero__inner { position: relative; padding-block: var(--space-8); }
.brand-hero__logo { display: inline-block; padding: var(--space-3); background: #fff; margin-bottom: var(--space-5); }
.brand-hero__logo img { height: 4rem; width: auto; }
.brand-intro { display: grid; gap: var(--space-5); }
@media (min-width: 990px) { .brand-intro { grid-template-columns: 1fr 1.4fr; gap: var(--space-8); } }
.brand-highlights { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 750px) { .brand-highlights { grid-template-columns: repeat(3, 1fr); } }
.brand-highlights li { padding-top: var(--space-4); border-top: 4px solid var(--color-red); }
.brand-highlights__num { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-red); line-height: 1; }
.brand-highlights h3 { font-size: var(--fs-h4); margin: var(--space-2) 0; }

/* ---------- Locations / service centres ---------- */
.locations { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 750px) { .locations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .locations { grid-template-columns: repeat(3, 1fr); } }
.location-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border: 1px solid var(--color-grey-border); border-top: 4px solid var(--color-black); scroll-margin-top: calc(var(--header-height) + 1rem); }
.location-card.is-target, .location-card:target { border-top-color: var(--color-red); box-shadow: var(--shadow-md); }
.location-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.location-card__state { font-family: var(--font-sub); font-weight: 300; font-size: 1rem; letter-spacing: 0.15em; color: var(--color-grey-text); vertical-align: middle; }
.location-card__row { display: flex; gap: var(--space-3); margin: 0; font-size: var(--fs-sm); }
.location-card__row .icon { width: 1.1rem; height: 1.1rem; color: var(--color-red-strong); flex: none; margin-top: 0.15rem; }
.location-card__hours { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-grey-text); }
.location-card .badge { justify-self: start; margin: 0 0 var(--space-2); }
.location-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.location-card__tags li { padding: 0.15rem 0.6rem; border: 1px solid var(--color-grey-line); font-size: var(--fs-xs); }
.contact-layout { display: grid; gap: var(--space-7); }
@media (min-width: 990px) { .contact-layout { grid-template-columns: 1fr 1.4fr; } }
.contact-layout__phone a { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--fs-h3); text-decoration: none; }
.contact-layout__phone .icon { color: var(--color-red); width: 1.75rem; height: 1.75rem; }
.contact-layout__form { padding: var(--space-6); background: #fff; }

/* ---------- Account (login / register) ---------- */
.account__grid { display: grid; gap: var(--space-6); }
@media (min-width: 990px) { .account__grid { grid-template-columns: 1.2fr 1fr; gap: 0; } }
.account__panel { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6) 0; max-width: 34rem; }
@media (min-width: 990px) { .account__panel { padding: var(--space-6) var(--space-8) var(--space-6) 0; } }
.account__aside { padding: var(--space-7) var(--space-6); border-top: 6px solid var(--color-red); }
.page-banner--light .page-banner__text { color: var(--color-black); }

/* Rounded corners on template-level boxes and images */
.gallery__main, .gallery__slide img, .article-card__media, .route-card, .route__img, .route__form,
.location-card, .contact-layout__form, .cart-summary, .fbt__card, .purchase-option, .bulk__btn,
.product__perks, .review, .subnav-chip, .brand-hero__logo, .page-banner__img, .account__aside,
.load-more__bar, .reviews__bar, .collection__sort .select, .filter-chip { border-radius: var(--radius); }
.gallery__main, .article-card__media, .route-card { overflow: hidden; }
.gallery__thumb, .gallery__thumb img { border-radius: var(--radius-sm); }
.subnav-chip, .filter-chip { border-radius: var(--radius-pill); }
.page-banner__img { border-radius: 0; }

/* ---------- Collection SEO + FAQs ---------- */
.collection-seo__grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 990px) { .collection-seo__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }
.collection-seo__body h3 { font-size: var(--fs-h4); margin: var(--space-5) 0 var(--space-2); }
.collection-seo__body { position: relative; }
.collection-seo__body.is-clamped { max-height: 14rem; overflow: hidden; }
.collection-seo__body.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5rem; background: linear-gradient(rgba(244,244,244,0), var(--color-grey-bg)); }
.collection-seo__toggle { margin-top: var(--space-4); background: none; border-left: 0; border-right: 0; border-top: 0; padding-inline: 0; cursor: pointer; }
.collection-seo__faqs { padding: var(--space-6); background: #fff; border-radius: var(--radius); }
.collection-seo__faqs .accordion__item summary { text-transform: none; letter-spacing: 0; font-size: 1rem; gap: var(--space-4); text-align: left; }
.collection-seo__faqs .accordion__item:last-child { border-bottom: 0; }

/* ---------- Product accordions: separate rounded grey panels ---------- */
.accordion--cards { display: grid; gap: var(--space-4); border-top: 0; }
.accordion--cards .accordion__item { border: 0; border-radius: var(--radius); background: #EBEBEB; overflow: hidden; }
.accordion--cards .accordion__item summary {
  padding: 1.35rem 1.6rem; gap: var(--space-4);
  font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3;
}
.accordion--cards .accordion__item summary:hover { background: #E2E2E2; }
.accordion--cards .accordion__item summary .icon { width: 1.35rem; height: 1.35rem; stroke-width: 2.4; flex: none; transition: transform var(--dur) var(--ease); }
.accordion--cards .accordion__item[open] summary .icon { transform: rotate(180deg); }
.accordion--cards .accordion__item summary:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.accordion--cards .accordion__body { padding: 0 1.6rem 1.5rem; font-size: 0.9375rem; }
.accordion--cards .specs th, .accordion--cards .specs td { border-color: #d6d6d6; }
.accordion--cards .specs th { color: #4a4a4a; }

/* ---------- Business (B2B) buy box ---------- */
.trade-account { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius); background: var(--color-black); color: #fff; }
.trade-account .icon { width: 1.5rem; height: 1.5rem; color: var(--color-red-on-dark); flex: none; }
.trade-account p { margin: 0; }
.trade-account__name { font-weight: 700; }
.trade-account__meta { font-size: var(--fs-sm); color: #d9d9d9; }
.trade-account__meta a { color: #fff; }
.product__price-note { font-size: var(--fs-sm); font-weight: 400; color: var(--color-grey-text); }
.product__price-retail { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 400; color: var(--color-grey-text); }
.trade { display: grid; gap: var(--space-4); }
.trade-tiers { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-grey-border); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-sm); }
.trade-tiers__title { text-align: left; margin-bottom: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em; }
.trade-tiers__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-grey-text); }
.trade-tiers th, .trade-tiers td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--color-grey-border); }
.trade-tiers thead th { background: var(--color-grey-bg); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.trade-tiers tbody tr:last-child td { border-bottom: 0; }
.trade-tiers td:last-child { font-weight: 700; text-align: right; }
.trade-tiers thead th:last-child { text-align: right; }
.trade-tiers tr.is-active td { background: #FDECEC; }
.trade-tiers tr.is-active td:first-child { box-shadow: inset 4px 0 0 var(--color-red); }
.trade-total { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--fs-sm); }
.b2b-demo { display: grid; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-5); border: 2px dashed var(--color-grey-line); border-radius: var(--radius); }
.b2b-demo p { margin: 0; font-size: var(--fs-sm); }

/* ---------- Coffee profile (at-a-glance, under the price) ---------- */
.profile { --profile-bg: #F8EFE7; --profile-off: #E6D6C6; display: grid; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius); background: var(--profile-bg); }
@media (min-width: 750px) { .profile { padding: var(--space-6); } }
.profile__ph { margin: 0; font-size: .8125rem; color: var(--color-grey-text); }
.profile__label, .profile__scale-label, .profile__fact-label { display: block; margin: 0 0 var(--space-2); font-family: var(--font-sub); font-weight: 400; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-grey-text); }
.profile__intensity { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: var(--space-2); }
.profile__intensity .profile__label { margin: 0; }
.profile__intensity-value { margin: 0; font-family: var(--font-sub); font-size: 1rem; color: var(--color-grey-text); line-height: 1; }
.profile__intensity-value strong { font-family: var(--font-heading); font-weight: 400; font-size: 2.25rem; color: var(--color-black); }
.profile__bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
.profile__bars span { height: 10px; border-radius: 3px; background: var(--profile-off); }
.profile__bars span.on { background: var(--color-red); }
.profile__note-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.profile__note { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); background: var(--color-white); text-align: center; font-weight: 600; font-size: .875rem; }
.profile__note-icon { width: 2rem; height: 2rem; color: var(--color-red); }
.profile__scales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.profile__dots { display: flex; gap: 4px; }
.profile__dots span { flex: 1; height: 8px; border-radius: 4px; background: var(--profile-off); }
.profile__dots span.on { background: var(--color-black); }
.profile__ends { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: .75rem; color: var(--color-grey-text); }
.profile__facts { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--profile-off); list-style: none; }
.profile__fact { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .9375rem; }
.profile__fact > svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .125rem; color: var(--color-red); }
.profile__fact-label { margin-bottom: 0; font-size: .75rem; }
.profile__use { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.profile__use li { display: inline-flex; align-items: center; gap: var(--space-2); padding: .375rem .75rem; border-radius: 999px; background: var(--color-white); font-size: .8125rem; font-weight: 600; }
.profile__use svg { width: 1.125rem; height: 1.125rem; }
@media (min-width: 600px) {
  .profile__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Short description (2 lines) + Read more */
.product__short { margin: var(--space-4) 0 var(--space-5); }
.product__short p { margin: 0 0 var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-grey-text); }

/* ---------- Full description + video ---------- */
.product-description { background: var(--color-grey-bg); }
.product-description__inner { display: grid; gap: var(--space-7); max-width: 60rem; }
.product-description .rte { font-size: 1.0625rem; line-height: 1.7; }
.product-description .rte p { max-width: 68ch; }
.text-accent { color: var(--color-red-strong); font-weight: 700; }
.product-video { margin: 0; }
.product-video__poster, .product-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--color-black); cursor: pointer; }
.product-video__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-video__poster:hover img { transform: scale(1.03); }
.product-video__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--color-red-strong); color: var(--color-white); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.product-video__play svg { width: 1.75rem; height: 1.75rem; margin-left: 4px; }
.product-video figcaption { margin-top: var(--space-3); font-size: .875rem; color: var(--color-grey-text); }

/* Coffee at a glance (under the price) */
.glance { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "int more" "notes notes"; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: #F8EFE7; }
.glance__intensity { grid-area: int; display: flex; align-items: center; gap: var(--space-3); }
.glance__label { font-family: var(--font-sub); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-grey-text); }
.glance__bars { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 6px; gap: 3px; }
.glance__bars span { height: 16px; border-radius: 2px; background: #E0CFBF; }
.glance__bars span.on { background: var(--color-red); }
.glance__value { font-family: var(--font-sub); font-size: .875rem; color: var(--color-grey-text); }
.glance__value strong { font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; color: var(--color-black); }
.glance__notes { grid-area: notes; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.glance__notes li { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .5rem; border-radius: 999px; background: var(--color-white); font-size: .8125rem; font-weight: 600; }
.glance__icon { width: 1.125rem; height: 1.125rem; color: var(--color-red); }
.glance__more { display: inline-flex; align-items: center; gap: .25rem; grid-area: more; white-space: nowrap; font-size: .8125rem; font-weight: 700; color: var(--color-black); }
.glance__more .icon { width: 1rem; height: 1rem; }

/* Full coffee profile section (above the description) */
.product-profile__inner { display: grid; gap: var(--space-6); }
.product-profile__text { margin: 0; color: var(--color-grey-text); max-width: 40ch; }
@media (min-width: 990px) {
  .product-profile__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
  .product-profile__intro { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
}

/* ==========================================================================
   Machine product template (product.machine)
   ========================================================================== */
.product__tagline { margin: 0; font-size: 1.0625rem; color: var(--color-grey-text); }
.product__jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: 700; }
.inbox { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.inbox li { display: flex; gap: var(--space-2); align-items: center; }
.inbox .icon { width: 1.125rem; height: 1.125rem; color: var(--color-success); }
.machine-head { margin-bottom: var(--space-6); }
.machine-head .h2 { margin: 0; }
.machine-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-grey-text); }

/* Gallery carousel (loops) */
.machine-gallery { overflow: hidden; }
.machine-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.carousel-nav { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.carousel-nav__btn { border: 1.5px solid var(--color-grey-line); border-radius: 50%; background: #fff; }
.carousel-nav__btn:hover { border-color: var(--color-black); }
.loop { position: relative; cursor: grab; touch-action: pan-y; user-select: none; }
.loop:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.loop.is-dragging { cursor: grabbing; }
.loop__track { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; will-change: transform; }
.loop__slide { flex: 0 0 85%; }
.loop__slide img { opacity: .55; transition: opacity .4s ease; }
.loop__slide.is-active img { opacity: 1; }
@media (min-width: 750px) { .loop__slide { flex-basis: 62%; } .loop__track { gap: var(--space-5); } }
@media (min-width: 1200px) { .loop__slide { flex-basis: 48%; } }
.loop__slide figure { margin: 0; }
.loop__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--color-grey-bg); pointer-events: none; }
.loop__slide figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-grey-text); }
.loop__dots { display: flex; justify-content: center; gap: .25rem; margin-top: var(--space-5); }
.loop__dots button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; }
.loop__dots button::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-grey-line); transition: width .3s ease, background .3s ease; }
.loop__dots button[aria-current="true"]::before { width: 1.5rem; background: var(--color-red); }
@media (prefers-reduced-motion: reduce) { .loop__slide img { transition: none; } }

/* Intro + feature cards */
.machine-intro { display: grid; gap: var(--space-6); align-items: center; margin-bottom: var(--space-8); }
.machine-intro__media img { width: 100%; border-radius: var(--radius); }
.machine-intro__sub { margin: var(--space-5) 0 var(--space-2); }
.machine-intro .rte p { max-width: 60ch; }
@media (min-width: 990px) { .machine-intro { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.feature-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius); background: var(--color-grey-bg); }
.feature-card img { width: 100%; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.feature-card__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-2); border-radius: 50%; background: #fff; color: var(--color-red); }
.feature-card__icon .icon { width: 1.75rem; height: 1.75rem; }
.feature-card__title { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.feature-card__text { margin: 0; font-size: var(--fs-sm); color: var(--color-grey-text); }

/* Technical data */
.spec-tabs .tabs { margin-bottom: var(--space-6); }
.spec-panel { display: grid; gap: var(--space-6); align-items: start; }
.spec-panel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
@media (min-width: 990px) { .spec-panel:has(.dims) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.dims { margin: 0; padding: var(--space-5); border-radius: var(--radius); background: #fff; color: var(--color-black); text-align: center; }
.dims svg { width: 100%; max-width: 26rem; height: auto; }
.dims figcaption { margin-top: var(--space-2); font-weight: 700; }
.spec-list { display: grid; margin: 0; border-radius: var(--radius); background: #fff; overflow: hidden; }
@media (min-width: 750px) { .spec-panel:not(:has(.dims)) .spec-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); padding-inline: var(--space-5); } .spec-panel:not(:has(.dims)) .spec-list > div { padding-inline: 0; } }
.spec-list > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-grey-border); }
.spec-list dt { color: var(--color-grey-text); }
.spec-list dd { margin: 0; font-weight: 700; text-align: right; }

/* Downloads + help */
.machine-support__inner { display: grid; gap: var(--space-8); }
@media (min-width: 990px) { .machine-support__inner { grid-template-columns: 1fr 1.3fr; } }
.downloads { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.download { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-grey-border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--dur); }
.download:hover { border-color: var(--color-black); }
.download .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-red); }
.download__label { display: block; font-weight: 700; }
.download__meta { font-size: var(--fs-xs); color: var(--color-grey-text); }
.machine-support__help .h3 { margin: 0 0 var(--space-4); }
.machine-support__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Sticky add-to-cart */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; box-shadow: 0 -4px 20px rgba(34,30,32,.12); }
.sticky-atc__inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.sticky-atc img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-grey-bg); }
.sticky-atc__info { display: grid; flex: 1; min-width: 0; margin: 0; }
.sticky-atc__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__variant { font-size: var(--fs-xs); color: var(--color-grey-text); }
.sticky-atc__price .price__compare, .sticky-atc__price .price__note, .sticky-atc__price small { display: none; }
.sticky-atc__button { min-height: 3rem; padding-inline: var(--space-6); }
@media (max-width: 749px) { .sticky-atc img, .sticky-atc__price { display: none; } .sticky-atc__button { padding-inline: var(--space-4); } }
body.has-sticky-atc .assistant { bottom: 5.75rem; }
body.has-sticky-atc { padding-bottom: 5rem; }

/* ==========================================================================
   Business pages (page.cafe / page.hotel / page.office)
   ========================================================================== */
.banner-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); padding: 0; list-style: none; }
.banner-chips li { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; }
.banner-chips .icon { width: 1rem; height: 1rem; color: var(--color-red-on-dark); }
.page-banner--light .banner-chips li { border-color: var(--color-grey-line); }
.page-banner--light .banner-chips .icon { color: var(--color-red-strong); }
.brand-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.brand-chips li { padding: .375rem .875rem; border-radius: 999px; background: var(--color-grey-bg); font-weight: 700; font-size: var(--fs-sm); }
.on-dark .brand-chips li { background: rgba(255,255,255,.1); }
.feature-row .route__points { margin-bottom: var(--space-6); }
.feature-row + .feature-row { padding-top: 0; }
.feature-row__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 990px) {
  .feature-row__inner { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .feature-row--reverse .feature-row__media { order: 2; }
}
.feature-row__media { aspect-ratio: 14 / 11; overflow: hidden; border-radius: var(--radius); background: var(--color-grey-bg); }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feature-row__media:hover img { transform: scale(1.03); }
.feature-row__title { margin-bottom: 0; }
.feature-row__body .rte { margin-bottom: var(--space-5); }
.feature-row__body .rte p { max-width: 56ch; }
.section-header__text { max-width: 60ch; margin: var(--space-3) 0 0; color: var(--color-grey-text); }
.section-header--center .section-header__text { margin-inline: auto; }

/* Quote block */
.quote-block__inner { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 990px) { .quote-block__inner { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); } .quote-block__intro { position: sticky; top: calc(var(--header-height) + var(--space-5)); } }
.quote-block__intro h2 { margin-bottom: var(--space-4); }
.quote-block__intro .route__points { margin: var(--space-5) 0; }
.quote-block__call { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.quote-block__call .icon { width: 1.5rem; height: 1.5rem; color: var(--color-red-strong); }
.quote-block .route__form { background: #fff; border-radius: var(--radius); }

/* Brand ambassador */
.ambassador { background: var(--color-black); color: #fff; }
.ambassador__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 990px) { .ambassador__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }
.ambassador__intro p { color: #d9d9d9; max-width: 52ch; }
.ambassador__benefits { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ambassador__benefits li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ambassador__benefits strong { display: block; margin-bottom: .125rem; font-size: 1.0625rem; }
.ambassador__text { color: #d9d9d9; font-size: var(--fs-sm); }
.ambassador__text strong { color: #fff; }
.ambassador__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-red-strong); color: #fff; }
.ambassador__icon .icon { width: 1.5rem; height: 1.5rem; }

/* Barista training modules */
.modules { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
@media (min-width: 750px) { .modules { grid-template-columns: repeat(3, 1fr); } }
.module { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius); background: var(--color-grey-bg); overflow: hidden; }
.module::before { content: attr(data-num); position: absolute; top: var(--space-3); right: var(--space-4); font-family: var(--font-heading); font-size: 4.5rem; line-height: 1; color: rgba(215,20,28,.15); }
.module__title { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.module__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.module__list li { position: relative; padding-left: 1.125rem; font-size: var(--fs-sm); }
.module__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-red); }

/* Office packages */
.packages { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 750px) { .packages { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.package { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-5); border-radius: var(--radius); background: #fff; border: 2px solid transparent; }
.package--featured { border-color: var(--color-red-strong); box-shadow: var(--shadow-md); }
.package__flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: .25rem .875rem; border-radius: 999px; background: var(--color-red-strong); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.package__title { margin: 0; font-size: var(--fs-h3); }
.package__size { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-grey-text); font-size: var(--fs-sm); }
.package__size .icon { width: 1.125rem; height: 1.125rem; }
.package__price { margin: var(--space-3) 0 0; display: flex; align-items: baseline; gap: .25rem; }
.package__price strong { font-family: var(--font-heading); font-weight: 400; font-size: 3.25rem; line-height: 1; }
.package__from, .package__price span:last-child { font-size: var(--fs-sm); color: var(--color-grey-text); }
.package__tax { margin: 0 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-grey-text); }
.package__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-4) 0 0; border-top: 1px solid var(--color-grey-border); list-style: none; flex: 1; }
.package__list li { display: flex; gap: var(--space-2); align-items: center; }
.package__list .icon { width: 1.125rem; height: 1.125rem; color: var(--color-success); }
.packages__note { margin: var(--space-5) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--color-grey-text); }

/* FAQ + info tabs */
.faq__inner { max-width: 56rem; }
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.info-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius); background: #fff; }
.info-card .link { justify-self: start; margin-top: var(--space-2); }
.info-panel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Video feature (business pages) */
.video-feature__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 990px) { .video-feature__inner { grid-template-columns: 1fr 1.5fr; gap: var(--space-8); } }
.video-feature__intro p { color: var(--color-grey-text); max-width: 46ch; }
.video-feature__media .product-video__poster { box-shadow: var(--shadow-md); }
.video-feature__duration { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .125rem .5rem; border-radius: 4px; background: rgba(0,0,0,.75); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.section--dark { background: var(--color-black); color: #fff; }