/*
Theme Name: Dane Są Wszędzie '24'
Theme URI: 
Author: Yzoja
Author URI: httpa://yzoja.pl
Version: 1.0.2024
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--fontMain: 'barlow', 'Segoe UI', calibri, arial, sans-serif;
	--fontMono: 'JetBrains Mono', monospace;

	--fa: 'Font Awesome 5 Free';
	
	--black: #000000;
	--blackish: #242424;
	--white: #fff;
	--whiteish:#FAFAFA;

	--acrylic: rgba(255,255,255,0.6);

	--bg: var(--whiteish);

	--darkOrange: #e18426;
	--orange: #ee9c21;
	--burntOrange: #ab3700;
	--sunOrange: #F9A807;
	--mainYellow: #FFB600;
	--yellow: #FFC51E;
	--textGray: #515151;
	--bgGray: #f4f4f4;
	--pale: #FFFCEE;

	--avSize: 75px;

	--gradient: linear-gradient(to bottom right, var(--bg), var(--yellow));


	--text: var(--blackish);
	--main-font-color: var(--text);

	--border: 1px solid #ddd;

	--em: 16px;

	--grid: 170px 1fr 350px;
	--postGrid: 200px 1fr;

	--shadow: 0 10px 20px rgba(0,0,0,0.1);

	--container: 1200px;
	--gap: 40px;
	--negative:calc(var(--gap) * -1);
	--smallGap: calc(var(--gap) / 2);
	--smallpNegative: calc(var(--gap) / -2);
}

@media (prefers-color-scheme: dark) {

	:root {
		--bg: var(--blackish);
		--text: var(--whiteish);
		--white: black;
		--black: white;
		--textGray: #ccc;
		--bgGray: #313131;

		--border: 1px solid #444;

		--acrylic: rgba(0,0,0,0.5);

		--pale: var(--darkOrange);

		--gradient: linear-gradient(to bottom right, var(--bg), var(--darkOrange));
	}

	#header ul li a {
		background-image: linear-gradient(0deg, var(--darkOrange) 50%, transparent 50%);
	}

	.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		border-top-color: rgba(255,255,255,0.2);
		border-bottom-color: rgba(255,255,255,0.2);
	}

	.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
		color: rgba(255,255,255,0.8);
	}

}

.woocommerce-checkout {
	--grid:  170px 1fr;
}

.woocommerce-checkout aside {
	display: none;
}

body {
	background: var(--bg);
	font-family: var(--fontMain);
	font-size: var(--em);
	color: var(--text);
}

body.single-product {
	background: var(--gradient);
}

body > header {
	background: var(--white);
	box-shadow: var(--shadow);
	padding: var(--smallGap) 0;
}

input, textarea, select, button {
	font-family: var(--fontMain);
}

img {
	max-width: 100%;
	height: auto;
	transition: all 0.3s;
}

img[data-src] {
	opacity: 0;
}

a {
	color: inherit;
}

p {
	line-height: 1.6em;
}

ol li {
	margin: 0.5em 0 0 1.5em;
	line-height: 1.6em;
}

#entry ul, #entry ol {
	margin-bottom: var(--gap);
}

.container {
	width: 90%;
	margin: 0 auto;
	max-width: var(--container);	
}

.hide {
	display: none !important;
}

#entry p a {
	text-decoration: underline;
	text-decoration-color: var(--sunOrange);
}

/* Header */

#header {
	width: 90%;
	margin: 0 auto;
	max-width: var(--container);
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
	align-items: center;
}

#header #logo {
	height: 50px;
	width: auto;
}

#header .menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--smallGap);
	list-style-type: none;
}

#header .menu a:hover {
	color: ;
}

#header .fold {
	position: relative;
}

#header .fold button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 5px 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	text-transform: uppercase;
	font-size: 16px;
}

#header .fold button i {
	margin-left: .5em;
	color: var(--sunOrange);
	transition: all 0.2s;
}

#header .fold button.active i {
	transform: rotate(180deg);
}

#header .fold ul {
	position: absolute;
	display: none;
	background: var(--bg);
	padding: var(--smallGap);
	top: 100%;
	right: 0;
	z-index: 9;
	text-align: right;
	box-shadow: var(--shadow);
}

#header .fold ul li a {
	text-transform: none;
	white-space: nowrap;
}

#header .fold ul li + li {
	margin-top: 10px;
}

