/*
Theme Name: gRoods
Theme URI: https://www.groods.de
Description: Schlankes Block-Theme für gRoods (Richtung „Würfelfläche“). Geschäftslogik liegt im Plugin „GRoods Shop“.
Author: gRoods
Version: 0.1.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: groods
*/

/* Presentation only. Tokens live in theme.json. */

:where(body) { -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 3px solid var(--wp--preset--color--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wp--preset--color--body); border-radius: 4px; }
h1, h2, h3, .wp-block-post-title { font-stretch: 85%; }
img { height: auto; }

/* Header */
.groods-promo { font-size: var(--wp--preset--font-size--small); }
.groods-promo p { margin: 0; }
.groods-promo strong { color: var(--wp--preset--color--yellow); }
.groods-header { position: sticky; top: 0; z-index: 30; border-bottom: 2px solid var(--wp--preset--color--body); }
.admin-bar .groods-header { top: var(--wp-admin--admin-bar--height, 0); }
.groods-header .wp-block-site-logo img { height: 34px; width: auto; }
.groods-header .groods-search { flex: 1 1 auto; max-width: 440px; min-width: 0; }
.groods-header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; justify-content: center; }
.groods-header .wc-block-mini-cart__button, .groods-header .wp-block-woocommerce-customer-account a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 781px) {
	.groods-header .groods-header__row { flex-wrap: wrap; row-gap: 8px; }
	.groods-header .groods-search { order: 10; flex-basis: 100%; max-width: none; }
	.groods-header .wp-block-woocommerce-customer-account { display: none; }
}
/* FiboSearch inherits the design tokens. */
.groods-search .dgwt-wcas-search-wrapp { max-width: none; }
.groods-search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { height: 44px; border: 2px solid var(--wp--preset--color--body); border-radius: 999px; background: var(--wp--preset--color--mist); font-size: 16px; padding-left: 16px; }
.groods-search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus { background: #fff; }
.groods-search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { border-radius: 0 999px 999px 0; background: var(--wp--preset--color--body); height: 44px; }
.dgwt-wcas-suggestions-wrapp, .dgwt-wcas-details-wrapp { border-radius: var(--wp--custom--radius--control); }
.dgwt-wcas-suggestion-selected { background: var(--wp--preset--color--mist) !important; }
.dgwt-wcas-st strong { background: var(--wp--preset--color--tint-yellow); font-weight: 700; }

/* Hero: the cube face */
.groods-face { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 7px !important; padding: 7px; background: var(--wp--preset--color--body); border-radius: var(--wp--custom--radius--face); aspect-ratio: 1; width: 100%; max-width: 560px; margin-inline: auto; }
.groods-face > * { margin: 0 !important; }
.groods-sticker { position: relative; display: block; border-radius: var(--wp--custom--radius--sticker); overflow: hidden; text-decoration: none; isolation: isolate; aspect-ratio: 1; }
.groods-sticker img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .25s ease; }
.groods-sticker:hover img { transform: scale(1.06); }
.groods-sticker__label { position: absolute; left: 8px; bottom: 8px; background: #fff; border-radius: 8px; padding: 4px 8px 5px; font: 800 clamp(1rem, .7rem + 1.4vw, 1.6rem)/1 var(--wp--preset--font-family--display); font-stretch: 80%; }
.groods-sticker__label small { display: block; font: 400 12px/1.2 var(--wp--preset--font-family--text); color: var(--wp--preset--color--muted); margin-top: 2px; }
.groods-sticker:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--wp--preset--color--yellow); }

