/*-----------------------------------------------------------------------------------

    Project : Fitness Fuel - Health & Fitness Supplement Store
    File    : Ordering, forms, shop filters and policy pages
    Loads   : after ff-theme.css. Uses the --ff-* page tokens and the --ffc-*
              drawer tokens, so light mode follows automatically.

    01. Shared form fields
    02. Checkout (inside the cart drawer)
    03. Contact + store-updates forms
    04. Shop filters
    05. Policy pages
    06. Product page + variant cards
    07. Coupon at checkout
    08. Announcement bar + home offer cards
    09. Scrolling ticker (marquee) on the home page
    10. Product page: label facts + trust section

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. Shared form fields
/*----------------------------------------*/
.ff-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.ff-field {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  min-width: 0;
}

.ff-field[hidden] {
  display: none;
}

.ff-field label,
.ff-field legend {
  margin: 0;
  padding: 0;
  color: var(--ff-text);
  font-size: 14px;
  font-weight: 600;
}

.ff-field__optional {
  color: var(--ff-text-3);
  font-weight: 400;
}

.ff-field input,
.ff-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ff-line-2);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--ff-font-text);
  font-size: 16px; /* 16px stops iOS zooming into the field */
  line-height: 1.4;
}

.ff-field textarea {
  resize: vertical;
}

.ff-field input::placeholder,
.ff-field textarea::placeholder {
  color: var(--ff-text-3);
}

.ff-field input:focus,
.ff-field textarea:focus {
  border-color: var(--ff-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 192, 1, 0.25);
}

.ff-field [aria-invalid="true"] {
  border-color: #F26B5B;
}

.ff-field__error {
  margin: 0;
  color: #F58A7C;
  font-size: 13px;
  line-height: 1.4;
}

.ff-field__error:empty {
  display: none;
}

.ff-form__status {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.ff-form__status:empty {
  display: none;
}

.ff-form__status.is-success {
  color: var(--ff-success-text);
}

.ff-form__status.is-error {
  color: #F58A7C;
}

html[data-theme="light"] .ff-field__error,
html[data-theme="light"] .ff-form__status.is-error {
  color: #B3261E;
}

html[data-theme="light"] .ff-field [aria-invalid="true"] {
  border-color: #B3261E;
}

button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}

/*----------------------------------------*/
/*  02. Checkout (inside the cart drawer)
/*----------------------------------------*/
.ff-cart.is-checkout .ff-cart__panel > .ff-cart__body,
.ff-cart.is-checkout .ff-cart__panel > .ff-cart__foot {
  display: none;
}

.ff-checkout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ff-checkout[hidden] {
  display: none;
}

.ff-checkout__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ff-checkout__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 8px;
}

/* the drawer has its own tokens - map the page field styles onto them */
.ff-checkout .ff-field label,
.ff-checkout .ff-field legend {
  color: var(--ffc-ink);
}

.ff-checkout .ff-field input,
.ff-checkout .ff-field textarea {
  border-color: var(--ffc-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ffc-ink);
}

.ff-checkout .ff-field input::placeholder,
.ff-checkout .ff-field textarea::placeholder,
.ff-checkout .ff-field__optional {
  color: var(--ffc-muted);
}

html[data-theme="light"] .ff-checkout .ff-field input,
html[data-theme="light"] .ff-checkout .ff-field textarea {
  border-color: rgba(12, 24, 17, 0.18);
  background: #fff;
}

.ff-checkout__intro {
  margin: 0 0 18px;
  color: var(--ffc-muted);
  font-size: 14px;
  line-height: 1.5;
}

.ff-checkout__alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 107, 91, 0.45);
  border-radius: 12px;
  background: rgba(242, 107, 91, 0.1);
  color: var(--ffc-ink);
  font-size: 14px;
  line-height: 1.45;
}

.ff-choice {
  border: 0;
}

.ff-choice__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ffc-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ff-choice__option + .ff-choice__option {
  margin-top: 8px;
}

.ff-choice__option:has(input:checked) {
  border-color: var(--ffc-accent);
  background: rgba(237, 192, 1, 0.08);
}