#header li a {
	text-decoration: none;
	color: inherit;
	text-transform: uppercase;
	background: linear-gradient(0deg, var(--yellow) 50%, transparent 50%);
	background-size: 0px 10px;
	background-repeat: repeat-x;
	background-position: bottom;
	transition: all 0.2s linear;
}

#header li a:hover {
	background-size: 20px 100%;
}

#header input {
	border: 2px solid var(--darkOrange);
	padding: 0 10px;
	line-height: 36px;
	background: var(--bg);
	color: var(--text);
}

#header form button {
	font-family: var(--fa);
	font-weight: bold;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	background: var(--darkOrange);
	color: white;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.widget_nav_menu li:last-child:after {
	content: "|";
	margin: 0 var(--smallGap);
	opacity: 0.3;
}

.cat-item-8 {
	order: -3;
}

.cat-item-9 {
	order: -2;
}

/* stream */

.wp-block-woocommerce-single-product p {
	opacity: 0.7;
	margin-block: var(--gap);
}

.wp-block-woocommerce-product-price {
	padding-right: var(--gap);
	font-size: 1.8em;
}

.wp-block-woocommerce-single-product .wp-block-column:first-child {
	padding-block: var(--gap);
}

.single-product main > * {
	margin-bottom: 1em;
}

.wp-block-column > *:not(:last-child) {
	margin-bottom: 1em;
}

.single-product main > :is(p, ul, ol) {
	font-size: 1.2em;
	line-height: 1.5em;
}

.single-product main li {
	margin-left: 2em;
}

.single-product main li::marker {
	color: var(--orange);
}

body:not(.single-product) main {
	display: grid;
	width: 90%;
	margin: var(--gap) auto;
	max-width: var(--container);
	grid-auto-flow: dense;
	grid-template-columns: var(--grid);
	grid-gap: var(--gap);
}

#primary, #storefront {
	grid-column: 1 / -2;
}

.single-product main {
	padding-bottom: var(--gap);
}

:is(.single-product main, .single-product main .wp-block-group__inner-container) > *:not(.alignfull):not(.alignwide) {
	max-width: 100%;
	width: var(--container);
	margin-inline: auto;
}

.big, .stream, #single, #comments {
	grid-column: span 2;
	padding: var(--gap);
	box-shadow: var(--shadow);
	background: var(--white);
	position: relative;
	z-index: 2;
}

.thumb {
	display: block;
}

.thumb img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center center;
}

.regular {
	display: grid;
	gap: var(--smallGap);
	grid-template-columns: var(--postGrid);
}

.regular p, .big p {
	margin-bottom: var(--smallGap);
}

.regular + .regular {
	margin-top: var(--gap);
}

.regular .inside:only-child {
	grid-column: 1 / -1;
}

.inside .comment-count, 
.big .comment-count {
	float: right;
	margin-left: var(--gap);
}

.big .comment-count {
	font-size: 50px;
}

.cover {
	display: block;
	max-width: calc(100% + var(--gap) * 2);
	margin: var(--negative) var(--negative) var(--gap);
}

.cover img {
	aspect-ratio: 3 / 1;
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

.big h1 {
	font-size: 2em;
	color: var(--black);
}

h1, h2 {
	text-wrap: pretty;
	color: var(--black);
}

article a {
	color: inherit;
	text-decoration: none;
}

aside {
	grid-column: -2;
	grid-row: span 5;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 6;
}

body.single aside {
	grid-row: span 1;
}

body.page aside {
	grid-row: span 2;
}

#newsletter {
	display: flex;
	gap: var(--gap);
	position: relative;
	z-index: 1;
	margin: -100px 0;
	padding: 100px 0;
	grid-column: span 2;
	background: var(--darkOrange);
	box-shadow: -20vw 0 0 0 var(--darkOrange), 30vw 0 0 0 var(--darkOrange), -50vw 0 0 0 var(--darkOrange), 60vw 0 0 0 var(--darkOrange);
	color: white;
}

#newsletter input::placeholder {
	color: var(--whiteish);
	opacity: 1;
}

#newsletter ::-webkit-input-placeholder {
	color: var(--whiteish);
}

#newsletter ::-ms-input-placeholder {
	color: var(--whiteish);
}

#newsletter .h4 {
	font-size: 1.5em;
	margin-bottom: 1em;
	display: block;
}

#newsletter p {
	font-size: 14px;
	text-wrap: balance;
}

#newsletter .ml-field-group input {
	background: var(--orange);
	border: 1px solid var(--mainYellow);
	color: inherit;
	padding: 5px 10px;
	line-height: 24px;
	font-size: 16px;
	display: block;
	width: 100%;
	margin-bottom: var(--smallGap);
}

