/*
Theme Name: Bonitos Pottery
Description:  Twenty Twenty-Four Child Theme customized for Bonitos Pottery
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Template: twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.0
*/



/* ---------------------------------------------------------------------------------------------
   RESETS
--------------------------------------------------------------------------------------------- */
html,
html:focus-within{
    scroll-behavior: smooth;
    scroll-padding-top: 2ex;
}
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 0vw;
}
main,
footer{
    margin-block-start: 0 !important;
}
.wp-block-columns {
    flex-wrap: wrap !important;
}
@media screen and (min-width: 64.063rem) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }
}
@media screen and (max-width: 64rem) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
        flex-basis: 100% !important;
    }
}


/*--------------------------------------------------------------
GENERAL
--------------------------------------------------------------*/
h1, h2 {
    text-wrap: balance;
}
strong {
    font-weight: 700;
}
p{
    text-wrap: pretty;
}
a,
a:visited{
    text-decoration-thickness: calc(1ch / 8) !important;
    text-underline-offset: calc(1ch / 3);
    transition: all 0.3s ease-in-out;
    touch-action: manipulation;
}
:where(h1,h2,h3) a,
:where(h1,h2,h3) a:visited{
   text-underline-offset: calc(1ch / 5);
}
a:hover,
a:active{
    text-decoration: none;
    cursor: pointer;
}
:focus:not(:focus-visible){
    outline-color: transparent;
    box-shadow: none;
}
:focus-visible,
a:not(.button):focus-visible{
    outline: 1px solid var(--wp--preset--color--sunflower);
    outline-offset: 1px;
    transition: none;
}
stong,
b{
    font-weight: 600;
}
em{
    font-weight: inherit;
}
.wp-block-list li + li{
    margin-block-start: var(--wp--preset--spacing--20);
}
.has-small-font-size,
.has-tiny-font-size{
    font-weight: 400;
}
.wp-block-buttons .wp-block-group {
    margin-right: 0 !important;
}
.wp-block-image img{
    width: 100%;
    height: 100%;
}
:where(.wp-site-blocks *:focus){
    outline-width:2px;
    outline-style:solid
}

@media screen and (max-width: 48rem) {
    :where(h1, h2){
        word-break: break-word;
    }
    :where(h1, h2) br{
        display: none;
    }
}