.ff-checkout .ff-choice__option input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 0;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #EDC001;
}

.ff-choice__option span {
  display: grid;
  gap: 2px;
}

.ff-choice__option strong {
  color: var(--ffc-ink);
  font-size: 15px;
}

.ff-choice__option small {
  color: var(--ffc-muted);
  font-size: 12px;
}

.ff-checkout__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ffc-muted);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-checkout__summary strong {
  color: var(--ffc-ink);
  font-family: var(--eg-heading-font-family);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
}

.ff-checkout__back {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--ffc-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-checkout__back:hover,
.ff-checkout__back:focus-visible {
  color: var(--ffc-ink);
}

.ff-checkout__done {
  text-align: center;
  color: var(--ffc-muted);
  font-size: 15px;
  line-height: 1.55;
  outline: none;
}

.ff-checkout__done h4 {
  margin: 14px 0 6px;
  color: var(--ffc-ink);
  font-family: var(--eg-heading-font-family);
  font-size: 28px;
  text-transform: uppercase;
}

.ff-checkout__done strong {
  color: var(--ffc-ink);
}

.ff-checkout__number strong {
  font-size: 18px;
  letter-spacing: 0.04em;
}

.ff-checkout__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: 18px;
  border-radius: 50%;
  background: rgba(57, 211, 83, 0.14);
  color: #39D353;
  font-size: 26px;
}

.ff-cart .ff-checkout__wa {
  gap: 10px;
  background: #25D366;
  border-color: #25D366;
  color: #06140B;
}

.ff-cart .ff-checkout__wa i {
  font-size: 20px;
}

.ff-checkout .ff-cart__foot .ff-cart__note {
  margin: 6px 0 14px;
}

/*----------------------------------------*/
/*  03. Contact + store-updates forms
/*----------------------------------------*/
.ff-contact-form {
  padding: 32px 36px;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-surface);
}

.ff-contact-form__title {
  margin: 0 0 6px;
  color: var(--ff-text);
  font-size: 28px;
}

.ff-contact-form__sub {
  margin: 0 0 22px;
  color: var(--ff-text-2);
}

.ff-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.ff-field--full {
  grid-column: 1 / -1;
}

.ff-contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.ff-contact-form__foot .ff-form__status {
  margin: 0;
}

@media (max-width: 575.98px) {
  .ff-contact-form {
    padding: 24px 18px;
  }

  .ff-contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ff-contact-form__foot .eg-btn {
    width: 100%;
    justify-content: center;
  }
}

.eg-newsletter__form .ff-form__status {
  flex-basis: 100%;
}

/*----------------------------------------*/
/*  04. Shop filters
/*----------------------------------------*/
.eg-product__categories ul li a {
  gap: 0;
}

.ff-shop__count {
  margin-left: auto;
  padding-left: 10px;
  color: var(--ff-text-3);
  font-size: 13px;
}

.eg-product__categories ul li.is-active a {
  background: var(--ff-accent-soft);
  color: var(--ff-text);
  font-weight: 700;
}

.ff-shop__search {
  display: flex;
  gap: 8px;
}

.ff-shop__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--ff-line-2);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-bg);
  color: var(--ff-text);
  font-size: 16px;
}

.ff-shop__search input::placeholder {
  color: var(--ff-text-3);
}

.ff-shop__search input:focus,
.ff-shop__sort select:focus {
  border-color: var(--ff-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 192, 1, 0.25);
}

.ff-shop__search button {
  flex: 0 0 46px;
  height: 46px;
  border: 0;
  border-radius: var(--ff-radius-sm);
  background: var(--ff-accent);
  color: var(--ff-on-accent);
}

.eg-product__info-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.ff-shop__clear {
  margin-left: 8px;
  color: var(--ff-accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-shop__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ff-shop__sort label {
  margin: 0;
  color: var(--ff-text-2);
  font-size: 14px;
  white-space: nowrap;
}

.ff-shop__sort select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ff-line-2);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-bg);
  color: var(--ff-text);
  font-size: 15px;
}

.ff-shop__empty {
  padding: 48px 24px;
  border: 1px dashed var(--ff-line-2);
  border-radius: var(--ff-radius);
  text-align: center;
}

