/*
Theme Name:   HANKO Studio Theme
Description:  Twenty Twenty Five Child Theme
Author:       Sérgio Alves Santos
Website:      www.studio.hanko.lu
Template:     twentytwentyfive
Version:      1.0
Year:         2025
*/

/* Global styles =============================================================
=========================================================================== */
:root {
	--fade: .6;
}
html {
  scroll-behavior: smooth;
}
h1, h2 {
	font-size: clamp(1.65rem, 3vw, 3.15rem) !important;
}
h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}
@media all and (max-width: 768px) {
	.cover-mobile-height {
		min-height: 290px !important;
	}
}
figcaption {
	font-style: italic;
	font-size: 1rem !important;
	color: var(--wp--preset--color--accent-4);
}
.sticky-column figure {
	position: sticky;
  	top: 25px;
}
.lykos-bg {
	background: #F4F1E8;
}
/* Shop & catalog ============================================================
=========================================================================== */
@media all and (max-width: 780px) {
	.block-cover-height {
		min-height: 400px !important;
	}
}
/* Header ====================================================================
=========================================================================== */
.wc-block-mini-cart__button {
	margin-right: 9px;
	position: relative;
    top: -2px;	
}
.wp-block-navigation__responsive-container-open {
	margin-top: -4px !important;
}
.wp-block-site-logo.is-default-size img {
	width: 250px;
}
.wp-block-site-logo a:hover {
	opacity: var(--fade); 
}
header nav .wp-block-navigation-item__content {
    padding-bottom: 2px;
	border-bottom: 2.5px solid white;
	&:is(:hover, :active, :focus) {
		text-decoration: none;    
		border-bottom: 2.5px solid black;
	}
}
nav+div .wp-block-button__link {
	word-break: keep-all;
}
@media all and (max-width: 768px) { 
	.header-row {
	   justify-content: center;
       gap: 40px;
    }
}
/* Product page ==============================================================
=========================================================================== */
th.label {
	margin-bottom: 8px;
}
.single_add_to_cart_button {
	padding: 1.1rem 2.85rem;
}
.woocommerce .wp-block-woocommerce-product-image-gallery {
	max-width: 100%;
}
table.variations {
	position: relative;
	border-bottom: 1.5px solid #dbdbdb !important;
	padding-bottom: 20px;
	margin-bottom: 40px !important;
	th {
		display: flex;
		flex-wrap: wrap;
		label {
			font-size: 1.25rem;
			margin: 20px 0 -15px;
		}
	}
	td {
		flex-wrap: wrap;
		display: flex;
	}
}
label[for="pa_type-of-product"]:before {
	content: '1. ';
}
label[for="pa_size"]:before {
	content: '2. ';
}
.swatch-label {
	display: none;
}
div.select.swatch-control {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	.swatch-wrapper {
		padding: 17px 8px 18px;
		margin: 0; 
		line-height: 1;
		border-width: 2px;	
		cursor: pointer;
		position: relative;
		a {
			height: 15px !important;
			width: 149px !important;
		}
		a:focus {
			outline: none;
		}
		img {
			width: 100%;
			height: 100%;
			max-height: 15px;
			position: relative;
			top: 1px;
		}
		&:focus {
			outline: none;
		}
	}
	.swatch-wrapper.selected {
		border: 2px solid black;
	}
}
#picker_pa_type-of-product {
	padding: 2px;
	a {
		height: 167px !important;
		width: 167px !important;
	}
	img {
		max-height: 100%;
	}
	.swatch-wrapper.selected img, .swatch-wrapper:hover img {
		outline: 2px solid black;
	}
	&..select.swatch-control {
		gap: 16px;
	}
	.swatch-wrapper {
		padding: 0 0 30px 0;
		border: 0;
	}
	.swatch-wrapper::after {
		position: absolute;
		bottom: 4px;
		left: 2px;
		font-size: 1rem;
		color: #333;
		content: "Canvas print";
	}
	[aria-label="Select Aluminium print"]::after {
		content: "Aluminium print";
	}
	[aria-label="Select Framed print"]::after {
		content: "Framed print";
	}
	[aria-label="Select Digital download"]::after {
		content: "Digital download";
	}
}
.swatch-anchor {
	position: relative;
}
a.reset_variations {
	position: absolute;
    top: 22px;
    right: 0;
    font-size: 1rem !important;
	display: flex;
	gap: 8px;
    align-items: center;
	&:after {
		content: '';
		background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %231f1f1f; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M3,18c-.55,0-1.02-.2-1.41-.59-.39-.39-.59-.86-.59-1.41V3H0V1h5V0h6v1h5v2h-1v13c0,.55-.2,1.02-.59,1.41-.39.39-.86.59-1.41.59H3ZM13,3H3v13h10V3ZM5,14h2V5h-2v9ZM9,14h2V5h-2v9ZM3,3v13V3Z'/%3E%3C/svg%3E") no-repeat center;
		display: block;
		width: 15px;
		height: 15px;
	}
}	
button[type="submit"] {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1rem;
}
picker_pa_size {
    .swatch-wrapper {
        padding: 14px 5px;
    }
}
div.single_variation_wrap, div#wc-stripe-express-checkout-element {
	border-bottom: 1.5px solid #dbdbdb;
	padding-bottom: 40px;
}
div#wc-stripe-express-checkout-element {
	margin: 2em 0 0 !important;
}
.products-meta {
	margin-top: 0 !important;
}
.wc-block-components-quantity-selector:after, div.quantity button {
	border-radius: 0 !important;
}
.woocommerce div.product form.cart {
    margin-bottom: 0.5em;
}
@media all and (max-width: 768px) {
	#picker_pa_type-of-product {
		a {
			height: 147px !important;
			width: 147px !important;
		}
	}
	div.select.swatch-control {
		& .swatch-wrapper {
			a {
				width: 129px !important;
			}
		}
	}
}
/* FAQ and features ==========================================================
=========================================================================== */
.faq-questions {
	counter-reset: question-counter;
}
.faq-questions summary {
	position: relative;
	counter-increment: question-counter;
	display: flex;
	gap: 22px !important;
	cursor: pointer;
	padding: 1.1em 2em 0.2em 1.1em;
	border-top: 2px solid black;
	outline: none;
}
.faq-questions summary::before {
	content: counter(question-counter) ". ";
	position: absolute;
	left: 0;
}
/* Hide the default marker */
.faq-questions summary::-webkit-details-marker, .faq-questions summary::marker {
	color: transparent;
}
/* Add a custom marker on the right */
.faq-questions summary::after {
	content: ""; /* Closed icon */
	position: absolute;
	right: 0;
	align-self: center;
	transition: transform 0.3s;
	display: inline-block;
	margin-left: 8px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid black;	
}
/* Rotate the arrow when <details> is open */
.faq-questions details[open] summary::after {
	transform: rotate(90deg);
}
.faq-questions details>div.wp-block-group {
	padding: 0 28px 20px 21px;
}
@media all and (max-width: 1400px) {
	.features-column {
		flex-wrap: wrap !important;
		.wp-block-column {
			flex-basis: 25% !important;
		}
	}
}
@media all and (max-width: 1200px) {
	.faq-section, .faq-title, .product-details-columns {
		flex-wrap: wrap !important;
		&>.wp-block-column {
			flex-basis: 100% !important;
		}
	}
	.faq-title>div {
		padding-bottom: 0 !important;
	}
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
}
@media all and (max-width: 900px) {
	.print-type-columns {
		flex-wrap: wrap !important;
	}
}
/* Newsletter form ===========================================================
=========================================================================== */
form#wpforms-form-512 {
	display: flex;
}
.wpforms-field-container {
	flex: 1 1 70%;
}
div#wpforms-512-field_2-container {
	padding: 0;
}
input#wpforms-512-field_2 {
	border: 2px solid #000;
    padding: 8px 20px;    
	border-radius: 0;
	box-sizing: content-box;    
	max-width: 100%;
    box-sizing: border-box;
    height: 63px;
	background: transparent;
}
button#wpforms-submit-512 {
	text-transform: uppercase;
    background: black;
    border-radius: 0;
    padding: 8px 10px;
    width: 100%;
	height: 63px;
	font-weight: 600;
	letter-spacing: .1px;
	border: 3px solid #000;
	word-break: keep-all;
}
button#wpforms-submit-512:hover {
	opacity: var(--fade);
}
form#wpforms-form-512 p, form#wpforms-form-512 br {
	display: none;
}
.wpforms-submit-container {
	flex: 1 1 30%;
	margin-top: 0 !important;
}
@media all and (max-width: 1280px) {
	.newsletter-section {
		flex-wrap: wrap !important;		
		&>.wp-block-column {
			flex-basis: 100% !important;
		}
	}
	.wp-container-core-group-is-layout-41c06ba8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 100%;
	}
}
/* Footer ====================================================================
=========================================================================== */
footer .wp-block-navigation-item__content:is(:link, :visited) {
	text-decoration: underline;	
}
footer .wp-block-navigation-item__content:is(:hover, :active, :focus),
.wp-block-navigation .wp-block-navigation-item {
	text-decoration: none !important;
}
ul.no-bullets {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
#copyright strong {
	font-weight: normal;
}
@media all and (max-width: 768px) {
	.footer-info {
		flex-direction: column;
	}
}
/* Cart & checkout page ======================================================
=========================================================================== */
.wp-block-woocommerce-empty-cart-block {
	.wc-block-grid__product-link {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 900;
		text-decoration: none;

		&:hover,
		&:active {
			text-decoration: underline;
		}
	}

	.wc-block-grid__product-price {
		font-size: var(--wp--preset--font-size--medium);
	}
	.wc-block-grid__product-title {
		line-height: 1.45;
	}
}
.is-large.wc-block-cart .wc-block-cart-items th {
	text-align: left;
}
.woocommerce-cart .wp-block-post-title {
	max-width: unset;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	font-size: 1rem;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link, .page-id-317 .wc-block-cart__payment-options {
	display: none;
}
h2.wc-block-components-title {
	font-weight: 800;
}
/* Cookie banner =============================================================
=========================================================================== */
div#cookieChoiceInfo {
	max-width: 600px;
	background: white !important;
	padding: 40px !important;
	text-align: left !important;
	font-size: var(--wp--preset--font-size--medium);
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, .06);
	left: 30px !important;
    bottom: 30px !important;
	border: 20px solid black;
	a#cookieChoiceDismissIcon {
		display: none !important;
	}
	div {
		padding: 0 !important;
		display: flex;
		flex-wrap: wrap;    
		gap: 30px;
		align-items: center;
	}
	div:before {
		content: 'This site uses cookies';
		font-weight: 900;
		font-size: clamp(1.7rem, 1.9vw, 2rem);
		display: block;
	}
	a#cookieChoiceDismiss {
		display: inline-block;
		border: 2px solid black;
		padding: 10px 40px;
		text-transform: uppercase;
		text-decoration: none;
		margin: 0 !important;
		order: 3;
		font-weight: 500;
		letter-spacing: 1px;
	}
	a#cookieChoiceDismiss:hover {
		opacity: var(--fade);		
	}
	span+a {
		display: inline-block;
		margin: 0 !important;
		order: 4;
	}
}
@media all and (max-width: 768px) {
	div#cookieChoiceInfo {
		width: auto !important;
		left: 0 !important;
   		bottom: 0 !important;
	}
}