@charset "UTF-8";
/*
Theme Name:     Art By Adam White
Theme URI:      https://artbyadamwhite.com
Author:         Adam White
Author URI:     https://artbyadamwhite.com
Description:    A manual, classic WordPress theme.
Version:        1.0
*/

:root {

/*fonts*/
--ff-base: "Saira Condensed", sans-serif;
--ff-accent: "Saira Condensed", sans-serif;
/*font sizes*/
--fs-2: clamp(0.6331rem, 0.7195rem + -0.1115vw, 0.6944rem);
--fs-1: clamp(0.8333rem, 0.829rem + 0.0193vw, 0.844rem);
--fs00: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
--fs01: clamp(1.2rem, 1.0774rem + 0.5448vw, 1.4996rem);
--fs02: clamp(1.44rem, 1.2113rem + 1.0164vw, 1.999rem);
--fs03: clamp(1.728rem, 1.3448rem + 1.703vw, 2.6647rem);
--fs04: clamp(2.0736rem, 1.4688rem + 2.688vw, 3.552rem);
--fs05: clamp(2.4883rem, 1.5693rem + 4.0845vw, 4.7348rem);

/*spacing*/
--xxxs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
--xxs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
--xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
--s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
--m: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
--l: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
--xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
--xxl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
--xxxl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);

/*One-up pairs*/
--3xs-2xs: clamp(0.25rem, 0.1222rem + 0.5682vw, 0.5625rem);
--2xs-xs: clamp(0.5rem, 0.3466rem + 0.6818vw, 0.875rem);
--l-xl: clamp(2rem, 1.4375rem + 2.5vw, 3.375rem);

/*colors*/

--bg:hsl(200 23% 8% / 1);
--bg-through:hsl(0 0% 0% / 20%);
--bg-transparent:hsl(200 23% 8% / 0.6);
--bg-light:hsl(193 72% 26% / 12%);
--bg-light-border:hsl(189deg 100% 87.62% / 7%);
--bg-button:hsl(200 23% 18% / 1);
--txt-placeholder:hsl(285 10% 60% / 1);

--txt:hsl(285 10% 80% / 1);
--txt-light:hsl(285 10% 95% / 1);

--accent1:hsl(339 88% 55% / 1);
--accent1-dark:hsl(339 75% 45% / 1);
--accent2:hsl(267 31% 20% / 1);
--accent2-dark:hsl(337 63% 26% / 1);
--accent3:hsl(189 100% 33% / 1);
--accent3-border:hsl(189 100% 33% / 1);
--accent3-dark:hsl(189 100% 18.67% / 92%);
--accent3-dark-border:hsl(189 100% 27% / 1);

--margin-sides: 8%;
--side: calc(var(--margin-sides) / 2);
--btm-padding:calc(var(--side) - var(--2xs-xs));

/*border-radius*/
--rad: 8px;
--rad-small: calc(var(--rad) / 2);

--container-max-width:768px;

--swiper-pagination-bullet-inactive-opacity:1 !important;
accent-color: var(--accent3);
caret-color: var(--accent3);

}

*, *::before, *::after { box-sizing: border-box; }
* { margin:0; }
html, body { height:100%; overflow-x: hidden; color:var(--txt); line-height: 1.5; background:var(--bg) }
body { background-color: var(--bg); }
body {background: radial-gradient(circle at 35% 50%, rgba(0, 83, 199, 0.15), transparent 50%), radial-gradient(circle at 65% 50%, rgba(108, 0, 47, 0.273), transparent 50%), radial-gradient(circle at 50% 65%, rgb(0 78 66 / 37%), transparent 50%);
        background-attachment: fixed;
    }