.ff-shop__empty h3 {
  color: var(--ff-text);
}

.ff-shop__empty p {
  color: var(--ff-text-2);
}

/*----------------------------------------*/
/*  05. Policy pages
/*----------------------------------------*/
.ff-policy {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--ff-bg);
}

.ff-policy__body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ff-text-2);
  font-size: 16px;
  line-height: 1.7;
}

.ff-policy__body h2 {
  margin: 36px 0 12px;
  color: var(--ff-text);
  font-size: 26px;
}

.ff-policy__body h2:first-child {
  margin-top: 0;
}

.ff-policy__body ul {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}

.ff-policy__body li {
  margin-bottom: 6px;
}

.ff-policy__body a {
  color: var(--ff-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-policy__updated {
  color: var(--ff-text-3);
  font-size: 14px;
}

.ff-policy__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ff-line);
}

.ff-policy__nav a {
  padding: 8px 14px;
  border: 1px solid var(--ff-line-2);
  border-radius: 50px;
  color: var(--ff-text-2);
  font-size: 14px;
  text-decoration: none;
}

.ff-policy__nav a[aria-current="page"] {
  border-color: var(--ff-accent);
  color: var(--ff-text);
}

/*----------------------------------------*/
/*  06. Product page + variant cards
/*----------------------------------------*/
.ff-card__options {
  display: inline-block;
  margin: 2px 0 4px;
  color: var(--ff-accent-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-product-page {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--ff-bg);
}

.ff-pp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.ff-pp__media {
  position: sticky;
  top: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-surface);
}

.ff-pp__glow {
  position: absolute;
  inset: 20% 15% 5%;
  border-radius: 50%;
  background: rgb(var(--ff-pp-glow, 237, 192, 1));
  filter: blur(70px);
  opacity: 0.28;
}

.ff-pp__media img {
  position: relative;
  width: auto;
  max-width: 78%;
  max-height: 86%;
  object-fit: contain;
}