/* Product cards (product collection) */
.wc-block-product-template .wc-block-product, .groods-card { position: relative; }
.groods-card .wc-block-components-product-image, .groods-card .wp-block-woocommerce-product-image { border-radius: var(--wp--custom--radius--sticker); overflow: hidden; background: var(--wp--preset--color--mist); margin-bottom: 8px !important; }
.groods-card .wc-block-components-product-image img { mix-blend-mode: multiply; aspect-ratio: 1; object-fit: cover; }
.groods-card .wp-block-post-title { font-family: var(--wp--preset--font-family--text); font-stretch: 100%; font-size: var(--wp--preset--font-size--medium) !important; font-weight: 700; line-height: 1.25; margin: 0; }
.groods-card .wp-block-post-title a { text-decoration: none; }
.groods-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.groods-card .wc-block-components-product-price { font-size: 1.1rem; }
.groods-card .wc-block-components-product-sale-badge { z-index: 2; border-radius: 6px; border: 0; background: var(--wp--preset--color--red); color: #fff; font-weight: 700; }
.groods-card .wc-block-components-product-stock-indicator { font-size: var(--wp--preset--font-size--small); margin: 0; }
.groods-card .wp-block-woocommerce-product-tax-info, .groods-card [class*="wp-block-woocommerce-germanized"] { font-size: 13px; color: var(--wp--preset--color--muted); margin: 0; }
.wc-block-components-product-stock-indicator--in-stock::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--green); margin-right: 6px; }
.wc-block-components-product-stock-indicator--in-stock { color: inherit; }
.wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--red); }