h1, h2, h3, h4, h5, h6 { font-family: var(--ff-accent); line-height: 1.1; color: var(--accent1-dark); font-weight: 600; text-transform: uppercase; margin: 2.5rem 0 .5rem; width: fit-content; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

a		{ color: var(--accent1); }
a:hover { color: var(--txt-light); }
address { font-style: normal; }

ul { padding-left:2ch; }

*::marker { font-size:0.7rem; opacity:0.7; }
::selection { color:white; background-color: var(--accent3-dark); border-radius:10px; outline:1px solid inherit; }


hr { border: 0; border-bottom: solid 1px var(--bg-light-border); }
img { width:100%; height:auto; aspect-ratio:1/1; max-width:100%; display:block; }

h1 { font-size: var(--fs05); margin: 0.5rem 0 1cqi; }
h2 { font-size: var(--fs02); }
h3 { font-size: var(--fs01); }
h4 { font-size: var(--fs01); }
h5 { font-size: var(--fs01); }
h6 { font-size: var(--fs00); }


header .wrap, main, footer  { width: min(100% - var(--margin-sides), var(--container-max-width)); margin-inline:auto; }
header .wrap { padding-block: 0.4rem; }
#menu-logo { width:40px; height:auto; aspect-ratio: initial; }
#menu-logo img, label[for="menu"] { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); }

#menu a { display: block; padding:1rem; text-align: center; border-bottom:1px solid var(--bg-light-border); }
#menu a:last-of-type { border-bottom:none; }
header > dl * { display:inline-block; }


body > header {
    display: flex; justify-content: space-between; align-items: center;
    
    --wrap-padding: 0px;
     --wrap-width: min(100vw - var(--margin-sides), var(--container-max-width));
  --side-gutter: calc((100vw - var(--wrap-width)) / 2 + var(--wrap-padding));
  padding-inline: var(--side-gutter);
  
    background: #101619;
background: -webkit-linear-gradient(180deg, rgba(16, 22, 25, 1) 12%, rgba(16, 22, 25, 0.71) 70%, rgba(16, 22, 25, 0.6) 92%, rgba(16, 22, 25, 0.5) 100%);
background: -moz-linear-gradient(180deg, rgba(16, 22, 25, 1) 12%, rgba(16, 22, 25, 0.71) 70%, rgba(16, 22, 25, 0.6) 92%, rgba(16, 22, 25, 0.5) 100%);
background: linear-gradient(180deg, rgba(16, 22, 25, 1) 12%, rgba(16, 22, 25, 0.71) 70%, rgba(16, 22, 25, 0.6) 92%, rgba(16, 22, 25, 0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#101619", endColorstr="#1016190D", GradientType=0);
/*mask-image:linear-gradient(180deg,rgba(16, 22, 25, 1) 36%, rgba(16, 22, 25, 0.71) 51%, rgba(16, 22, 25, 0) 86%);
mask-image:-webkit-linear-gradient(270deg,rgba(16, 22, 25, 1) 36%, rgba(16, 22, 25, 0.71) 51%, rgba(16, 22, 25, 0) 86%);*/
    backdrop-filter: blur(8px);
    position: sticky;
      top: 0;
      z-index: 1000; 
}

      

/*colors*/
body > header a:hover { color: var(--txt-light); }
body > header a, .message-hint ul li { color: var(--txt); }
body > header > a:first-of-type { margin-right:auto; display:block; height:40px; width:40px; background:url("https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/logo-s.svg") no-repeat center; color:transparent; wrap:nowrap; overflow:hidden; }
body > header > a:hover { color:transparent; wrap:nowrap; overflow:hidden; }
.required, tr.order-total, tr.order-total span { color: var(--accent1); }
#contactStatus { flex-direction: column; }
#upload-hint p { font-size:0.9rem; }
.wrap { display: flex; justify-content: space-between; align-items: center; }

a, ins, #menu .close { text-decoration: none; }

body, select, input, textarea, .remove { font-family: var(--ff-base); font-size: var(--fs00); line-height: 1.7; color: var(--txt); }



/*special*/

.rounded { border-radius:var(--rad); }
:focus-visible { outline-color:var(--accent2); }






/*menu*/
#nav:checked ~ nav { transform: translateX(0%); }
label[for="nav"] { z-index:999999999; text-align:right; cursor:pointer; font-size: var(--fs04); padding-bottom: 0.4rem; line-height: 1; }


/* Container defaults (off screen) */
header nav {
	position: fixed;
	display: flex;
	flex-direction: column;
	inset: 0;
	height: calc(100vh);
	width: 100%;
	background: var(--bg);
	box-shadow: -2px 0 10px rgba(0,0,0,0.1);
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	z-index: 1000;
	padding: 0 var(--side) env(safe-area-inset-bottom) var(--side);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


span.text { color:transparent; transition: color 0.3s ease-in-out; }

.menu { list-style: none; padding: 0; }
.menu li { padding: 0; }
.menu li > a:not(.button) { border-top: solid 1px var(--bg-light-border); color: var(--txt); display: block; line-height: 3.5rem; text-decoration: none; text-transform: uppercase; }
.menu li > a:not(.button):hover { color:var(--txt-light); }
.menu li:first-child > a:not(.button) { border-top: 0 !important; }





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

#menu { padding: 2.5rem 1.75rem; }

}

/*footer*/


footer {

	font-size: var(--fs-1);
    letter-spacing: 0.02rem;
	padding: 7rem 0 2rem 0;
	margin-top:1rem;
	text-align: center;
	align-items: center;
	background:url("https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/logo-l.svg") no-repeat top center;

}


footer a { border-left: 1px solid var(--accent1); padding-left: .5ch; display: inline-block; line-height: 0.8rem; }
footer a:first-of-type{     border-left: none; margin-left:0; padding-left:0; }


main > nav a { border-left: 1px solid var(--accent1);padding-left: .5ch; margin-left: .5ch; display:inline-block; line-height:0.8rem; }
main > nav a:first-of-type { border-left:none; margin-left:0; padding-left:0; }

[aria-label="Breadcrumbs"] { margin-block: var(--2xs-xs); z-index: 90; }
.shop [aria-label="Breadcrumbs"] { display:none; }

/* Reset all form fields */

input, textarea, select { width: 100%; border-radius:var(--rad-small); border: none; background-color: var(--bg-through); padding: 1ch; font-family: inherit; font-size: var(--fs00); color: var(--txt); outline: none; box-shadow: none; }

textarea { resize:vertical; height: 7rem; }
input:focus, textarea:focus, select:focus, button:focus { border-color: var(--accent3); }
input::placeholder, textarea::placeholder { color:var(--accent3); opacity: 1;} 
.tattoo-booking-date input::placeholder { color:var(--txt); opacity: 1;} 
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {  }
input[type="date"]::-webkit-calendar-picker-indicator { -webkit-appearance: none; display: none; cursor: pointer; }
select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.select { background: transparent; position:relative; }


button, .button {

	cursor: pointer;
	font-family: "Saira Condensed";
    font-size: 1.3rem;
    font-weight: 600;
	
	border-radius:var(--rad);
	display:block;
	width:100%;
	line-height: 3rem;
	outline:none;
	text-transform: uppercase;
	
	text-align: center;
	
	background-color: var(--accent3-dark);
	color:var(--txt-light);
	border:none;
	
	transition: background-color 300ms ease-in-out;
	-webkit-transition: background-color 300ms ease-in-out;
	-ms-transition: background-color 300ms ease-in-out;
	-o-transition: background-color 300ms ease-in-out;
	-ms-transition: background-color 300ms ease-in-out;

}

button:hover:not(:disabled), .button:hover:not(:disabled) { background-color: var(--accent3-border); }
button:disabled { cursor:default; }

/*end forms*/


/*glightbox*/
.gbtn { box-shadow:none; -webkit-box-shadow:none; }

.center { margin-block:var(--2xs-xs); text-align: center; }




#contactForm, #product, .related, .actions, .form-row, span.product-remove, .woocommerce-checkout-review-order, .woocommerce-checkout-review-order-table, .cart_totals, .thumb-name-close, .woocommerce-billing-fields__field-wrapper, li.cart-product, .woocommerce-terms-and-conditions-wrapper, .woocommerce, .checkout, .checkout_coupon, .coupon, ul.cart, .woocommerce-cart-form, .woocommerce-order, .woocommerce-order-vouchers, .wc_payment_methods
{ display: grid; gap: var(--2xs-xs); }

#contactForm, .loop li, .coupon, .checkout_coupon, li.cart-product, .cart_totals, #customer_details, .your-order, ul.checkout li, .contact-status div, ul.cart li, .woocommerce-order-overview, .woocommerce-order .woocommerce-order-details, .woocommerce-order .woocommerce-customer-details, .woocommerce-order-downloads, .woocommerce-order-vouchers, .wc_payment_method  { background-color:var(--bg-light); border-radius: var(--rad); padding: var(--side); }
.checkout_coupon { padding-bottom: var(--btm-padding); }




figcaption { grid-row: 2; text-align: center; font-size: var(--fs-1); letter-spacing:0.02rem; grid-column: 1 / 7;  }
figure { margin-block:1rem; display: grid;  justify-content: center; gap: var(--2xs-xs); }
figure img { display:inline-block; background-color: var(--bg-light); outline-offset: -1px;
	outline: 1px solid var(--bg-light-border);
	border-radius: 3px;
	grid-row: 1;
  object-fit: contain;
  
  max-width: 60px;
  min-width: 40px;
  height: auto;
  aspect-ratio: 2 / 1;
	}

.screen-reader-text,  .woocommerce-checkout-review-order-table thead { display:none; }

/*product main section*/

.product section > header { display: flex; align-items: center; gap:1ch; position:relative; justify-content: flex-start; margin: 2cqi 0; }
.product section > header p {  font-family: var(--ff-accent); line-height:1rem;  }
.product section > header p:last-of-type { font-size:var(--fs02); font-weight: 600; }

.product header em { font-style: normal; color:var(--accent1); }
.product header .price { font-size:var(--fs05); font-weight:600; }
.product header .deposit { padding-right: calc(var(--l-xl) * 3); text-wrap-mode:nowrap;}
.product header del { line-height:1rem; }
.product header h2 { color:var(--accent2-dark); }
.product header h1 { line-height:1rem; font-size: var(--fs02); text-wrap-mode:nowrap  }

del { font-size: var(--fs-1); }
header.product-info { display: flex; justify-content: space-between; align-items: center; }

.variations tr { display: flex; flex-direction: row; gap: var(--2xs-xs); justify-content: center; align-items: baseline; }
.single-variation, .woocommerce-variation { display:flex; flex-direction: row; gap:var(--2xs-xs); justify-content: center; align-items: baseline; }

.woocommerce-table--order-details { text-align: right; }
.woocommerce-table--order-details td, .product-total { text-align: left; }
.woocommerce-order tr { display:flex; flex-direction: row; gap:var(--2xs-xs); justify-content: space-between; align-items: baseline; }
.woocommerce-order .order-note { max-width: 20ch; }
.woocommerce-form__label-for-checkbox { display:flex; flex-direction:row; align-items: center;  }
.woocommerce-form__input-checkbox { margin-inline-end:var(--2xs-xs); width: min-content; }
.woocommerce form .form-row .required { text-decoration: none; }
.woocommerce-privacy-policy-text { font-size: var(--fs-1); margin-block: var(--2xs-xs); text-align:center; }
.wc-item-meta { padding: 0; margin:0; list-style: none; }
.wc-item-meta li {display:flex; flex-direction:row; justify-content: space-between; }
.wc-item-meta li strong, .wc-item-meta li p { display:inline; }
.wc-variation-selection-needed {  }
.variations label, .tattoo-booking-date label { width:13ch; }
.variations tr { display: flex; flex-direction: row; gap: var(--2xs-xs); justify-content: left; align-items: baseline; }

#tattoo_date_visible { display:inline; cursor:pointer; }
.tattoo-booking-date {  }
.tattoo-booking-date label {   }
.tattoo-booking-date input, select#payment-type { width:17ch; }
.add-to-cart-btn { margin-top:var(--2xs-xs); }

.product header .price .woocommerce-Price-amount {display: block;}
.product header .price {
    background-image: url(https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/splat.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    /*transform: translate(20%, calc(var(--l-xl) * -1.5));*/
    z-index: 999;
    pointer-events: none;
    overflow: hidden;
    width: calc(var(--l-xl) * 4);
    height: calc(var(--l-xl) * 3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--txt-light);
    filter: drop-shadow(0 1px 10px rgba(0,0,0,0.5)); 
    position:absolute; 
    right:calc(var(--l-xl) * -0.8);
    bottom:calc(var(--l-xl) * -0.3);
    
    
}
.product header h1 { line-height:1rem; margin: 0 auto 0 0;}


.variations { margin-block:1rem; list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--2xs-xs); }
.variations li { display:flex; align-items: center; gap:var(--2xs-xs); 
    justify-content: center; }
    
    .variations li input, .variations li select { margin-left:calc(5ch + var(--2xs-xs)); }

.price { font-family:var(--ff-accent); font-size:var(--fs04); font-weight:600; }

option {color:var(--accent3); }
option.attached {color:var(--txt); }




main { container-type:inline-size; }

/*product loop - single product page*/


.loop picture { grid-column: 1 / -1; grid-row: 1; justify-self: center; border-radius:var(--rad-small); overflow:hidden;} 
.loop img { border-radius: var(--rad-small); height:auto; aspect-ratio: 1; display:block; object-fit:cover; transition: scale 0.5s ease-in-out; }
.loop a { grid-template-columns: 1fr max-content max-content; grid-template-rows: min-content; container-type:inline-size; position:relative; display: grid; row-gap:0; column-gap: .5ch; }
.loop a:hover img { scale:1.15; }
.loop h3 { line-height:1rem; grid-column: 1; grid-row: 2; align-self:anchor-center; margin: 0; color:var(--accent1); text-wrap:nowrap; text-overflow: ellipsis; width:100%; }
.loop em, .cart a em {
	background-image: url(https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/splat.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: center;
	transform: translate( -7cqi, -4cqi);
	position:absolute;
	text-transform: uppercase;
	font-style: normal;
	font-family:var(--ff-base);
	pointer-events: none;
	overflow: hidden;
	width: 26cqi;
	height: 20cqi;
	font-size: 7cqi;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--txt-light);
  z-index: 999; }
  
  .product header del + p + em {
	background-image: url(https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/splat.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: center;
	transform-origin: center;
	top:0;
    right: 0;
    transform: translate(5cqi, -105cqi);
	position:absolute;
	text-transform: uppercase;
	font-style: normal;
	font-family:var(--ff-base);
	pointer-events: none;
	overflow: hidden;
	width: 26cqi;
	height: 20cqi;
	font-size: 7cqi;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--txt-light);
  z-index: 999; }


.loop p { line-height:1rem; grid-column: 3; grid-row: 2; justify-self: end; align-self:anchor-center; margin: 0; text-wrap-mode:nowrap; color: var(--txt); font-weight:600; }
.loop del { line-height:1rem; grid-row: 2; grid-column: 2; justify-self: end; align-self:anchor-center; margin: 0; color: var(--txt); }









/*@container (inline-size < 768px) {
.loop em { width: 26cqi; height: 20cqi; }
}

@container (inline-size > 267px) {
.loop img { inline-size: max(100px, 50cqi); }
.loop-txt { text-align: center; }
.loop em { width: 18cqi; height: 12cqi; font-size: 4cqi; transform: translate( -8cqi, -5cqi); }
}

@container (inline-size < 267px) {
.loop-txt { line-height:1; flex-flow: row; justify-content: space-between; align-items: center; }

}*/


/*product loop - cart page*/

ul.cart-products { grid-template-columns: 1fr; }

.product-thumbnail img { border-radius: var(--rad-small); min-width:100px; height:auto; aspect-ratio: 1 / 1; }
.cart-product-details { display: flex; flex-flow: column; justify-content: space-between; }
.product-name-close { display: flex; flex-flow: row; justify-content: space-between; }
.row { display:block; width: 100%; }

.woocommerce-loop-product__title { font-size: var(--fs02); margin-block-start: calc(var(--2xs-xs) * -0.5); }
.variation { color:var(--txt); font-size:var(--fs00); text-transform: none; }
section .label { color:var(--txt); }
.cart-product-details { }
.cart-product-details .price { display:block; margin-block-end: var(--2xs-xs); }
.row span p { display:inline; }
.left span price { display:inline; }
.left { flex-shrink: 0; }
.row-price, .subtotal, .variation-BookingDate p, .variation-BookingDate { font-size: var(--fs01); font-weight: 600; }
.row-price .label, .subtotal .label { text-transform:uppercase; color:var(--accent1); }
.row .subtotal { display:inline; }
.row-price { display:flex; flex-direction:row; justify-content: space-between; gap: var(--2xs-xs); }
section .variation-IncludesNon-refundableDepositof, .variation-IncludesNon-refundableDepositof p { color:var(--txt); }
section .label.variation-BookingDate { text-transform:uppercase; color:var(--accent1); }

.woocommerce-variation-price .woocommerce-Price-amount { font-size: var(--l-xl); font-weight: 600; }

.note { color:var(--accent1); }
td.value { display:flex; flex-direction: row; align-items: center; gap: var(--2xs-xs); }
th.label { font-weight: 400; text-align: left; }



ul.cart, ul.checkout { list-style:none; padding:0; }
ul.woocommerce-order-overview { list-style:none; }
ul.cart li, ul.checkout li { grid-template-columns: 120px 1fr min-content min-content 24px; grid-template-rows: 1rem 1fr 1rem 1rem; 

grid-template-areas: 
    "image name sale price close"
    "image quantity subtotal . ."
    "image booking booking booking booking"
    "image deposit deposit deposit deposit";

container-type:inline-size; position:relative; align-items: start; display: grid; row-gap:var(--2xs-xs); line-height:1rem; }
ul.cart h2, ul.checkout h2 { margin:0; grid-area:name; align-self:start; line-height:1rem; }
ul.cart h3, ul.checkout h3 { margin:0; grid-area:quantity; align-self:start; line-height:1rem; }
ul.cart a:first-of-type {  grid-area:image; container-type:inline-size; margin-right:var(--2xs-xs); }

ul.cart a:last-of-type { grid-area:close; justify-self: right; margin-top: -8px; margin-right: -8px; }
ul.cart picture, ul.checkout picture { justify-self: center; border-radius:var(--rad-small); overflow:hidden;}
ul.checkout picture {  grid-area:image; margin-right:var(--2xs-xs); }
ul.cart picture img, ul.checkout picture img { border-radius:var(--rad-small); overflow:hidden;}
ul.cart a ~ strong:first-of-type, .price { grid-area:price; font-size:var(--fs01); font-family:var(--ff-accent); font-weight:600; justify-self:right; }
ul.cart dl { grid-area:booking; }
ul.cart del { grid-area:sale; margin-right:.5ch; }
ul.cart dl:first-of-type, ul.checkout dl:first-of-type { grid-area:booking; }
ul.cart dl:last-of-type,  ul.checkout dl:last-of-type { grid-area:deposit; }
section.quantity { grid-area:booking; display:flex; align-items:center; gap:var(--2xs-xs); }
ul.cart li p { grid-area:deposit; align-self:center; justify-self:start; }
.quantity input { line-height: 1rem; padding: 0.2rem; width:4ch; text-align: center; }

.product-quantity { grid-area:close; margin-left:0.5ch; }


ul.cart dl, ul.checkout dl, .your-order dl {
  display: grid;
  grid-template-columns: auto 1fr; /* two columns: dt then dd */
  column-gap: .5ch;
}

.your-order dd { font-weight:600; }
ul.cart dt,
ul.cart dd {
  margin: 0;
}

ul.cart dd { font-weight: 600; }


#clear_tattoo_date { text-align: left; }

.reset_variations, #clear_tattoo_date {
    font-family: var(--ff-accent);
    font-weight: 600;
    font-size:var(--fs00);
	color:var(--accent1);
	border-radius: var(--rad-small);
	padding:0;
	width: 5ch;
	line-height: 1rem;
	text-transform: none;
	text-align: auto;
	border: 0px solid transparent;
	background: inherit;
	-webkit-box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0);
	box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0);
	transition: visibility 0.3s ease-in;
	transition: opacity 0.3s ease-in;
}