#newsletter form {
	flex: 0 0 350px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--smallGap);
}

#newsletter .ml-field-group {
	flex: 1 1 40%;
}

.ml-button-horizontal {
	order: 8;
	margin-left: auto;
}

#newsletter .ml-button-horizontal button {
	background: var(--black);
	color: var(--white);
	padding: 5px 10px;
	font-weight: bold;
	text-transform: uppercase;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	display: block;
	cursor: pointer;
}

.ml-form-embedPermissions {
	order: 10;
	flex: 1 1 100%;
}

label.checkbox {
	white-space: nowrap;
	font-size: 12px;
}

label.checkbox a {
	color: inherit;
}

label.checkbox input {
	vertical-align: -2px;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	background: var(--bgGray);
	box-shadow: var(--shadow);
	padding: var(--smallGap);
}

/* Single */

code, pre {
	padding: 0px 6px;
	background: var(--bgGray);
	color: var(--textGray);
	font-family: var(--fontMono);
	overflow: auto;
	max-width: 100%;
}

#entry .syntaxhighlighter * {
	font-family: var(--fontMono) !important;
}

pre {
	white-space: nowrap;
	display: block;
	padding: 6px;
	font-size: .9em;
	margin: var(--gap) 0;
}

code {
	display: inline-block;
	vertical-align: middle;
}

.tiny {
	display: grid;
	grid-template-columns: 75px 1fr;
	gap: 5px 10px;
}

.tiny-c {
	grid-template-columns: 40px 1fr;
	gap: 0 15px;
}

.tiny > a {
	align-self: start;
	grid-column: 1;
	grid-row: span 3;
}

.tiny h3:first-child, .tiny h3:first-child + div {
	grid-column: 1 / -1;
}

.tags a {
	font-size: 12px;
	color: var(--textGray);
	background: var(--bgGray);
	border-radius: 2px;
	padding: 2px 7px;
	text-decoration: none;
	vertical-align: middle;
}

.tags span {
	font-weight: bold;
	font-size: 12px;
	color: var(--textGray);
	margin-right: 1em;
	text-transform: uppercase;
}

.post-meta {
	margin: var(--smallGap) 0;
}

.post-meta a {
	font-size: 14px;
	font-weight: bold;
	color: black;
	background: var(--mainYellow);
	border-radius: 2px;
	padding: 2px 7px;
	text-decoration: none;	
}

.post-meta span {
	margin-left: var(--smallGap);
	color: var(--textGray);
}

#single h1 {
	font-size: 2.5em;
}

#entry h1 {
	margin-bottom: 1em;
}

#entry h2, #comments h2 {
	margin: 2em 0 1em;
	font-size: 1.7em;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--mainYellow);
}

#entry p {
	margin-bottom: 1em;
}

#entry .wp-block-woocommerce-checkout p {
	margin-bottom: 0;
}

#entry .wp-block-image, #entry .wp-block-embed {
	margin-bottom: var(--gap);
}

#entry pre code, #entry .wp-block-code code {
	overflow-wrap: normal;
}

.alignwide {
	margin: var(--gap) var(--negative);
}

.comment-count {
	position: relative;
	font-size: 36px;
	color: var(--textGray);
	line-height: 1;
}

.comment-count span {
	position: absolute;
	text-align: center;
	width: 100%;
	left: 0;
	top: 27%;
	font-weight: bold;
	font-size: 0.4em;
	color: var(--text);
}

.comment-count i {
	opacity: 0.3;
}

/* comments */

#respond {
	margin-bottom: var(--gap);
}

#reply-title small {
	margin-left: 2em;
}

#reply-title {
	margin-bottom: 1em;
}

.comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: var(--smallGap);
}

.comment-body {
	position: relative;
	padding-left: var(--avSize);
	margin-bottom: var(--gap);
}

.comment-author img {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--avSize) - 10px);
	aspect-ratio: 1;
}

.comment-content {
	opacity: 0.8;
}

.depth-2 {
	margin-left: var(--avSize);
}

.reply {
	text-align: right;
	margin-top: var(--smallGap);
}

.reply i {
	font-size: 13px;
	vertical-align: middle;
	color: var(--orange);
	margin-right: 1em;
}

form#commentform {
	display: grid;
	grid-template-columns: 1fr 220px;
	grid-gap: var(--smallGap) var(--gap);
	grid-auto-flow: dense;
}