/* Horizontal rails on small screens */
@media (max-width: 781px) {
	.groods-rail .wc-block-product-template { display: grid !important; grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
	.groods-rail .wc-block-product-template > li { scroll-snap-align: start; width: auto !important; margin: 0 !important; }
}

/* Category chips */
.groods-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.groods-chips a, .groods-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--wp--preset--color--mist-2); background: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.groods-chips a:hover { border-color: var(--wp--preset--color--body); }
.groods-chips a[aria-current="page"] { background: var(--wp--preset--color--body); color: #fff; border-color: var(--wp--preset--color--body); }
.groods-chips small { font-weight: 400; opacity: .75; }

/* Product filters */
.wp-block-woocommerce-product-filters { font-size: var(--wp--preset--font-size--small); }
.wc-block-product-filter-chips__item[aria-checked="true"], .wc-block-product-filter-chips__item.is-selected { background: var(--wp--preset--color--body) !important; color: #fff !important; }
.wp-block-woocommerce-product-filters .wp-block-heading { font-size: 1.05rem; font-stretch: 90%; }
@media (min-width: 1000px) { .groods-shop-layout > .wp-block-column:first-child { position: sticky; top: 90px; align-self: flex-start; max-height: calc(100vh - 110px); overflow: auto; } }

/* Single product */
.groods-gallery .wc-block-product-gallery-large-image, .groods-gallery .wp-block-woocommerce-product-image-gallery { border-radius: var(--wp--custom--radius--sticker); overflow: hidden; background: var(--wp--preset--color--mist); }
.groods-buy .wc-block-components-product-price { font: 800 2rem/1 var(--wp--preset--font-family--display); font-stretch: 85%; }
.groods-legal, .groods-legal p { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0; }
.groods-legal a { color: inherit; }
.groods-buy .wp-block-woocommerce-product-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* Variant choice: classic form shown as numbered steps with chips (see assets/js/variation-chips.js). */
.groods-buy form.variations_form { margin-top: var(--wp--preset--spacing--30); }
.groods-buy table.variations { counter-reset: groods-step; border: 0; width: 100%; margin: 0 0 12px; }
.groods-buy table.variations tbody, .groods-buy table.variations tr, .groods-buy table.variations th, .groods-buy table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.groods-buy table.variations tr { counter-increment: groods-step; border: 2px solid var(--wp--preset--color--mist-2); border-radius: var(--wp--custom--radius--sticker); padding: 12px 14px 14px; margin-bottom: 10px; }
.groods-buy table.variations tr:focus-within { border-color: var(--wp--preset--color--body); }
.groods-buy table.variations th label { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 10px; }
.groods-buy table.variations th label::before { content: counter(groods-step); width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--wp--preset--color--body); color: #fff; font: 800 15px var(--wp--preset--font-family--display); flex: none; }
.groods-buy table.variations select { min-height: 48px; width: 100%; border: 2px solid var(--wp--preset--color--mist-2); border-radius: var(--wp--custom--radius--control); padding: 0 12px; font-size: 16px; background: #fff; }
.groods-buy table.variations select.groods-chips-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.groods-buy .reset_variations { display: inline-block; margin-top: 4px; font-size: var(--wp--preset--font-size--small); }
.groods-chips-select { display: flex; flex-wrap: wrap; gap: 8px; }
.groods-chip-option { min-height: 48px; min-width: 56px; padding: 6px 14px; border: 2px solid var(--wp--preset--color--mist-2); border-radius: var(--wp--custom--radius--control); background: #fff; color: var(--wp--preset--color--body); font: 700 1rem/1.2 var(--wp--preset--font-family--text); cursor: pointer; }
.groods-chip-option:hover { border-color: var(--wp--preset--color--body); }
.groods-chip-option[aria-checked="true"] { border-color: var(--wp--preset--color--body); box-shadow: 0 0 0 3px var(--wp--preset--color--yellow); }
.groods-chip-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--wp--preset--color--red); }
.groods-buy .single_variation_wrap .woocommerce-variation-price .price { font: 800 1.6rem/1 var(--wp--preset--font-family--display); }
.groods-buy .woocommerce-variation-add-to-cart, .groods-buy form.cart:not(.variations_form) { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-top: 12px; }
.groods-buy .quantity input.qty { min-height: 52px; width: 72px; border: 2px solid var(--wp--preset--color--mist-2); border-radius: var(--wp--custom--radius--control); text-align: center; font-size: 16px; }
.groods-buy .single_add_to_cart_button { flex: 1; min-height: 52px; font-size: 1.05rem !important; }
.groods-buy .stock.in-stock { color: var(--wp--preset--color--green); }
.groods-buy .stock.out-of-stock { color: var(--wp--preset--color--red); }

/* Details as accordion */
.wp-block-woocommerce-accordion-item { border-bottom: 1px solid var(--wp--preset--color--mist-2); }
.wp-block-woocommerce-accordion-header button { min-height: 56px; font-weight: 700; font-size: 1.05rem; }
.wp-block-woocommerce-product-specifications table { width: 100%; border-collapse: collapse; }
.wp-block-woocommerce-product-specifications th, .wp-block-woocommerce-product-specifications td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--wp--preset--color--mist); vertical-align: top; }
.wp-block-woocommerce-product-specifications th { color: var(--wp--preset--color--muted); font-weight: 400; width: 45%; }

/* Straps teaser and brand tiles */
.groods-panel { border-radius: var(--wp--custom--radius--face); }
.groods-brands a { display: grid; place-items: center; min-height: 72px; border-radius: var(--wp--custom--radius--sticker); background: var(--wp--preset--color--mist); text-decoration: none; font: 800 1.25rem var(--wp--preset--font-family--display); font-stretch: 85%; }
.groods-brands a:hover { background: var(--wp--preset--color--tint-yellow); }

/* Classic cart and checkout keep WooCommerce markup; align it with the tokens. */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { font-size: var(--wp--preset--font-size--medium); }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button { background: var(--wp--preset--color--blue); color: #fff; border-radius: var(--wp--custom--radius--control); font-weight: 700; padding: .85em 1.3em; border: 0; min-height: 48px; }
.woocommerce .button:hover { background: var(--wp--preset--color--blue-dark); color: #fff; }
.woocommerce input.input-text, .woocommerce select, .woocommerce textarea, .woocommerce .select2-container .select2-selection { min-height: 48px; border: 2px solid var(--wp--preset--color--mist-2); border-radius: var(--wp--custom--radius--control); padding: .5em .75em; font-size: 16px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--wp--preset--color--red); }
.woocommerce table.shop_table { border-radius: var(--wp--custom--radius--sticker); border-color: var(--wp--preset--color--mist-2); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--wp--custom--radius--control); border-top-color: var(--wp--preset--color--blue); }
.woocommerce-error { border-top-color: var(--wp--preset--color--red); }
.woocommerce-checkout #payment { background: var(--wp--preset--color--mist); border-radius: var(--wp--custom--radius--sticker); }
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { width: 100%; min-height: 56px; font-size: 1.1rem; }
@media (min-width: 900px) { .woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } }
.woocommerce-cart table.cart img { width: 72px; border-radius: 8px; }