/*swiper*/
swiper { -webkit-box-shadow: 0px 6px 20px -4px rgba(0, 0, 0, 0.77); box-shadow: 0px 6px 20px -4px rgba(0, 0, 0, 0.77); }
.swiper-wrapper { aspect-ratio:1/1; }
.swiper { max-width: 768px; width:100%; margin: 0 auto; overflow:hidden; }



.toggle { color: var(--accent1); border-bottom: 1px solid var(--bg-light-border); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; position: relative; cursor: pointer; padding: 1rem; font-weight: 600; user-select: none; line-height: 1.25; letter-spacing: 0.05rem; }
.toggle + dd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease-in; overflow:hidden; }
.active + dd { grid-template-rows: 1fr; }
.toggle + dd > div { overflow: hidden; padding: 0 1rem 0; transition: padding .3s ease-in; }
.active + dd > div { padding: 1rem 1rem 1rem; }
.toggle + dd * { opacity: 0; transition: opacity .2s ease-in; }
.active + dd * { opacity: 1; transition-delay: .1s; }

.toggle::after {
  transition: rotate .3s ease-in-out;
  display:inline-block; width:24px; height:24px; transform-origin:center;
  rotate: 90deg; content:""; background:url("https://artbyadamwhite.com/wp-content/themes/art-by-adam-white/images/chevron.svg") no-repeat center;
}
.active::after { rotate: 270deg; }
    


