/* Food Customizer — single-page shop (pills + grid). Dark, elegant, outlined. */ .fc-shop { --fc-ink: #f2ede4; /* warm off-white */ --fc-muted: rgba(242, 237, 228, .55); --fc-line: rgba(242, 237, 228, .26); /* thin elegant border */ --fc-line-strong: rgba(242, 237, 228, .7); --fc-surface: rgba(255, 255, 255, .028); --fc-radius: 6px; } /* Pills (category nav) — outlined, uppercase */ .fc-pills-wrap { position: relative; display: flex; align-items: center; gap: 4px; } .fc-pills { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--fc-line-strong, rgba(242,237,228,.5)) transparent; cursor: grab; scroll-behavior: smooth; } .fc-pills.fc-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .fc-pills.fc-dragging .fc-pill { pointer-events: none; } .fc-pills::-webkit-scrollbar { height: 6px; } .fc-pills::-webkit-scrollbar-track { background: transparent; } .fc-pills::-webkit-scrollbar-thumb { background: var(--fc-line-strong, rgba(242,237,228,.5)); border-radius: 3px; } /* Arrow controls instead of a fade. Injected by shop.js, present only while the row overflows, each hiding at its own end of the track. Just the glyph — no button chrome — so it inherits whatever the surrounding palette is. */ .fc-pills-nav { /* Outside the scrolling area, not floating over it — nothing overlaps the pills, so the arrow is legible whatever colour a chip happens to be. */ position: static; flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin-bottom: 8px; /* the row reserves 14px below and 6px above */ background: none; border: 0; box-shadow: none; border-radius: 0; cursor: pointer; color: var(--fc-accent, var(--fc-ink)); transition: color .15s ease, transform .15s ease; } .fc-pills-nav svg { width: 22px; height: 22px; display: block; } .fc-pills-nav--prev:hover { transform: translateX(-2px); } .fc-pills-nav--next:hover { transform: translateX(2px); } .fc-pills-nav:active { opacity: .65; } .fc-pills-nav:focus-visible { outline: 2px solid var(--fc-accent, var(--fc-ink)); outline-offset: 3px; } /* shop.js appends both buttons after the track, so in this flex row they would both land on the right — which also ate the track's width on one side and cut the last pill. Order the back arrow before it. */ .fc-pills-nav--prev { order: -1; } /* Present only while the row overflows. Both stay visible; the one you cannot use fades instead of disappearing, so the row never shifts. */ .fc-pills-wrap.fc-scrollable .fc-pills-nav { display: flex; } .fc-pills-wrap.fc-at-start .fc-pills-nav--prev, .fc-pills-wrap.fc-at-end .fc-pills-nav--next { opacity: .28; pointer-events: none; } .fc-pill { flex: 0 0 auto; background: transparent; color: var(--fc-ink); border: var(--fc-bw, 1px) solid var(--fc-line); padding: 9px 20px; border-radius: var(--fc-radius, 3px); font-weight: 600; font-size: var(--fc-fs-pill, .8rem); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .18s; } .fc-pill:hover { background: var(--fc-btn-bg-hov, transparent); color: var(--fc-btn-text-hov, var(--fc-ink)); border-color: var(--fc-btn-bg-hov, var(--fc-line-strong)); } .fc-pill.is-active { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); } /* Grid */ .fc-grid { display: grid; grid-template-columns: repeat(var(--fc-cols, 3), 1fr); gap: 20px; position: relative; min-height: 120px; } .fc-grid.fc-loading { opacity: .5; pointer-events: none; } .fc-grid.fc-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; align-self: center; justify-self: center; border: 2px solid var(--fc-line); border-top-color: var(--fc-ink); border-radius: 50%; animation: fc-spin .8s linear infinite; } @keyframes fc-spin { to { transform: rotate(360deg); } } .fc-empty { color: var(--fc-muted); padding: 30px 0; grid-column: 1 / -1; text-align: center; } /* Card — dark framed, not a white box */ .fc-card { background: var(--fc-card-bg, var(--fc-surface)); border: var(--fc-bw, 1px) solid var(--fc-card-line, var(--fc-line)); border-radius: var(--fc-card-radius, var(--fc-radius)); box-shadow: var(--fc-card-shadow, none); color: var(--fc-card-text, inherit); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; } .fc-card:hover { border-color: var(--fc-line-strong); transform: translateY(-2px); box-shadow: var(--fc-card-shadow-hov, var(--fc-card-shadow, none)); } .fc-card-imgwrap { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; border-radius: var(--fc-card-radius, var(--fc-radius, 4px)); background: var(--fc-card-img-bg, transparent); } .fc-card-imgwrap img, .fc-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .fc-card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 0; flex: 1; } .fc-card-title { font-size: var(--fc-fs-name, 1.05rem); font-weight: var(--fc-card-title-fw, 600); text-transform: var(--fc-card-title-tt, none); margin: 0; line-height: 1.25; letter-spacing: .01em; } .fc-shop .fc-card-title a, .fc-shop .fc-card-title a:hover, .fc-shop .fc-card-title a:focus, .fc-card-title a { color: var(--fc-card-title, var(--fc-card-text, #fff)) !important; text-decoration: none; } .fc-card-desc { color: var(--fc-card-muted, var(--fc-muted)); font-size: .84rem; line-height: 1.5; } /* Weight sits just above the price, both pinned to the bottom of the card. */ .fc-card-priceblock { display: flex; flex-direction: column; gap: 4px; } .fc-card-weight { color: var(--fc-card-muted, var(--fc-muted)); font-size: var(--fc-fs-small, .84rem); line-height: 1.4; } .fc-card-stock { color: var(--fc-accent, #dd5903); font-size: var(--fc-fs-small, .72rem); line-height: 1.4; margin-top: 2px; font-weight: 600; letter-spacing: .02em; } .fc-card-allergens { display: flex; flex-wrap: wrap; gap: 5px; } .fc-card-allergen { font-size: var(--fc-fs-small, .66rem); padding: 2px 9px; border-radius: var(--fc-radius, 3px); border: var(--fc-bw, 1px) solid var(--fc-line); color: var(--fc-muted); text-transform: uppercase; letter-spacing: .04em; } /* Stacked footer: price on top, full-width outlined button below */ .fc-card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: var(--fc-card-gap, 12px); } .fc-card-price { font-weight: 600; color: var(--fc-card-price, var(--fc-ink)); font-size: var(--fc-fs-price, 1.05rem); line-height: 1.3; } .fc-from { font-size: var(--fc-fs-small, .68rem); font-weight: 500; color: var(--fc-muted); text-transform: uppercase; letter-spacing: .08em; } .fc-card-foot .button, .fc-card-foot .fc-customize-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100%; box-sizing: border-box; text-align: center; height: var(--fc-card-btn-h, 38px); min-width: var(--fc-card-btn-minw, 0); line-height: 1; background: var(--fc-btn-bg, transparent) !important; color: var(--fc-btn-text, var(--fc-ink)) !important; border: var(--fc-bw, 1px) solid var(--fc-btn-bg, var(--fc-line-strong)) !important; border-radius: var(--fc-radius, 3px) !important; padding: 0 14px !important; font-weight: var(--fc-btn-fw, 600) !important; font-size: var(--fc-fs-button, .76rem) !important; letter-spacing: .09em; text-transform: var(--fc-btn-tt, uppercase); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .fc-card-foot .button:hover, .fc-card-foot .fc-customize-btn:hover { background: var(--fc-btn-bg-hov, rgba(255, 255, 255, .09)) !important; color: var(--fc-btn-text-hov, var(--fc-ink)) !important; border-color: var(--fc-btn-bg-hov, var(--fc-ink)) !important; } /* Quantity stepper + add button row (simple products) */ .fc-card-buy { display: flex; align-items: stretch; gap: 8px; } .fc-card-buy .fc-card-add { flex: 1 1 auto; width: auto; } .fc-card-qty { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; border: var(--fc-bw, 1px) solid var(--fc-line-strong); border-radius: var(--fc-radius, 3px); padding: 2px; } .fc-card-qty button { width: 30px; height: 32px; background: transparent; border: 0; color: var(--fc-ink); font-size: 15px; line-height: 1; cursor: pointer; border-radius: var(--fc-radius, 3px); } .fc-card-qty button:hover { background: transparent; } .fc-cq-val { min-width: 22px; text-align: center; font-weight: 600; color: var(--fc-ink); font-size: .85rem; } .fc-card-add.fc-added { background: rgba(255, 255, 255, .18) !important; border-color: var(--fc-ink) !important; } .fc-card-add.loading { opacity: .6; pointer-events: none; } /* Option pills (variation selector) — outlined; active = filled cream */ .fc-var-attrs { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; } .fc-var-attr { display: flex; flex-direction: column; gap: 6px; } .fc-var-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fc-muted); font-weight: 600; } .fc-var-pills { display: flex; flex-wrap: wrap; gap: 7px; } .fc-var-pill { background: transparent; color: var(--fc-ink); border: var(--fc-bw, 1px) solid var(--fc-line); border-radius: var(--fc-radius, 3px); padding: 6px 13px; font-size: var(--fc-fs-pill, .76rem); font-weight: 500; line-height: 1.3; cursor: pointer; transition: all .15s; } .fc-var-pill:hover { background: var(--fc-opt-hov-bg, transparent); border-color: var(--fc-opt-hov-line, var(--fc-line-strong)); color: var(--fc-opt-hov-text, var(--fc-ink)); } .fc-var-pill.is-active:hover { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); } .fc-var-pill.is-active { background: var(--fc-accent, var(--fc-ink)); border-color: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); } /* "Combine with" cards */ .fc-combine-card { flex: 0 0 160px; scroll-snap-align: start; background: var(--fc-surface, rgba(255,255,255,.028)); border: 1px solid var(--fc-line, rgba(242,237,228,.26)); border-radius: var(--fc-radius-box, 6px); overflow: hidden; display: flex; flex-direction: column; } /* Tablet and phone counts come from the settings screen; the old hard-coded 2 and 1 stay as the fallback when no variable is set. */ @media (max-width: 900px) { .fc-grid { grid-template-columns: repeat(var(--fc-cols-t, 2), 1fr); } } @media (max-width: 560px) { .fc-grid { grid-template-columns: repeat(var(--fc-cols-m, 1), 1fr); } } .fc-shop { font-family: var(--fc-ff-body, inherit); } /* Featured category cards (photo + name), shown above the pills. */ .fc-cat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0 0 28px; } .fc-cat-card { position: relative; min-height: 230px; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; color: #fff; background-size: cover; background-position: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); transition: transform .2s ease, box-shadow .2s ease; } .fc-cat-card::before { content: ""; position: absolute; inset: 0; /* Light touch: only enough darkening near the bottom to keep the label readable; the photo stays bright. Readability comes mostly from the text-shadow on .fc-cat-card-name below. */ background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.34) 100%); } .fc-cat-card-frame { position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; pointer-events: none; z-index: 2; } .fc-cat-card-name { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .75); } .fc-cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); } @media (max-width: 560px) { .fc-cat-cards { grid-template-columns: repeat(2, 1fr); } .fc-cat-card { min-height: 160px; } .fc-cat-card-name { font-size: 17px; } } /* Card quantity is a real input (typeable) styled like the plain number it replaced. */ input.fc-cq-val { width: 2.3em; min-width: 26px; padding: 2px 0; text-align: center; font-weight: 600; color: var(--fc-ink); font-size: .85rem; font-family: inherit; background: transparent; border: var(--fc-bw, 1px) solid transparent; border-radius: var(--fc-radius, 3px); -moz-appearance: textfield; } input.fc-cq-val:hover { border-color: var(--fc-line, rgba(242,237,228,.22)); } input.fc-cq-val:focus { outline: none; border-color: var(--fc-line-strong); background: transparent; } input.fc-cq-val::-webkit-outer-spin-button, input.fc-cq-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---- Equal-height cards ------------------------------------------------- * The grid stretches its items, so the card boxes already match — but what * varies inside is the title (one line vs two) and the price block ("от" on * variable products, weight line), which pushes each card's buy row to a * different height. Reserve two lines for the title and a fixed height for the * price block so the price and the − 1 + / ДОБАВИ row line up across the row. * ---------------------------------------------------------------------- */ .fc-grid { align-items: stretch; } .fc-card { height: 100%; } /* The foot is bottom-anchored (margin-top:auto), so the buy rows line up without reserving extra height under the title. */ .fc-card-priceblock { justify-content: flex-end; } /* Buy row: identical height for the stepper and the button, so the two read as one control. The button height (38px) is the reference; the stepper is box-sized to match instead of being the sum of its parts. */ .fc-card-buy { align-items: stretch; } .fc-card-buy .fc-card-qty, .fc-card-buy .fc-card-add, .fc-card-buy .button { height: 38px; box-sizing: border-box; } .fc-card-qty button { height: auto; align-self: stretch; } /* The menu fills whatever container it is dropped into (an Elementor section, a normal page, the shop archive). Width is therefore controlled where it should be — by that container — unless the admin sets an explicit max width. */ .fc-shop { width: 100%; } /* Product name size: the admin value (Design → Fonts → "Име на продукта") must win over the theme's own heading rule. When the menu sits inside a page's .entry-content, patiotime styles `.entry-content h3 { font-size:1.75rem }` — specificity (0,1,1) — which beat the plain `.fc-card-title` (0,1,0) and made the setting look broken. This selector (0,3,1) beats the theme's .entry-content h3. */ .fc-shop .fc-card h3.fc-card-title, .fc-shop .fc-card h3.fc-card-title a { font-size: var(--fc-fs-name, 1.05rem); line-height: 1.25; } /* patiotime also sets `.entry-content h1..h6 { margin-bottom: 30px }`, which beat `.fc-card-title { margin: 0 }` and left a fixed 30px under every product name. With this the only space between the name and the price is the admin value (Design → Layout → "Разстояние между името и цената"). */ .fc-shop .fc-card h3.fc-card-title { margin: 0; } /* Two buttons on a box: options + add straight to cart. */ .fc-card-btns { display: flex; align-items: stretch; gap: 8px; } /* WooCommerce prints a screen-reader between the two links; as a flex item it would push them apart, so keep it out of the layout (still read). */ .fc-card-btns > .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fc-card-btns > .button, .fc-card-btns > .fc-card-add { flex: 1 1 0; min-width: 0; height: 38px !important; /* the theme's own a.button styling wins otherwise */ line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* ---- slide-in cart panel ------------------------------------------------ */ .fc-cart-panel-root { position: fixed; inset: 0; z-index: 100000; } .fc-cart-panel-root[hidden] { display: none; } .fc-cart-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; } .fc-cart-panel-root.is-open .fc-cart-overlay { opacity: 1; } .fc-cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--fc-panel, #16130f); border-left: var(--fc-bw, 1px) solid var(--fc-line, rgba(242,237,228,.22)); transform: translateX(100%); transition: transform .25s ease; box-shadow: -12px 0 28px rgba(0, 0, 0, .16); } .fc-cart-panel-root.is-open .fc-cart-panel { transform: none; } body.fc-cart-open { overflow: hidden; } .fc-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: var(--fc-bw, 1px) solid var(--fc-line, rgba(242,237,228,.22)); } .fc-cart-head h3 { margin: 0; font-size: var(--fc-fs-heading, 18px); color: var(--fc-ink); } .fc-cart-close { background: transparent; border: 0; color: var(--fc-ink); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .fc-cart-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; } .fc-cart-panel-root.fc-cart-busy .fc-cart-body { opacity: .55; pointer-events: none; } .fc-cart-empty { color: var(--fc-muted); padding: 30px 0; text-align: center; } .fc-cart-lines { list-style: none; margin: 0; padding: 0; } .fc-cart-line { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--fc-line, rgba(242,237,228,.14)); } .fc-cart-thumb { flex: 0 0 62px; } .fc-cart-thumb img { width: 62px; height: 62px; object-fit: cover; display: block; border-radius: var(--fc-radius, 3px); } .fc-cart-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .fc-cart-name { color: var(--fc-ink); font-weight: 600; font-size: .95rem; line-height: 1.3; } .fc-cart-meta { color: var(--fc-muted); font-size: .78rem; line-height: 1.4; } .fc-cart-meta p { margin: 0; } .fc-cart-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fc-cart-qty { display: inline-flex; align-items: center; gap: 1px; border: var(--fc-bw, 1px) solid var(--fc-line-strong); border-radius: var(--fc-radius, 3px); padding: 2px; } .fc-cart-qty button { width: 26px; height: 26px; background: transparent; border: 0; color: var(--fc-ink); font-size: 14px; line-height: 1; cursor: pointer; } .fc-cart-qty .fc-cq-val { width: 2.2em; min-width: 24px; padding: 2px 0; text-align: center; background: transparent; border: 0; color: var(--fc-ink); font-weight: 600; font-size: .85rem; } .fc-cart-price { color: var(--fc-ink); font-weight: 600; white-space: nowrap; } .fc-cart-remove { flex: 0 0 auto; background: transparent; border: 0; color: var(--fc-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .fc-cart-remove:hover { color: var(--fc-ink); } .fc-cart-foot { padding: 16px 20px 20px; border-top: var(--fc-bw, 1px) solid var(--fc-line, rgba(242,237,228,.22)); display: flex; flex-direction: column; gap: 10px; } .fc-cart-subtotal { display: flex; justify-content: space-between; color: var(--fc-ink); font-size: 1rem; } .fc-cart-foot .button { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 12px 16px; text-decoration: none; font-size: var(--fc-fs-button, 13px); letter-spacing: .09em; text-transform: uppercase; font-weight: 600; border-radius: var(--fc-radius, 3px); } .fc-cart-view { background: transparent; color: var(--fc-ink); border: var(--fc-bw, 1px) solid var(--fc-line-strong); } .fc-cart-checkout { background: var(--fc-accent, var(--fc-ink)); color: var(--fc-accent-text, #14110d); border: var(--fc-bw, 1px) solid var(--fc-accent, var(--fc-ink)); } @media (max-width: 480px) { .fc-cart-panel { width: 100%; } } /* On hover the image lifts slightly inside its frame — the frame itself does not move, so the grid stays perfectly still. */ .fc-card-imgwrap { overflow: hidden; } .fc-card-imgwrap img, .fc-card-img { transition: transform .45s cubic-bezier(.2, .7, .3, 1); will-change: transform; } .fc-card:hover .fc-card-imgwrap img, .fc-card:hover .fc-card-img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .fc-card-imgwrap img, .fc-card-img { transition: none; } .fc-card:hover .fc-card-imgwrap img, .fc-card:hover .fc-card-img { transform: none; } } /* ---- narrow cards (4-6 columns) ---------------------------------------- * The quantity stepper is a fixed width, so the more columns there are the less * room is left for the add button — at 5 columns it ends up squeezed. Measure * the CARD, not the viewport (the column count is an admin setting, so a media * query cannot know it), and give the two controls a full-width row each once * the card gets tight. * ---------------------------------------------------------------------- */ .fc-card { container-type: inline-size; } @container (max-width: 300px) { .fc-card-buy { flex-wrap: wrap; gap: 8px; } .fc-card-buy .fc-card-qty { flex: 1 1 100%; justify-content: center; } .fc-card-buy .fc-card-add { flex: 1 1 100%; width: 100%; } /* the stepper row stacks; the button PAIR stays side by side and only stacks when the card is far narrower (see the 210px rule below) */ } /* Between comfortable and tight, buy back some width from the stepper before stacking: smaller side buttons and a tighter label. */ @container (max-width: 360px) { .fc-card-qty button { width: 26px; } .fc-card-foot .button, .fc-card-foot .fc-customize-btn { padding: 0 10px !important; letter-spacing: .05em; } } /* A narrow card — two columns on a phone, five on a laptop — kept the full desktop name size, so a long product name ran to five or six lines and the cards in a row came out wildly uneven. Scale the name with the card once it gets tight (never above the size set in the admin) and let the browser even out the lines it does use. */ @container (max-width: 260px) { .fc-shop .fc-card h3.fc-card-title, .fc-shop .fc-card h3.fc-card-title a, .fc-card-title { font-size: clamp(13px, 9cqi, var(--fc-fs-name, 1.05rem)); text-wrap: balance; } } /* The typed quantity always takes the colour of the row it sits in, so it stays readable whatever the card background is. */ input.fc-cq-val, input.fc-cq-val:focus { color: inherit; } /* Only when a card is really tight does the button pair give up and stack. */ @container (max-width: 210px) { .fc-card-btns { flex-direction: column; } .fc-card-btns > .button, .fc-card-btns > .fc-card-add { width: 100%; } } /* ------------------------------------------------------------------ * * Catering packages — the same photo tiles as the category cards, sitting * above them. Clicking one opens the ordinary product popup, so everything * about a package (what it includes, the price, adding it) lives there. * ------------------------------------------------------------------ */ .fc-packages { margin: 0 0 28px; } .fc-packages-head { margin: 0 0 16px; font-family: var(--fc-ff-heading, inherit); font-size: var(--fc-fs-section, 26px); line-height: 1.2; color: var(--fc-ink, inherit); } .fc-package-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } /* A fixed number of cards per row when the admin has chosen one. */ .fc-package-cards--fixed { grid-template-columns: repeat(var(--fc-pack-cols, 3), minmax(0, 1fr)); } .fc-package-card { position: relative; min-height: 230px; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; color: #fff; background-color: var(--fc-accent, #a05835); background-size: cover; background-position: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); transition: transform .2s ease, box-shadow .2s ease; } .fc-package-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.34) 100%); } .fc-package-frame { position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; pointer-events: none; z-index: 2; } .fc-package-name { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .75); } .fc-package-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); } /* These tiles are