/* ========================================================================== The Cheese House: Ecwid CSS theme (product + catalog pages) Store: nwcheesehouse.com (Ecwid store 67832994) Version 1.0, Sep 30, 2026. Live theme "Cheese House Country" with Deli add-on (Sep 30, 2026) Where it goes later: Ecwid admin > Design > CSS themes > Create your CSS theme (paste this whole file, save, then preview before activating). How it works - Every rule is scoped to the Ecwid storefront widget (.ec-size / .ecwid), so the Instant Site header, category bar, map, contact block and site footer are left alone. - Ecwid's storefront reads its colors and font from CSS variables (--ec-color-text, --ec-btn-primary-background, ...). We redefine those on the widget first, so almost everything recolors without !important. - Selectors checked against the live storefront on Sep 30, 2026 (category page Cheese Precuts, product page Baby Swiss, store front). Palette cream page #FAF5EB cream card #FFFDF8 warm line #E6DCCB barn red #9B3426 (primary buttons, prices) hover #7E2A1F forest green #2F5233 (accents, links) hover #223D26 walnut #3E2A1B (text, headings) walnut soft #6B4A2F (secondary) ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Montserrat:wght@400;500;600;700&display=swap"); /* -------------------------------------------------------------------------- 1. Design tokens: Ecwid's own variables, redefined for the widget only -------------------------------------------------------------------------- */ .ec-size { /* our names */ --ch-cream: #FAF5EB; --ch-card: #FFFDF8; --ch-line: #E6DCCB; --ch-line-strong: #CDB89C; --ch-barn: #9B3426; --ch-barn-dark: #7E2A1F; --ch-forest: #2F5233; --ch-forest-dark: #223D26; --ch-walnut: #3E2A1B; --ch-walnut-soft: #6B4A2F; --ch-serif: 'Merriweather', Georgia, 'Times New Roman', serif; --ch-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --ch-radius: 12px; --ch-shadow: 0 1px 2px rgba(62, 42, 27, .06), 0 4px 14px rgba(62, 42, 27, .07); --ch-shadow-hover: 0 2px 4px rgba(62, 42, 27, .08), 0 10px 24px rgba(62, 42, 27, .12); /* Ecwid's variables */ --ec-font-family: var(--ch-sans); --ec-color-text: var(--ch-walnut); --ec-color-text-light: var(--ch-walnut-soft); --ec-color-text-light-hover: var(--ch-walnut); --ec-color-background: var(--ch-cream); --ec-color-link: var(--ch-forest); --ec-color-link-hover: var(--ch-forest-dark); --ec-color-link-active: var(--ch-forest-dark); --ec-color-price: var(--ch-barn); --ec-color-button: var(--ch-barn); --ec-color-border: var(--ch-line); --ec-color-back: #F3EADB; --ec-color-input-border: var(--ch-line-strong); --ec-btn-primary-background: var(--ch-barn); --ec-btn-primary-background-hover: var(--ch-barn-dark); --ec-btn-primary-color: #FFFFFF; --ec-btn-secondary-background: var(--ch-card); --ec-btn-secondary-background-hover: #F3EADB; --ec-btn-secondary-color: var(--ch-forest); --ec-btn-secondary-border: var(--ch-forest); --ec-btn-secondary-border-hover: var(--ch-forest-dark); --ec-btn-navigation-arrow: var(--ch-walnut-soft); --ec-btn-navigation-arrow-hover: var(--ch-forest); --ec-form-control-color: var(--ch-walnut); --ec-form-control-placeholder: #8A7560; --ec-form-control-background: var(--ch-card); --ec-form-control-background-hover: #FFFFFF; --ec-form-control-background-focus: #FFFFFF; --ec-form-control-border: var(--ch-line-strong); --ec-form-control-border-hover: var(--ch-walnut-soft); --ec-form-control-border-focus: var(--ch-forest); --ec-color-label-success-background: var(--ch-forest); --ec-color-label-attention-background: var(--ch-barn); } /* -------------------------------------------------------------------------- 2. Store area: cream background, Montserrat body text The cream is stretched to the full window width with a box-shadow, so the white Instant Site strip around the store turns cream too. It only paints behind the widget; nothing else on the page is touched. The clip-path lets the cream reach 32px above / 44px below the widget to fill Instant Site's own padding around the store, without covering the category bar above or the map section below. Delete the box-shadow and clip-path lines if the store is ever embedded on another website. -------------------------------------------------------------------------- */ .ec-size .ec-wrapper { background-color: var(--ch-cream); box-shadow: 0 0 0 100vmax var(--ch-cream); clip-path: inset(-32px -100vmax -44px); } .ec-size .ec-store { font-family: var(--ch-sans); color: var(--ch-walnut); } /* -------------------------------------------------------------------------- 3. Headings, page titles, breadcrumbs -------------------------------------------------------------------------- */ .ec-size .ec-store .ec-header-h1, .ec-size .ec-store .ec-header-h2, .ec-size .ec-store .ec-header-h3, .ec-size .ec-store .page-title__name { font-family: var(--ch-serif); font-weight: 900; color: var(--ch-walnut); letter-spacing: -0.005em; } /* Small section labels ("Product Details", "Share this product", "In stock") */ .ec-size .ec-store .ec-header-h6, .ec-size .ec-store .product-details-module__title { font-family: var(--ch-sans); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-forest); } .ec-size .ec-store .ec-breadcrumbs, .ec-size .ec-store .breadcrumbs__link, .ec-size .ec-store .breadcrumbs__delimiter { font-size: 14px; color: var(--ch-walnut-soft); } .ec-size .ec-store a.breadcrumbs__link:not(.breadcrumbs__link--last) { color: var(--ch-forest); } .ec-size .ec-store a.breadcrumbs__link:hover { color: var(--ch-forest-dark); text-decoration: underline; } /* Muted text (Sort by, footer links, "In stock" helpers) */ .ec-size .ec-store .ec-text-muted, .ec-size .ec-store .ec-link--muted, .ec-size .ec-store .form-control__select-text { color: var(--ch-walnut-soft); } /* -------------------------------------------------------------------------- 4. Product cards in category grids The card is painted on __wrap-inner so Ecwid's grid gutters stay intact. -------------------------------------------------------------------------- */ .ec-size .ec-store .grid-product__wrap-inner { background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); padding: 10px 10px 4px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .ec-size .ec-store .grid-product__wrap:hover .grid-product__wrap-inner { border-color: var(--ch-line-strong); box-shadow: var(--ch-shadow-hover); transform: translateY(-2px); } /* Photo: soft rounded corners */ .ec-size .ec-store .grid-product__image { border-radius: 8px; overflow: hidden; } /* Products without a photo: warm parchment instead of Ecwid's random pink/blue (Ecwid sets that color inline, so !important is required here). */ .ec-size .ec-store .grid-product--no-image .grid-product__bg { background-color: #F1E7D6 !important; } .ec-size .ec-store .grid-product--no-image .grid-product__shadow-inner { font-family: var(--ch-serif); font-weight: 700; color: var(--ch-walnut-soft); } /* Product name (size follows the Design > Product card size setting) */ .ec-size .ec-store .grid-product__title-inner { font-family: var(--ch-serif); font-weight: 700; line-height: 1.4; color: var(--ch-walnut); } .ec-size .ec-store .grid-product__title:hover .grid-product__title-inner { color: var(--ch-forest); } /* Price */ .ec-size .ec-store .grid-product__price-value { font-family: var(--ch-serif); font-weight: 900; font-size: 19px; color: var(--ch-barn); } .ec-size .ec-store .grid-product__price-compare { color: var(--ch-walnut-soft); } /* Ribbons such as "Free Shipping!" */ .ec-size .ec-store .grid-product__label .label__text, .ec-size .ec-store .product-details__label .label__text { font-family: var(--ch-sans); font-weight: 700; letter-spacing: .02em; } /* "Buy now" button on cards (only shows if enabled in Design settings) */ .ec-size .ec-store .grid-product__button .form-control__button { width: 100%; } /* -------------------------------------------------------------------------- 5. Category tiles (store front and parent categories) -------------------------------------------------------------------------- */ .ec-size .ec-store .grid-category__card { border-radius: var(--ch-radius); overflow: hidden; box-shadow: var(--ch-shadow); transition: box-shadow .2s ease, transform .2s ease; } .ec-size .ec-store .grid-category__wrap:hover .grid-category__card { box-shadow: var(--ch-shadow-hover); transform: translateY(-2px); } .ec-size .ec-store .grid-category__title-inner { font-family: var(--ch-serif); font-weight: 700; } /* Categories without a photo (e.g. Pancake Mixes today): warm walnut instead of Ecwid's pink/blue gradient, with cream lettering. */ .ec-size .ec-store .grid-category--no-image .grid-category__bg-color { background: linear-gradient(135deg, #6B4A2F 0%, #3E2A1B 100%); } .ec-size .ec-store .grid-category--no-image .grid-category__title-inner, .ec-size .ec-store .grid-category--no-image .grid-category__shadow-inner { color: #FAF5EB; } /* -------------------------------------------------------------------------- 6. Buttons and form fields -------------------------------------------------------------------------- */ .ec-size .ec-store .form-control__button { border-radius: 8px; font-family: var(--ch-sans); font-weight: 700; letter-spacing: .02em; } /* Primary: barn red (Add to Bag, Checkout) */ .ec-size .ec-store .form-control--primary .form-control__button { background-color: var(--ch-barn); border-color: var(--ch-barn); color: #FFFFFF; box-shadow: 0 2px 0 var(--ch-barn-dark); } .ec-size .ec-store .form-control--primary .form-control__button:hover { background-color: var(--ch-barn-dark); border-color: var(--ch-barn-dark); } /* Secondary: forest-green outline (Go to Checkout, Get Directions etc.) */ .ec-size .ec-store .form-control--secondary .form-control__button { background-color: var(--ch-card); border: 2px solid var(--ch-forest); color: var(--ch-forest); } .ec-size .ec-store .form-control--secondary .form-control__button:hover { background-color: var(--ch-forest); color: #FFFFFF; } /* Text inputs, quantity box, selects */ .ec-size .ec-store .form-control__text, .ec-size .ec-store .form-control__select, .ec-size .ec-store .form-control__textarea { border-radius: 8px; box-shadow: none; } .ec-size .ec-store .form-control__text:focus, .ec-size .ec-store .form-control__textarea:focus { box-shadow: 0 0 0 3px rgba(47, 82, 51, 0.18); } /* -------------------------------------------------------------------------- 7. Product page -------------------------------------------------------------------------- */ /* Main photo: rounded, warm frame */ .ec-size .ec-store .details-gallery__picture, .ec-size .ec-store .details-gallery__image-wrapper-inner { border-radius: var(--ch-radius); } .ec-size .ec-store .details-gallery__image { border-radius: var(--ch-radius); overflow: hidden; box-shadow: var(--ch-shadow); } .ec-size .ec-store .details-gallery__thumb { border-radius: 6px; overflow: hidden; } /* Right-hand column as a soft cream card */ .ec-size .ec-store .product-details--layout-sidebar-right .product-details__sidebar { background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); padding: 28px 28px 24px; } /* Product name (extra specificity: Ecwid sizes headings per screen width with .ec-size.ec-size--l .ec-store .ec-header-h3) */ .ec-size .ec-wrapper .ec-store .product-details__sidebar .product-details__product-title { font-family: var(--ch-serif); font-weight: 900; font-size: 30px; line-height: 1.25; color: var(--ch-walnut); } /* Price */ .ec-size .ec-store .details-product-price__value { font-family: var(--ch-serif); font-weight: 900; color: var(--ch-barn); } /* "In stock" */ .ec-size .ec-store .details-product-purchase__place { color: var(--ch-forest); font-weight: 600; } /* Quantity label */ .ec-size .ec-store .details-product-purchase__qty-label { font-weight: 600; color: var(--ch-walnut); } /* Add to Bag: a bit taller */ .ec-size .ec-store .details-product-purchase__add-to-bag .form-control__button { min-height: 52px; } /* Description */ .ec-size .ec-wrapper .ec-store .product-details .product-details__product-description { line-height: 1.7; color: var(--ch-walnut); } /* Divider above description / share */ .ec-size .ec-store .product-details__general-info, .ec-size .ec-store .product-details__product-share { border-top: 1px solid var(--ch-line); padding-top: 20px; } /* Previous / next product arrows */ .ec-size .ec-wrapper .ec-store .product-details__top-active-navigation .product-details__navigation { border-color: var(--ch-line-strong); background: var(--ch-card); } /* Share buttons */ .ec-size .ec-store .ec-likely__widget { background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: 999px; color: var(--ch-walnut); } .ec-size .ec-store .ec-likely__widget:hover { border-color: var(--ch-line-strong); background: #F3EADB; } /* -------------------------------------------------------------------------- 8. Store footer links (My Account, Track Orders, Shopping Bag) -------------------------------------------------------------------------- */ .ec-size .ec-store .ec-footer { border-top: 1px solid var(--ch-line); } .ec-size .ec-store .ec-footer__link { color: var(--ch-walnut-soft); font-weight: 500; } .ec-size .ec-store .ec-footer__link:hover { color: var(--ch-forest); } /* -------------------------------------------------------------------------- 9. Phones and narrow screens Ecwid adds .ec-size--s, --m, --l ... as the widget gets wider. When --s is missing, the store is phone-sized. -------------------------------------------------------------------------- */ .ec-size:not(.ec-size--s) .ec-store .grid-product__wrap-inner { padding: 6px 6px 2px; border-radius: 10px; } .ec-size:not(.ec-size--s) .ec-store .grid__products .grid-product__title-inner { font-size: 14px; } .ec-size:not(.ec-size--s) .ec-store .grid-product__price-value { font-size: 17px; } .ec-size:not(.ec-size--s) .ec-wrapper .ec-store .product-details__sidebar .product-details__product-title { font-size: 24px; } .ec-size:not(.ec-size--s) .ec-store .page-title__name { font-size: 26px; } .ec-size:not(.ec-size--s) .ec-store .product-details--layout-sidebar-right .product-details__sidebar { padding: 20px 18px; } /* ========================================================================== 10. Deli category page (Catalog > Categories > Deli > Description) Add-on for the 'Cheese House Country' theme, Sep 30, 2026. Styles the HTML list pasted into the Deli category description (
...
). Every rule is scoped to .ch-deli, so no other page of the store changes. Colors and fonts come from the theme variables in section 1 (fallback values in case they are missing). Icons are inline SVG data URIs (no external files or fonts). Empty-category message: nothing to hide. The live storefront (checked Sep 30, 2026 on the empty 'Coffee' category, c142438022) renders an empty category as just the title, breadcrumbs and an empty .grid__wrap: no "no products" text, no sort bar. So this add-on contains no hiding rule. ========================================================================== */ .ec-size .ec-store .ch-deli { --chd-line: var(--ch-line, #E6DCCB); --chd-line-soft: #EFE5D3; --chd-card: var(--ch-card, #FFFDF8); --chd-cream: var(--ch-cream, #FAF5EB); --chd-red: var(--ch-barn, #9B3426); --chd-green: var(--ch-forest, #2F5233); --chd-walnut: var(--ch-walnut, #3E2A1B); --chd-walnut-soft: var(--ch-walnut-soft, #6B4A2F); --chd-serif: var(--ch-serif, 'Merriweather', Georgia, serif); --chd-sans: var(--ch-sans, 'Montserrat', 'Helvetica Neue', Arial, sans-serif); font-family: var(--chd-sans); font-size: 16px; line-height: 1.55; color: var(--chd-walnut); text-align: left; margin: 6px 0 12px; } .ec-size .ec-store .ch-deli p, .ec-size .ec-store .ch-deli h2, .ec-size .ec-store .ch-deli h3, .ec-size .ec-store .ch-deli ul, .ec-size .ec-store .ch-deli li { margin: 0; padding: 0; } /* Intro line + in-store-only badge */ .ec-size .ec-store .ch-deli .ch-deli-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 0 0 26px; } .ec-size .ec-store .ch-deli .ch-deli-lead { flex: 1 1 380px; max-width: 560px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--chd-walnut-soft); } .ec-size .ec-store .ch-deli .ch-deli-instore { flex: 0 1 380px; display: block; margin: 0; padding: 12px 16px 12px 58px; background: #F1F5EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%232F5233' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") no-repeat 16px 50%/30px 30px; border: 1px solid #C9D6C4; border-radius: 14px; color: var(--chd-green); font-weight: 600; font-size: 14.5px; line-height: 1.4; } .ec-size .ec-store .ch-deli .ch-deli-instore a, .ec-size .ec-store .ch-deli .ch-deli-instore a:visited { color: var(--chd-green); text-decoration: underline; white-space: nowrap; } /* Section cards */ .ec-size .ec-store .ch-deli .ch-deli-card { display: block; background: var(--chd-card); border: 1px solid var(--chd-line); border-radius: 18px; box-shadow: 0 1px 0 rgba(62, 42, 27, 0.04), 0 6px 18px -12px rgba(62, 42, 27, 0.25); padding: 28px 32px 26px; margin: 0 0 22px; } .ec-size .ec-store .ch-deli .ch-deli-head { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; margin: 0 0 18px; border-bottom: 1px solid var(--chd-line); } .ec-size .ec-store .ch-deli .ch-deli-head::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--chd-line); background: #F7EDE0 no-repeat 50% 50% / 26px 26px; } .ec-size .ec-store .ch-deli .ch-deli-card--domestic .ch-deli-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M3 21 20 8l9 6v8.5H3z' fill='%23F4D58D' stroke='%239B3426' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 21h26' stroke='%239B3426' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='17.8' r='1.4' fill='%23E0B75A'/%3E%3Ccircle cx='18' cy='14' r='1.7' fill='%23E0B75A'/%3E%3Ccircle cx='23' cy='18' r='1.2' fill='%23E0B75A'/%3E%3Ccircle cx='15' cy='25' r='1.3' fill='%23E0B75A'/%3E%3Ccircle cx='24' cy='25.5' r='1.5' fill='%23E0B75A'/%3E%3C/svg%3E"); } .ec-size .ec-store .ch-deli .ch-deli-card--imported .ch-deli-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='10.5' fill='%23F4D58D' stroke='%239B3426' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='16' r='6.2' fill='%23FBE7B5' stroke='%23E0B75A' stroke-width='1.2'/%3E%3Cpath d='M16 5.5v21M5.5 16h21' stroke='%239B3426' stroke-width='1' opacity='.35'/%3E%3Ccircle cx='12.5' cy='12.5' r='1.3' fill='%23E0B75A'/%3E%3Ccircle cx='19.5' cy='18.5' r='1.5' fill='%23E0B75A'/%3E%3C/svg%3E"); } .ec-size .ec-store .ch-deli .ch-deli-card--meats .ch-deli-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 32 32' fill='none'%3E%3Cellipse cx='15' cy='16.5' rx='11' ry='9' fill='%23E9A38F' stroke='%239B3426' stroke-width='1.6'/%3E%3Cellipse cx='15' cy='16.5' rx='6.5' ry='5' fill='%23F3C4B5'/%3E%3Ccircle cx='15' cy='16.5' r='1.8' fill='%23FFF6EE' stroke='%239B3426' stroke-width='1.1'/%3E%3Cpath d='M25.5 13.5 29 11' stroke='%239B3426' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .ec-size .ec-store .ch-deli .ch-deli-card--butter .ch-deli-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 32 32' fill='none'%3E%3Crect x='4' y='11' width='24' height='12' rx='6' fill='%23F7E7A6' stroke='%239B3426' stroke-width='1.6'/%3E%3Cellipse cx='22' cy='17' rx='3.2' ry='6' fill='%23FBF0C4' stroke='%239B3426' stroke-width='1.3'/%3E%3C/svg%3E"); } .ec-size .ec-store .ch-deli .ch-deli-title { margin: 0; font-family: var(--chd-serif); font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--chd-walnut); letter-spacing: 0; } .ec-size .ec-store .ch-deli .ch-deli-badge { margin-left: auto; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--chd-walnut-soft); background: var(--chd-cream); border: 1px solid var(--chd-line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } /* Lists: letter groups in 3 / 2 / 1 columns */ .ec-size .ec-store .ch-deli .ch-deli-list { columns: 3; column-gap: 40px; column-rule: 1px solid var(--chd-line-soft); } .ec-size .ec-store .ch-deli .ch-deli-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 18px; padding: 0; } .ec-size .ec-store .ch-deli .ch-deli-letter { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--chd-serif); font-size: 18px; font-weight: 900; line-height: 1.4; color: var(--chd-red); } .ec-size .ec-store .ch-deli .ch-deli-letter::after { content: ""; flex: 1; height: 1px; background: var(--chd-line); } .ec-size .ec-store .ch-deli .ch-deli-items { list-style: none; margin: 0; padding: 0; } .ec-size .ec-store .ch-deli .ch-deli-items li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 6px 0; list-style: none; border-bottom: 1px dashed var(--chd-line-soft); font-size: 15.5px; font-weight: 500; line-height: 1.55; color: var(--chd-walnut); } .ec-size .ec-store .ch-deli .ch-deli-items li::before, .ec-size .ec-store .ch-deli .ch-deli-items li::marker { content: none; } .ec-size .ec-store .ch-deli .ch-deli-items li:last-child { border-bottom: 0; } .ec-size .ec-store .ch-deli .ch-deli-new { display: inline-block; font-family: var(--chd-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.5; color: #FFFFFF; background: var(--chd-green); border-radius: 999px; padding: 2px 8px; } .ec-size .ec-store .ch-deli .ch-deli-note { margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--chd-line); font-size: 14px; line-height: 1.55; color: var(--chd-walnut-soft); } /* Roll Butter: compact card */ .ec-size .ec-store .ch-deli .ch-deli-card--compact { padding: 20px 32px; } .ec-size .ec-store .ch-deli .ch-deli-card--compact .ch-deli-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; } .ec-size .ec-store .ch-deli .ch-deli-text { margin: 0 0 0 58px; font-size: 15.5px; font-weight: 500; line-height: 1.55; } /* Tablet: 2 columns */ @media (max-width: 980px) { .ec-size .ec-store .ch-deli .ch-deli-list { columns: 2; } } /* Phone: 1 column, tighter cards, badge full width */ @media (max-width: 600px) { .ec-size .ec-store .ch-deli .ch-deli-lead { flex-basis: 100%; font-size: 16px; } .ec-size .ec-store .ch-deli .ch-deli-instore { flex: 1 1 100%; } .ec-size .ec-store .ch-deli .ch-deli-card { padding: 22px 18px 20px; border-radius: 16px; } .ec-size .ec-store .ch-deli .ch-deli-card--compact { padding: 18px; } .ec-size .ec-store .ch-deli .ch-deli-title { font-size: 22px; } .ec-size .ec-store .ch-deli .ch-deli-badge { display: none; } .ec-size .ec-store .ch-deli .ch-deli-list { columns: 1; } .ec-size .ec-store .ch-deli .ch-deli-text { margin-left: 0; } } /* ===================================================================== $99+ DISCOUNTED SHIPPING: ANNOUNCEMENT BAR (The Cheese House, Oct 2026) Append to the END of the existing CSS theme. Nothing above is changed. --------------------------------------------------------------------- Where: body::before on Instant Site pages only (#ecwid_body.starter-site). The bar is a normal block at the very top of , in front of .tiles-wrapper, which holds the header/logo, menus and floating cart icon. It is not fixed or sticky, so it pushes the whole site down by its own height. Absolutely positioned bits (the floating cart/search icons) move with their wrapper, and the fixed mobile Categories drawer (.pushmenu, z-index 10) still opens on top of it. It scrolls away with the page. Plain text only, not clickable. If the store is ever embedded on another website, the bar won't appear there: the selector only matches Instant Site's body. Known side effect: Instant Site's script pins the round floating search/cart icon to the top once you scroll 108px, and it doesn't count the bar. So the icon now jumps about 36-40px when it pins. By then the bar has already scrolled away, so nothing overlaps. ===================================================================== */ #ecwid_body.starter-site::before { content: "Discounted shipping on orders $99+ \00a0\2022\00a0 anywhere in the U.S."; /* \00a0 = no-break space, \2022 = bullet; ASCII-only escapes survive Ecwid's minifier */ display: block; box-sizing: border-box; width: 100%; min-height: 40px; /* 37px + 3px border = 40px on desktop */ margin: 0; padding: 9px 16px 8px; background: #3E2A1B; /* walnut */ border-bottom: 3px solid #F0B43C; /* mustard accent, same as the mockup */ color: #FAF5EB; /* cream */ font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: .02em; text-align: center; text-wrap: balance; /* even lines if it ever wraps */ overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; pointer-events: none; /* not a link: taps go nowhere */ } /* Phones: shorter wording on one line (about 36px tall). */ @media (max-width: 480px) { #ecwid_body.starter-site::before { content: "Discounted shipping on orders $99+"; min-height: 0; padding: 8px 12px 7px; font-size: 13px; line-height: 18px; letter-spacing: .01em; } } /* Very narrow screens (under 340px): smaller text, still one line. */ @media (max-width: 339px) { #ecwid_body.starter-site::before { font-size: 12px; padding-left: 8px; padding-right: 8px; } } @media print { #ecwid_body.starter-site::before { display: none; } } /* ===================================================================== OPTIONAL: DESKTOP OR MOBILE HERO IN THE STORE FRONT PAGE DESCRIPTION --------------------------------------------------------------------- Only does anything once hero images are placed in the store front page description (Catalog > Store front page description, which Instant Site shows in .grid__description above the category tiles). Ecwid may strip class attributes, so the images are found by: 1) alt prefix (main hook; you control it), or 2) file name in the src (only works if the file keeps its name; images uploaded through Ecwid's editor usually get a numbered name such as /images/67832994/123456.png, so don't rely on this one alone). Insert BOTH images, desktop first: Promo banner: Discounted shipping on orders $99+ anywhere in the U.S. Promo banner (mobile): Discounted shipping on orders $99+ anywhere in the U.S. Result: - 601px and wider: the 1600x400 desktop image shows and the mobile one is hidden. - 600px and narrower: the 1200x900 mobile image shows and the desktop one is hidden, but ONLY if a mobile image is on the page (:has check). So a lone desktop image never disappears on phones. - Older browsers without :has() (rare in 2026) show both images on phones, one under the other. Nothing breaks. - The hidden image is display:none, so screen readers read only the visible one. ===================================================================== */ .ec-size .ec-store img[alt^="Promo banner:"], .ec-size .ec-store img[alt^="Promo banner (mobile):"], .ec-size .ec-store img[src*="banner-hero-99"] { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto 12px; border-radius: 12px; } /* Desktop and tablet: hide the mobile image. */ .ec-size .ec-store img[alt^="Promo banner (mobile):"], .ec-size .ec-store img[src*="banner-hero-99-mobile"] { display: none; } @media (max-width: 600px) { /* Phones: show the mobile image... */ .ec-size .ec-store img[alt^="Promo banner (mobile):"], .ec-size .ec-store img[src*="banner-hero-99-mobile"] { display: block; max-width: 600px; } /* ...and hide the desktop image, only when a mobile image is present. */ .ec-size .ec-store:has(img[alt^="Promo banner (mobile):"], img[src*="banner-hero-99-mobile"]) img[alt^="Promo banner:"], .ec-size .ec-store:has(img[alt^="Promo banner (mobile):"], img[src*="banner-hero-99-mobile"]) img[src*="banner-hero-99"]:not([src*="banner-hero-99-mobile"]):not([alt^="Promo banner (mobile):"]) { display: none; } } /* ========================================================================== 11. Deli category page: "Order your deli ahead" banner Sits first inside the Deli description (
...). Colors match the in-store "Order Your Deli Ahead!" sign: warm brown frame with a thin gold inner line, cream card, same cheese and meat art. Every rule is scoped to .ch-deli-order, so nothing else changes. Contrast (WCAG AA): brown #8B3A2A on card #FFFDF8 = 7.5:1, card text on brown button = 7.5:1 (hover 10:1), walnut #3E2A1B on card = 13.3:1, kicker #3E2A1B on gold #F2A007 = 6.3:1, 'approved' line #6B4A2F on card = 7.8:1. ========================================================================== */ .ec-size .ec-store .ch-deli-order { --cdo-brown: #8B3A2A; --cdo-brown-dark: #6F2C1F; --cdo-gold: #F2A007; --cdo-card: var(--ch-card, #FFFDF8); --cdo-tint: #F7EADF; --cdo-walnut: var(--ch-walnut, #3E2A1B); --cdo-walnut-soft: var(--ch-walnut-soft, #6B4A2F); --cdo-serif: var(--ch-serif, 'Merriweather', Georgia, serif); --cdo-sans: var(--ch-sans, 'Montserrat', 'Helvetica Neue', Arial, sans-serif); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text art" "text actions"; align-items: center; gap: 6px 48px; margin: 6px 0 28px; padding: 30px 40px 30px 40px; background: var(--cdo-card); border: 3px solid var(--cdo-brown); border-radius: 20px; /* thin gold line inside the brown frame, like the sign */ box-shadow: inset 0 0 0 5px var(--cdo-card), inset 0 0 0 7px var(--cdo-gold), 0 8px 22px -14px rgba(62, 42, 27, 0.45); font-family: var(--cdo-sans); color: var(--cdo-walnut); text-align: left; } .ec-size .ec-store .ch-deli-order::before { content: ""; grid-area: art; justify-self: center; width: 248px; height: 56px; background: url("data:image/webp;base64,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") no-repeat 50% 50%/contain; } .ec-size .ec-store .ch-deli-order p, .ec-size .ec-store .ch-deli-order h2 { margin: 0; padding: 0; } .ec-size .ec-store .ch-deli-order .ch-deli-order-text { grid-area: text; min-width: 0; } .ec-size .ec-store .ch-deli-order .ch-deli-order-kicker { display: inline-block; margin: 0 0 12px; padding: 5px 14px; background: var(--cdo-gold); border-radius: 999px; color: var(--cdo-walnut); font-family: var(--cdo-sans); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; } .ec-size .ec-store .ch-deli-order .ch-deli-order-title { margin: 0 0 8px; font-family: var(--cdo-serif); font-size: 34px; font-weight: 900; line-height: 1.2; letter-spacing: 0; color: var(--cdo-brown); } .ec-size .ec-store .ch-deli-order .ch-deli-order-lead { max-width: 560px; margin: 0; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--cdo-walnut); } .ec-size .ec-store .ch-deli-order .ch-deli-order-actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ec-size .ec-store .ch-deli-order .ch-deli-order-btn, .ec-size .ec-store .ch-deli-order .ch-deli-order-btn:visited { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 248px; min-height: 52px; margin: 0; padding: 12px 32px; border: 2px solid var(--cdo-brown); border-radius: 999px; background: var(--cdo-brown); color: var(--cdo-card); font-family: var(--cdo-sans); font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: .2px; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .ec-size .ec-store .ch-deli-order .ch-deli-order-btn::after { content: "\203A"; margin-left: 10px; font-size: 22px; line-height: 1; transform: translateY(-1px); } .ec-size .ec-store .ch-deli-order .ch-deli-order-btn:hover, .ec-size .ec-store .ch-deli-order .ch-deli-order-btn:focus-visible { background: var(--cdo-brown-dark); border-color: var(--cdo-brown-dark); color: var(--cdo-card); text-decoration: none; } .ec-size .ec-store .ch-deli-order .ch-deli-order-approved { margin: 0; font-family: var(--cdo-sans); font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: .2px; color: var(--cdo-walnut-soft); text-align: center; } .ec-size .ec-store .ch-deli-order .ch-deli-order-btn:focus-visible { outline: 3px solid var(--cdo-gold); outline-offset: 3px; } /* Tablet: pictures, text, then the button, stacked */ @media (max-width: 900px) { .ec-size .ec-store .ch-deli-order { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "text" "actions"; gap: 16px; padding: 26px 28px; } .ec-size .ec-store .ch-deli-order::before { justify-self: start; } .ec-size .ec-store .ch-deli-order .ch-deli-order-actions { justify-self: start; align-items: stretch; } } /* Phone: full-width button */ @media (max-width: 600px) { .ec-size .ec-store .ch-deli-order { gap: 14px; margin: 4px 0 24px; padding: 24px 20px 22px; border-radius: 18px; } .ec-size .ec-store .ch-deli-order::before { width: 179px; height: 40px; } .ec-size .ec-store .ch-deli-order .ch-deli-order-kicker { margin-bottom: 10px; font-size: 11px; } .ec-size .ec-store .ch-deli-order .ch-deli-order-title { font-size: 27px; } .ec-size .ec-store .ch-deli-order .ch-deli-order-lead { font-size: 16px; } .ec-size .ec-store .ch-deli-order .ch-deli-order-actions { justify-self: stretch; align-items: stretch; } .ec-size .ec-store .ch-deli-order .ch-deli-order-btn { width: 100%; min-width: 0; min-height: 52px; } }