/*modal*/
.wc-modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: hsl(200 22% 8% / 0.8); display: flex; align-items: center; justify-content: center; }
.wc-modal-content { min-height:8rem; background: var(--bg-light); padding: var(--2xs-xs); width: min(100% - var(--margin-sides), 400px); border-radius: var(--rad); border:1px solid var(--bg-light-border); display:flex; flex-direction: row; justify-content: space-between; column-gap: var(--2xs-xs); -webkit-box-shadow: 0px 10px 30px 9px rgba(0,0,0,0.2),0px 4px 10px -3px rgba(0,0,0,0.5); box-shadow: 0px 10px 30px 9px rgba(0,0,0,0.2),0px 4px 10px -3px rgba(0,0,0,0.5); }
.wc-modal-message .wc-forward { display:block; margin-block-start: calc(var(--2xs-xs) * 1.4); }
.wc-modal-message { align-self:center; padding-block: var(--fs00);  }
.wc-modal-message ul { list-style: none; padding-inline-start:0; margin-block-start:0; }
.wc-modal-message li {  }
.wc-modal-left { box-sizing: border-box; display: block; border-radius: 50%; padding: 0.5em; width: 30px; height: 30px; border: 2px solid transparent; background-color: transparent; color: transparent; position: relative; min-width:30px; }
.wc-modal-close, a.remove, [role="alert"] button { box-sizing: border-box; display: block; border-radius: 50%; padding: 0.5em; width: 30px; height: 30px; border: 2px solid transparent; background-color: transparent; color: transparent; position: relative; cursor:pointer; min-width:30px; }
.wc-modal-close:hover, a.remove:hover, [role="alert"] button:hover { border: 2px solid transparent; background-color: var(--accent2-dark); color: transparent; }


