.agb-fbt-wrap { --agb-fbt-columns-desktop: 2; --agb-fbt-columns-tablet: 2; --agb-fbt-columns-mobile: 1; --agb-fbt-gap: 10px; --agb-fbt-card-hover-bg: #f8fafc; --agb-fbt-card-hover-border: #d4dce8; --agb-fbt-card-active-bg: #eff6ff; --agb-fbt-card-active-border: #2563eb; --agb-fbt-selected-control-color: var(--agb-fbt-card-active-border); --agb-fbt-spotlight-overlay-color: #0f172a; --agb-fbt-spotlight-overlay-opacity: 0.58; --agb-fbt-spotlight-overlay-blur: 12px; --agb-fbt-spotlight-overlay-text: #ffffff; --agb-fbt-modal-close-color: #0f172a; --agb-fbt-modal-close-bg: #ffffff; --agb-fbt-modal-close-border: #d1d9e5; --agb-fbt-modal-close-size: 34px; --agb-fbt-modal-close-offset-x: 8px; --agb-fbt-modal-close-offset-y: 8px; margin: 20px 0; border: 1px solid #e6e7eb; border-radius: 14px; padding: 18px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); } .agb-fbt-header h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.2; letter-spacing: .01em; } .agb-fbt-items { display: flex; flex-direction: column; gap: var(--agb-fbt-gap); } .agb-fbt-layout-grid .agb-fbt-items { display: grid; grid-template-columns: repeat(var(--agb-fbt-columns-desktop), minmax(0, 1fr)); align-items: stretch; } .agb-fbt-layout-carousel .agb-fbt-items { display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: var(--agb-fbt-gap); padding-bottom: 4px; } .agb-fbt-layout-carousel .agb-fbt-items::-webkit-scrollbar { height: 6px; } .agb-fbt-layout-carousel .agb-fbt-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; } .agb-fbt-layout-carousel .agb-fbt-item { scroll-snap-align: start; flex: 0 0 calc((100% - ((var(--agb-fbt-columns-desktop) - 1) * var(--agb-fbt-gap))) / var(--agb-fbt-columns-desktop)); } .agb-fbt-carousel-nav { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 10px; } .agb-fbt-carousel-btn { width: 32px; height: 32px; border: 1px solid #d0d7e2; border-radius: 8px; background: #fff; color: #1f2937; cursor: pointer; line-height: 1; } .agb-fbt-item { display: grid; grid-template-columns: 28px 58px minmax(0, 1fr) auto; grid-template-areas: "check thumb info price"; gap: 10px; align-items: center; padding: 10px; border: 1px solid #e9e9ef; border-radius: 10px; background: #fff; } .agb-fbt-item-child { position: relative; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .agb-fbt-item-child:hover { border-color: var(--agb-fbt-card-hover-border); background-color: var(--agb-fbt-card-hover-bg); } .agb-fbt-item-child.is-selected { border-color: var(--agb-fbt-card-active-border); background-color: var(--agb-fbt-card-active-bg); } .agb-fbt-item-main { background: #f8fafc; border-color: #d7dde8; } .agb-fbt-item-check { grid-area: check; } .agb-fbt-item-thumb { grid-area: thumb; } .agb-fbt-item-info { grid-area: info; } .agb-fbt-item-price { grid-area: price; } .agb-fbt-wrap.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "check info price"; } .agb-fbt-wrap.agb-fbt-hide-thumb .agb-fbt-item-thumb { display: none; } .agb-fbt-wrap.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 28px 58px minmax(0, 1fr); grid-template-areas: "check thumb info"; } .agb-fbt-wrap.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "check info"; } .agb-fbt-wrap.agb-fbt-hide-price .agb-fbt-item-price { display: none; } .agb-fbt-item-check input { margin: 0; accent-color: var(--agb-fbt-selected-control-color); } .agb-fbt-item-thumb { width: 58px; height: 58px; } .agb-fbt-item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .agb-fbt-item-info { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; } .agb-fbt-align-center .agb-fbt-item-info { align-items: center; text-align: center; } .agb-fbt-align-right .agb-fbt-item-info { align-items: flex-end; text-align: right; } .agb-fbt-valign-center .agb-fbt-item-info { justify-content: center; } .agb-fbt-valign-end .agb-fbt-item-info { justify-content: flex-end; } .agb-fbt-item-align-right .agb-fbt-item { grid-template-columns: 28px auto minmax(0, 1fr) 58px; grid-template-areas: "check price info thumb"; } .agb-fbt-item-align-right.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: 28px auto minmax(0, 1fr); grid-template-areas: "check price info"; } .agb-fbt-item-align-right.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 28px minmax(0, 1fr) 58px; grid-template-areas: "check info thumb"; } .agb-fbt-item-align-right.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "check info"; } .agb-fbt-item-align-right .agb-fbt-item .agb-fbt-item-info { align-items: flex-end; text-align: right; } .agb-fbt-item-align-vertical .agb-fbt-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "check" "thumb" "info" "price"; justify-items: center; text-align: center; } .agb-fbt-item-align-vertical.agb-fbt-hide-thumb .agb-fbt-item { grid-template-areas: "check" "info" "price"; } .agb-fbt-item-align-vertical.agb-fbt-hide-price .agb-fbt-item { grid-template-areas: "check" "thumb" "info"; } .agb-fbt-item-align-vertical.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-areas: "check" "info"; } .agb-fbt-item-align-vertical .agb-fbt-item .agb-fbt-item-check { justify-self: end; } .agb-fbt-item-align-vertical .agb-fbt-item .agb-fbt-item-info { align-items: center; text-align: center; } .agb-fbt-item-align-vertical .agb-fbt-item .agb-fbt-item-price { text-align: center; } .agb-fbt-item-name { font-weight: 600; line-height: 1.3; } .agb-fbt-item-meta { margin-top: 4px; font-size: 12px; opacity: .75; } .agb-fbt-item-desc { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #596273; } .agb-fbt-item-price { text-align: right; white-space: nowrap; } .agb-fbt-item-price-inline { text-align: left; margin-top: 6px; white-space: normal; } .agb-fbt-item-price-qty { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .agb-fbt-item-price-qty .agb-fbt-item-price, .agb-fbt-item-price-qty .agb-fbt-item-meta { margin-top: 0; } .agb-fbt-item-price-qty .agb-fbt-item-meta { white-space: nowrap; } .agb-fbt-item-price del { opacity: .65; margin-right: 6px; } .agb-fbt-item-price ins { text-decoration: none; } .agb-fbt-variations { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .agb-fbt-variation-field label { display: block; margin-bottom: 3px; font-size: 12px; opacity: .8; } .agb-fbt-variation-field select { width: 100%; } .agb-fbt-variation-reset { margin-top: 6px; font-size: 12px; } .agb-fbt-selected-variation-summary { display: none; width: 100%; margin-top: 6px; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.35; } .agb-fbt-item-availability { margin-top: 6px; font-size: 12px; } .agb-fbt-variation-swatches .agb-fbt-swatch-select { display: none; } .agb-fbt-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .agb-fbt-swatch { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #cbd5e1; background: #fff; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; font-weight: 700; background-size: cover; background-position: center; text-transform: uppercase; } .agb-fbt-swatch.has-image { border-color: #bfc7d3; color: transparent; } .agb-fbt-swatch.is-active { border-color: #0f172a; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.14); } .agb-fbt-variation-popup .agb-fbt-item-child .agb-fbt-variation-form { display: none; } .agb-fbt-variation-popup .agb-fbt-open-popup { margin-top: 8px; min-height: 36px; font-size: 13px; border-radius: 8px; } .agb-fbt-card-variant-clickable .agb-fbt-open-popup { width: min(100%, 220px) !important; margin-top: auto !important; min-height: 42px !important; padding: 10px 22px !important; font-size: 16px !important; line-height: 1.2 !important; border-radius: 999px !important; } .agb-fbt-popup { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; } .agb-fbt-popup.is-open { display: flex; } .agb-fbt-popup-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .agb-fbt-popup-dialog { position: relative; width: min(760px, 100%); max-height: min(86vh, 820px); margin: 0; padding: 0; background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28); } .agb-fbt-popup-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 58px 14px 16px; border-bottom: 1px solid #e5e9f2; } .agb-fbt-popup-title { font-size: 16px; color: #111827; } .agb-fbt-popup-body { padding: 14px 16px 16px; overflow: auto; } .agb-fbt-popup-alert { display: none; margin: 12px 16px 0; padding: 9px 11px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 13px; font-weight: 700; line-height: 1.35; } .agb-fbt-popup-body .agb-fbt-variation-form { display: block !important; } .agb-fbt-popup-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px; } body .agb-fbt-popup .agb-fbt-popup-confirm { min-height: 40px; padding: 0 22px; border-radius: 999px; border: 1px solid #111827; background: #111827; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1; } .agb-fbt-popup-preview { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; padding: 10px; border-radius: 12px; border: 1px solid #e5e9f2; background: #f8fafc; } .agb-fbt-popup-preview-media { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; } .agb-fbt-popup-preview-media img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease, transform .2s ease; } .agb-fbt-popup-preview-media.is-empty::before { content: ""; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, #e2e8f0 0%, #f1f5f9 100%); } .agb-fbt-popup-preview-media.is-empty img { display: none; } .agb-fbt-popup-preview-name { font-weight: 700; line-height: 1.3; color: #0f172a; margin-bottom: 4px; } .agb-fbt-popup-preview-meta { font-size: 12px; color: #64748b; margin-bottom: 4px; } .agb-fbt-popup-preview-price { font-size: 16px; font-weight: 700; color: #0f172a; } .agb-fbt-popup-preview-price del { opacity: .65; margin-right: 6px; } .agb-fbt-popup-preview-price ins { text-decoration: none; } body .agb-fbt-popup .agb-fbt-popup-close { appearance: none !important; -webkit-appearance: none !important; width: var(--agb-fbt-modal-close-size) !important; height: var(--agb-fbt-modal-close-size) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--agb-fbt-modal-close-border) !important; background: var(--agb-fbt-modal-close-bg) !important; color: var(--agb-fbt-modal-close-color) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; position: absolute; top: var(--agb-fbt-modal-close-offset-y); right: var(--agb-fbt-modal-close-offset-x); display: inline-flex; align-items: center; justify-content: center; z-index: 4; } .agb-fbt-popup.agb-fbt-popup-close-left .agb-fbt-popup-close { left: var(--agb-fbt-modal-close-offset-x); right: auto; } .agb-fbt-popup.agb-fbt-popup-close-left .agb-fbt-popup-header { padding-left: 58px; padding-right: 16px; } body.agb-fbt-popup-open { overflow: hidden; } .agb-fbt-card-variant-clickable .agb-fbt-item { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "thumb info price"; align-items: stretch; } .agb-fbt-card-variant-clickable .agb-fbt-item-thumb { align-self: center; } .agb-fbt-card-variant-clickable .agb-fbt-item-info { height: 100%; justify-content: flex-start; } .agb-fbt-card-variant-clickable .agb-fbt-item-name { width: 100%; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .agb-fbt-card-variant-clickable .agb-fbt-item-check { display: none; } .agb-fbt-card-variant-clickable .agb-fbt-item-child { cursor: pointer; user-select: none; } .agb-fbt-card-variant-clickable .agb-fbt-item-child::after { content: ""; width: 17px; height: 17px; border-radius: 999px; border: 2px solid #cbd5e1; background: #fff; position: absolute; top: 10px; right: 10px; box-sizing: border-box; } .agb-fbt-card-variant-clickable .agb-fbt-item-child.is-selected::after { background: var(--agb-fbt-selected-control-color); border-color: var(--agb-fbt-selected-control-color); box-shadow: inset 0 0 0 3px #fff; } .agb-fbt-card-variant-clickable .agb-fbt-item-child:focus-visible { outline: 2px solid var(--agb-fbt-card-active-border); outline-offset: 2px; } .agb-fbt-card-variant-clickable.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info price"; } .agb-fbt-card-variant-clickable.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "thumb info"; } .agb-fbt-card-variant-clickable.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info"; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-right .agb-fbt-item-child { grid-template-columns: auto minmax(0, 1fr) 58px; grid-template-areas: "price info thumb"; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-right.agb-fbt-hide-thumb .agb-fbt-item-child { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "price info"; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-right.agb-fbt-hide-price .agb-fbt-item-child { grid-template-columns: minmax(0, 1fr) 58px; grid-template-areas: "info thumb"; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-vertical .agb-fbt-item-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "thumb" "info" "price"; justify-items: center; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-vertical.agb-fbt-hide-thumb .agb-fbt-item-child { grid-template-areas: "info" "price"; } .agb-fbt-card-variant-clickable.agb-fbt-item-align-vertical.agb-fbt-hide-price .agb-fbt-item-child { grid-template-areas: "thumb" "info"; } .agb-fbt-card-variant-soft .agb-fbt-item { position: relative; border: 0; border-radius: 16px; background: transparent; box-shadow: none; overflow: hidden; } .agb-fbt-card-variant-soft .agb-fbt-item::before { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid #d9e6f7; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 62%, #eef5ff 100%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .agb-fbt-card-variant-soft .agb-fbt-item > * { position: relative; z-index: 1; } .agb-fbt-card-variant-soft .agb-fbt-item-child:hover { border-color: transparent; background: transparent; } .agb-fbt-card-variant-soft .agb-fbt-item-child:hover::before { border-color: #bdd3f4; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14); transform: translateY(-1px); } .agb-fbt-card-variant-soft .agb-fbt-item-child.is-selected { border-color: transparent; background: transparent; } .agb-fbt-card-variant-soft .agb-fbt-item-child.is-selected::before { border-color: var(--agb-fbt-card-active-border); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22), 0 14px 32px rgba(37, 99, 235, 0.2); } .agb-fbt-card-variant-soft .agb-fbt-item-check input { width: 18px; height: 18px; accent-color: var(--agb-fbt-selected-control-color); } .agb-fbt-card-variant-muscleshop { --agb-fbt-card-hover-bg: #ffffff; --agb-fbt-card-hover-border: #111111; --agb-fbt-card-active-bg: #ffffff; --agb-fbt-card-active-border: #111111; --agb-fbt-selected-control-color: #111111; border: 0; border-radius: 4px; padding: 24px; background: #f3f3f3; box-shadow: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; } .agb-fbt-card-variant-muscleshop .agb-fbt-header h3 { margin-bottom: 22px; color: #3f3f46; font-size: 18px; font-weight: 700; letter-spacing: 0; } .agb-fbt-card-variant-muscleshop .agb-fbt-header, .agb-fbt-card-variant-muscleshop .agb-fbt-carousel-nav, .agb-fbt-card-variant-muscleshop .agb-fbt-items, .agb-fbt-card-variant-muscleshop .agb-fbt-alert, .agb-fbt-card-variant-muscleshop .agb-fbt-popup { grid-column: 1 / -1; } .agb-fbt-card-variant-muscleshop .agb-fbt-item { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "check" "thumb" "info" "price"; gap: 7px; align-items: start; justify-items: stretch; min-height: 182px; padding: 12px 10px 10px; border: 1px solid #d6d6d6; border-radius: 4px; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; box-shadow: none; overflow: visible; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-child { cursor: pointer; user-select: none; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-child:hover, .agb-fbt-card-variant-muscleshop .agb-fbt-item-child.is-selected { border-color: #111111; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; box-shadow: none; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-child:focus-visible { outline: 2px solid #111111; outline-offset: 2px; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-main { border-color: #eeeeee; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; opacity: 1; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-main::before { content: "Actual"; position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 3px; background: #f7f7f7; color: #444444; font-size: 11px; line-height: 1; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-main .agb-fbt-item-check { display: none; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-check { position: absolute; top: 8px; left: 8px; z-index: 3; width: 20px; height: 20px; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid #b8b8b8; border-radius: 5px; background: #ffffff; cursor: pointer; display: grid; place-items: center; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-check input::before { content: ""; width: 9px; height: 5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; opacity: 0; transform: rotate(-45deg) translate(1px, -1px); } .agb-fbt-card-variant-muscleshop .agb-fbt-item-child.is-selected .agb-fbt-item-check input, .agb-fbt-card-variant-muscleshop .agb-fbt-item-check input:checked { border-color: #111111; background: #111111; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-child.is-selected .agb-fbt-item-check input::before, .agb-fbt-card-variant-muscleshop .agb-fbt-item-check input:checked::before { opacity: 1; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-thumb { width: 100%; min-height: 190px; height: auto; max-height: 320px; aspect-ratio: 1 / 1; margin: 0 auto 2px; display: flex; align-items: center; justify-content: center; background: #ffffff; overflow: hidden; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-thumb img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center center; border-radius: 0; background: #ffffff; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-info { width: 100%; min-width: 0; align-items: flex-start; text-align: left; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-name { width: 100%; color: #2f3337; font-size: 13px; font-weight: 500; line-height: 1.25; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-main .agb-fbt-item-name { padding-top: 4px; color: #8b8b8b; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-meta, .agb-fbt-card-variant-muscleshop .agb-fbt-item-desc, .agb-fbt-card-variant-muscleshop .agb-fbt-item-availability { color: #666666; font-size: 11px; line-height: 1.35; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price, .agb-fbt-card-variant-muscleshop .agb-fbt-item-price-inline { width: 100%; margin-top: 0; color: #1f1f1f; font-size: 13px; line-height: 1.25; text-align: left; white-space: normal; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price del { margin-right: 4px; color: #9ca3af; opacity: 1; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price ins { color: #1f1f1f; font-weight: 600; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price-qty { margin-top: 5px; gap: 6px; align-items: baseline; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price-qty .agb-fbt-item-price { width: auto; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price-qty .agb-fbt-item-meta { margin-top: 0; white-space: nowrap; } .agb-fbt-card-variant-muscleshop .agb-fbt-variation-form { width: 100%; } .agb-fbt-card-variant-muscleshop .agb-fbt-variations { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 9px; } .agb-fbt-card-variant-muscleshop .agb-fbt-variation-field label { margin-bottom: 4px; color: #333333; font-size: 11px; font-weight: 600; opacity: 1; } .agb-fbt-card-variant-muscleshop .agb-fbt-variation-field select { min-height: 30px; border: 1px solid #d7d7d7; border-radius: 4px; background-color: #ffffff; color: #202020; font-size: 11px; padding-top: 4px; padding-bottom: 4px; } .agb-fbt-card-variant-muscleshop .agb-fbt-swatches { gap: 5px; margin-top: 5px; } .agb-fbt-card-variant-muscleshop .agb-fbt-swatch { width: 28px; height: 28px; border-width: 1px; border-color: #d7d7d7; background-color: #ffffff; color: #111111; } .agb-fbt-card-variant-muscleshop .agb-fbt-swatch.is-active { border-color: #111111; box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12); } .agb-fbt-variation-popup.agb-fbt-card-variant-muscleshop .agb-fbt-open-popup { width: 100%; min-height: 30px; margin-top: 7px; padding: 5px 10px; border: 1px solid #d7d7d7; border-radius: 4px; background: #ffffff; color: #202020; font-size: 12px; line-height: 1.2; text-align: left; } .agb-fbt-card-variant-muscleshop .agb-fbt-item.has-selected-variation .agb-fbt-open-popup { border-color: #111111; color: #111111; } .agb-fbt-card-variant-muscleshop .agb-fbt-selected-variation-summary { color: #111111; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: normal; } .agb-fbt-card-variant-muscleshop .agb-fbt-variation-reset { font-size: 11px; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary { grid-column: 1; margin-top: 18px; padding: 10px 12px; border-radius: 0; background: #000000 !important; color: #ffffff !important; gap: 3px; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary, .agb-fbt-card-variant-muscleshop .agb-fbt-summary * { color: #ffffff !important; opacity: 1 !important; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary-count { color: #ffffff !important; font-size: 13px; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary-total { color: #ffffff !important; font-size: 16px; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary-total strong { color: #ffffff !important; font-size: 20px; } .agb-fbt-card-variant-muscleshop .agb-fbt-summary-save { color: #ffffff !important; font-size: 13px; } .agb-fbt-card-variant-muscleshop .agb-fbt-actions { grid-column: 2; align-self: end; justify-content: flex-end; margin-top: 18px; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-summary .agb-fbt-actions { grid-column: 1 / -1; } .agb-fbt-card-variant-muscleshop .agb-fbt-main-qty { min-height: 38px; border-radius: 4px; } .agb-fbt-card-variant-muscleshop .agb-fbt-add-all { min-height: 42px; border-color: #2b2b2b; border-radius: 6px; background: #2b2b2b; color: #ffffff; padding: 0 22px; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-thumb .agb-fbt-item { grid-template-areas: "check" "info" "price"; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-price .agb-fbt-item { grid-template-areas: "check" "thumb" "info"; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-areas: "check" "info"; } @media (min-width: 769px) { .agb-fbt-card-variant-muscleshop:not(.agb-fbt-layout-list) .agb-fbt-item-main + .agb-fbt-item-child::before { content: "+"; position: absolute; top: 50%; left: calc((var(--agb-fbt-gap) * -0.5) - 1px); z-index: 4; width: 24px; height: 24px; border-radius: 999px; background: #ee2737; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1; transform: translate(-50%, -50%); } } .agb-fbt-card-variant-spotlight .agb-fbt-item-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "check" "thumb" "overlay" "info"; justify-items: stretch; align-items: start; gap: 0; overflow: hidden; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-check { justify-self: end; margin-bottom: 4px; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-thumb { width: 100%; height: auto; max-height: 260px; margin: 0 auto; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-thumb img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; } .agb-fbt-item-spotlight-overlay { grid-area: overlay; position: relative; margin-top: -6px; padding: 12px 14px; border-radius: 12px; overflow: hidden; color: var(--agb-fbt-spotlight-overlay-text); } .agb-fbt-item-spotlight-overlay::before { content: ""; position: absolute; inset: 0; background: var(--agb-fbt-spotlight-overlay-color); opacity: var(--agb-fbt-spotlight-overlay-opacity); backdrop-filter: blur(var(--agb-fbt-spotlight-overlay-blur)); -webkit-backdrop-filter: blur(var(--agb-fbt-spotlight-overlay-blur)); } .agb-fbt-item-spotlight-overlay > * { position: relative; z-index: 1; } .agb-fbt-item-spotlight-overlay .agb-fbt-item-name { color: var(--agb-fbt-spotlight-overlay-text); margin-bottom: 4px; } .agb-fbt-item-spotlight-overlay .agb-fbt-item-meta { color: var(--agb-fbt-spotlight-overlay-text); opacity: 0.88; } .agb-fbt-item-spotlight-overlay .agb-fbt-item-price { margin-top: 6px; text-align: left; color: var(--agb-fbt-spotlight-overlay-text); } .agb-fbt-item-spotlight-overlay .agb-fbt-item-price del { color: inherit; opacity: 0.74; } .agb-fbt-item-spotlight-overlay .agb-fbt-item-price ins { color: inherit; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-info { width: 100%; margin-top: 10px; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-price { display: block; } .agb-fbt-hide-meta .agb-fbt-item-meta, .agb-fbt-hide-availability .agb-fbt-item-availability, .agb-fbt-hide-title .agb-fbt-header, .agb-fbt-hide-summary .agb-fbt-summary, .agb-fbt-hide-main-qty .agb-fbt-qty-label { display: none; } .agb-fbt-summary { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #0f172a; color: #fff; display: grid; gap: 4px; } .agb-fbt-summary-count { font-size: 13px; opacity: .86; } .agb-fbt-summary-total { font-size: 18px; } .agb-fbt-summary-save { font-size: 13px; color: #86efac; } .agb-fbt-alert { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: #fef2f2; color: #8e1a1a; font-size: 13px; } .agb-fbt-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; } .agb-fbt-main-qty { width: 78px; min-height: 42px; text-align: center; } .agb-fbt-add-all { min-height: 42px; border-radius: 999px; padding: 0 20px; } .agb-fbt-add-all.agb-fbt-disabled, .agb-fbt-add-all:disabled { opacity: .6; pointer-events: none; } .agb-fbt-cart-tag { margin-left: 6px; font-size: 12px; color: #64748b; } @media (max-width: 1024px) { .agb-fbt-layout-grid .agb-fbt-items { grid-template-columns: repeat(var(--agb-fbt-columns-tablet), minmax(0, 1fr)); } .agb-fbt-layout-carousel .agb-fbt-item { flex-basis: calc((100% - ((var(--agb-fbt-columns-tablet) - 1) * var(--agb-fbt-gap))) / var(--agb-fbt-columns-tablet)); } } @media (max-width: 768px) { .agb-fbt-layout-grid .agb-fbt-items { grid-template-columns: repeat(var(--agb-fbt-columns-mobile), minmax(0, 1fr)); } .agb-fbt-layout-carousel .agb-fbt-item { flex-basis: calc((100% - ((var(--agb-fbt-columns-mobile) - 1) * var(--agb-fbt-gap))) / var(--agb-fbt-columns-mobile)); } .agb-fbt-item { grid-template-columns: 24px 46px minmax(0, 1fr); grid-template-areas: "check thumb info" "price price price"; } .agb-fbt-item-align-left .agb-fbt-item > .agb-fbt-item-price { grid-column: 1 / -1; text-align: left; padding-left: 34px; } .agb-fbt-item-align-right .agb-fbt-item-price, .agb-fbt-item-align-vertical .agb-fbt-item-price { grid-column: auto; padding-left: 0; } .agb-fbt-item-thumb { width: 46px; height: 46px; } .agb-fbt-wrap.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "check info" "price price"; } .agb-fbt-wrap.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 24px 46px minmax(0, 1fr); grid-template-areas: "check thumb info"; } .agb-fbt-wrap.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "check info"; } .agb-fbt-card-variant-clickable .agb-fbt-item { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "thumb info" "price price"; } .agb-fbt-card-variant-clickable .agb-fbt-item-price { padding-left: 0; } .agb-fbt-card-variant-clickable.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "thumb info"; } .agb-fbt-card-variant-clickable.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "price"; } .agb-fbt-card-variant-clickable.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-areas: "info"; } .agb-fbt-card-variant-muscleshop { display: block; padding: 18px; } .agb-fbt-card-variant-muscleshop .agb-fbt-item { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb info" "price price"; min-height: 0; padding: 12px; gap: 10px; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-thumb { width: 88px; min-height: 88px; height: 88px; aspect-ratio: auto; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-thumb img { width: 100%; max-width: 100%; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-check { top: 8px; left: 8px; } .agb-fbt-card-variant-muscleshop .agb-fbt-item-price, .agb-fbt-card-variant-muscleshop.agb-fbt-item-align-left .agb-fbt-item > .agb-fbt-item-price { grid-column: 1 / -1; padding-left: 0; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-thumb .agb-fbt-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "price"; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb info"; } .agb-fbt-card-variant-muscleshop.agb-fbt-hide-thumb.agb-fbt-hide-price .agb-fbt-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info"; } .agb-fbt-card-variant-muscleshop .agb-fbt-actions { align-items: stretch; } .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-thumb, .agb-fbt-card-variant-spotlight .agb-fbt-item-child .agb-fbt-item-thumb img { max-height: 220px; } .agb-fbt-popup-preview { grid-template-columns: minmax(0, 1fr); text-align: center; } .agb-fbt-popup-preview-media { margin: 0 auto; } .agb-fbt-popup-actions { padding: 0 14px 14px; } body .agb-fbt-popup .agb-fbt-popup-confirm { width: 100%; } .agb-fbt-actions { flex-direction: column; align-items: stretch; } .agb-fbt-main-qty, .agb-fbt-add-all { width: 100%; } }