/*
Theme Name: Happy Table Bingo
Description: A playful, responsive paper-collage storefront for printable bingo. Built for WooCommerce.
Version: 1.0.0
Text Domain: happy-table-bingo
*/
/* Shared layout, typography and native WooCommerce foundations. */
.site-header::before{content:'';position:absolute;inset-block:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(255,255,255,.75);z-index:-1;pointer-events:none}
:root{--cream:#faf6e9;--ink:#302019;--red:#df3821;--yellow:#f8d477;--blue:#5b9fc4;--sage:#dce2c9;--peach:#f5d5bc;--sky:#d1e6ed;--serif:Georgia,'Times New Roman',serif;--sans:'Trebuchet MS',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.4;background-image:url('assets/grain.svg?v=2')}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #255f83;outline-offset:5px}
button{cursor:pointer}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:900;letter-spacing:-.045em;line-height:1.02}
h2{font-size:clamp(42px,5.6vw,66px)}
h3{font-size:27px;letter-spacing:-.035em}
.wrap{width:min(1120px,90%);margin-inline:auto}
.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:2}
.brand{width:220px;display:block}
.brand img{display:block;width:220px;height:auto}
.site-header nav{display:flex;gap:44px;align-items:center;margin-left:auto;margin-right:130px;font-size:15px;font-weight:bold}
.site-header nav button,.site-footer nav button{border:0;background:none;padding:0}
.site-header nav a:hover,.site-header nav button:hover,.site-footer nav a:hover,.site-footer nav button:hover{text-decoration:underline;text-underline-offset:5px}
.cart-link{position:relative;width:31px;flex:none}
.cart-link svg{display:block;width:31px}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--red);color:white;font-size:11px;border-radius:50%;min-width:18px;text-align:center}
.skip-link{position:fixed;left:15px;top:-100px;padding:12px;background:var(--ink);color:white;z-index:99}
.skip-link:focus{top:15px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:23px;padding:11px 26px;border-radius:40px;font-weight:bold;line-height:1.2;font-size:17px;border:1px solid #ffffff38;box-shadow:0 3px 8px #65402008;transition:transform .18s,box-shadow .18s}
.button:hover{transform:translateY(-3px);box-shadow:0 7px 14px #65402020}
.button span{font-size:26px;line-height:1}
.red{background:var(--red);color:white}
.cream{background:var(--cream);color:var(--ink)}
.doodle{font-family:'Comic Sans MS','Bradley Hand',cursive;font-style:italic;font-weight:400;line-height:1.1}
.torn{position:relative;background-image:url('assets/grain.svg?v=2');isolation:isolate}
.torn:before,.torn:after{content:'';position:absolute;left:0;right:0;height:22px;background-color:inherit;background-image:url('assets/grain.svg?v=2');mask:url('assets/torn-edge.svg') 0 0/350px 22px repeat-x;z-index:-1}
.torn:before{top:-21px}
.torn:after{bottom:-21px;transform:rotate(180deg)}
.yellow{background-color:var(--yellow)}
.placeholder-label{position:absolute;bottom:0;font-size:8px;letter-spacing:1.7px;color:#6c675e}
.blue{background-color:var(--blue);color:#fff9ed}
.heading-rays{color:#fac453;font:80px/.4 var(--sans);display:inline-block;transform:rotate(20deg);margin-left:5px}
.round-arrow{width:36px;height:36px;background:var(--cream);border-radius:50%;display:grid;place-items:center;font-size:24px;position:absolute;bottom:20px;right:14px;box-shadow:0 2px 5px #48351d10}
.site-footer{background:#33231b;color:var(--cream);padding:65px 0 40px;background-image:url('assets/grain.svg?v=2')}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer-brand{font-family:var(--serif);font-size:26px;font-weight:bold;letter-spacing:-1px}
.footer-brand span{font:700 11px var(--sans);color:#fbd374;letter-spacing:3px;display:block;margin-top:1px}
.site-footer p{font-size:13px;margin-top:8px}
.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:13px}
.site-footer .footer-note{font-size:21px;position:relative;transform:rotate(-8deg)}
.footer-note>span{position:absolute;top:-5px;font:50px var(--serif)}
.faq-dialog{border:0;border-radius:12px;background:var(--cream) url('assets/grain.svg?v=2');color:var(--ink);padding:40px;width:min(600px,90vw);max-height:85vh;box-shadow:0 20px 80px #21130b60}
.faq-dialog::backdrop{background:#23180fb3;backdrop-filter:blur(4px)}
.faq-dialog h2{font-size:42px;margin-bottom:22px}
.dialog-close{position:absolute;top:12px;right:18px;border:0;background:none;font-size:32px}
.faq-dialog details{border-top:1px solid #30201925;padding:15px 0}
.faq-dialog summary{cursor:pointer;font-weight:bold}
.faq-dialog details p{margin-top:10px;line-height:1.55}
.content-main,.store-main{min-height:55vh;padding-top:40px;padding-bottom:70px}
.content-main h1,.store-main h1{font-size:54px;margin-bottom:25px}
.content-main p{margin-bottom:20px}
:is(main.woocommerce,main .woocommerce){width:min(1120px,90%);margin:30px auto 60px;min-height:50vh}
:is(main.woocommerce,main .woocommerce) :is(main.woocommerce,main .woocommerce){width:100%;margin:0}
.woocommerce-products-header,.woocommerce-breadcrumb,.woocommerce-result-count{margin-bottom:20px}
.woocommerce-ordering{margin-bottom:25px}
:is(main.woocommerce,main .woocommerce) ul.products{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
:is(main.woocommerce,main .woocommerce) ul.products li{background:#fffaf0;border-radius:10px;padding:20px}
:is(main.woocommerce,main .woocommerce) ul.products h2{font-size:25px;margin:15px 0}
:is(main.woocommerce,main .woocommerce) .button,.wc-block-components-button{background:var(--red);color:white;border:none}
.woocommerce-info,.woocommerce-message{padding:20px;background:#e3ecdf;border-radius:7px;margin:20px 0}
:is(main.woocommerce,main .woocommerce) form{line-height:1.7}
:is(main.woocommerce,main .woocommerce) input:not([type=checkbox]):not([type=radio]),:is(main.woocommerce,main .woocommerce) textarea,:is(main.woocommerce,main .woocommerce) select{padding:10px;border:1px solid #bcad95;border-radius:5px;background:#fffaf3;max-width:100%}
:is(main.woocommerce,main .woocommerce) form.login{max-width:550px}
:is(main.woocommerce,main .woocommerce) label{display:block}
:is(main.woocommerce,main .woocommerce) button{margin-top:15px}
:is(main.woocommerce,main .woocommerce) table{width:100%;border-collapse:collapse}
:is(main.woocommerce,main .woocommerce) td,:is(main.woocommerce,main .woocommerce) th{padding:14px;text-align:left;border-bottom:1px solid #30201925}
:is(main.woocommerce,main .woocommerce) .product .summary h1{font-size:44px}
@media(max-width:1050px){.site-header nav{margin-right:60px;gap:30px}}
@media(max-width:1050px){.button{font-size:16px;padding:10px 23px}}
@media(max-width:760px){.wrap{width:90%}}
@media(max-width:760px){.site-header{height:88px;gap:15px}}
@media(max-width:760px){.brand,.brand img{width:165px}}
@media(max-width:760px){.site-header nav{margin:0 0 0 auto;gap:17px;font-size:12px}}
@media(max-width:760px){.cart-link,.cart-link svg{width:26px}}
@media(max-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr;gap:28px}}
@media(max-width:760px){.footer-note{max-width:220px}}
@media(max-width:760px){.site-footer{padding-top:58px}}
@media(max-width:760px){:is(main.woocommerce,main .woocommerce) ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.content-main h1{font-size:40px}}
@media(max-width:420px){.site-header{flex-wrap:wrap;height:114px;gap:0}}
@media(max-width:420px){.brand{width:160px}}
@media(max-width:420px){.site-header nav{order:3;width:100%;justify-content:center;gap:40px;padding-bottom:12px;font-size:14px}}
@media(max-width:420px){.placeholder-label{font-size:6px;letter-spacing:1px}}
@media(max-width:420px){.heading-rays{font-size:60px}}
@media(max-width:420px){.footer-grid{gap:25px 20px}}
@media(max-width:420px){.footer-brand{font-size:24px}}
@media(max-width:420px){.faq-dialog{padding:35px 23px}}
@media(max-width:420px){.faq-dialog h2{font-size:36px}}
.button{white-space:nowrap;flex-shrink:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
.site-footer .footer-note{padding-left:50px}
.footer-note>span{left:0}
@media(max-width:420px){.heading-rays{display:none}}
@media(max-width:420px){.site-footer .footer-note{font-size:18px;padding-left:40px}}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
[hidden]{display:none!important}
.post-type-archive-product .site-header nav>a:first-child,.tax-product_cat .site-header nav>a:first-child,.tax-product_tag .site-header nav>a:first-child{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:12px}
#bingo-delete-confirm-help{display:block;font-size:13px;line-height:1.5;margin-top:8px}
.cart-count[hidden]{display:none}

/* Shared design foundation: quiet surfaces, useful labels, and consistent controls. */
:root{--paper:#fffdf6;--line:#dcd1bf;--muted:#6b5848;--panel-radius:16px 10px 18px 12px;--field-radius:9px;--paper-shadow:0 5px 18px #49331c0b;--section-space:clamp(40px,5vw,68px)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #255f83;outline-offset:3px}
.button{min-height:46px;padding:12px 25px;white-space:normal;text-align:center}
.button:hover{transform:translateY(-2px);box-shadow:var(--paper-shadow)}
.button>[aria-hidden=true]{transition:transform .18s}
.button:hover>[aria-hidden=true]{transform:translateX(3px)}
.art-style-badge{display:inline-block;justify-self:start;align-self:start;width:fit-content;max-width:100%;padding:5px 10px;border:1px solid #30201920;border-radius:20px;background:#fffdf6c9;color:var(--ink);font:700 11px/1.25 var(--sans);letter-spacing:.7px;text-transform:uppercase;white-space:normal}
.site-header nav{margin-right:clamp(16px,3vw,44px);gap:clamp(18px,2.5vw,32px)}
.site-header nav a,.site-header nav button{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.site-header nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:7px;text-decoration-thickness:2px}
.footer-brand{display:block;width:190px;max-width:100%}
.footer-brand img{display:block;width:100%;height:auto;filter:brightness(0) invert(1) sepia(.16);opacity:.96}
.site-footer nav{gap:6px}
.site-footer nav a,.site-footer nav button{min-height:28px;display:inline-flex;align-items:center;text-align:left}
.site-footer p{line-height:1.55}
.theme-card,.product-related-card,.bingo-library-card{border:1px solid #30201914;box-shadow:var(--paper-shadow);border-radius:var(--panel-radius)}
:is(.faq-dialog,.product-faq) details{border:1px solid var(--line);border-radius:var(--field-radius);background:#fffdf680;margin-bottom:10px;padding:0;overflow:clip}
:is(.faq-dialog,.product-faq) summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;font:700 16px/1.4 var(--sans);cursor:pointer;min-height:52px}
:is(.faq-dialog,.product-faq) summary::-webkit-details-marker{display:none}
:is(.faq-dialog,.product-faq) summary:after{content:'⌄';font-size:23px;line-height:1;flex:none}
:is(.faq-dialog,.product-faq) details[open] summary:after{transform:rotate(180deg)}
:is(.faq-dialog,.product-faq) details p{padding:0 18px 18px;margin:0;font-size:16px;line-height:1.6}
.woocommerce-error,.woocommerce-info,.woocommerce-message{font-size:16px;line-height:1.6;border-radius:var(--field-radius);overflow-wrap:anywhere}
@media(max-width:1000px){.brand,.brand img{width:185px}.site-header{gap:18px}.site-header nav{font-size:14px;gap:18px;margin-right:18px}}
@media(max-width:760px){.site-header{height:120px;flex-wrap:wrap;gap:0}.brand,.brand img{width:165px}.site-header nav{order:3;flex:0 0 100%;width:100%;justify-content:center;margin:0;gap:clamp(12px,4vw,28px);font-size:14px;padding:0 0 5px;min-height:44px}.site-header nav a,.site-header nav button{min-height:44px}.footer-brand{width:165px}}
@media(max-width:360px){.site-header nav{font-size:13px;gap:14px}.brand,.brand img{width:155px}}
.eyebrow{display:block;font-size:12px;line-height:1.5;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:7px}
:is(.faq-dialog,.product-faq) summary:focus-visible{outline:3px solid #255f83;outline-offset:-4px}

/* Let footer navigation and the handwritten sign-off breathe on phones. */
@media(max-width:760px){
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 24px}
 .footer-grid>*{min-width:0}
 .footer-grid>div:first-child{grid-column:1/-1}
 .site-footer .footer-note{grid-column:1/-1;justify-self:start;width:fit-content;max-width:100%;padding-left:50px;font-size:22px;line-height:1.4;transform:rotate(-5deg);margin:12px 0 8px}
 .footer-note>span{font-size:48px;top:0}
}
/* Shared utility-page controls: one field treatment and one focus language. */
:root{--field-border:#bcad96;--focus:#255f83;--selected-line:#9b7b34;--action-hover:#c92c1c;--control-height:52px;--action-font-size:17px}
:is(.account-page,.htb-contact-panel,.htb-cart-page,.htb-checkout-page) :is(input,textarea,select):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:is(.account-page,.htb-contact-panel,.htb-cart-page,.htb-checkout-page) :is(button,a.button):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:is(.account-page,.htb-contact-panel,.htb-cart-page,.htb-checkout-page) input:is([type=checkbox],[type=radio]){accent-color:var(--red)}
:is(.account-page,.htb-contact-panel,.htb-cart-page,.htb-checkout-page) input::placeholder,:is(.account-page,.htb-contact-panel) textarea::placeholder{color:#786a5a;opacity:1}