.wc-modal-close, a.remove, [role="alert"] button {
    --_shadow-size: 0;
    --_shadow-color: var(--accent1-dark);
    
    
    box-shadow: 0 0 var(--_shadow-size) var(--_shadow-color);
    
    transition: outline-offset 145ms ease-in, box-shadow .5s ease-out; }

    

a.remove:hover:not(:active), [role="alert"] button:hover:not(:active) { --_shadow-size: 5em; }

[data-woo-notice="error"] { display:flex; flex-direction:row-reverse; justify-content:flex-end; }

.wc-modal-close::before, a.remove::before, [role="alert"] button::before { content: " "; position: absolute; display: block; background-color: white; width: 2px; left: 12px; top: 5px; bottom: 5px; transform: rotate(45deg); }
.wc-modal-close::after, a.remove::after, [role="alert"] button::after { content: " "; position: absolute; display: block; background-color: white; height: 2px; top:12px; left: 5px; right: 5px; transform: rotate(45deg); }
.return-to-shop .wc-backward { display:block; width:100%; margin-block-end:var(--2xs-xs); }


/*simple pages*/
.terms-and-conditions:is(h1,h2,h3,h4,h5,h6) { letter-spacing:0.08rem; margin-block-start:var(--fs00); margin-block-end:var(--3xs-2xs); }