.ff-pp__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ff-pp__category,
.ff-pp__badge {
  padding: 5px 12px;
  border: 1px solid var(--ff-line-2);
  border-radius: 50px;
  color: var(--ff-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-pp__badge {
  border-color: var(--ff-accent);
  background: var(--ff-accent-soft);
  color: var(--ff-text);
}

.ff-pp__variant {
  margin: 0 0 10px;
  color: var(--ff-text);
  font-family: var(--ff-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.ff-pp__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--ff-text-2);
  font-size: 14px;
}

.ff-pp__rating strong {
  color: var(--ff-text);
}

.ff-pp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.ff-pp__price strong {
  color: var(--ff-text);
  font-family: var(--ff-font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.ff-pp__price s {
  color: var(--ff-text-3);
  font-size: 18px;
}

.ff-pp__save {
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(57, 211, 83, 0.14);
  color: var(--ff-success-text);
  font-size: 13px;
  font-weight: 700;
}

.ff-pp__stock {
  margin: 0 0 20px;
  color: var(--ff-success-text);
  font-weight: 600;
}

.ff-pp__stock.is-low {
  color: var(--ff-accent-ink);
}

.ff-pp__stock.is-out {
  color: #F58A7C;
}

html[data-theme="light"] .ff-pp__stock.is-out {
  color: #B3261E;
}

.ff-pp__options {
  margin-bottom: 20px;
}

.ff-pp__options-title {
  margin: 0 0 10px;
  color: var(--ff-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ff-pp__option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-pp__option {
  display: grid;
  gap: 2px;
  min-width: 110px;
  padding: 10px 14px;
  border: 1px solid var(--ff-line-2);
  border-radius: var(--ff-radius-sm);
  color: var(--ff-text);
  line-height: 1.25;
  transition: border-color var(--ff-dur) ease, background-color var(--ff-dur) ease;
}

.ff-pp__option span {
  font-weight: 600;
}

.ff-pp__option small {
  color: var(--ff-text-3);
  font-size: 12px;
}

.ff-pp__option:hover {
  border-color: var(--ff-accent);
  color: var(--ff-text);
}

.ff-pp__option[aria-current="true"] {
  border-color: var(--ff-accent);
  background: var(--ff-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ff-accent);
}

.ff-pp__option.is-out span {
  color: var(--ff-text-3);
  text-decoration: line-through;
}

.ff-pp__desc {
  margin-bottom: 20px;
  color: var(--ff-text-2);
  font-size: 17px;
}

.ff-pp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ff-pp__actions .eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
}

.ff-pp__note {
  margin: 14px 0 24px;
  color: var(--ff-text-3);
  font-size: 14px;
}

.ff-pp__highlights {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--ff-text-2);
}

.ff-pp__highlights i {
  margin-right: 10px;
  color: var(--ff-accent-ink);
}

.ff-pp__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-line);
}

.ff-pp__specs div {
  padding: 12px 16px;
  background: var(--ff-surface);
}

.ff-pp__specs dt {
  color: var(--ff-text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-pp__specs dd {
  margin: 2px 0 0;
  color: var(--ff-text);
  font-weight: 600;
}

.ff-pp__details,
.ff-pp__related {
  margin-top: clamp(40px, 6vw, 72px);
}

.ff-pp__details {
  max-width: 760px;
  color: var(--ff-text-2);
  font-size: 16px;
  line-height: 1.7;
}

.ff-pp__details h2,
.ff-pp__related h2 {
  margin-bottom: 16px;
  color: var(--ff-text);
  font-size: 28px;
}

.ff-pp__disclaimer {
  color: var(--ff-text-3);
  font-size: 14px;
}

@media (max-width: 991.98px) {
  .ff-pp {
    grid-template-columns: minmax(0, 1fr);
  }

  .ff-pp__media {
    position: relative;
    top: 0;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .ff-pp__actions .eg-btn {
    flex: 1 1 100%;
  }

  .ff-pp__specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* the theme only puts "/" before the last crumb - add it between the middle ones too (product page) */
.eg-breadcrumb__item:not(:first-child):not(.active) {
  padding-left: 8px;
}

.eg-breadcrumb__item:not(:first-child):not(.active)::before {
  padding-right: 0.5rem;
  color: var(--eg-common-white);
  content: "/";
}

/*----------------------------------------*/
/*  07. Coupon at checkout
/*----------------------------------------*/
.ff-coupon__row {
  display: flex;
  gap: 8px;
}

.ff-checkout .ff-coupon__row input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.ff-checkout .ff-coupon__row input[readonly] {
  border-color: rgba(57, 211, 83, 0.6);
}

.ff-coupon__apply {
  flex: 0 0 auto;
  min-width: 86px;
  padding: 0 16px;
  border: 1px solid var(--ffc-accent);
  border-radius: 12px;
  background: transparent;
  color: var(--ffc-ink);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ff-coupon__apply:hover,
.ff-coupon__apply:focus-visible {
  background: var(--ffc-accent);
  color: #0A0D0C;
}

.ff-coupon__apply[hidden] {
  display: none;
}

.ff-coupon__ok {
  margin: 0;
  color: var(--ff-success-text);
  font-size: 13px;
  line-height: 1.4;
}

.ff-coupon__ok[hidden] {
  display: none;
}

.ff-coupon__remove {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ffc-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ff-checkout__summary--coupon {
  display: grid;
  gap: 4px;
  /* the plain summary is a space-between flex row; as a grid that would squeeze the column */
  justify-content: stretch;
}

.ff-checkout__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ff-checkout__line--save {
  color: var(--ff-success-text);
}

.ff-checkout__line--total {
  margin-top: 2px;
}

.ff-checkout__saved {
  color: var(--ff-success-text);
  font-weight: 600;
}

/*----------------------------------------*/
/*  08. Announcement bar + home offer cards
/*----------------------------------------*/
/* one line, fixed height: the transparent header is moved down by exactly this much */
.ff-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 48px;
  background: #EDC001;
  color: #0A0D0C;
}

.ff-bar__text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: #0A0D0C;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ff-bar__title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-bar__code {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px dashed #0A0D0C;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  color: #0A0D0C;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ff-bar__link {
  flex: 0 0 auto;
  color: #0A0D0C;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff-bar__link:hover {
  color: #0A0D0C;
}

.ff-bar__close {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0A0D0C;
  transform: translateY(-50%);
}

.ff-bar__close:hover,
.ff-bar__close:focus-visible {
  background: rgba(0, 0, 0, 0.1);
}

.ff-bar__code:focus-visible,
.ff-bar__link:focus-visible,
.ff-bar__close:focus-visible {
  outline: 2px solid #0A0D0C;
  outline-offset: 2px;
}

/* the theme pins the transparent header 24px (0 below 1200px) from the top */
.header.has-ff-bar #header-sticky:not(.header-sticky) {
  top: 64px;
}

@media (max-width: 1199.98px) {
  .header.has-ff-bar #header-sticky:not(.header-sticky) {
    top: 40px;
  }
}

@media (max-width: 575.98px) {
  .ff-bar {
    padding: 0 40px 0 12px;
    justify-content: flex-start;
  }

  .ff-bar__text {
    gap: 8px;
    font-size: 13px;
  }

  /* keep the message readable; the code and link matter more than the arrow */
  .ff-bar__link i {
    display: none;
  }
}

.ff-offers {
  padding: clamp(40px, 6vw, 72px) 0 0;
  background: var(--ff-bg);
}

.ff-offers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ff-offers__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

.ff-offers__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ff-offer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(237, 192, 1, 0.14), transparent 60%),
    var(--ff-surface);
}

.ff-offers__grid--1 .ff-offer.has-image {
  flex-direction: row;
}

.ff-offer__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(57, 211, 83, 0.16), transparent 70%),
    var(--ff-surface-2);
}

