/* ========================================================================== Berries by Quicha — Theme Overrides White page background, pink-bordered white content boxes, pink-striped footer with white rounded column boxes. Brand colors: Bright Pink: #fe5bac Dark Pink: #BB417C Muted Pink: #BB7993 Green Accent: #33a64f Chocolate: #553024 ========================================================================== */ /* ---------- White Body Background ---------- */ body { background: #fff !important; } /* ---------- Strawberry Pattern Background ---------- */ /* Add class "bbq-strawberry-bg" to any element (e.g. ) for a subtle repeating strawberry watermark overlay. */ .bbq-strawberry-bg { position: relative; --bbq-parallax-y: 0px; } .bbq-strawberry-bg::after { content: ""; position: fixed; top: -100vh; left: 0; width: 100%; height: 300vh; z-index: 0; pointer-events: none; opacity: 0.15; /* background-image is set via inline style from PHP (needs absolute URL) */ background-size: 960px 840px; background-repeat: repeat; transform: translate3d(0, var(--bbq-parallax-y), 0); } /* Keep the main site content above the strawberry pattern overlay. Only target .wp-site-blocks (the main WP wrapper) — NOT all children, because other direct children of body (modal portals, WC drawers, etc.) need their own stacking context to render above page content. */ .bbq-strawberry-bg > .wp-site-blocks { position: relative; z-index: 1; } /* ---------- Transparent Wrappers ---------- */ /* All outer wrappers are transparent. Individual sections provide their own styling. */ body > .wp-site-blocks { background: transparent; } /* Main content wrapper — always transparent, no padding, no box. Child blocks inside provide their own white rounded, pink-bordered boxes. */ body > .wp-site-blocks > main, body > .wp-site-blocks > .wp-block-group:not(header):not(footer), .woocommerce-page main.wp-block-group, .single-product main.wp-block-group { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 auto; max-width: var(--wp--style--global--wide-size, 1400px); overflow: visible; } /* Header — white background with subtle shadow */ body > .wp-site-blocks > header, .wp-block-template-part[data-area="header"] > *, header.wp-block-group { background: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); position: relative; z-index: 10; } /* ---------- Inner Content Blocks: White Boxes with Pink Border ---------- */ /* Direct children of main get their own white rounded box with pink border. */ body > .wp-site-blocks > main > *, body > .wp-site-blocks > main > .wp-block-group > * { background: #fff; border: 2px solid var(--wp--preset--color--berry-pink-dark, #BB417C); border-radius: 12px; margin: 1.25rem auto; padding: 1.5rem; box-shadow: 0 2px 12px rgba(187, 65, 124, 0.08); } /* Berry box pages — the React app handles its own boxes */ .is-berry-box-product body > .wp-site-blocks > main > *, .is-berry-box-product body > .wp-site-blocks > main > .wp-block-group > * { background: transparent; border: none; border-radius: 0; margin: 0; padding: 0; box-shadow: none; } /* ---------- Footer: Pink Stripes with White Column Boxes ---------- */ /* Extra-defensive selectors — overrides the chocolate `has-background` class that may still be on a DB-saved copy of the footer template part. */ body > .wp-site-blocks > footer, body footer.wp-block-group, body footer.wp-block-group.has-background, body footer.wp-block-group.has-chocolate-background-color, .wp-block-template-part > footer { background: repeating-linear-gradient( 90deg, #BB417C 0px, #BB417C 50px, #BB7993 50px, #BB7993 100px ) !important; background-color: transparent !important; margin-top: 2rem; position: relative; padding: 0 !important; } /* Inner column-wrapper group — transparent so stripes show through */ footer.wp-block-group > .wp-block-group { background: transparent !important; } /* Columns inside the footer become white rounded boxes */ footer.wp-block-group .wp-block-columns { gap: 1.25rem; } footer.wp-block-group .wp-block-column { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* Override text color for content inside footer white boxes */ footer.wp-block-group .wp-block-column, footer.wp-block-group .wp-block-column p, footer.wp-block-group .wp-block-column .wp-block-navigation a { color: var(--wp--preset--color--chocolate, #553024) !important; } footer.wp-block-group .wp-block-column h1, footer.wp-block-group .wp-block-column h2, footer.wp-block-group .wp-block-column h3, footer.wp-block-group .wp-block-column h4, footer.wp-block-group .wp-block-column h5, footer.wp-block-group .wp-block-column h6 { color: var(--wp--preset--color--berry-pink-dark, #BB417C) !important; } footer.wp-block-group .wp-block-column .wp-block-social-link { color: var(--wp--preset--color--berry-pink-dark, #BB417C); } /* Copyright bar — full-width chocolate strip at bottom */ footer.wp-block-group .bbq-footer-copyright, footer.wp-block-group .bbq-footer-copyright p { color: #fff !important; } /* ---------- WC Mini-Cart Drawer (hidden — replaced by custom bbq-cart-sidebar) ---------- */ .wc-block-mini-cart__drawer { display: none !important; } /* ---------- Navigation / Header Styling ---------- */ .wp-block-navigation a { color: var(--wp--preset--color--chocolate, #553024) !important; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .wp-block-navigation a:hover { color: var(--wp--preset--color--berry-pink, #fe5bac) !important; } /* ---------- Mobile Nav Overlay ---------- */ /* All selectors are scoped to .wp-block-navigation__responsive-container.is-menu-open so desktop is untouched. WP core's overlay inherits justifyContent:right from the desktop layout via CSS variables, so we hard-reset everything. */ /* Chevron toggle is JS-injected; hidden by default everywhere. */ .bbq-mobile-submenu-toggle { display: none; } /* Hard reset: stack items left-aligned, full-width, regardless of desktop layout. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important; text-align: left !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { display: block !important; width: 100% !important; max-width: 100% !important; align-self: stretch !important; text-align: left !important; margin: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a { display: block !important; width: auto !important; text-align: left !important; padding: 0.5rem 0 !important; } /* Parent rows use grid so [label][chevron] sit on row 1 and the submenu spans both columns on row 2. Avoids fighting WP's width:100% on the link. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 0.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > a, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { grid-column: 1; grid-row: 1; justify-self: start; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .bbq-mobile-submenu-toggle { grid-column: 2; grid-row: 1; justify-self: end; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { grid-column: 1 / -1; grid-row: 2; } /* Chevron — visible only inside the open overlay. */ .wp-block-navigation__responsive-container.is-menu-open .bbq-mobile-submenu-toggle { display: inline-flex !important; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0.5rem 0.75rem; color: #fff !important; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: transform 0.2s ease; } /* Mini-cart icon inside the open overlay should match the menu (white). */ .wp-block-navigation__responsive-container.is-menu-open .wc-block-mini-cart__button, .wp-block-navigation__responsive-container.is-menu-open .wc-block-mini-cart__icon, .wp-block-navigation__responsive-container.is-menu-open .wc-block-mini-cart__button svg, .wp-block-navigation__responsive-container.is-menu-open .wc-block-mini-cart__amount { color: #fff !important; fill: #fff !important; } .wp-block-navigation__responsive-container.is-menu-open .has-child.bbq-submenu-open > .bbq-mobile-submenu-toggle { transform: rotate(180deg); } /* Submenus hidden by default; revealed when parent has .bbq-submenu-open. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; padding-left: 1.25rem !important; margin: 0.25rem 0 0.5rem !important; } .wp-block-navigation__responsive-container.is-menu-open .has-child.bbq-submenu-open > .wp-block-navigation__submenu-container { display: flex !important; } /* Submenu items: indented + bordered to read as children. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { padding-left: 1.25rem !important; border-left: 2px solid rgba(255, 255, 255, 0.3); font-size: 0.95em; } /* Extra left padding on the link itself so the text sits well clear of the border line — the

's padding alone gets out-specified by WP core. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a { padding-left: 0.75rem !important; } /* Site title in header */ .wp-block-site-title a { color: var(--wp--preset--color--berry-pink, #fe5bac) !important; text-decoration: none; } /* ---------- WooCommerce Button Overrides ---------- */ .wc-block-components-button, .wp-element-button, .woocommerce .button, .wc-block-grid__product-add-to-cart .wp-element-button { background-color: var(--wp--preset--color--berry-pink, #fe5bac) !important; color: #fff !important; border-radius: 8px; font-weight: 600; transition: background-color 0.2s ease; } .wc-block-components-button:hover, .wp-element-button:hover, .woocommerce .button:hover { background-color: var(--wp--preset--color--berry-pink-dark, #BB417C) !important; } /* ---------- Headings ---------- */ h1, h2, h3, h4, h5, h6, .wp-block-heading { color: var(--wp--preset--color--berry-pink-dark, #BB417C); } h1, h2 { font-family: 'Marck Script', cursive; } h1 { font-size: 54px; } h2 { font-size: 48px; } h3, h4, h5, h6 { font-family: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif; } /* ---------- Product Cards on Shop/Archive ---------- */ .wc-block-grid__product, .wp-block-post { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; } .wc-block-grid__product:hover, .wp-block-post:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* ---------- WooCommerce Store Notices ---------- */ .wc-block-components-notice-banner { border-radius: 8px; } /* Hide duplicate minimum-spend notices on cart — WC generates one per shipping method */ .woocommerce-notices-wrapper .wc-block-components-notice-banner + .wc-block-components-notice-banner { display: none !important; } /* Hide shipping minimum-order notices on cart — fulfillment is chosen at checkout */ .wc-block-cart .woocommerce-cart-notice-minimum-amount { display: none !important; } /* ---------- Cart Page (WC Blocks) ---------- */ /* Bigger product images */ .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-image img { width: 100px !important; height: 100px !important; object-fit: cover; border-radius: 8px; } /* Berry list: replace run-on text with line breaks */ .wc-block-cart-items .wc-block-components-product-metadata .wc-block-components-product-metadata__description { display: none !important; } /* Berry item_data styling — each entry on its own line */ .wc-block-cart-items .wc-block-components-product-details { font-size: 13px; line-height: 1.6; color: #553024; } .wc-block-cart-items .wc-block-components-product-details li { list-style: none; padding: 0; margin: 0 0 2px; } .wc-block-cart-items .wc-block-components-product-details .wc-block-components-product-details__name { font-weight: 600; color: #553024; display: inline; } .wc-block-cart-items .wc-block-components-product-details .wc-block-components-product-details__value { white-space: pre-line; display: inline; } /* Each detail item on its own line */ .wc-block-cart-items .wc-block-components-product-details li { display: block; margin-bottom: 4px; } /* Premium Berry Upcharge line — visually separated */ .wc-block-cart-items .wc-block-components-product-details li:last-child { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f0f0f0; font-weight: 600; } /* Product name styling */ .wc-block-cart-items .wc-block-components-product-name { font-size: 22px !important; font-weight: 600; color: var(--wp--preset--color--berry-pink, #fe5bac) !important; } /* Product price */ .wc-block-cart-items .wc-block-components-product-price { font-size: 15px; font-weight: 600; } /* Cart item line total (the TOTAL column value) */ .wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price, .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price { color: #33a64f !important; font-size: 17px !important; font-weight: 700; } /* Quantity controls */ .wc-block-cart-items .wc-block-components-quantity-selector { border-radius: 8px; } /* Cart totals heading */ .wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper:first-child { font-size: 16px; } /* "You may be interested in" heading */ .wp-block-woocommerce-cart-cross-sells-block h2, .wc-block-cart .cross-sells-product-list h2, .wc-block-cart__cross-sells h2 { font-family: 'Marck Script', cursive !important; font-size: 32px !important; color: var(--wp--preset--color--berry-pink-dark, #BB417C) !important; } /* Cross-sells product cards */ .wc-block-cart .wc-block-components-product-name { font-size: 16px !important; } /* Column headers */ .wc-block-cart-items .wc-block-cart-items__header { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #553024; } /* All cart page headings — base style */ .wc-block-cart .wp-block-heading, .wp-block-woocommerce-cart .wp-block-heading { font-family: 'Marck Script', cursive !important; font-size: 32px !important; color: var(--wp--preset--color--berry-pink-dark, #BB417C) !important; } /* Estimated total */ .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 24px !important; font-weight: 700; color: #33a64f !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 24px !important; font-weight: 700; color: #33a64f !important; } /* ---------- Single Product Image Gallery ---------- */ .woocommerce .wp-block-woocommerce-product-image-gallery { max-width: 100%; } .woocommerce-product-gallery__image { border-radius: 8px; overflow: hidden; } .woocommerce div.product div.images { margin-bottom: 0; }