.terms-and-conditions h2, .privacy-policy h2, .cookie-policy h2 { letter-spacing:0.08rem; margin-block-start:var(--fs00); font-size:var(--fs02); margin-block-end:var(--3xs-2xs); }
.terms-and-conditions h3, .privacy-policy h3, .cookie-policy h3 { letter-spacing:0.08rem; margin-block-start:var(--fs00); font-size:var(--fs01); margin-block-end:var(--3xs-2xs); }
.terms-and-conditions p, .privacy-policy p, .cookie-policy p { margin-block-end:var(--2xs-xs); }
.terms-and-conditions, .privacy-policy { display:flex; flex-direction: column; gap:var(--fs00); }

/*Cookie Banner*/
#uk-cookie-banner {position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999; }
#uk-cookie-banner .ukcc-panel { font-size:var(--fs-1); box-sizing: border-box; width: min(100%, 980px); margin: 0 auto; background: var(--bg); color: var(--txt); border-radius: var(--rad) var(--rad) 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.4); padding: calc(var(--2xs-xs) * 2); display: grid; grid-template-columns: 1fr auto; gap: var(--2xs-xs); align-items: center; }
#uk-cookie-banner .ukcc-text a { color: var(--accent1); text-decoration: underline; }
#uk-cookie-banner .ukcc-btns { display: flex; gap: var(--2xs-xs); flex-wrap: wrap; justify-content: flex-end; }
#uk-cookie-banner button { cursor: pointer; border-radius: var(--rad-small); border: none; width:auto; padding-inline:var(--2xs-xs); font-size:var(--fs-1); }
#uk-cookie-banner button.ukcc-primary { background: var(--accent3-dark); border-color: var(--accent3-dark-border); }
#uk-cookie-banner button.ukcc-danger { background: var(--accent1-dark); border-color: var(--accent1); }
#uk-cookie-banner button.ukcc-secondary { background: var(--bg-button); }

@media (max-width: 640px) {
  #uk-cookie-banner .ukcc-panel { grid-template-columns: 1fr; }
  #uk-cookie-banner .ukcc-btns { justify-content: stretch; }
  #uk-cookie-banner button { text-align: center; width: 100%; }
}

p, li, dt, dd, label, input, textarea, select { 
    
    font-family:"RobotoCondensed", sans-serif;
    font-weight: 300;
    
}

.loop p, .loop li { font-family: var(--ff-accent); padding-bottom:0; }
.loop a p { font-size: var(--fs01); }
 
.shop nav + a, .archive main > a { position:relative; display:flex; flex-direction: column; align-items:center; justify-content:flex-end; width:100%; border-radius:var(--rad); margin-bottom: var(--fs05); }
 
.shop nav + a img, .archive main > a img	{ aspect-ratio:unset; border-radius:var(--rad); margin-bottom:var(--2xs-xs); }
.shop nav + a::before, .archive main > a::before {  }
.shop nav + a p, .archive main > a p, .shop nav + a h2, .archive main > a h2 { margin:0; line-height:0.75; text-transform:uppercase; font-weight:600; font-family: var(--ff-accent);font-size: calc(100cqi / var(--size)); }
.shop nav + a h2:first-of-type, .archive main > a h2:first-of-type { color: var(--txt); }
.shop nav + a:hover p:first-of-type, .archive main > a:hover p:first-of-type { color: var(--accent1-dark); }



@container (inline-size < 400px) {

	.loop h3, .loop a p { font-size: 10cqi; align-self:anchor-center; line-height:1.6; }

}

@container (inline-size < 470px) {

	ul.cart li, ul.checkout li { grid-template-columns: 80px 1fr min-content min-content 24px; grid-auto-rows: auto; 

grid-template-areas: 
    "image name sale price close"
    "image quantity quantity quantity quantity "
    "subtotal subtotal subtotal subtotal subtotal"
    "booking booking booking booking booking"
    "deposit deposit deposit deposit deposit";

container-type:inline-size; position:relative; align-items: start; display: grid; row-gap:var(--2xs-xs); line-height:1rem; }
ul.cart li p { grid-area:deposit; align-self:center; justify-self:start; }
ul.cart h2, ul.checkout h2 { font-size:clamp(1rem, 7cqi, var(--fs02)); } 


    
}

.loop { grid-template-columns: repeat(2, minmax(100px, 1fr)); display: grid; gap: var(--2xs-xs); list-style:none;  padding-inline-start: 0; }