.ff-offers__grid--1 .ff-offer.has-image .ff-offer__media {
  flex: 0 0 42%;
  aspect-ratio: auto;
  min-height: 240px;
}

/* fits both transparent product shots (portrait) and wide photos without cropping */
.ff-offer__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
}

.ff-offer__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 26px 26px;
}

.ff-offer__eyebrow {
  color: var(--ff-accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ff-offer__title {
  margin: 0;
  color: var(--ff-text);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
}

.ff-offer__text {
  margin: 0;
  color: var(--ff-text-2);
}

.ff-offer__code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px dashed var(--ff-accent);
  border-radius: var(--ff-radius-sm);
  color: var(--ff-text-2);
  font-size: 14px;
}

.ff-offer__code strong {
  color: var(--ff-text);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.ff-offer__code button {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--ff-accent);
  color: var(--ff-on-accent);
  font-size: 13px;
  font-weight: 700;
}

.ff-offer__btn {
  margin-top: auto;
}

[data-ff-copy-code].is-copied {
  background: #39D353;
  color: #06140B;
}

@media (max-width: 991.98px) {
  .ff-offers__grid,
  .ff-offers__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ff-offers__grid--1 .ff-offer.has-image {
    flex-direction: column;
  }

  .ff-offers__grid--1 .ff-offer.has-image .ff-offer__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/*----------------------------------------*/
/*  09. Scrolling ticker (marquee) - home page strip above "Shop By Category"
/*----------------------------------------*/
.ff-ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  padding-right: 56px;
  overflow: hidden;
  background: #EDC001;
  color: #0A0D0C;
}

.ff-offers + .ff-ticker {
  margin-top: clamp(40px, 6vw, 72px);
}

.ff-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.ff-ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: ffTicker var(--ff-ticker-duration, 30s) linear infinite;
}

/* stops while the customer points at it, uses the keyboard in it, or presses pause */
.ff-ticker:hover .ff-ticker__track,
.ff-ticker:focus-within .ff-ticker__track,
.ff-ticker.is-paused .ff-ticker__track {
  animation-play-state: paused;
}

