/* ══════════════════════════════════════════════════════════════════════════
   product.css — iDive Dive-Gear Shop · PRODUCT detail styles
   Scoped to `body.ffshop-product-body`; every class `ffshop-p-` prefixed.
   Mirrors the /trip/ product layout (spec rail · gallery · sticky buy-box ·
   tabs · modal) without touching trip.css or styles.css rules.
   ══════════════════════════════════════════════════════════════════════════ */

.ffshop-product-body { background: var(--bg-soft, #f8fdff); }

/* ─── Breadcrumb ─── */
.ffshop-p-crumbs { max-width: 1280px; margin: 0 auto; padding: 96px 24px 0; font: 12.5px 'Roboto', sans-serif; color: var(--muted, #475569); }
.ffshop-p-crumbs a { color: var(--primary, #06b6d4); text-decoration: none; }
.ffshop-p-crumbs span { margin: 0 7px; color: var(--dim, #94a3b8); }

/* ─── Hero (3-col) ─── */
.ffshop-p-hero { max-width: 1280px; margin: 0 auto; padding: 18px 24px 40px; }
.ffshop-p-hero-inner { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr) minmax(0,360px); gap: 32px; align-items: start; }

.ffshop-p-info .ffshop-p-eyebrow { font: 600 11px 'Josefin Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--primary, #06b6d4); margin-bottom: 8px; }
.ffshop-p-title { font: 600 30px/1.12 'Josefin Sans', sans-serif; color: var(--deep, #164e63); margin: 0 0 12px; }
.ffshop-p-brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ffshop-p-brandtag { background: var(--primary-soft, #ecfeff); color: var(--deep, #164e63); font: 700 11px 'Josefin Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; }
.ffshop-p-sku { font: 12px 'Roboto', sans-serif; color: var(--dim, #94a3b8); }
.ffshop-p-specs { margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border, rgba(6,182,212,.16)); }
.ffshop-p-specs > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border, rgba(6,182,212,.16)); }
.ffshop-p-specs dt { font: 500 13px 'Roboto', sans-serif; color: var(--muted, #475569); }
.ffshop-p-specs dd { margin: 0; font: 600 13px 'Roboto', sans-serif; color: var(--text, #0f172a); text-align: right; }

/* Gallery */
.ffshop-p-gallery { position: relative; }
.ffshop-p-gmain { aspect-ratio: 1/1; background: #fff; border: 1px solid var(--border, rgba(6,182,212,.16)); border-radius: var(--radius-lg, 18px); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1)); }
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-gmain:hover { border-color: var(--border-strong, rgba(6,182,212,.30)); box-shadow: 0 14px 28px rgba(6,182,212,.14), 0 6px 14px rgba(15,23,42,.06); }
  .ffshop-p-gmain:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-gmain:hover { border-color: var(--border-strong, rgba(6,182,212,.30)); box-shadow: 0 14px 28px rgba(6,182,212,.14), 0 6px 14px rgba(15,23,42,.06); }
}
.ffshop-p-gmain img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ffshop-p-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ffshop-p-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border, rgba(6,182,212,.16)); cursor: pointer; background: #fff; padding: 4px; transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1)); }
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-thumb:hover { transform: translateY(-2px); border-color: var(--primary, #06b6d4); box-shadow: 0 6px 14px rgba(6,182,212,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-thumb:hover { border-color: var(--primary, #06b6d4); box-shadow: 0 6px 14px rgba(6,182,212,.18); }
}
/* selected thumbnail = gradient ring (designplan §1) */
.ffshop-p-thumb.active {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(6,182,212,.96) 50%, rgba(29,78,216,.96) 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(29,78,216,.20), inset 0 1px 0 rgba(255,255,255,.5);
}
.ffshop-p-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Buy box */
.ffshop-p-buy { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border, rgba(6,182,212,.16)); border-radius: var(--radius-lg, 18px); padding: 22px; box-shadow: var(--shadow, 0 4px 20px rgba(6,95,120,.08)); }
.ffshop-p-pricerow { display: flex; align-items: baseline; gap: 10px; }
.ffshop-p-srp { font-size: 16px; color: var(--dim, #94a3b8); text-decoration: line-through; }
.ffshop-p-amount { font: 700 30px 'Josefin Sans', sans-serif; color: var(--text, #0f172a); }
.ffshop-p-save { display: inline-block; margin-top: 6px; background: #dcfce7; color: #15803d; font: 600 12px 'Roboto', sans-serif; padding: 3px 10px; border-radius: 100px; }
.ffshop-p-pricenote { font-size: 11.5px; color: var(--dim, #94a3b8); margin-top: 8px; line-height: 1.4; }
.ffshop-p-field { margin-top: 16px; }
.ffshop-p-field > label { display: block; font: 600 12px 'Josefin Sans', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #475569); margin-bottom: 7px; }
.ffshop-p-field select { width: 100%; padding: 11px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; font: 14px 'Roboto', sans-serif; background: #fff; color: #0f172a; }
.ffshop-p-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; overflow: hidden; }
.ffshop-p-stepper button { width: 42px; height: 42px; border: none; background: #f1f6f8; font-size: 19px; cursor: pointer; color: var(--deep, #164e63); }
.ffshop-p-stepper input { width: 56px; height: 42px; border: none; text-align: center; font: 600 16px 'Josefin Sans', sans-serif; color: #0f172a; }
.ffshop-p-total { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border, rgba(6,182,212,.2)); display: flex; justify-content: space-between; align-items: baseline; font: 600 14px 'Roboto', sans-serif; color: var(--muted, #475569); }
.ffshop-p-total strong { font: 700 22px 'Josefin Sans', sans-serif; color: var(--text, #0f172a); }

.ffshop-p-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 100px; font: 600 15px 'Josefin Sans', sans-serif; cursor: pointer; border: none; margin-top: 14px; text-decoration: none; transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1)); }
/* Primary CTA — iDive signature gradient (designplan §1) */
.ffshop-p-cta-buy {
  background: linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(6,182,212,.96) 50%, rgba(29,78,216,.96) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 6px 18px rgba(29,78,216,.30),
    0 3px 10px rgba(16,185,129,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-cta-buy:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%);
    box-shadow:
      0 12px 26px rgba(29,78,216,.42),
      0 5px 14px rgba(16,185,129,.22),
      inset 0 1px 0 rgba(255,255,255,.32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-cta-buy:hover { background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%); }
}
.ffshop-p-cta-wa { background: #fff; color: #128c4b; border: 1.5px solid #25d366; }
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-cta-wa:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,211,102,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-cta-wa:hover { box-shadow: 0 8px 20px rgba(37,211,102,.22); }
}
.ffshop-p-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ffshop-p-trust li { display: flex; align-items: center; gap: 9px; font: 13px 'Roboto', sans-serif; color: var(--muted, #475569); }
.ffshop-p-trust i { color: var(--primary, #06b6d4); width: 16px; text-align: center; }

/* ─── Tabs + sections ─── */
/* Tab bar — chrome glass sticky container (designplan §2a / §4) */
.ffshop-p-tabswrap {
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--border, rgba(6,182,212,.16));
  border-bottom: 1px solid var(--border, rgba(6,182,212,.16));
  box-shadow: 0 8px 32px rgba(6,95,120,.08), inset 0 1px 0 rgba(255,255,255,.6);
  position: sticky; top: 64px; z-index: 30;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .ffshop-p-tabswrap { background: rgba(255,255,255,.96); }
}
.ffshop-p-tabs { max-width: 1280px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 12px 24px; scrollbar-width: none; }
.ffshop-p-tabs::-webkit-scrollbar { display: none; }
/* inactive pill */
.ffshop-p-tab {
  flex: 0 0 auto; padding: 8px 16px; font: 600 13px 'Josefin Sans', sans-serif;
  color: var(--deep, #164e63); cursor: pointer; white-space: nowrap;
  background: #fff; border: 1.5px solid var(--border-strong, rgba(6,182,212,.30));
  border-radius: 100px; transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1));
}
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-tab:hover { border-color: var(--primary, #06b6d4); color: var(--primary, #06b6d4); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-tab:hover { border-color: var(--primary, #06b6d4); color: var(--primary, #06b6d4); }
}
/* active pill = gradient §1 */
.ffshop-p-tab.active {
  background: linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(6,182,212,.96) 50%, rgba(29,78,216,.96) 100%);
  border-color: rgba(255,255,255,.28); color: #fff;
  box-shadow: 0 4px 12px rgba(29,78,216,.16), 0 2px 6px rgba(16,185,129,.08), inset 0 1px 0 rgba(255,255,255,.28);
}
.ffshop-p-tab.active:hover { color: #fff; }
.ffshop-p-section { max-width: 1280px; margin: 0 auto; padding: 34px 24px; }
.ffshop-p-section h2 { font: 600 23px 'Josefin Sans', sans-serif; color: var(--deep, #164e63); margin: 0 0 18px; }
.ffshop-p-prose { font: 15px/1.7 'Roboto', sans-serif; color: var(--muted, #475569); max-width: 820px; }
.ffshop-p-prose p { margin: 0 0 14px; }

.ffshop-p-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.ffshop-p-features li { display: flex; gap: 11px; padding: 16px; background: #fff; border: 1px solid var(--border, rgba(6,182,212,.16)); border-radius: 12px; font: 14px/1.5 'Roboto', sans-serif; color: var(--text, #0f172a); }
.ffshop-p-features i { color: var(--primary, #06b6d4); margin-top: 2px; }

.ffshop-p-spectable { width: 100%; border-collapse: collapse; max-width: 720px; }
.ffshop-p-spectable tr { border-bottom: 1px solid var(--border, rgba(6,182,212,.16)); }
.ffshop-p-spectable td { padding: 12px 14px; font: 14px 'Roboto', sans-serif; }
.ffshop-p-spectable td:first-child { color: var(--muted, #475569); width: 40%; }
.ffshop-p-spectable td:last-child { color: var(--text, #0f172a); font-weight: 600; }

.ffshop-p-faq { max-width: 820px; }
.ffshop-p-faq-item { border-bottom: 1px solid var(--border, rgba(6,182,212,.16)); }
.ffshop-p-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font: 600 15.5px 'Josefin Sans', sans-serif; color: var(--deep, #164e63); cursor: pointer; display: flex; justify-content: space-between; gap: 16px; }
.ffshop-p-faq-q i { color: var(--primary, #06b6d4); transition: transform .2s; }
.ffshop-p-faq-item.open .ffshop-p-faq-q i { transform: rotate(45deg); }
.ffshop-p-faq-a { display: none; padding: 0 0 18px; font: 14.5px/1.65 'Roboto', sans-serif; color: var(--muted, #475569); }
.ffshop-p-faq-item.open .ffshop-p-faq-a { display: block; }

/* ─── Related ─── */
.ffshop-p-related { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 880px) { .ffshop-p-related { grid-template-columns: repeat(2,1fr); } }

/* ─── Final CTA ─── */
.ffshop-p-finalcta { background: linear-gradient(135deg,#083344,#0e7490); color: #fff; padding: 52px 24px; text-align: center; }
.ffshop-p-finalcta h2 { font: 600 28px 'Josefin Sans', sans-serif; margin: 0 0 10px; color: #fff; }
.ffshop-p-finalcta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 22px; }
.ffshop-p-finalcta .ffshop-p-fbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── Booking modal ─── */
.ffshop-p-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.ffshop-p-modal[aria-hidden="false"] { display: flex; }
.ffshop-p-backdrop { position: absolute; inset: 0; background: rgba(8,47,73,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .ffshop-p-backdrop { background: rgba(8,47,73,.72); }
}
.ffshop-p-panel { position: relative; background: #fff; border-radius: 20px; max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 28px; box-shadow: var(--shadow-xl, 0 24px 60px rgba(6,95,120,.22)); }
.ffshop-p-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--dim, #94a3b8); }
.ffshop-p-modal h3 { font: 600 21px 'Josefin Sans', sans-serif; color: var(--deep, #164e63); margin: 0 0 4px; }
.ffshop-p-modal .ffshop-p-modal-sub { font: 13px 'Roboto', sans-serif; color: var(--muted, #475569); margin-bottom: 18px; }
.ffshop-p-mfield { margin-bottom: 13px; }
.ffshop-p-mfield label { display: block; font: 600 12px 'Roboto', sans-serif; color: var(--muted, #475569); margin-bottom: 6px; }
.ffshop-p-mfield input, .ffshop-p-mfield textarea { width: 100%; padding: 11px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; font: 14px 'Roboto', sans-serif; }
.ffshop-p-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ffshop-p-msummary { background: var(--bg-soft, #f8fdff); border-radius: 12px; padding: 14px; margin: 6px 0 14px; font: 13.5px 'Roboto', sans-serif; }
.ffshop-p-msummary .ffshop-p-msrow { display: flex; justify-content: space-between; padding: 3px 0; color: var(--muted, #475569); }
.ffshop-p-msummary .ffshop-p-mstotal { border-top: 1px dashed var(--border, rgba(6,182,212,.2)); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--text, #0f172a); }
.ffshop-p-err { background: #fef2f2; color: #b91c1c; padding: 10px 12px; border-radius: 10px; font: 13px 'Roboto', sans-serif; margin-top: 10px; }
.ffshop-p-modal-trust { text-align: center; font: 11.5px 'Roboto', sans-serif; color: var(--dim, #94a3b8); margin-top: 12px; }
.ffshop-p-success { text-align: center; padding: 12px 0; }
.ffshop-p-success i { font-size: 52px; color: #22c55e; }
.ffshop-p-success h3 { margin: 14px 0 8px; }

/* ─── Mobile sticky bar ─── */
.ffshop-p-mobilebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--border, rgba(6,182,212,.16)); padding: 10px 16px; display: none; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 18px rgba(8,47,73,.1); }
.ffshop-p-mobilebar .ffshop-p-mb-amt { font: 700 18px 'Josefin Sans', sans-serif; color: var(--text, #0f172a); }
.ffshop-p-mobilebar button {
  background: linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(6,182,212,.96) 50%, rgba(29,78,216,.96) 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 12px 22px; border-radius: 100px;
  font: 600 14px 'Josefin Sans', sans-serif;
  box-shadow: 0 6px 18px rgba(29,78,216,.30), 0 3px 10px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.26);
  transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1));
}
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-mobilebar button:hover { transform: translateY(-1px); background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%); box-shadow: 0 12px 26px rgba(29,78,216,.42), 0 5px 14px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-mobilebar button:hover { background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%); }
}

@media (max-width: 980px) {
  .ffshop-p-hero-inner { grid-template-columns: 1fr; }
  .ffshop-p-info { order: 1; } .ffshop-p-gallery { order: 0; } .ffshop-p-buy { order: 2; position: static; }
}
@media (max-width: 720px) {
  .ffshop-p-crumbs { padding-top: 88px; }
  .ffshop-p-title { font-size: 24px; }
  .ffshop-p-mobilebar { display: flex; }
  .ffshop-p-mgrid { grid-template-columns: 1fr; }
  .ffshop-p-buy .ffshop-p-cta-buy { display: none; }
}

/* ─── Related-products cards (the "More …" grid uses .ffshop-card markup, which
       is normally styled by shop.css — product pages don't load that file, so the
       card styles must live here too). ─── */
.ffshop-p-related .ffshop-card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border, rgba(6,182,212,.16)); border-radius: var(--radius-lg, 18px);
  overflow: hidden; text-decoration: none; color: var(--text, #0f172a);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(6,95,120,.06)); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ffshop-p-related .ffshop-card:hover { transform: translateY(-5px); border-color: var(--border-hover, rgba(6,182,212,.45)); box-shadow: var(--shadow-lg, 0 14px 40px rgba(6,95,120,.14)); }
.ffshop-p-related .ffshop-card:hover .ffshop-card-img { transform: scale(1.06); }
.ffshop-p-related .ffshop-card-hero { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f1f6f8; }
.ffshop-p-related .ffshop-card-img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; padding: 10px; }
.ffshop-p-related .ffshop-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ffshop-p-related .ffshop-card-cat { font: 600 10.5px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #06b6d4); }
.ffshop-p-related .ffshop-card-name {
  font: 600 15px/1.22 'Josefin Sans', sans-serif; color: var(--text, #0f172a); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}
.ffshop-p-related .ffshop-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ffshop-p-related .ffshop-price { display: flex; flex-direction: column; }
.ffshop-p-related .ffshop-price-amt { font: 600 18px/1 'Josefin Sans', sans-serif; color: var(--text, #0f172a); }
.ffshop-p-related .ffshop-price-note { font-size: 9.5px; color: var(--dim, #94a3b8); margin-top: 3px; font-family: 'Josefin Sans', sans-serif; letter-spacing: .03em; }
.ffshop-p-related .ffshop-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(6,182,212,.96) 50%, rgba(29,78,216,.96) 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 8px 14px; border-radius: 100px;
  font: 600 12px 'Roboto', sans-serif; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(29,78,216,.30), 0 3px 10px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.26);
  transition: var(--transition, all .25s cubic-bezier(.4,0,.2,1));
}
@media (prefers-reduced-motion: no-preference) {
  .ffshop-p-related .ffshop-card:hover .ffshop-card-cta { transform: translateY(-1px); background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%); box-shadow: 0 12px 26px rgba(29,78,216,.42), 0 5px 14px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.32); }
}
@media (prefers-reduced-motion: reduce) {
  .ffshop-p-related .ffshop-card:hover .ffshop-card-cta { background: linear-gradient(135deg,#0ea371 0%,#0891b2 50%,#1e40af 100%); }
}
.ffshop-p-related .ffshop-card-cta i { font-size: 10px; }