@container (inline-size > 500px) {

	.loop { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
	.loop img { inline-size: 100%; block-size:auto; }
	.product .loop li:nth-child(4) { display:none; }
	.cart .loop li:nth-child(4) { display:none; }



}


.coupon { display:flex; }
[name="apply_coupon"], [name="update_cart"]  { font-size: var(--fs00); font-weight:400; padding-inline:2ch; }
[name="update_cart"] { scale:1; border-color: var(--bg-light-border); background-color: var(--bg-light); }
[name="update_cart"]:hover:not(:disabled) { background-color: var(--bg-light-border); }
[name="update_cart"]:disabled { scale:0; background-colour:transparent; color:hsl(0deg 0% 100% / 10%);}
[name="update_cart"] { transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;}
.woocommerce h2, .woocommerce h3 { margin:0; }
.woocommerce-notices-wrapper ul { list-style:none; }
.woocommerce-notice  {  border-radius: var(--rad); padding: 0.5rem var(--side); }
.woocommerce-table--order-details td { font-weight:600; }
.woocommerce-table--order-details tfoot { margin-top:2rem; }
.woocommerce-info, .woocommerce-notice, .woocommerce-message { transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out; text-align:center; outline:none; border-radius:var(--rad-small); background-color: transparent;   }
.woocommerce-info:focus, .woocommerce-notice:focus, .woocommerce-message:focus {  outline:none; border-radius:var(--rad-small); background-color: var(--accent3-dark); color:white;  }
.cart label { display:none; }
.cart > .quantity > label, ul.cart > li .quantity > label { display:inline; }
.woocommerce-notices-wrapper {  }

label[for="woocommerce-orderby-1"] { font-size:0.8rem; text-wrap-mode:nowrap; padding-right:0.5ch; }
p.result-count { display:none; }
select[name="orderby"] { padding:0; padding-inline:1ch; font-size:0.8rem; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;       /* Make them always visible */
  -webkit-appearance: inner-spin-button;
}


    .shop h1 {  }
 .result-count, .woocommerce-ordering { display: inline-flex; text-align: center; align-items: baseline; }

 main header { display:flex; align-items:center; justify-content:space-between; margin-block-end:var(--2xs-xs); }
 .archive main header, .shop main header { display:grid; grid-template-areas: "title title" "back sort"; align-items:center; }
  .archive main header h1, .shop main header h1 { grid-area: title; }
    .archive main header div, .shop main header div { grid-area: sort; justify-self:right; }
     
         .archive main header a:last-of-type, .shop main header a:last-of-type { grid-area: back;  }
 padding-inline: var(--3xs-2xs); }


.woocommerce-table--order-downloads tr { justify-content: flex-start; } 
.preview-container { position: relative; display: inline-block; }
.preview-image { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: .5rem; display: block; }
.preview-meta { position: absolute; left:0; bottom:0; background: var(--accent3-dark); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 0 4px 0 4px; }
.remove-image { box-sizing: border-box; display: block; border-radius: 50%; padding: 0.5em; width: 30px; height: 30px; border: 2px solid transparent;
  background-color: var(--accent3-dark); background: var(--accent3-dark); color: transparent; position: absolute; top: -4px; right: -4px;
  cursor:pointer; min-width:30px;
  -webkit-box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0); box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0);
transition: background 300ms ease-in;
-webkit-transition: background-image 300ms ease-in;
-ms-transition: background 300ms ease-in;
-o-transition: background 300ms ease-in;
-ms-transition: background 300ms ease-in;

}
.remove-image:hover {
  border: 2px solid transparent;
  background-color: var(--accent3-dark);
  background: var(--accent3-dark);
  color: transparent;
}

.remove-image::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  width: 2px;
  left: 12px;
  top: 5px;
  bottom: 5px;
  transform: rotate(45deg);
}
.remove-image::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  height: 2px;
  top:12px;
  left: 5px;
  right: 5px;
  transform: rotate(45deg);
}

.wc-item-meta-label { padding-right:1ch; }
.download-file .button { cursor: pointer;
font-family: "Saira Condensed";
font-size: 1rem;
font-weight: 600;
padding-inline:var(--2xs-xs);
border-radius: var(--rad);
text-decoration:underline;
display: block;
width: 100%;
line-height: inherit;
outline: none;
text-transform: uppercase;
text-align: center;
background-color: transparent;
color: var(--txt-light);
border: none;
transition: background-color 300ms ease-in-out;
-webkit-transition: background-color 300ms ease-in-out;
-ms-transition: background-color 300ms ease-in-out;
-o-transition: background-color 300ms ease-in-out;
-ms-transition: background-color 300ms ease-in-out;
 }
 
 input[type="select"]::picker-icon { color:var(--accent3); }
input[type="file"]::file-selector-button {
  font-size: var(--fs00);
  font-family: var(--ff-base);
  color:var(--txt);
  
  padding: 0.2em 0.4em;
  border-radius: var(--rad-small);
  background-color: var(--accent3-dark);
  transition: 1s;
  cursor: pointer;
}

input[type="file"]::-ms-browse:hover, input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::file-selector-button:hover {
font-family: var(--ff-base); background-color: var(--accent3);  cursor: pointer;}

/*contact specific*/
label:has(+ input:required):after, label:has(+ select:required):after { content: ' *'; color: var(--accent1); }
input[type="file"] { color: transparent; }
input[type="file"]::-webkit-file-upload-button { color: var(--txt); /* keep the button label visible */ }

.hidden { display: none; }
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

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



#preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:var(--2xs-xs); }
#preview > * { min-width: 0; }