/* Footer */
.groods-footer a { text-decoration: none; }
.groods-footer a:hover { text-decoration: underline; }
.groods-footer h2 { color: var(--wp--preset--color--yellow); font-size: 1.1rem; }
.groods-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Germanized prints its own "inkl. MwSt." next to the price, so the WooCommerce suffix would repeat it. */
.groods-card .woocommerce-price-suffix, .groods-buy .woocommerce-price-suffix { display: none; }

/* Classic gallery fills its column. */
.groods-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.groods-gallery .woocommerce-product-gallery__wrapper { border-radius: var(--wp--custom--radius--sticker); overflow: hidden; background: var(--wp--preset--color--mist); }

/* FiboSearch: room for its icon. */
.groods-search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { padding-left: 42px !important; }
.groods-search .dgwt-wcas-ico-magnifier { left: 14px !important; }

/* Harmonised EU legal-guarantee notice from Germanized (mandatory): compact, after the footer. */
.wc-gzd-legal-guarantee-footer { background: var(--wp--preset--color--body); color: #fff; padding: 0 16px 32px; display: flex; justify-content: center; }
.wc-gzd-legal-guarantee-footer .wc-gzd-legal-guarantee-label { max-width: 1280px; width: 100%; display: flex; align-items: center; gap: 16px; position: relative; }
.wc-gzd-legal-guarantee-image-preview { width: 180px !important; height: auto; border-radius: 6px; background: #fff; }
.wc-gzd-legal-guarantee-footer a { color: inherit; }
.wc-gzd-popover-image { display: none !important; }
.wc-gzd-popover-wrapper:hover .wc-gzd-popover-image, .wc-gzd-popover-wrapper:focus-within .wc-gzd-popover-image { display: block !important; position: absolute; bottom: 100%; left: 0; width: min(520px, 92vw) !important; z-index: 50; box-shadow: 0 8px 30px rgb(0 0 0 / .3); background: #fff; border-radius: 8px; }
.groods-gallery .woocommerce-product-gallery { overflow: hidden; }
.groods-buy table.variations td { position: relative; }
.groods-buy table.variations select.groods-chips-source { left: 0; top: 0; }

/* Germanized appends price notes to product loops; keep the compare toggle last. */
.groods-card .groods-compare-toggle { order: 99; }
.groods-card .wc-gzd-additional-info, .groods-card p.wc-gzd-additional-info { font-size: 13px; color: var(--wp--preset--color--muted); margin: 0; }

/* Filter chips with touch-friendly size. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-chips__items { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-chips__item { min-height: 40px; padding: 0 12px; border: 2px solid var(--wp--preset--color--mist-2); border-radius: 999px; background: #fff; font-weight: 700; font-size: .9375rem; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--body); }
.wp-block-woocommerce-product-filters .wc-block-product-filter-chips__item[aria-checked="true"] { background: var(--wp--preset--color--body); color: #fff; border-color: var(--wp--preset--color--body); }

/* Header row: centre logo, menu button and cart on one line. */
.groods-header .groods-header__row { align-items: center; }
.groods-header .wp-block-navigation__responsive-container-open { margin: 0; }
@media (max-width: 599px) { .groods-promo { font-size: 13px; } }
/* Search suggestions: sale price without link-like underline. */
.dgwt-wcas-sp ins, .dgwt-wcas-sp ins .woocommerce-Price-amount { text-decoration: none; }

/* Query-loop product rails share the card styles; on phones they scroll sideways. */
.groods-rail .wp-block-post-template { list-style: none; padding: 0; }
@media (max-width: 781px) {
	.groods-rail .wp-block-post-template.is-layout-grid { display: grid !important; grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
	.groods-rail .wp-block-post-template > li { scroll-snap-align: start; }
}

/* Gallery without slider script: swipeable strip with scroll-snap; thumbnails are the remaining slides. */
.groods-gallery .woocommerce-product-gallery { opacity: 1 !important; }
.groods-gallery .woocommerce-product-gallery__wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; }
.groods-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
.groods-gallery .woocommerce-product-gallery__image { flex: 0 0 100%; width: 100% !important; scroll-snap-align: center; margin: 0 !important; float: none !important; }
.groods-gallery .woocommerce-product-gallery__image img { aspect-ratio: 1; object-fit: contain; width: 100%; height: auto; }
.groods-gallery .woocommerce-product-gallery__trigger { z-index: 2; }
/* Every slide is square, whatever the image ratio (some product images are long infographics). */
.groods-gallery .woocommerce-product-gallery__wrapper { align-items: flex-start; }
.groods-gallery .woocommerce-product-gallery__image { aspect-ratio: 1; overflow: hidden; }
.groods-gallery .woocommerce-product-gallery__image a, .groods-gallery .woocommerce-product-gallery__image img { display: block; width: 100%; height: 100% !important; object-fit: contain; }
/* Phones: next image peeks in to signal swiping. Wider screens: main image plus a grid of the others. */
@media (max-width: 781px) {
	.groods-gallery .woocommerce-product-gallery__wrapper:has(> :nth-child(2)) .woocommerce-product-gallery__image { flex-basis: 88%; }
	.groods-gallery .woocommerce-product-gallery__wrapper { gap: 8px; }
}
@media (min-width: 782px) {
	.groods-gallery .woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; overflow: visible; background: none; }
	.groods-gallery .woocommerce-product-gallery__image { border-radius: 10px; background: var(--wp--preset--color--mist); }
	.groods-gallery .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; border-radius: var(--wp--custom--radius--sticker); }
	.groods-gallery .woocommerce-product-gallery__image:nth-child(n+12) { display: none; }
}
.groods-gallery .wp-block-woocommerce-product-image-gallery, .groods-gallery .woocommerce-product-gallery.images { width: 100% !important; max-width: none !important; float: none !important; }
@media (min-width: 782px) { .groods-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+11) { display: none !important; } }

/* Closed mini-cart drawer: hidden from keyboard as well, not only from screen readers. */
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; }
/* Disabled add-to-cart (no variation chosen yet): readable instead of faded. */
.groods-buy .single_add_to_cart_button.disabled, .groods-buy .single_add_to_cart_button:disabled { opacity: 1 !important; background: var(--wp--preset--color--mist-2) !important; border-color: var(--wp--preset--color--mist-2) !important; color: var(--wp--preset--color--body) !important; cursor: not-allowed; }

/* Size guide above the variation steps. */
.groods-size-guide { margin-top: var(--wp--preset--spacing--30); }
.groods-size-guide .wp-block-details { background: var(--wp--preset--color--mist); border-radius: var(--wp--custom--radius--control); padding: 10px 14px; }
.groods-size-guide summary { font-weight: 700; min-height: 32px; cursor: pointer; }
.groods-size-guide table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); background: #fff; border-radius: 8px; overflow: hidden; }
.groods-size-guide th, .groods-size-guide td { text-align: left; vertical-align: top; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--wp--preset--color--mist-2); }
.groods-size-guide .wp-block-table { margin: 8px 0; }