/* Food & Grocery Delivery skin Loaded after style.css (see shop_css.blade.php) and scoped under .skin-food-grocery (set on by shop/layouts/app.blade.php via shop_active_skin()) so it only affects businesses that activated this theme - every other skin/business is untouched. Palette: fresh produce green for structure/branding, warm citrus orange for calls-to-action and price/deal accents. */ .skin-food-grocery { --food-green: #1f8a4c; --food-green-dark: #146536; --food-orange: #f5821f; --food-orange-dark: #d96c0e; --food-cream: #fff8ee; } /* Header - swap the theme's default blue band for the green identity, round the search/category controls into pill shapes to read as "fresh market" rather than "electronics store". */ .skin-food-grocery header.d-blue-bg { background: linear-gradient(90deg, var(--food-green) 0%, var(--food-green-dark) 100%) !important; } .skin-food-grocery .header__search-box { border-radius: 30px; overflow: hidden; } .skin-food-grocery .header__search .button { background-color: var(--food-orange); border-radius: 0 30px 30px 0; } .skin-food-grocery .header__search .button:hover { background-color: var(--food-orange-dark); } .skin-food-grocery .cat-toggle-btn { background-color: var(--food-orange); border-radius: 30px; } .skin-food-grocery .cat__menu .mega-menu { background-color: var(--food-cream); } .skin-food-grocery .block-cart .icon-link, .skin-food-grocery .block-wishlist .icon-link, .skin-food-grocery .block-userlink .icon-link { color: #fff; } .skin-food-grocery .block-cart .count, .skin-food-grocery .block-wishlist .count { background-color: var(--food-orange); } /* Category mega-menu link hover - green rather than the theme's default accent */ .skin-food-grocery .cat__menu ul li > a:hover, .skin-food-grocery .cat__menu .mega-item li a:hover { color: var(--food-green); } /* Section titles get a small produce-green underline accent */ .skin-food-grocery .section__title { position: relative; padding-bottom: 10px; } .skin-food-grocery .section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background-color: var(--food-orange); } /* Product cards - rounded, soft shadow, gentle lift on hover so the grid feels like a fresh-market display case rather than a flat electronics catalogue. */ .skin-food-grocery .product__item { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(31, 138, 76, 0.08); transition: transform .2s ease, box-shadow .2s ease; } .skin-food-grocery .product__item:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(31, 138, 76, 0.16); } .skin-food-grocery .product__offer .discount { background-color: var(--food-orange); border-radius: 30px; } .skin-food-grocery .price span { color: var(--food-green-dark); font-weight: 700; } .skin-food-grocery .cart-btn { background-color: var(--food-green); border-radius: 30px; } .skin-food-grocery .cart-btn:hover { background-color: var(--food-green-dark); } /* Checkout / cart CTAs (mini-cart dropdown) */ .skin-food-grocery .wc-checkout { background-color: var(--food-orange) !important; border-radius: 30px; } .skin-food-grocery .wc-cart { border-radius: 30px; } /* Footer - deep green instead of the theme's default near-black band, keeps the produce identity consistent all the way to the bottom of the page. */ .skin-food-grocery .fotter-area { background-color: #12331f !important; } .skin-food-grocery .footer__hotline .icon { background-color: var(--food-orange); border-radius: 50%; }