.preview-container { position: relative; display: inline-block; }
.preview-image { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: .5rem; display: block; }
.preview-meta { position: absolute; left:0; bottom:0; background: var(--accent3-dark); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 0 4px 0 4px; }
.remove-image { box-sizing: border-box; display: block; border-radius: 50%; padding: 0.5em; width: 30px; height: 30px; border: 2px solid transparent;
  background-color: var(--accent3-dark); background: var(--accent3-dark); color: transparent; position: absolute; top: -4px; right: -4px;
  cursor:pointer; min-width:30px;
  -webkit-box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0); box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0);
transition: background 300ms ease-in;
-webkit-transition: background-image 300ms ease-in;
-ms-transition: background 300ms ease-in;
-o-transition: background 300ms ease-in;
-ms-transition: background 300ms ease-in;

}
.remove-image:hover {
  border: 2px solid transparent;
  background-color: var(--accent3-dark);
  background: var(--accent3-dark);
  color: transparent;
}

.remove-image::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  width: 2px;
  left: 12px;
  top: 5px;
  bottom: 5px;
  transform: rotate(45deg);
}
.remove-image::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  height: 2px;
  top:12px;
  left: 5px;
  right: 5px;
  transform: rotate(45deg);
}


#fileErrors { margin-top: .5rem; color: var(--accent1); }
#fileErrors div, #upload-hint { display:flex; align-items: center; justify-content: center; gap:var(--2xs-xs); }
#fileErrors svg { fill:var(--accent1-dark); }
#upload-hint svg { fill:var(--txt); }
#upload-hint { margin-block: calc(var(--fs00) * 1); }
.files { pointer-events: none; display:flex; align-items: center; justify-content: center; gap:var(--2xs-xs); }

.hidden { display: none; }

 

#contactStatus {
    min-height: 2.5em; /* or whatever matches your tallest message */
    display: flex;
    align-items: center;
}

#contactStatus > div {display: none; }
#contactStatus > div:not(.hidden) { display: block; }
#contactStatus > div { opacity: 0; transition: opacity 0.3s ease; }
#contactStatus > div:not(.hidden) { opacity: 1; }



/* Hide all hints by default */
.hint { display: none; opacity: 0 ; margin: 0.5rem 0; font-size: 0.9rem; color: #555; transition: opacity 0.3s ease; }

/* Show hints conditionally using :has() */
#inquiry_type:has(option[value="New Tattoo Enquiry"]:checked) ~ .hint { display: block; opacity: 1 ; }
#inquiry_type:has(option[value="Continuing Booking"]:checked) ~ .coverup-hint { display: block; opacity: 1 ; }
#inquiry_type:has(option[value="Other"]:checked) ~ .flash-hint { display: block; opacity: 1 ; }

#successMessage { color: var(--accent3); margin-top: 10px; }
#errorMessage { color: var(--accent1); margin-top: 10px; }
#sendingMessage { color: var(--txt); margin-top: 10px; }


input[type="select"]::picker-icon { color:var(--accent3); }
input[type="file"]::file-selector-button {
  font-size: inherit;
  font-family: inherit;
  color: var(--txt);
  border: none;
  padding: 0.2em 0.4em;
  border-radius: var(--rad-small);
  background-color: var(--accent3-dark);
  transition: 1s;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::file-selector-button:hover, input[type="file"]::-ms-browse:hover {
	font-size: inherit;
	color: var(--txt);
	padding: 0.2em 0.4em;
	border-radius: var(--rad-small);
	font-family: inherit;
  background-color: var(--accent3);
  border: none;
  cursor: pointer;
}

.shop figure, .archive figure { padding-block:3rem; }
.archive h1, .contact h1, .page h1 { margin:  0.5rem 0 1cqi; }
.swiper { border-radius: var(--rad); }
.add-to-cart { margin-top:var(--2xs-xs); }
aside[role="alert"] { display:grid; 
    gap: var(--3xs-2xs);
    width: 100%;
    grid-template-areas:
        "notice close"
        "basket basket";
    justify-content: revert; margin-bottom:var(--xs); }
    
aside[role="alert"] button { grid-area:close; justify-self:right; margin-right:-8px; } 
aside[role="alert"] a { grid-area:basket; }
.contact h1 + p { padding-bottom:var(--2xs-xs); }
.shop .loop a p { display:none; }

@media (min-width: 768px) {
    
    header nav {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	inset: 0;
	height: unset;
	width: 100%;
	background: transparent;
	box-shadow:none;
	transform: translateX(0%);
	transition: transform 0.3s ease-in-out;
	z-index: 1000;
	padding: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


#menu > a { display:none; padding:0; }
#menu a { padding:0; font-family:var(--ff-accent); }
	 .menu-wrapper { background: transparent; transform: none; position: static; height: auto; width: auto; box-shadow: none; padding: 0; }
	 .menu { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: var(--2xs-xs); }
	 body > header label { display: none;}
	 .menu li { }
	 .menu-footer { display:none; }
	 .menu li > a:not(.button) { border:none; }
	 
.basket { display:none; }

 }
 .basket { width:var(--fs02); height:var(--fs02); justify-self:right; margin-right: var(--2xs-xs); }
 
.checkout .woocommerce-terms-and-conditions-wrapper { display: unset; }
.place-order { width:100%; }
fieldset { border:none; }
.wc_payment_methods, .payment_methods { list-style: none; padding:0; }
.payment_methods img { width:unset; }
.payment_methods input[type="radio"], .payment_methods input[type="checkbox"] { width:unset; margin-right:1ch; }
.payment_methods li > label { font-weight: 400; text-transform:uppercase; }
.RedirectText { font-size:var(--fs01); }