p.comment-notes {
	grid-column: 1 / -1;
	background: var(--pale);
	margin-top: var(--smallGap);
	padding: 2px 5px;
	border-bottom: 2px solid var(--yellow);
	font-size: 13px;
	order: -2;
}

p.comment-form-author {
	order: -1;
	display: flex;
	align-items: flex-end;
	grid-column: span 2;
}

p.comment-form-comment {
	grid-column: 1;
	grid-row: span 4;
}

form#commentform label {
	display: none;
}

form#commentform input, form#commentform textarea {
	border: var(--border);
	display: block;
	width: 100%;
	line-height: 22px;
	padding: 5px 10px;
	font-size: 16px;
}

form#commentform input:focus,
form#commentform textarea:focus {
	outline: none;
	border-color: var(--mainYellow) !important;
}

p.comment-form-author:after {
	content: "pisze:";
	flex-grow: 2;
}

form#commentform input#author {
	flex: 0 0 150px;
	border: 0;
	border-bottom: var(--border);
	margin-right: 10px;
	padding-bottom: 0;
}

form#commentform .comment-form-cookies-consent label {
	display: block;
	font-size: 12px;
	line-height: 16px;
}

p.comment-form-cookies-consent {
	display: grid;
	grid-template-columns: 15px 1fr;
	align-items: baseline;
	gap: 10px;
}

form#commentform input#submit {
	background: var(--text);
	color: var(--bg);
	border:  0;
	width: 90%;
	margin-left: auto;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
}

form#commentform input#submit:hover {
	background: var(--sunOrange);
}

textarea#comment {
	height: 100%;
}

.edit-link a {
	margin-left: 1em;
	text-decoration: underline;
}

/* sidebar */

#hello {
	background: var(--pale);
	color: var(--text);
	border-bottom: 10px solid var(--yellow);
	margin-top: var(--gap);
}

#hello svg {
	height: 1.5em;
	width: 5em;
	margin-bottom: 1em;
}

#hello p + p {
	margin-top: 1em;
}

#cutout {
	margin-top: calc(-1 * var(--gap));
	float: right;
	width: 45%;
}

.sidebar {
	position: sticky;
	z-index: 4;
	top: var(--gap);
	display: flex;
	flex-direction: column;
}

.admin-bar .sidebar {
	top: calc(var(--gap) + var(--wp-admin--admin-bar--height));
}

aside .widget, .sidebar > div[class*="wp-block-"] {
	background: var(--white);
	padding: var(--smallGap);
	box-shadow: var(--shadow);
	margin-bottom: var(--gap);
}

.widget a {
	color: inherit;
	text-decoration: none;
}

aside .widget h2, footer h2, aside h2 {
	font-size: 1.4em;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--mainYellow);
	margin-bottom: 1em;
}

.sidebar .ebook-box {
	order: 4;
	padding-left: 0 !important;
}

.sidebar .ebook-box img {
	transform: rotate(-3deg) translateX(-10px);
}

.tiny-c .comment-count {
	margin-top: -3px;
}

.tiny-c + .tiny-c, .tiny + .tiny {
	margin-top: var(--smallGap);
}

#related.widget {
	margin-top: auto;
	margin-bottom: 0;
	position: relative;
	z-index: 8;
	background: var(--acrylic);
	border: 1px solid var(--white);
	backdrop-filter: blur(40px);
}

#marketing-notice {
	text-align: center;
	font-size: 13px;
	order: 10;
}

/* footer */

#footer {
	position: relative;
	z-index: 11;
	background: var(--white);
	border-top: var(--border);
	padding-bottom: var(--gap);
}

#footer .container {
	display: flex;
	gap: var(--gap);
}

#footer .widget {
	display: contents;
}

#footer .wp-block-group {
	flex: 1 1 20%;
	padding-top: var(--gap);
}

#footer .wp-block-group.ebook-box {
	flex: 2 1 40%;
}

#footer .wp-block-group.about {
	flex: 0 0 150px;
}

#footer .wp-block-group.about svg#logo-square {
	width: 100px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.ebook-box img {
	margin-bottom: var(--gap);
	margin-top: var(--negative);
	transform: rotate(-3deg) translateY(-10px);
	box-shadow: var(--shadow);
}

#footer li {
	margin-bottom: var(--smallGap);
	list-style-type: none;
}

#footer hr {
	border-color: var(--mainYellow);
	width: 50px;
	margin: 2em auto 1em;
}

/* fancy stuff */

#middle {
	animation: drawH 1.7s forwards cubic-bezier(0.39, 0.58, 0.57, 1);
	animation-delay: 0s;
	transform-origin: bottom center;
}