.ff-ticker__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
  color: #0A0D0C;
  font-family: var(--ff-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ff-ticker__item > i {
  font-size: 16px;
}

.ff-ticker__code {
  padding: 4px 10px;
  border: 1px dashed #0A0D0C;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  color: #0A0D0C;
  font-family: var(--ff-font-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ff-ticker__link {
  color: #0A0D0C;
  font-family: var(--ff-font-text);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
}

.ff-ticker__link:hover {
  color: #0A0D0C;
}

.ff-ticker__pause {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: #0A0D0C;
  transform: translateY(-50%);
}

.ff-ticker__pause:hover {
  background: rgba(0, 0, 0, 0.16);
}

.ff-ticker__code:focus-visible,
.ff-ticker__link:focus-visible,
.ff-ticker__pause:focus-visible {
  outline: 2px solid #0A0D0C;
  outline-offset: 2px;
}

@keyframes ffTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* no motion: the messages sit still and can be swiped sideways */
@media (prefers-reduced-motion: reduce) {
  .ff-ticker__track {
    animation: none;
  }

  .ff-ticker__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ff-ticker__list[aria-hidden="true"],
  .ff-ticker__pause {
    display: none;
  }

  .ff-ticker {
    padding-right: 0;
  }
}

@media (max-width: 575.98px) {
  .ff-ticker {
    height: 52px;
    padding-right: 48px;
  }

  .ff-ticker__item {
    gap: 8px;
    padding: 0 20px;
    font-size: 18px;
  }

  .ff-ticker__pause {
    right: 8px;
  }
}

/*----------------------------------------*/
/*  10. Product page: label facts + trust section
/*----------------------------------------*/
.ff-facts,
.ff-trust__badges,
.ff-trust__licences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ff-fact,
.ff-trust__badge,
.ff-trust__licence {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
}

.ff-fact dt,
.ff-trust__licence dt {
  color: var(--ff-text-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-fact dd,
.ff-trust__licence dd {
  margin: 2px 0 0;
  color: var(--ff-text);
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ff-fact__icon,
.ff-trust__icon,
.ff-trust__licence-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ff-surface-2);
  font-size: 20px;
}

.ff-fact__icon {
  color: var(--ff-accent-ink);
}

.ff-trust {
  margin-top: 8px;
}

.ff-trust__badges {
  margin-top: 18px;
}

.ff-trust__badge span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ff-trust__badge strong {
  color: var(--ff-text);
  font-size: 15px;
  line-height: 1.25;
}

.ff-trust__badge small {
  color: var(--ff-text-2);
  font-size: 13px;
  line-height: 1.35;
}

.ff-trust__icon--red { color: #F26B5B; }
.ff-trust__icon--green { color: #39D353; }
.ff-trust__icon--gold { color: #EDC001; }
.ff-trust__icon--blue { color: #60A5FA; }

html[data-theme="light"] .ff-trust__icon--red { color: #C62828; }
html[data-theme="light"] .ff-trust__icon--green { color: #1C7A32; }
html[data-theme="light"] .ff-trust__icon--gold { color: #9C7800; }
html[data-theme="light"] .ff-trust__icon--blue { color: #1D4ED8; }

.ff-trust__licence-icon {
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
}

@media (max-width: 575.98px) {
  .ff-trust__badges,
  .ff-trust__licences {
    grid-template-columns: minmax(0, 1fr);
  }

  .ff-facts {
    gap: 8px;
  }

  .ff-fact {
    padding: 12px;
    gap: 10px;
  }

  .ff-fact__icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
}

.ff-trust {
  margin-bottom: 24px;
}

.ff-facts + .ff-pp__highlights,
.ff-facts:last-child {
  margin-bottom: 24px;
}

.ff-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* results updating in place (ff-store.js section 03) */
[data-ff-shop-grid] {
  transition: opacity 0.2s ease;
}

.ff-shop-loading [data-ff-shop-grid] {
  opacity: 0.45;
  pointer-events: none;
}

/* product cards (shop + home): price, MRP and the same "Save X%" chip as the product page */
.ff-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
}

.ff-card__mrp {
  color: var(--ff-text-3);
  font-size: 15px;
}

.ff-card__save {
  align-self: center;
  padding: 3px 9px;
  border-radius: 50px;
  background: rgba(57, 211, 83, 0.14);
  color: var(--ff-success-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* brand name above the title on product cards */
.ff-card__brand {
  display: block;
  margin-bottom: 4px;
  color: var(--ff-accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}