/* ---------------------------------------------------------------------------------------------
  ACCESSIBILITY
--------------------------------------------------------------------------------------------- */
/*Stopping all animations for user has the reduced motion preference activated*/
@media screen and (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* ---------------------------------------------------------------------------------------------
  HELPERS
--------------------------------------------------------------------------------------------- */
@media screen and (min-width: 75.063em) {
    .show-large{
        display: inherit !important;
    }
    .show-small{
        display: none !important;
    }
}
@media screen and (max-width: 75em) {
    .show-large{
        display: none !important;
    }
    .show-small{
        display: inherit !important;
    }
}
.hidden {
    display: none !important;
}
.inline-list{
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 0 var(--break-m);
}
.inline-list li{
    list-style-type: none;
    margin-block-start: 0;
}
.no-bullets{
    list-style: none
}


/* ---------------------------------------------------------------------------------------------
  FLOW & SPACING
--------------------------------------------------------------------------------------------- */
:root :where(.is-layout-flow, .is-layout-constrained) > section.has-background{
    padding-top: var(--wp--preset--spacing--90);
    padding-bottom: var(--wp--preset--spacing--90);
}
:root :where(.is-layout-flow, .is-layout-constrained) > section.has-background.heroine{
    padding-top: calc(var(--wp--preset--spacing--90) * 2);
}
:root :where(.is-layout-flow, .is-layout-constrained) > section + section{
    margin-block-start: 0;
}
:root :where(.is-layout-flow, .is-layout-constrained) > section.has-background + section.has-background.below-heroine{
    padding-top: 0;
}
.flow{
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
}
.flow-top{
    padding-top: var(--wp--preset--spacing--50);
}
.flow-bottom{
    padding-bottom: var(--wp--preset--spacing--50);
}
.half-flow-top{
    padding-top: var(--wp--preset--spacing--40);
}
.half-flow-bottom{
    padding-bottom: var(--wp--preset--spacing--40);
}
.entry-content :wuere(p, ul) + h3{
    margin-block-start: var(--wp--preset--spacing--50);
}

@media screen and (max-width: 64em) {
    :root :where(.is-layout-flow, .is-layout-constrained) > section.has-background{
        padding-top: var(--wp--preset--spacing--70);
        padding-bottom: var(--wp--preset--spacing--70);
    }
    :root :where(.is-layout-flow, .is-layout-constrained) > section.has-background.heroine{
        padding-top: calc(var(--wp--preset--spacing--80) * 2);
    }
}


/* ---------------------------------------------------------------------------------------------
  GRIDS & COLUMNS
--------------------------------------------------------------------------------------------- */
.grid-2col,
.grid-3col,
.grid-4col{
    row-gap: var(--wp--preset--spacing--70);
}

@media screen and (min-width: 64.063em) {
    .grid-3col{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-4col{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media screen and (max-width: 64em) {
    .grid-2col,
    .grid-3col{
        grid-template-columns: 1fr;
    }
    .grid-4col{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 48em) {
    .grid-4col{
        grid-template-columns: 1fr;
    }
}



/* ---------------------------------------------------------------------------------------------
  HEADER
--------------------------------------------------------------------------------------------- */
header{
    position: absolute;
    inset: 0;
    height: fit-content;
    z-index: 100;
}



/* ---------------------------------------------------------------------------------------------
  MAIN MENU RESPONSIVE
--------------------------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-icon{
    position: absolute;
    right: var(--wp--preset--spacing--30);
}
.wp-block-navigation .wp-block-navigation-item__content{
    border-bottom: 1.5px solid var(--wp--preset--color--transparent);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.wp-block-navigation .has-child .wp-block-navigation-item__content{
    padding-right: var(--wp--preset--spacing--50);
}
.wp-block-navigation .wp-block-navigation-item__content:focus{
    border: none;
    outline: none;
    border-bottom: 1.5px solid var(--wp--preset--color--base);
}
.wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible),
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content{
    border-color: var(--wp--preset--color--base);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{
    padding: calc(var(--wp--preset--spacing--20) / 2) var(--wp--preset--spacing--30);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible),
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content{
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--transparent);
}
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container{
    left: 0;
    right: initial;
    padding-top: var(--wp--preset--spacing--30);
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
    background-color: transparent;
    border: none;
}

body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
}
.show-responsive-menu{
    display: block;
}


@media screen and (min-width: 75.063em) {
    body .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
    }
    .show-responsive-menu{
        display: none;
    }
}

@media screen and (max-width: 75em) {
    .wp-block-navigation .wp-block-navigation-item__content{
        font-size: var(--wp--preset--font-size--x-large);
    }
}



/* ---------------------------------------------------------------------------------------------
  BUTTONS
--------------------------------------------------------------------------------------------- */
:root :where(.wp-block-button.is-style-outline .wp-block-button__link){
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease-in-out;
}



/* ---------------------------------------------------------------------------------------------
  HEADLINES
--------------------------------------------------------------------------------------------- */
.headline{
    padding-bottom: var(--wp--preset--spacing--60);
}
.headline h2 + h3,
.headline-inner h2 + h3{
    margin-block-start: var(--wp--preset--spacing--20);
}
.main-headline h2 + h1{
    margin-block-start: var(--wp--preset--spacing--10);
}


/* ---------------------------------------------------------------------------------------------
  TEXT IN COLUMNS
--------------------------------------------------------------------------------------------- */
figure + .text-in-columns{
    margin-block-start: var(--wp--preset--spacing--80);
}

@media screen and (min-width: 64.063em) {
    .text-in-columns{
        column-count: 2;
        column-gap: var(--wp--preset--spacing--80);
    }
}


/* ---------------------------------------------------------------------------------------------
  REVIEWS
--------------------------------------------------------------------------------------------- */
h2 + .grid-reviews{
    margin-block-start: var(--wp--preset--spacing--60);
}
.review .avatar img{
    max-width: 100px;
    border-radius: 100vw;
}
.review .starts img{
    max-width: 28px;
}



/* ---------------------------------------------------------------------------------------------
   LOOP PRODUCTS
--------------------------------------------------------------------------------------------- */
.loop-products .products-block-post-template{
    gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

.loop-products .wc-block-components-product-image img{
    border-radius: var(--wp--preset--spacing--50);
}



/* ---------------------------------------------------------------------------------------------
   SINGLE PRODUCTS
--------------------------------------------------------------------------------------------- */
:where(.wp-site-blocks) > .woocommerce.product{
    margin-block-start: 0;
}
:where(.wc-block-product-gallery-large-image) .wc-block-components-product-image.wc-block-components-product-image.wc-block-components-product-image--aspect-ratio-auto img{
    object-fit: cover !important;
}
.wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs{
    display: none
}
.woocommerce img,
.woocommerce-page img{
    border-radius: var(--wp--preset--spacing--50);
}
.wc-block-product-gallery-thumbnails__thumbnail img{
    border-radius: var(--wp--preset--spacing--40);
}
.wc-block-components-product-image a{
    border-radius: var(--wp--preset--spacing--50);
    overflow: clip;
}
.wp-block-woocommerce-product-collection h2.wp-block-heading{
    font-size: var(--wp--preset--font-size--large) !important;
}
.wc-block-mini-cart__badge{
    color: var(--wp--preset--color--contrast) !important;
    background-color:  var(--wp--preset--color--base) !important;
}



/* ---------------------------------------------------------------------------------------------
  FORM
--------------------------------------------------------------------------------------------- */
.form-wrapper{
    display: flex;
    gap: var(--wp--preset--spacing--60);
}
.form-wrapper + .form-wrapper{
    margin-block-start: var(--wp--preset--spacing--60);
}
.form-wrapper .col{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
}
.form-wrapper .item {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}
.form-wrapper label{
    width: 100%;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
}
.form-wrapper input,
.form-wrapper textarea{
    width: calc(100% - calc(var(--wp--preset--spacing--60) * 2));
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    border: 2px solid var(--wp--preset--color--base);
    border-radius: var(--wp--preset--spacing--60);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.form-wrapper textarea{
    line-height: 1.4;
    padding: var(--wp--preset--spacing--50);
}
.form-wrapper input[type="submit"]{
    max-width: max-content;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--base);
    margin-left: 0;
    margin-block-start: var(--wp--preset--spacing--50);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.form-wrapper input[type="submit"]:is(:hover, :focus-visible){
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--sunflower);
    border-color: var(--wp--preset--color--base);
}
.form-wrapper input[type="checkbox"]{
    width: auto;
}
.form-wrapper .legal .wpcf7-list-item{
    width: 100%;
    margin-left: 0;
    margin-block-start: var(--wp--preset--spacing--40);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}




/* ---------------------------------------------------------------------------------------------
   COOKIES
--------------------------------------------------------------------------------------------- */
#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode {
    max-width: var(--wp--style--global--content-size);
    text-justify: initial;
    font-size: 400;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
}
#cmplz-document p,
#cmplz-document li,
#cmplz-document td{
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    margin-block-start: var(--wp--preset--spacing--40);
    margin-block-end: 0;
}

#cmplz-document h2,
#cmplz-document h3{
    font-family: var(--wp--preset--font-family--subheading);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase !important;
    text-align: left;
    margin-block-start: var(--wp--preset--spacing--50);
    margin-block-end: 0;
    padding-bottom: 0;
    text-transform: initial;
}
#cmplz-document h3{
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    margin-block-start: var(--wp--preset--spacing--40);
    text-transform: inherit;
}
#cmplz-document .cmplz-service-header h3{
    font-weight: 600;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
}

#cmplz-cookies-overview,
.cmplz-categories{
    margin-block: var(--wp--preset--spacing--50);
}

#cmplz-cookies-overview .cmplz-dropdown summary,
#cmplz-document .cmplz-dropdown summary,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header{
   background-color: rgba(239,239,239,0) !important;
}
#cmplz-manage-consent .cmplz-manage-consent{
   background: rgba(255,255,255,0.15) !important;
}
#cmplz-manage-consent .cmplz-manage-consent:hover{
   background: rgba(255,255,255,0.8) !important;
}