#l {
	animation: drawH 1.2s forwards cubic-bezier(0.39, 0.58, 0.57, 1);
	animation-delay: 1.5s;
	transform-origin: bottom center;
	transform: translateY(-150px);
}

#small-container {
	animation: drawH 1.3s forwards cubic-bezier(0.39, 0.58, 0.57, 1);
	animation-delay: 2.5s;
	transform-origin: bottom center;
	transform: translateY(-150px);
}

#small {
	animation: tilt 1.3s forwards cubic-bezier(0.62, 0.02, 0.93, 0.66);
	animation-delay: 3.8s;
	transform: rotate(-17deg) translate(-7%, 2%);
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover {
	background: var(--burntOrange);
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
	background: var(--darkOrange);
}

section.has-background {
	padding: 0 var(--gap);
	margin-block: var(--gap);
	border-radius: 1em;
}

.woocommerce-products-header__title.page-title {
	margin-bottom: var(--gap);
}

.woocommerce-ordering, .woocommerce-result-count {
	display: none;
}

.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
	visibility: visible !important;
}

@keyframes drawH {
	from {
		transform: translateY(-150px);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes tilt {
	from {
		transform: rotate(-17deg) translate(-7%, 2%);
	}

	to {
		transform: rotate(0) translate(0);
	}
}

@media screen and (max-width: 1300px) {
	:root {
		--em: 16px;
		--grid: 170px 1fr 250px;
		--postGrid: 120px 1fr;
	}

	#newsletter .ml-field-group input {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 1100px) {
	#newsletter form {
		flex: 0 0 200px;
	}

	#newsletter .ml-field-group {
		flex: 1 1 60%;
	}

	.ml-button-horizontal {
		margin-top: 10px;
	}
}


@media screen and (max-width: 900px) {
	:root {
		--grid: 1fr 250px;
	}

	#header {
		gap: 10px var(--gap);
	}

	#header #logo-box {
		grid-column: 1 / -1;
		text-align: center;
	}

	aside {
		grid-column: 1 / -1;
		display: block;
		column-count: 2;
		column-gap: var(--gap);
	}

	aside .sidebar {
		display: contents;
	}

	aside .widget, .sidebar > div[class*="wp-block-"] {
		break-inside: avoid;
		background: var(--acrylic);
		border: 1px solid var(--white);
		backdrop-filter: blur(40px);
	}

	#discussed {
		margin-bottom: 10px;
	}

	#marketing-notice {
		margin-bottom: var(--gap);
	}

	#footer .container {
		flex-wrap: wrap;
	}

	#footer .wp-block-group.ebook-box {
		margin-left: auto;
		max-width: 450px;
	}

	#header .wp-container-core-group-is-layout-1 {
		justify-content: flex-start;
	}

	#header .fold ul {
		left: 0;
		right: unset;
		text-align: left;
	}
}

@media screen and (max-width: 650px) {
	:root {
		--grid: 100%;
		--gap: 20px;
		--postGrid: 1fr;
	}

	.big, .stream, #single, #comments, #newsletter {
		grid-column: 1;
	}

	aside {
		column-count: 1;
	}

	#footer .wp-block-group {
		flex: 1 1 40%;
	}

	#footer .wp-block-group.ebook-box, #footer .wp-block-group.about {
		flex: 1 1 60%;
	}

	#footer .wp-block-group.about {
		order: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 0;
		gap: var(--gap);
	}

	#footer .wp-block-group.about hr {
		display: none;
	}

	#footer .wp-block-group.about svg#logo-square {
		margin: 0;
	}

	#footer .about .wp-block-group__inner-container {
		display: contents;
	}

	.thumb img {
		aspect-ratio: 3 / 1;
		width: 100%;
	}

	.thumb {
		margin: 0 var(--negative) 0;
	}

	.regular:first-child .thumb {
		margin: var(--negative) var(--negative) 0;
	}

}

