/*
Theme Name: Drely & Lio Shop
Template: storefront
Version: 1.0
Description: Comic-Design passend zu drelylio.de
*/
@font-face { font-family: "Bangers"; src: url("fonts/bangers-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root { --nacht: #0d1230; --geist: #7b4ae2; --volt: #ffd21f; --gold: #e9b04c; --tinte: #0a0a12; --papier: #fff7e3; --text: #f4f1ff; }

body { background: radial-gradient(circle at 1px 1px, rgba(167,123,255,.18) 1.4px, transparent 1.6px) 0 0/14px 14px, var(--nacht); color: var(--text); font-family: "Nunito", system-ui, sans-serif; font-weight: 600; }
h1, h2, h3, .site-title, .entry-title, .woocommerce-loop-product__title, .product_title { font-family: "Bangers", Impact, sans-serif !important; letter-spacing: .04em; font-weight: 400 !important; }
a { color: var(--volt); }
.site-header { background: var(--nacht) !important; border-bottom: 4px solid var(--tinte); padding-top: 1.2em; }
.site-branding .site-title a, .site-branding .site-description { color: var(--text) !important; }
.site-title { font-size: 2.4rem !important; }
.custom-logo-link img { max-width: 70px; border-radius: 50%; border: 3px solid var(--gold); }
.main-navigation ul li a, .site-header-cart .cart-contents { color: var(--text) !important; font-weight: 800; }
.storefront-primary-navigation { background: transparent !important; }
.site-content { padding-top: 1.5em; }
.entry-title, .page-title, .woocommerce-products-header__title {
  display: inline-block; background: var(--volt); color: var(--tinte) !important; border: 4px solid var(--tinte);
  box-shadow: 5px 5px 0 var(--tinte); padding: .15em .5em .05em; transform: rotate(-1.5deg); }

/* Produktkacheln als Sammelkarten */
ul.products li.product { background: var(--papier); border: 4px solid var(--tinte); border-radius: 14px; box-shadow: 6px 6px 0 var(--tinte); padding: 12px !important; color: var(--tinte); }
ul.products li.product img { border: 3px solid var(--tinte); border-radius: 8px; background: #fff; }
ul.products li.product .price, .woocommerce-loop-product__title { color: var(--tinte) !important; }
ul.products li.product .price { font-weight: 900; font-size: 1.15em; }
ul.products li.product:hover { transform: translate(-2px,-2px) rotate(-.6deg); }

/* Knoepfe wie auf der Hauptseite */
.button, button, input[type="submit"], .added_to_cart, .wc-block-components-button, .checkout-button, #place_order {
  background: var(--volt) !important; color: var(--tinte) !important; border: 3px solid var(--tinte) !important; border-radius: 10px !important;
  box-shadow: 4px 4px 0 var(--tinte); font-family: "Bangers", Impact, sans-serif !important; letter-spacing: .06em; font-weight: 400 !important; font-size: 1.15em; }
.button:hover, button:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--tinte); }

/* Inhaltsflaechen hell, damit Texte, Formulare und Kasse gut lesbar sind */
.site-main > article, .woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation, div.product .summary, div.product .woocommerce-tabs {
  background: var(--papier); color: var(--tinte); border: 4px solid var(--tinte); box-shadow: 6px 6px 0 var(--tinte); border-radius: 8px; padding: 1.4em; }
.site-main > article .entry-title { margin-bottom: .8em; }
div.product .summary *, .woocommerce-tabs *, .woocommerce-checkout *, .woocommerce-cart-form *, .cart-collaterals * { color: var(--tinte); }
div.product .woocommerce-product-gallery img { border: 4px solid var(--tinte); border-radius: 10px; background: #fff; }
.woocommerce-breadcrumb { background: transparent !important; color: #c9c3e6; }
.woocommerce-breadcrumb a { color: var(--volt); }
.storefront-sorting, .woocommerce-result-count { color: #c9c3e6; }
.onsale { background: var(--geist) !important; color: #fff !important; border: 2px solid var(--tinte) !important; }

.site-footer { background: var(--tinte) !important; color: #c9c3e6 !important; border-top: 4px solid var(--tinte); }
.site-footer a { color: var(--text) !important; }
.dl-fuss { font-size: .85em; margin-top: 1em; }
.storefront-handheld-footer-bar { display: none; }

/* Kopf: kleines Logo mit Namen daneben */
.site-header .site-branding { display: flex; align-items: center; gap: 14px; }
.site-header .custom-logo-link img { width: 72px !important; max-width: 72px !important; height: auto !important; }
.site-header .site-branding::after { content: "Drely & Lio Shop"; font: 400 2.2rem/1 "Bangers", Impact, sans-serif; letter-spacing: .04em; color: var(--volt); -webkit-text-stroke: 1px var(--tinte); }

/* "Demnaechst"-Seite von WooCommerce */
.woocommerce-coming-soon-store-only { background: var(--papier); color: var(--tinte); border: 4px solid var(--tinte); box-shadow: 6px 6px 0 var(--tinte); border-radius: 8px; padding: 2.5em 1.5em !important; margin: 1em auto 3em; max-width: 760px; }
.woocommerce-coming-soon-store-only h1 { font-family: "Bangers", Impact, sans-serif !important; color: var(--geist) !important; font-size: 3rem !important; letter-spacing: .04em; }
.woocommerce-coming-soon-store-only p { color: var(--tinte) !important; font-size: 1.15rem; }

/* News und Messe-Termine */
.dl-termin-info { background: var(--volt); color: var(--tinte); border: 3px solid var(--tinte); border-radius: 8px; padding: .8em 1em; font-weight: 800; margin-bottom: 1em; }
.widget-area .widget { color: var(--text); }
.dl-rechtliches { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 .6em; padding: 0; list-style: none; }