@keyframes spin {
	0% {
		transform: rotate(-360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes spin-counter {
	0% {
		transform: rotate(360deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}


.scatter .wp-block-gallery {
	display: grid;
	grid-template-columns: 35% 1fr;
	grid-template-rows: 100px 140px 100px;
	gap: calc(2 * var(--gap));
	animation: spin 20s linear infinite;
}

.scatter .wp-block-gallery figure {
	animation: spin-counter 20s linear infinite;
}

.wc-block-components-product-metadata, .wc-block-components-order-summary-item__description .wc-block-components-product-price {
	display: none;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	border: 0;
	border-radius: 0;
	background: var(--yellow);
	font-weight: bold;
	text-transform: uppercase;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover {
	background: var(--darkOrange);
	color: #fff;
}

.wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=password], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=password], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url], .wc-blocks-components-select .wc-blocks-components-select__select {
	background: var(--bgGray);
	color: var(--text);
}

@media screen and (max-width: 500px) {

	:root {
		--em: 14px;
		--avSize: 50px;
		--wp--preset--font-size--medium: 16px;
	}

	section.has-background {
		padding: 0;
	}

	.woocommerce-checkout {
		--grid: 100%;
	}

	#newsletter {
		display: block;
	}

	#newsletter .copy {
		margin-bottom: var(--gap);
	}

	.big h1, #single h1 {
		font-size: 1.6em;
	}

	#single h2 {
		font-size: 1.3em;
	}

	.post-meta span {
		display: block;
		margin: 10px 0 1em 0;
		font-size: 12px;
	}

	form#commentform {
		grid-template-columns: 1fr;
	}

	.depth-2 {
		margin-left: 20px;
	}

	.comment-meta {
		flex-direction: column;
		gap: 5px;
		min-height: var(--avSize);
		align-items: start;
		justify-content: center;
	}

	.comment-metadata {
		order: -1;
	}

	.edit-link {
		display: block;
	}

	.edit-link a {
		margin-left: 0;
	}

	.comment-content {
		margin-left: calc(-1* var(--avSize));
	}

	.comment-content p {
		line-height: 1.4em;
	}

	.comment-body {
		font-size: 13px;
	}

	p.comment-form-author {
		grid-column: 1;
	}

	pre {
		overflow: visible;
		width: calc(90vw - (2 * var(--gap)));
	}

	#entry pre code, #entry .wp-block-code code {
		padding: 0;
		display: block;
		overflow-wrap: normal;
		width: 100%;
		overflow: auto;
	}

	.widget_nav_menu li:first-child:before {
		display: none;
	}

	#header .wp-container-core-group-is-layout-1 {
		justify-content: space-between;
	}

	#footer .ebook-box {
		display: none;
	}

	.wp-block-image .alignright {
		margin-left: 0;
	}

	.wp-block-image .alignleft {
		margin-right: 0;
	}
	
	#header {
		flex-wrap: wrap;
	}
	
	:is(.single-product main, .single-product main .wp-block-group__inner-container) > *:not(.alignfull):not(.alignwide), section:not(.has-background) {
		max-width: 90%;
	}

	.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
		width: 100%;
	}

	section#storefront {
		max-width: 100%;
	}
	
	.single-product main section.has-background {
		max-width: 100% !important;
		border-radius: 0;
	}
	
	.single-product main section.has-background .quantity {
		display: none;
	}
	
	.scatter .wp-block-gallery {
		animation: spin 10s linear infinite;
	}

	.scatter .wp-block-gallery figure {
		animation: spin-counter 10s linear infinite;
	}
	
	.single-product main {
		overflow: hidden;
	}
	
	main .wp-container-core-group-is-layout-baef362d {
		grid-template-columns: 100%;
	}
}

.scatter .wp-block-gallery.has-nested-images.columns-5 {
	flex-wrap: nowrap;
}

.scatter .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
	width: 90px;
	background: #fff;
	box-shadow: var(--shadow);
	border-radius: 1em;
}

.is-style-scatters img {
	padding: 15px !important;
}

.is-style-scatters figure img {
	transition: all 0.4s ease-in-out;
}

.is-style-scatters figure:hover > img {
	transform: scale(1.1);
	transform-origin: center center;
}

.scatter.is-style-scatters figure.wp-block-image:nth-child(1) {
	margin-left: auto !important;
	margin-top: var(--gap) !important;
}

.scatter.is-style-scatters figure.wp-block-image:nth-child(3) {
	margin: auto !important;
}

.scatter.is-style-scatters figure.wp-block-image:nth-child(4) {
	margin-left: 35% !important;
	margin-top: calc(-1 * var(--gap)) !important;
}

.scatter.is-style-scatters figure.wp-block-image:nth-child(5) {
	margin-left: auto !important;
	margin-right: calc(-2 * var(--gap)) !important;
}

.wp-block-woocommerce-checkout.alignwide {
	margin: 0;
}

.woocommerce-checkout #entry h2 {
	margin-top: 0;
}

.woocommerce-checkout #entry fieldset {
	padding-bottom: var(--gap);
}