/*
Theme Name: Merch Depot
Theme URI: https://merchdepot.ca
Author: Merch Depot
Description: Custom WooCommerce theme for Merch Depot.
Version: 1.0.55
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: merchdepot
WC requires at least: 8.0
*/

/* ============ Tokens ============ */
:root{
  --paper:#FFFFFF;
  --ink:#000000;
  --stone:#767676;
  --mist:#EEEEEE;
  --soft:#F8F8F8;
  --accent:#2EBB77;
  --accent-deep:#29A76A;
  /* Green for small text and links on white: 4.56:1, same hue as --accent.
     Buttons, icons and large green shapes stay --accent. */
  --accent-text:#218655;
  --accent-tint:#DBF4E2;
  --accent-line:#EEEEEE;
  --price-old:#9B9B9B;
  --fog:#F5F5F5;
  --hl-from:#B1F1B3;
  --hl-to:#F3EEC2;
  --pill:#B479D9;
  --pill-tint:#F4EBF9;
  --white:#FFFFFF;
  --error:#A65D51;
  --error-tint:#F4E6E4;
  --error-deep:#8A2E2E;
  --shadow-soft:0 8px 20px rgba(0,0,0,.08);
  --shadow-raised:0 7px 30px rgba(0,0,0,.13);
  --shadow-card:0 0 10px rgba(0,0,0,.12);
  --shadow-lift:0 15px 50px rgba(0,0,0,.08);
  --max:1080px;
  --header-h:98px;
  /* Gap between the header and the first thing on every page except the
     home hero. Pages whose first element brings its own 15px (.md-intro
     padding or .md-heading top margin) subtract it, so the visible gap is
     always exactly this value. Change it here only. */
  --page-top:50px;
}
@media (max-width:767px){
  :root{--page-top:30px}
}

/* ============ Reset / base ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:var(--header-h)}
body{background:var(--paper);color:var(--stone);font-family:'Nunito',sans-serif;font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
.display,h1,h2,h3.display{font-family:'Fredoka',sans-serif;font-weight:700;text-transform:uppercase}
.eyebrow{font-family:'Fredoka',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.35em;font-size:12px;color:var(--stone)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ Buttons (shared, incl. Woo) ============ */
.audika-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display:inline-block;min-height:48px;padding:12px 30px;border:1px solid var(--accent);background:var(--accent);color:var(--white);
  font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:.02em;font-size:15px;text-transform:uppercase;
  border-radius:12px;transition:all .25s ease;line-height:1.4;
}
.audika-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--accent-deep);color:var(--white);border-color:var(--accent-deep)}
.audika-btn--accent,
.woocommerce .single_add_to_cart_button.button{
  background:var(--accent);border-color:var(--accent);color:var(--white);
}
.woocommerce .single_add_to_cart_button.button:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--accent);border-color:var(--accent);color:var(--white)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

/* Every green button has white text, in all states. Some plugin
   stylesheets (e.g. on the My Account orders VIEW button) set their own
   text colour, which is why colour is !important here, as the old live
   site's custom CSS also needed. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce .woocommerce-button,.woocommerce .woocommerce-Button,.woocommerce-account .woocommerce-orders-table .button,
.woocommerce .single_add_to_cart_button,.wc-proceed-to-checkout .checkout-button,#place_order,
.wpcf7 input[type=submit],.md-btn,.quote-btn,.mdc-start-designing{color:var(--white)!important;text-decoration:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-button:hover,.woocommerce .woocommerce-Button:hover,.woocommerce-account .woocommerce-orders-table .button:hover,
.woocommerce .single_add_to_cart_button:hover,.wc-proceed-to-checkout .checkout-button:hover,#place_order:hover,
.wpcf7 input[type=submit]:hover,.md-btn:hover,.quote-btn:hover,.mdc-start-designing:hover,
.woocommerce a.button:focus,.woocommerce button.button:focus,.md-btn:focus,.quote-btn:focus{color:var(--white)!important}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);transition:box-shadow .25s ease}
.site-header.is-scrolled{box-shadow:var(--shadow-soft)}
.admin-bar .site-header{top:32px}
@media (min-width:768px){
  .site-header>.wrap,.site-footer>.wrap{max-width:none;width:90%;padding-left:15px;padding-right:15px}
}
.site-header .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:var(--header-h)}
.brand{justify-self:start}
.brand a{display:block}
.brand img,.foot-logo img{display:block;width:auto;height:auto;max-height:70px}
.nav-links .menu,.mobile-menu .menu{list-style:none}
.nav-links .menu{display:flex;gap:32px}
.nav-links a,.mobile-menu a{font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ink);transition:color .2s}
.nav-links a:hover,.nav-links .current-menu-item>a,.mobile-menu a:hover,.mobile-menu .current-menu-item>a{color:var(--accent-text)}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:16px}
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--ink);transition:color .2s}
.cart-link:hover{color:var(--accent-text)}
.cart-link .count{position:absolute;top:0;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--white);font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;line-height:20px;text-align:center}
.quote-btn,.md-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;border-radius:12px;background:var(--accent);color:var(--white);font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;white-space:nowrap;transition:background .25s ease}
.quote-btn:hover,.md-btn:hover{background:var(--accent-deep);color:var(--white)}
.quote-btn{padding:0 20px}
.nav-toggle{display:none;align-items:center;justify-content:center;justify-self:start;width:40px;height:40px;border:0;border-radius:8px;background:var(--soft);color:var(--ink)}
.nav-toggle .icon-close,.nav-toggle[aria-expanded=true] .icon-open{display:none}
.nav-toggle[aria-expanded=true] .icon-close{display:block}
.mobile-menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--header-h));overflow-y:auto;background:var(--paper);box-shadow:var(--shadow-soft)}
.mobile-menu[hidden]{display:none}
.mobile-menu .menu{max-width:var(--max);margin:0 auto;padding-bottom:12px}
.mobile-menu a{display:block;padding:14px 24px;border-top:1px solid var(--mist)}

/* ============ Home (front-page.php) ============
   Rebuilt from the live TeeSpace home. Percent paddings mirror live's
   Elementor values (percent of the container width). Breakpoints follow
   live: 1440, 1024, 991, 767. */
.md-wrap{width:90%;margin-left:auto;margin-right:auto}
.md-btn--large{height:56px;padding:0 45px;font-size:16px}

/* Hero: text 45% / image 55%, text top-aligned as on live */
.md-hero{padding-top:6%;padding-bottom:1%}
.md-hero__inner{display:flex;align-items:flex-start}
.md-hero__text{flex:0 0 45%;padding:15px}
.md-hero__media{flex:0 0 55%;padding:15px}
/* Live pulls the image 5% up and out past its column (.top-banner-2). */
.md-hero__img{margin:-5% -5% 0 -5%}
.md-hero__img img{width:100%}
.md-pill{display:inline-block;margin:20px 0 calc(10px + 2%);padding:8px 18px;border-radius:40px;background:var(--pill-tint);color:var(--pill);font-size:18px;line-height:1.4}
.md-hero__title{margin:0;font-size:68px;line-height:1.2;text-transform:none}
.md-hero__pre,.md-type{display:block}
.md-type{min-height:1.2em}
.md-hero__sub,.md-how__intro{font-family:'Fredoka',sans-serif;font-weight:500;font-size:18px;line-height:1.8;color:var(--stone)}
.md-hero__sub{margin:calc(20px + 2%) 0 calc(10px + 4%)}
.md-hero__cta{padding-bottom:10%}

/* How to order */
.md-how{padding-top:6%;padding-bottom:6%}
.md-how__inner{padding:15px}
.md-how__title{margin:20px 0 10px;font-size:40px;line-height:1.15;text-align:center;text-transform:none}
.md-how__intro{margin:calc(20px - 1%) 0 calc(10px + 5%);padding:0 25%;text-align:center}
.md-steps{--step-gap:85px;--num-size:56px;--line-gap:45px;list-style:none;padding:0 8%}
.md-step{margin-bottom:var(--step-gap)}
.md-step:last-child{margin-bottom:0}
.md-step__content{display:flex;flex-wrap:wrap;align-items:center;color:inherit}
.md-step:nth-child(2n) .md-step__content{flex-direction:row-reverse}
.md-step__image{flex:0 0 40%}
.md-step__image img{width:100%;border-radius:12px}
.md-step__num{position:relative;flex:0 0 20%;min-width:80px;align-self:stretch;display:flex;align-items:center;justify-content:center}
/* Dashed connector between the numbers, stopping short of each circle as
   on live: ::before runs from below this circle into the gap, ::after from
   the top of the next row to just above its circle. */
.md-step__num::before,.md-step__num::after{content:"";position:absolute;left:50%;border-left:2px dashed var(--mist);transform:translateX(-1px)}
.md-step__num::before{top:calc(50% + var(--num-size) / 2 + var(--line-gap));bottom:calc(-1 * var(--step-gap))}
.md-step__num::after{top:0;bottom:calc(50% + var(--num-size) / 2 + var(--line-gap) * .7)}
.md-step:first-child .md-step__num::after,.md-step:last-child .md-step__num::before{content:none}
.md-step__num span{position:relative;z-index:1;width:var(--num-size);height:var(--num-size);line-height:var(--num-size);border-radius:50%;background:var(--white);box-shadow:var(--shadow-raised);font-weight:700;font-size:18px;color:var(--ink);text-align:center;transition:background .3s,color .3s}
.md-step:hover .md-step__num span{background:var(--accent);color:var(--white)}
.md-step__info{flex:0 0 40%}
.md-step__title{margin-bottom:8px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:32px;line-height:1.3}
.md-step__desc{font-weight:500;font-size:18px;color:var(--stone)}



/* ============ Footer ============ */
.site-footer{padding:75px 0 24px;background:var(--soft)}
.foot-cols{display:grid;grid-template-columns:25% 20% 55%}
.foot-col{padding-right:24px}
.foot-logo{margin:10px 0 20px}
.foot-logo img{max-height:90px}
.site-footer .foot-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;text-transform:none;color:var(--ink);margin-bottom:16px}
.foot-contact ul,.foot-list{list-style:none}
.foot-contact li{margin-bottom:12px}
.foot-contact li{font-size:16px}
.foot-contact a{color:var(--ink)}
.foot-list li{margin-bottom:10px}
.foot-quote{align-self:center;padding-right:0;text-align:center;font-size:18px}
.site-footer .foot-quote .foot-title{font-size:28px}
.foot-quote p{margin-bottom:24px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:64px;font-size:14px}
.site-footer a{transition:color .2s}
.site-footer a:hover{color:var(--accent-text)}
.site-footer .quote-btn:hover{color:var(--white)}

/* ============ Generic page content ============ */
/* Generic pages (page.php, index.php and the skeleton's contact and
   confirmed templates): the shared .md-wrap content container, so the title
   lines up with the header logo, and a readable text column from the left.
   Longhand padding only: .page-body sits on the .md-wrap element. */
.page-body{padding-top:calc(var(--page-top) - 15px);padding-bottom:90px;padding-left:15px;padding-right:15px}
.page-body .entry{max-width:760px}
.page-body h1:not(.md-heading){margin:15px 0 30px;font-size:40px;line-height:1.3;text-transform:none}
.woocommerce-cart .page-body .entry,.woocommerce-checkout .page-body .entry,.woocommerce-account .page-body .entry{max-width:none}
.page-body p{margin-bottom:1.2em}

/* ============ WooCommerce: general ============ */
.woocommerce-page .wrap>.woocommerce{padding:96px 0 96px}
.wc-wrap{padding-top:64px;padding-bottom:96px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{margin:20px 0 30px;border:1px solid var(--accent);border-radius:10px;background:var(--white);color:var(--ink);font-size:15px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--accent)}
.woocommerce-error{border-color:var(--error);background:var(--error-tint)}
/* Classic form controls (cart, checkout, my account, order tracking):
   the live TeeSpace look, grey 48px fields with 12px corners. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  height:48px;padding:0 15px;border:1px solid var(--fog);background:var(--fog);font-family:'Nunito',sans-serif;font-weight:500;font-size:15px;color:var(--ink);border-radius:12px;line-height:1.4;box-sizing:border-box;width:100%;
}
.woocommerce form .form-row textarea{
  min-height:120px;padding:12px 15px;border:1px solid var(--fog);background:var(--fog);font-family:'Nunito',sans-serif;font-weight:500;font-size:15px;color:var(--ink);border-radius:12px;line-height:1.5;box-sizing:border-box;width:100%;resize:vertical;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--accent)}
.woocommerce form .form-row label{margin-bottom:5px;font-family:'Nunito',sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.woocommerce form .form-row{margin:0 0 16px}
/* selectWoo: Woo enqueues select2.css late on account pages, so it can
   print AFTER this stylesheet; every rule here carries a body-class
   prefix to outrank the shipped selectors regardless of print order.
   The open panel attaches to <body>, which has .woocommerce-page. */
.woocommerce-page .select2-container--default .select2-selection--single{display:flex;align-items:center;height:48px;padding:0 15px;border:1px solid var(--fog);background:var(--fog);border-radius:12px}
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.4;padding:0;font-family:'Nunito',sans-serif;font-size:15px}
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:10px}
.woocommerce-page .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-page .select2-container--default.select2-container--open .select2-selection--single{outline:none;border-color:var(--accent)}
.woocommerce-page .select2-dropdown{border:1px solid var(--mist);border-radius:12px;overflow:hidden;background:var(--white)}
.woocommerce-page .select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--accent-line);border-radius:0;padding:10px 12px;font-family:'Nunito',sans-serif;font-size:14px;outline:none}
.woocommerce-page .select2-results__option{font-family:'Nunito',sans-serif;font-size:14px;padding:10px 12px;margin:0}
/* selectWoo a11y quirk: aria-selected marks the HIGHLIGHTED option,
   data-selected the chosen one. Chosen state first, highlight last so
   a hovered option always reads accent-deep. */
.woocommerce-page .select2-container--default .select2-results__option[data-selected=true]{background:var(--accent-tint);color:var(--ink)}
.woocommerce-page .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-page .select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--accent-deep);color:var(--white)}

/* ============ Content pages (Stickers, Services, Help) ============
   Shared pieces rebuilt from the live Elementor pages. */
.md-page .md-pill{margin:0 0 10px}
.md-intro{padding:15px}
.md-heading{margin:15px 0 10px;font-size:40px;line-height:1.3;text-transform:none}
/* Green-to-cream underline behind the second line, as on live */
.md-highlight{position:relative;z-index:1;display:inline-block}
.md-highlight::after{content:"";position:absolute;left:0;bottom:5px;z-index:-1;width:100%;height:15px;background:linear-gradient(101.31deg,var(--hl-from) 2.11%,var(--hl-to) 105.05%)}

/* Stickers */
.md-stickers{padding-top:calc(var(--page-top) - 15px)}
.md-stickers__item .md-heading{padding-right:20%}
.md-stickers__item+.md-stickers__item{margin-top:50px;margin-bottom:40px}

/* Services: intro 40% beside a 3 x 2 card grid at 60% */
.md-services__top{display:flex;align-items:flex-start;padding-top:calc(var(--page-top) - 15px)}
.md-services__intro{flex:0 0 40%}
.md-services__grid{flex:0 0 60%;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:15px}
.md-svc-card{min-height:325px;padding:35px 20px 20px 30px;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card);transition:transform .3s,box-shadow .3s}
.md-svc-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lift)}
.md-svc-card__icon{line-height:0;color:var(--accent)}
.md-svc-card__icon svg{width:56px;height:56px}
.md-svc-card__title{margin:25px 0 15px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;line-height:1.4}
.md-svc-card__title a:hover{color:var(--accent-text)}
.md-svc-card__desc{font-size:15px;line-height:1.9}
.md-services__b2b{padding-bottom:2%}
.md-services__banners{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:15px 15px 6%}
.md-pod{display:block;padding:20px;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card);text-align:center;transition:transform .3s,box-shadow .3s}
.md-pod:hover{transform:translateY(-20px);box-shadow:var(--shadow-lift)}
.md-pod__image{overflow:hidden;border-radius:12px;line-height:0}
.md-pod__image img{width:100%}
.md-pod__title{margin:0 0 10px;padding-top:15px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;line-height:1.4;color:var(--ink)}
.md-pod__desc{margin-bottom:25px;padding:0 5%;font-size:15px}
.md-pod .md-btn{width:100%}
.md-pod:hover .md-btn{background:var(--accent-deep)}

/* Help: intro 35% beside the FAQ / contact form at 65% */
.md-lede{margin:calc(20px - 1%) 0 0;padding-bottom:1%;font-family:'Fredoka',sans-serif;font-weight:500;font-size:18px;line-height:1.8;color:var(--stone)}
.md-help__faq{padding-top:calc(var(--page-top) - 15px);padding-bottom:65px}
.md-help__contact{padding-top:200px;padding-bottom:85px;background:var(--soft)}
.md-help__row{display:flex;align-items:flex-start}
.md-help__intro{flex:0 0 35%}
.md-help__main{flex:0 0 65%;padding:20px 15px 15px}
.md-help__label{display:flex;align-items:center;gap:8px;margin-top:30px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.md-help__label svg{width:24px;height:24px;color:var(--accent)}
.md-help__email{margin-top:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px}
.md-help__email a:hover{color:var(--accent-text)}
/* FAQ: grey bars, the open one green with white text, as on live */
.md-faq__item{padding-bottom:30px}
.md-faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 20px;border-radius:12px;background:var(--soft);font-weight:700;font-size:20px;line-height:1.2;color:var(--ink);list-style:none;cursor:pointer;transition:background .3s,color .3s}
.md-faq__item summary::-webkit-details-marker{display:none}
.md-faq__item summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s}
.md-faq__item[open] summary{background:var(--accent);color:var(--white);box-shadow:var(--shadow-card)}
.md-faq__item[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.md-faq__body{padding:20px 20px 0;font-size:16px;line-height:1.8}
.md-faq__body h4{margin-bottom:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;line-height:1.4}
.md-faq__body ul{margin-bottom:1em;padding-left:1.5em}
.md-faq__body p{margin-bottom:1em}
/* Contact Form 7 (live TeeSpace form styling; also covers any other CF7 form on the site) */
.wpcf7 .contact-form__row{margin-bottom:20px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea,.wpcf7 select{width:100%;padding:0 15px;border:1px solid var(--fog);border-radius:12px;background:var(--fog);font-family:'Nunito',sans-serif;font-weight:500;font-size:15px;color:var(--ink);transition:border-color .3s}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select{height:48px}
.wpcf7 textarea{display:block;max-height:150px;padding-top:12px;padding-bottom:12px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{border-color:var(--accent);outline:none}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--stone)}
/* Submit buttons sit at the left on every form (the Help form's markup asks
   for centre; left keeps the reCAPTCHA line starting under the button) */
.wpcf7 .contact-form__submit{display:flex;justify-content:flex-start;align-items:center;gap:10px;margin-top:5px}
.wpcf7 input[type=submit]{min-width:170px;height:48px;padding:0 35px;border:0;border-radius:12px;background:var(--accent);font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--white);cursor:pointer;transition:background .3s}
.wpcf7 input[type=submit]:hover{background:var(--accent-deep)}
.wpcf7 .wpcf7-not-valid-tip{margin-top:6px;font-size:14px;color:var(--error-deep)}
.wpcf7 form .wpcf7-response-output{margin:20px 0 0;padding:12px 16px;border:1px solid var(--accent);border-radius:12px;font-size:15px}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:var(--error);background:var(--error-tint)}

/* Quick Quote: centred title, form 60% beside the feature list 40% */
.md-quote__head{padding-top:calc(var(--page-top) - 15px);padding-left:15px;padding-right:15px}
.md-quote__row{display:flex;align-items:flex-start;padding-top:30px;padding-bottom:85px}
.md-quote__form{flex:0 0 60%;padding:0 15px}
.md-quote__features{flex:0 0 40%;padding:5px 15px 0 45px;list-style:none}
.md-quote__features li{display:flex;align-items:center;gap:16px;margin-bottom:30px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;line-height:1.3;color:var(--ink)}
.md-quote__icon{display:inline-flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent-tint);color:var(--accent)}
.md-quote__icon svg{width:22px;height:22px}
/* CF7 form layout classes (TeeSpace markup kept in the form itself) */
.wpcf7 .contact-form__title{display:flex;align-items:flex-end;margin:0 0 20px;padding-bottom:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;line-height:1.3;color:var(--ink)}
.wpcf7 .contact-form__title::after{content:"";flex:1;height:1px;margin:0 0 9px 10px;background:var(--mist)}
.wpcf7 .contact-form__row{display:flex;flex-wrap:wrap;align-items:flex-start}
.wpcf7 .contact-form__row--cols-2,.wpcf7 .contact-form__row--cols-3,.wpcf7 .contact-form__row--cols-4{margin-left:-15px;margin-right:-15px}
.wpcf7 .contact-form__col{display:flex;flex-wrap:wrap;align-items:center;padding:0 15px}
.wpcf7 .contact-form__row--cols-2 .contact-form__col{width:50%}
.wpcf7 .contact-form__row--cols-3 .contact-form__col{width:33.3333%}
.wpcf7 .contact-form__row--cols-4 .contact-form__col{width:25%}
.wpcf7 .contact-form__label{flex:0 0 150px;font-weight:600;font-size:15px;color:var(--ink)}
.wpcf7 .contact-form__label--block{flex:0 0 100%;margin-bottom:5px}
.wpcf7 .contact-form__label--auto{flex:0 0 auto;margin-right:45px}
.wpcf7 .contact-form__required{margin-left:8px;color:var(--accent-text)}
.wpcf7 .contact-form__input{flex:1}
.wpcf7 .contact-form__file{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wpcf7 .contact-form__file input[type=file]{display:none}
.wpcf7 .contact-form__file-upload{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 40px;border:2px solid var(--mist);border-radius:12px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .3s}
.wpcf7 .contact-form__file-upload::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0L7 8m5-5 5 5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0L7 8m5-5 5 5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center/contain no-repeat}
.wpcf7 .contact-form__file-upload:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}
.wpcf7 .contact-form__file-uploaded{font-size:14px}
.wpcf7 .contact-form__submit--left{justify-content:flex-start}
.wpcf7 .contact-form__submit--right{justify-content:flex-end}


/* ============ CTA strip (parts/cta-strip.php) ============
   One simple strip for every page: heading and a line of text left, a
   green button right, stacking on phones. Three-class selectors so page
   heading and paragraph rules (e.g. the Merch description box) never win. */
.md-strip-section{padding-top:60px;padding-bottom:60px}
.md-strip-section .md-wrap{padding-left:15px;padding-right:15px}
.md-strip{display:flex;align-items:center;justify-content:space-between;gap:20px 30px;padding:25px 30px;border-radius:12px;background:var(--soft)}
.md-strip .md-strip__text .md-strip__title{margin:0 0 4px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;line-height:1.3;color:var(--ink);text-transform:none}
.md-strip .md-strip__text .md-strip__desc{margin:0;font-family:'Nunito',sans-serif;font-size:16px;line-height:1.7;color:var(--stone)}
.md-strip .md-btn{flex:0 0 auto}
.md-strip--white{background:var(--white)}

/* ============ Page titles (Services style: left aligned, highlighted) ============ */
.md-title{margin:0 0 30px}

/* ============ WooCommerce: shop archive (Merch) ============ */
.md-shop{padding-top:var(--page-top);padding-bottom:90px;padding-left:15px;padding-right:15px}
.md-shop>.md-heading{margin-bottom:30px}
.md-shop .page-description,.md-shop .term-description{margin-bottom:40px;padding:15px 15px 5px;border-radius:12px;background:var(--fog)}
.md-shop .page-description h2,.md-shop .term-description h2{margin:20px 0 10px;font-size:28px;line-height:1.4;text-transform:none}
.md-shop .page-description p{margin-bottom:1em}
/* Customizer catalogue tiles: the plugin forces 4 per row above 768px; in
   the content container that is too tight on tablets, so 3 per row there.
   !important only because the plugin's own grid rule uses it. */
@media (min-width:769px) and (max-width:991px){
  .md-shop .mdc-catalogue{grid-template-columns:repeat(3,1fr)!important}
}
/* "Need something else?" strip (shared part, white) at the end of the description box */
.md-shop .page-description .md-strip{margin:30px 0 10px}
ul.products{clear:both;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:0;padding:0;list-style:none}
.woocommerce ul.products[class*=columns-]::before,.woocommerce ul.products[class*=columns-]::after,ul.products::before,ul.products::after{content:none}
.woocommerce ul.products[class*=columns-] li.product,ul.products li.product{position:relative;isolation:isolate;margin:0;width:auto;float:none;padding-bottom:10px;text-align:center;transition:transform .3s}
/* Hover: the card lifts onto a white shadowed panel, as on live */
ul.products li.product::before{content:"";position:absolute;inset:-10px -10px 0;z-index:-1;border-radius:12px;background:var(--white);box-shadow:var(--shadow-raised);opacity:0;transition:opacity .3s}
ul.products li.product:hover{transform:translateY(-10px)}
ul.products li.product:hover::before{opacity:1}
.woocommerce ul.products li.product a img{margin:0;border:1px solid var(--mist);border-radius:12px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{margin:20px 0 5px;padding:0;font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;line-height:1.4;color:var(--ink);transition:color .3s}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{color:var(--accent-text)}
/* Shop cards hide their price (loop price hook removed); kept for any loop that shows one */
.woocommerce ul.products li.product .price{font-family:'Fredoka',sans-serif;font-weight:400;color:var(--accent);font-size:14px;letter-spacing:.06em;margin:4px 0 0}
.woocommerce ul.products li.product .price del,.woocommerce div.product p.price del{color:var(--price-old);opacity:1}
.woocommerce ul.products li.product .button{margin-top:12px;padding:10px 22px;font-size:11.5px;letter-spacing:.22em}
.woocommerce nav.woocommerce-pagination ul{border:none}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{font-family:'Fredoka',sans-serif;font-weight:400;letter-spacing:.1em}
.woocommerce span.onsale{background:var(--accent-deep);border-radius:0;font-family:'Fredoka',sans-serif;font-weight:400;letter-spacing:.15em;text-transform:uppercase;font-size:11px;line-height:2.4;min-height:0;min-width:0;padding:0 12px}

/* ============ WooCommerce: single product ============ */
/* Live TeeSpace layout: 1170px container, two equal columns, 50px below the header */
.single-product .wc-wrap{max-width:1170px;padding-left:15px;padding-right:15px;padding-top:var(--page-top);padding-bottom:90px}
.single-product div.product{display:block}
.woocommerce div.product::after,
.woocommerce .woocommerce::after{content:"";display:table;clear:both}
.audika-long-desc{margin-top:24px;font-size:14.5px;color:var(--stone);max-width:48ch}
.audika-long-desc p{margin-bottom:1em}
.woocommerce #content div.product div.images,.woocommerce div.product div.images{width:calc(50% - 15px);margin-bottom:0}
.woocommerce #content div.product div.summary,.woocommerce div.product div.summary{width:calc(50% - 15px)}
.woocommerce div.product .product_title{margin:0 0 15px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:32px;line-height:1.4;text-transform:none}
/* Product page price, as on live: "From" in --price-old grey, the amount in
   --ink. Not --accent green (see the price rule in CLAUDE.md). */
.woocommerce div.product p.price{margin:0 0 10px;font-family:'Nunito',sans-serif;font-weight:400;font-size:24px;color:var(--price-old)}
.woocommerce div.product p.price .amount{font-weight:600;color:var(--ink)}
.woocommerce div.product .woocommerce-product-details__short-description{margin-bottom:20px;font-size:15px;line-height:1.9;color:var(--stone)}
/* Customizer plugin button: the plugin styles it; the theme supplies the font, as TeeSpace did */
.mdc-start-designing{font-family:'Fredoka',sans-serif}
/* Designer colour swatches, desktop. TeeSpace's global button{height:48px}
   held them at 48px tall. Without it the plugin's aspect-ratio:1/1 turns
   them into full-column squares. This puts back the TeeSpace height for the
   swatches only. Phones keep the plugin's own 40px squares. */
@media (min-width:768px){
  .mdc-designer .mdc-designer__swatches .mdc-designer__swatch{height:48px}
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{border-radius:12px;overflow:hidden}
.woocommerce div.product{display:flow-root}
.woocommerce div.product div.images .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.woocommerce div.product div.images .flex-control-thumbs::before,.woocommerce div.product div.images .flex-control-thumbs::after{content:none}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;float:none;margin:0}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;float:none}
.woocommerce div.product div.images .flex-control-thumbs li img{border:1px solid transparent;border-radius:5px;opacity:1;cursor:pointer;transition:border-color .3s}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover{border-color:var(--ink)}
.woocommerce div.product form.cart{margin:32px 0 0;display:flex;gap:14px;align-items:stretch}
.woocommerce div.product form.cart div.quantity{display:flex;border:1px solid var(--ink);float:none;margin:0}
.woocommerce .quantity .qty{width:64px;border:none;background:none;font-size:15px;font-family:'Nunito',sans-serif;text-align:center;height:auto}
.woocommerce div.product form.cart .button{flex:1;padding:16px 24px}
.audika-accordion{margin-top:24px;border-top:1px solid var(--mist)}
.audika-accordion details{border-bottom:1px solid var(--mist)}
.audika-accordion summary{padding:14px 0;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;color:var(--stone);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .2s}
.audika-accordion summary:hover{color:var(--accent-text)}
.audika-accordion summary::-webkit-details-marker{display:none}
.audika-accordion summary::after{content:"+";flex:0 0 auto;font-size:18px;line-height:1}
.audika-accordion details[open] summary::after{content:"\2212"}
.audika-accordion .body{padding:0 0 18px;font-size:15px;color:var(--stone)}
.audika-accordion .body p,.audika-accordion .body ul{margin-bottom:1em}
.audika-accordion .body ul{padding-left:1.2em}
.audika-accordion .body h4{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;margin:4px 0 8px}
/* ============ Product reviews (accordion item) ============ */
.audika-accordion .body.audika-reviews{max-width:none}
.woocommerce #reviews h2.woocommerce-Reviews-title{display:none}
.woocommerce-noreviews,.woocommerce #reviews .woocommerce-noreviews{color:var(--stone);font-size:14px;margin:0}
.woocommerce #reviews #comments ol.commentlist{list-style:none;margin:0;padding:0}
.woocommerce #reviews #comments ol.commentlist li{margin:0;padding:16px 0;border-bottom:1px solid var(--mist)}
.woocommerce #reviews #comments ol.commentlist li:last-child{border-bottom:none}
.woocommerce #reviews #comments ol.commentlist li img.avatar{display:none}
.woocommerce #reviews #comments ol.commentlist li .comment-text{margin:0;border:none;border-radius:0;padding:0}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{font-size:13px;color:var(--stone);margin:6px 0 8px}
.woocommerce #reviews .comment-text .woocommerce-review__author{font-weight:500;color:var(--ink)}
/* Brand separator: swap Woo's dash between author and date for the middle dot */
.woocommerce #reviews .woocommerce-review__dash{display:none}
.woocommerce #reviews .woocommerce-review__published-date::before{content:"\00B7\00A0"}
.woocommerce #reviews .comment-text .woocommerce-review__verified{font-style:normal;font-size:12px;color:var(--stone)}
.woocommerce #reviews .comment-text .description{font-family:'Nunito',sans-serif;font-size:14.5px;color:var(--stone)}
.woocommerce #reviews .description p{margin-bottom:.6em}
/* Stars: accent fill on a accent-line track, display and input states */
.woocommerce .star-rating::before{color:var(--accent-line)}
.woocommerce .star-rating span::before{color:var(--accent)}
.woocommerce p.stars a{color:var(--accent)}
.woocommerce p.stars:hover a,.woocommerce p.stars.selected a{color:var(--accent)}
#review_form p.stars{font-size:22px;margin:4px 0 0}
/* Review form */
#review_form .comment-reply-title{display:block;font-family:'Fredoka',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:14px;margin-bottom:14px}
#review_form .comment-form>p{margin:0 0 16px}
#review_form .comment-form label{display:block;font-family:'Fredoka',sans-serif;font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
#review_form input[type=text],#review_form input[type=email]{width:100%;height:56px;padding:0 14px;border:1px solid var(--accent-line);border-radius:0;background:var(--white);font-family:'Nunito',sans-serif;font-size:15px;color:var(--ink)}
#review_form textarea{width:100%;min-height:120px;padding:14px;border:1px solid var(--accent-line);border-radius:0;background:var(--white);font-family:'Nunito',sans-serif;font-size:15px;color:var(--ink);line-height:1.5;resize:vertical}
#review_form input[type=text]:focus,#review_form input[type=email]:focus,#review_form textarea:focus{outline:2px solid var(--accent-deep);outline-offset:1px;border-color:var(--accent-line)}
#review_form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px}
#review_form .comment-form-cookies-consent label{display:inline;margin:0;font-family:'Nunito',sans-serif;font-size:13px;letter-spacing:0;text-transform:none;color:var(--stone)}
.woocommerce #review_form #respond input#submit{background:var(--accent);border-color:var(--accent);color:var(--white);width:100%;text-align:center;padding:16px 24px}
.woocommerce #review_form #respond input#submit:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

.related.products{clear:both;display:flow-root;padding-top:72px}
.related.products>h2{text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,30px);letter-spacing:.22em;margin-bottom:40px}

/* ============ WooCommerce: classic cart, checkout, account, tracking ============
   Default Woo markup given the live TeeSpace look: 1170px container,
   bordered tables with a grey head, green totals, checkout in two columns
   with the order summary in a white card. */
/* Shared .md-wrap content container (set in audika_woo_page()), so titles line up with the header logo */
.md-woo-page{padding-top:calc(var(--page-top) - 15px);padding-left:15px;padding-right:15px;padding-bottom:90px}
.md-woo-page table.shop_table{border:1px solid var(--mist);border-radius:0;border-collapse:collapse}
.md-woo-page table.shop_table thead{background:var(--fog)}
.md-woo-page table.shop_table th{font-weight:600;color:var(--ink)}
.md-woo-page table.shop_table th,.md-woo-page table.shop_table td{border-color:var(--mist)}
.woocommerce .quantity .qty{width:60px;height:40px;border:1px solid var(--fog);border-radius:12px;background:var(--fog);color:var(--ink)}
.cart_totals .order-total .amount,.woocommerce-checkout-review-order-table .order-total .amount{font-size:18px;font-weight:600;color:var(--accent-text)}
.wc-proceed-to-checkout .checkout-button,#place_order{width:100%}
/* Checkout: customer details left, order summary card right */
.woocommerce-checkout #order_review_heading{margin:0 0 15px;font-size:24px;text-transform:none}
.woocommerce-checkout #order_review{padding:5px 15px 15px;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card)}
.woocommerce-checkout h3{font-size:24px;text-transform:none}
.woocommerce-checkout #payment{border-radius:12px;background:var(--fog)}
.woocommerce-checkout #payment div.payment_box{border-radius:12px;background:var(--white)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--white)}
/* Two-column layouts on desktop (1025px up), stacked below. Tied to Woo's
   own body classes and markup, not to the theme templates, so they hold
   whichever template renders the page.
   - My Account: menu left, content right, both from the top. The rule
     targets whatever element directly holds the menu (Woo's .woocommerce,
     or the Customize My Account plugin's wrapper).
   - Checkout: billing details left, "Your order" heading and card right
     (floats, both from the top). Not sticky:
     the card holds the payment methods and Place order, so it is usually
     taller than the screen and sticking it would hide the button.
   - Cart: see the Cart section below. */
@media (min-width:1025px){
  .woocommerce-account :has(> .woocommerce-MyAccount-navigation){display:flex;flex-wrap:wrap;align-items:flex-start;gap:30px 40px}
  .woocommerce-account :has(> .woocommerce-MyAccount-navigation)>*{flex:0 0 100%}
  /* Woo's clearfix ::before/::after would become empty flex items and push
     the menu right by one gap, off the title's left edge */
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after{content:none}
  .woocommerce-account :has(> .woocommerce-MyAccount-navigation)>.woocommerce-MyAccount-navigation{flex:0 0 260px;width:auto;max-width:none;float:none;margin:0}
  .woocommerce-account :has(> .woocommerce-MyAccount-navigation)>.woocommerce-MyAccount-content{flex:1 1 0;min-width:0;width:auto;max-width:none;float:none;margin:0}
  /* Floats, not grid: with grid the billing column's height pushed the
     card down below its heading */
  .woocommerce-checkout form.checkout>#customer_details{float:left;width:calc(50% - 20px)}
  .woocommerce-checkout form.checkout>#order_review_heading,.woocommerce-checkout form.checkout>#order_review{float:right;clear:right;width:calc(50% - 20px)}
}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{float:none;width:100%}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-checkout form.checkout::after{content:"";display:table;clear:both}
.woocommerce-cart-form table.shop_table,.cart_totals table.shop_table,.woocommerce-checkout-review-order-table{width:100%}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}

/* Checkout and account form polish, matching the site's fields and cards */
/* Checkboxes and radios: 20px, site green (ship to a different address,
   create account, terms, payment methods) */
.woocommerce form input[type=checkbox],.woocommerce form input[type=radio]{width:20px;height:20px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--accent);cursor:pointer}
#ship-to-different-address label,.woocommerce form .woocommerce-form__label-for-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
#ship-to-different-address input[type=checkbox]{margin:0}
/* Order notes: Woo's own .input-text border rule outranked the textarea
   rule, so it showed a different border; this matches the other fields */
.woocommerce form .form-row textarea.input-text{padding:12px 15px;border:1px solid var(--fog);border-radius:12px;background:var(--fog)}
.woocommerce form .form-row textarea.input-text:focus{border-color:var(--accent);outline:none}
/* "Your order" table: no dark lines, soft dividers between rows only */
.woocommerce-checkout #order_review table.shop_table,.woocommerce-checkout #order_review table.shop_table th,.woocommerce-checkout #order_review table.shop_table td{border:0}
.woocommerce-checkout #order_review table.shop_table thead{background:none}
.woocommerce-checkout #order_review table.shop_table th,.woocommerce-checkout #order_review table.shop_table td{padding:12px 5px}
.woocommerce-checkout #order_review table.shop_table tbody td,.woocommerce-checkout #order_review table.shop_table tfoot th,.woocommerce-checkout #order_review table.shop_table tfoot td{border-top:1px solid var(--mist)}
/* Payment methods: soft list and dividers, no dark boxes round the card fields */
.woocommerce-checkout #payment ul.payment_methods{margin:0;padding:15px;border-bottom:1px solid var(--mist)}
.woocommerce-checkout #payment ul.payment_methods li{margin:0;padding:8px 0;line-height:1.5;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li+li{border-top:1px solid var(--mist)}
.woocommerce-checkout #payment ul.payment_methods li>label{font-weight:600;color:var(--ink);cursor:pointer}
/* Payment method rows: radio, label, then the brand logo at the right edge,
   every logo the same 22px height so the rows line up (official files,
   unaltered; padding gives them clear space) */
.woocommerce-checkout #payment ul.payment_methods li{display:flex;flex-wrap:wrap;align-items:center}
.woocommerce-checkout #payment ul.payment_methods li>label{display:flex;flex:1 1 0;align-items:center;gap:12px;min-width:0;margin:0}
.woocommerce-checkout #payment ul.payment_methods li>.payment_box{flex:0 0 100%}
.woocommerce-checkout #payment ul.payment_methods li img.md-pay-logo{flex:0 0 auto;width:auto;height:30px;max-height:none;margin:0 0 0 auto;padding:4px;box-shadow:none;position:static}
.woocommerce-checkout #payment div.payment_box{border:0;box-shadow:none}
.woocommerce-checkout #payment fieldset{margin:0;padding:0;border:0}

/* ============ Cart (classic [woocommerce_cart]) ============
   Items about 66% left, totals card about 33% right, 40px gap, both from
   the top, in the page's content container; stacked at 1024px and below.
   Every selector starts .woocommerce-cart .woocommerce so it outranks
   WooCommerce's own cart CSS (which squeezed the totals card to 48%). */
@media (min-width:1025px){
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form){display:flex;flex-wrap:wrap;align-items:flex-start;gap:30px 40px}
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)>*{flex:0 0 100%}
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)>.woocommerce-cart-form{flex:2 1 0;min-width:0}
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form)>.cart-collaterals{flex:1 1 0;min-width:0;width:auto;margin:0}
}
/* Items table: the checkout card style, no outer border, soft header, mist row lines */
.woocommerce-cart .woocommerce table.shop_table.cart{width:100%;margin:0;border:0;border-radius:0;border-collapse:collapse}
.woocommerce-cart .woocommerce table.shop_table.cart thead{background:var(--fog)}
.woocommerce-cart .woocommerce table.shop_table.cart th{padding:12px;border:0;font-weight:600;color:var(--ink);text-align:left}
.woocommerce-cart .woocommerce table.shop_table.cart td{padding:15px 12px;border:0;border-top:1px solid var(--mist);vertical-align:middle}
.woocommerce-cart .woocommerce table.shop_table.cart .product-thumbnail img{width:80px;border-radius:5px}
.woocommerce-cart .woocommerce table.shop_table.cart .product-name a,.woocommerce-cart .woocommerce table.shop_table.cart .product-price{font-weight:700;color:var(--ink)}
.woocommerce-cart .woocommerce table.shop_table.cart .product-name a:hover{color:var(--accent-text)}
.woocommerce-cart .woocommerce table.shop_table.cart .product-subtotal .amount{font-weight:600;color:var(--accent-text)}
.woocommerce-cart .woocommerce table.shop_table.cart a.remove{color:var(--price-old)!important}
.woocommerce-cart .woocommerce table.shop_table.cart a.remove:hover{background:none;color:var(--accent-text)!important}
/* Coupon: the site's field style, 48px, lined up with APPLY COUPON */
.woocommerce-cart .woocommerce table.cart td.actions{padding-top:20px}
.woocommerce-cart .woocommerce table.cart td.actions .coupon{display:flex;align-items:center;gap:10px;float:left}
/* Woo's clearfix ::before/::after would become empty flex items and inset the row */
.woocommerce-cart .woocommerce table.cart td.actions .coupon::before,.woocommerce-cart .woocommerce table.cart td.actions .coupon::after{content:none}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text{float:none;width:200px;height:48px;margin:0;padding:0 15px;border:1px solid var(--fog);border-radius:12px;background:var(--fog);font-family:'Nunito',sans-serif;font-weight:500;font-size:15px;color:var(--ink);outline:0}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text:focus{border-color:var(--accent)}
.woocommerce-cart .woocommerce table.cart td.actions .button{min-height:48px;margin:0}
/* Totals card: everything inside, labels left, values right, mist lines */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals{float:none;width:100%;padding:10px 20px 20px;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card)}
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals h2{display:none}
.woocommerce-cart .woocommerce .cart_totals table.shop_table{width:100%;margin:0 0 20px;border:0;border-radius:0;border-collapse:collapse;table-layout:auto}
.woocommerce-cart .woocommerce .cart_totals table.shop_table th,.woocommerce-cart .woocommerce .cart_totals table.shop_table td{padding:12px 0;border:0;border-top:1px solid var(--mist);background:none;vertical-align:top}
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr:first-child th,.woocommerce-cart .woocommerce .cart_totals table.shop_table tr:first-child td{border-top:0}
.woocommerce-cart .woocommerce .cart_totals table.shop_table th{width:auto;padding-right:15px;font-weight:600;color:var(--ink);text-align:left;white-space:nowrap}
.woocommerce-cart .woocommerce .cart_totals table.shop_table td{text-align:right;overflow-wrap:anywhere}
.woocommerce-cart .woocommerce .cart_totals .order-total th{font-size:18px}
.woocommerce-cart .woocommerce .cart_totals #shipping_method{margin:0;padding:0;list-style:none}
.woocommerce-cart .woocommerce .cart_totals #shipping_method li{margin:0 0 4px;text-align:right}
.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination{margin:6px 0 0;font-size:13px;font-weight:400;line-height:1.5;color:var(--stone)}
.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination strong{font-weight:400}
.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button{display:inline-block;margin-top:4px;font-size:13px;font-weight:400;color:var(--stone);text-decoration:underline}
.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button:hover{color:var(--accent-text)}
.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button::after{display:none}
.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-form{text-align:left}
/* PROCEED TO CHECKOUT on one line, full width; PayPal under it, full width
   (48px tall and 12px corners come from the PayPal filter in functions.php) */
.woocommerce-cart .woocommerce .wc-proceed-to-checkout{padding:0}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;margin:0;padding:12px 20px;font-size:15px;line-height:1.6;text-align:center;white-space:nowrap}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout .ppc-button-wrapper,.woocommerce-cart .woocommerce #ppc-button-ppcp-gateway{width:100%}

/* Order tracking */
.md-woo-page form.track_order{max-width:600px}

/* ============ WooCommerce: shared classic tables (order-received, account) ============ */
.woocommerce-account .shop_table thead{background:var(--fog)}
.woocommerce-account .shop_table th{font-family:'Nunito',sans-serif;font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.woocommerce table.shop_table td{border-top:1px solid var(--mist)}

/* ============ reCAPTCHA ============
   Badge hidden (visibility, not display:none, so v3 keeps working); the
   notice from audika_recaptcha_notice() sits with each protected form. */
.grecaptcha-badge{visibility:hidden}
/* Left aligned on every form, starting under the submit button's left edge;
   clear so it never wraps beside a floated Woo button */
.md-recaptcha{clear:both;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--stone);text-align:left}
.md-recaptcha a{color:inherit;text-decoration:underline}
.md-recaptcha a:hover{color:var(--accent-text)}
#payment .place-order .md-recaptcha{margin:0 0 12px}

/* ============ WooCommerce: payment buttons ============ */
/* Stripe express checkout (Apple Pay, Google Pay, Link) at the top of the
   billing column (moved there in functions.php): the buttons, then the
   "OR" divider, then Billing details. Stripe's script shows, hides and
   sizes the buttons; only spacing and the divider text are styled here.
   Nothing in this stylesheet targets iframes or the buttons inside them.
   !important only on margin, which Stripe sets as an inline style. */
#wc-stripe-express-checkout-element,#wc-stripe-payment-request-wrapper{width:100%;margin:0!important}
#wc-stripe-express-checkout-button-separator,#wc-stripe-payment-request-button-separator{margin:16px 0 30px!important;font-size:13px;line-height:1.5;color:var(--stone);text-align:center}
/* --- PayPal reCAPTCHA placeholder: kill the empty div's inline 20px margins --- */
#ppcp-recaptcha-v2-container:empty{display:none;margin:0!important}
/* PayPal smart button: gap above it, margin only so the iframe never clips. 48px and 12px corners are set in functions.php. */
#ppc-button-ppcp-gateway{margin-top:12px}

/* ============ My account ============ */
/* Left edges line up with the page title and header logo: the account
   output sits straight in the page's content container, and nothing
   wrapped round it (Woo's .woocommerce div, the menu, the content) may
   add side margin or padding. Applies whichever template renders the page. */
.woocommerce-account .md-woo-page .woocommerce,.woocommerce-account .page-body .entry .woocommerce{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{margin-left:0}
.woocommerce-account .md-woo-page>.woocommerce>p:empty{display:none}
.woocommerce-account .md-woo-page>.woocommerce>.woocommerce-notices-wrapper:not(:has(*)){display:none}
/* Menu: the site's soft card */
.woocommerce-account .woocommerce-MyAccount-navigation{padding:12px;border:0;border-radius:12px;background:var(--soft)}
/* Tab content (Orders, Addresses, Payment methods, Account details): the
   cart and checkout card, white with a soft shadow, no thin borders */
.woocommerce-account .woocommerce-MyAccount-content{padding:30px;border:0;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card)}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li+li{margin-top:2px}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 14px;border-radius:8px;font-family:'Nunito',sans-serif;font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);transition:color .2s,background .2s}
.woocommerce-MyAccount-navigation li a:hover{color:var(--accent-text)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--accent-tint);color:var(--accent-text)}
.woocommerce-MyAccount-content{font-size:15px}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{margin:28px 0 14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:0;text-transform:none}
.woocommerce-MyAccount-content>*:first-child{margin-top:0}
.woocommerce-MyAccount-content p a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.audika-account-dashboard .woocommerce-account .woocommerce-MyAccount-content,.audika-account-dashboard.woocommerce-account .woocommerce-MyAccount-content{padding:0;border:0;background:none;box-shadow:none}
/* Overview greeting and buttons */
.md-account-hello .md-account-hello__title{margin:0 0 6px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ink)}
.md-account-hello .md-account-hello__text{margin:0 0 24px;color:var(--stone)}
.md-account-hello__actions{display:flex;flex-wrap:wrap;gap:12px}
/* Outlined button: --accent border and text (outranks the white-text rule
   for green buttons), filling green on hover */
.md-btn.md-btn--outline{border:2px solid var(--accent);background:transparent;color:var(--accent)!important}
.md-btn.md-btn--outline:hover,.md-btn.md-btn--outline:focus{border-color:var(--accent);background:var(--accent);color:var(--white)!important}
.audika-account-dashboard .woocommerce-MyAccount-content>p:nth-of-type(1),.audika-account-dashboard .woocommerce-MyAccount-content>p:nth-of-type(2){display:none}
.woocommerce-account table.shop_table{border:none;border-radius:0;border-collapse:collapse;width:100%}
.woocommerce-account table.shop_table th{padding:12px 16px;border:0}
.woocommerce-account table.shop_table td{padding:16px;border:0;border-top:1px solid var(--mist);background:transparent}
.woocommerce-account .woocommerce-Address{margin-bottom:20px;padding:20px 24px;border:0;border-radius:12px;background:var(--soft)}
.woocommerce-account .woocommerce-Address address{font-style:normal;line-height:1.7}
.woocommerce-account fieldset{margin:24px 0 0;padding:0;border:0}
.woocommerce-account fieldset legend{margin:0 0 12px;padding:0;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;letter-spacing:0;text-transform:none;color:var(--ink)}
.woocommerce-account form.login,.woocommerce-account form.lost_reset_password,.woocommerce-account form.register{max-width:480px;margin:0;padding:30px;border:0;border-radius:12px;background:var(--white);box-shadow:var(--shadow-card)}
.woocommerce-account .md-woo-page>.woocommerce>h2{margin-bottom:15px;font-size:24px;letter-spacing:0;text-transform:none;text-align:left}
/* Add payment method endpoint: classic #payment box. Woo paints it
   lavender/rounded at #add_payment_method #payment (2 ids); the
   .woocommerce-account prefix outranks that regardless of stylesheet
   print order. */
.woocommerce-account #add_payment_method #payment{background:none;border-radius:0}
.woocommerce-account #add_payment_method #payment ul.payment_methods{margin:0;padding:0 15px;border:0;border-radius:12px;background:var(--soft);list-style:none}
.woocommerce-account #add_payment_method #payment ul.payment_methods li+li{border-top:1px solid var(--mist)}
.woocommerce-account #add_payment_method #payment ul.payment_methods li{padding:14px 18px;font-size:14.5px;line-height:1.5}
.woocommerce-account #add_payment_method #payment ul.payment_methods li label{font-size:14.5px;letter-spacing:0;text-transform:none;font-family:'Nunito',sans-serif;color:var(--ink);display:inline}
.woocommerce-account #add_payment_method #payment div.payment_box{border-radius:12px;background:var(--white);font-size:13.5px;color:var(--ink)}
.woocommerce-account #add_payment_method #payment div.payment_box::before{border:1em solid var(--white);border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}
.woocommerce-account #add_payment_method #payment div.form-row{padding:16px 0 0}
.woocommerce-account #add_payment_method input.input-radio{accent-color:var(--accent-deep)}
/* Add payment method button: the site's standard green button, full width */
.woocommerce-account #add_payment_method #place_order{width:100%}

/* ============ Woo notices ============ */
.woocommerce-page .woocommerce-message,.woocommerce-page .woocommerce-info{background:var(--white);border-color:var(--accent);color:var(--ink)}
.woocommerce-page .woocommerce-message::before,.woocommerce-page .woocommerce-info::before{color:var(--accent)}
.woocommerce-page .woocommerce-error{background:var(--error-tint);border-color:var(--error);color:var(--error-deep)}
.woocommerce-page .woocommerce-error::before{color:var(--error)}

/* ============ Order received ============ */
.woocommerce-order-received .woocommerce-thankyou-order-received{font-family:'Fredoka',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(22px,3vw,30px);letter-spacing:.18em;text-align:center;margin:32px 0}
/* Overview strip: quiet flex card instead of Woo's floated dashed list */
.woocommerce-order-received ul.order_details{display:flex;flex-wrap:wrap;gap:16px 48px;margin:0 0 40px;padding:22px 26px;background:var(--white);border:1px solid var(--mist);list-style:none}
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after{content:none}
.woocommerce-order-received ul.order_details li{float:none;border:none;margin:0;padding:0;font-family:'Fredoka',sans-serif;font-weight:400;letter-spacing:.12em;font-size:11.5px;color:var(--stone);text-transform:uppercase;line-height:1.5}
.woocommerce-order-received ul.order_details li strong{display:block;margin-top:4px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:400;color:var(--ink);letter-spacing:0;text-transform:none;line-height:1.4}
.woocommerce-order-received table.shop_table{border:1px solid var(--mist);border-radius:0}
.woocommerce-order-received .shop_table th{font-family:'Fredoka',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:var(--stone)}
.woocommerce .woocommerce-customer-details address{border:1px solid var(--mist);border-radius:0;padding:20px 24px}
.woocommerce-order-received .woocommerce-customer-details{margin-top:40px}

/* ============ Contact page ============ */
.audika-contact{margin-top:8px}
.audika-contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.audika-form-row{display:flex;flex-direction:column;gap:8px;margin:0}
.audika-row-full{grid-column:1/-1}
.audika-form-row label{font-family:'Fredoka',sans-serif;font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.audika-contact-form input[type=text],
.audika-contact-form input[type=email]{height:56px;padding:0 18px}
.audika-contact-form input[type=text],
.audika-contact-form input[type=email],
.audika-contact-form textarea{border:1px solid var(--accent-line);border-radius:0;background:var(--white);font-family:'Nunito',sans-serif;font-size:14.5px;color:var(--ink);line-height:1.4;width:100%}
.audika-contact-form textarea{padding:16px 18px;resize:vertical;min-height:180px}
.audika-contact-form input:focus,
.audika-contact-form textarea:focus{outline:2px solid var(--accent-deep);outline-offset:1px}
.audika-contact-form input::placeholder,.audika-contact-form textarea::placeholder{color:var(--stone)}
/* Honeypot (contact + signup): parked off-screen, never display:none so bots still fill it */
.audika-alt{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.audika-form-actions{align-items:start}
.audika-contact-form button[type=submit]{height:56px;padding:0 48px;border:1px solid var(--accent);background:var(--accent);color:var(--white);font-family:'Fredoka',sans-serif;font-weight:400;letter-spacing:.25em;font-size:13px;text-transform:uppercase;transition:background .25s}
.audika-contact-form button[type=submit]:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.audika-contact-form button[type=submit]:disabled{opacity:.6;cursor:default}
.audika-form-error{color:var(--error-deep);font-size:14px}
.audika-contact-done{border-top:2px solid var(--accent-deep);background:var(--accent-tint);padding:22px 26px;font-size:15px}
.audika-contact-mail{margin-top:36px;font-size:15px;color:var(--stone)}
.audika-contact-mail a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .audika-contact-form{grid-template-columns:1fr}
  .audika-contact-form button[type=submit]{width:100%}
}

/* ============ Confirmed page ============ */
.audika-confirmed{text-align:center}
.audika-confirmed-cta{margin-top:36px}

/* ============ Responsive ============ */
/* Breakpoints for the home page, content pages, shop and product page.
   Kept after every base rule so they win at equal specificity. */
@media (max-width:1440px){
  .md-faq__item{padding-bottom:25px}
  .md-lede{font-size:17px}
  .md-help__email{font-size:22px}
  .md-svc-card{min-height:340px}
  .md-svc-card__icon svg{width:48px;height:48px}
  .md-svc-card__title{font-size:18px}
  .md-pod__title{font-size:22px}
  .md-heading{font-size:36px}
  .md-highlight::after{bottom:3px;height:12px}
  .woocommerce div.product .product_title{font-size:30px}
  .woocommerce div.product p.price{font-size:22px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:17px}
  .md-btn--large{height:48px;padding:0 35px;font-size:15px}
  .md-pill{padding:6px 18px;font-size:17px}
  .md-hero__img{margin:-5% 0 -5% -5%}
  .md-hero__title{font-size:48px}
  .md-hero__sub,.md-how__intro{font-size:17px}
  .md-how__title{font-size:36px}
  .md-steps{--step-gap:60px}
  .md-steps{--num-size:48px}
  .md-step__title{font-size:28px}
  .md-step__desc{font-size:17px}
}
@media (max-width:1024px){
  /* My Account on tablets and phones: menu above content, both full width */
  .woocommerce-account .woocommerce-MyAccount-navigation{width:100%;margin-bottom:20px}
  .woocommerce-account .woocommerce-MyAccount-content{width:100%}
  .md-quote__row{flex-wrap:wrap}
  .md-quote__form,.md-quote__features{flex-basis:100%}
  .md-quote__features{order:-1;display:flex;flex-wrap:wrap;gap:0 30px;padding:0 15px 20px}
  .wpcf7 .contact-form__title{font-size:20px}
  .md-help__row{flex-wrap:wrap}
  .md-help__intro,.md-help__main{flex-basis:100%}
  .md-help__faq .md-help__main{padding-left:10%;padding-right:10%}
  .md-help__contact{padding-top:100px}
  .md-faq__item{padding-bottom:20px}
  .md-lede{margin-top:calc(20px - 2%);padding-bottom:0;font-size:16px}
  .md-help__email{font-size:20px}
  .md-services__top{flex-wrap:wrap}
  .md-services__intro,.md-services__grid{flex-basis:100%}
  .md-pod__title{font-size:20px}
  .md-heading{font-size:32px}
  .woocommerce div.product .product_title{font-size:28px}
  .woocommerce div.product p.price{font-size:20px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px}
  .md-shop{padding-bottom:70px}
  .md-hero{padding-top:2%;padding-bottom:5%}
  .md-hero__text,.md-hero__media{flex-basis:50%}
  .md-pill{font-size:16px}
  .md-hero__img{margin:15% 0 -5% -5%}
  .md-hero__title{font-size:36px}
  .md-hero__sub,.md-how__intro{font-size:16px}
  .md-how__title{font-size:32px}
  .md-how__intro{margin-top:calc(20px - 2%);padding:0 20%}
  .md-steps{--step-gap:50px;padding:0 5%}
  .md-steps{--num-size:44px}
  .md-step__title{font-size:24px}
  .md-step__desc{font-size:16px}
}
@media (max-width:991px){
  .md-lede{font-size:15px}
  .md-help__email{font-size:18px}
  .md-svc-card{min-height:330px;padding:25px 20px 20px}
  .md-pod__title{font-size:18px}
  .md-pod__desc{padding:0 3%}
  .md-heading{font-size:28px}
  .woocommerce div.product .product_title{font-size:26px}
  .woocommerce div.product p.price{font-size:18px}
  .woocommerce div.product div.images .flex-control-thumbs{margin-top:10px;gap:6px}
  ul.products{grid-template-columns:repeat(3,1fr)}
  .md-pill{font-size:15px}
  .md-hero__title{font-size:32px}
  .md-hero__sub,.md-how__intro{font-size:15px}
  .md-how__title{font-size:28px}
  .md-steps{--step-gap:40px}
  .md-steps{--num-size:40px;--line-gap:20px}
  .md-step__title{font-size:20px}
  .md-step__desc{font-size:15px}
}
@media (max-width:767px){
  /* Cart on phones: Woo's stacked table rows, without its zebra stripes;
     coupon field and button share a row, Update cart full width */
  .woocommerce-cart .woocommerce table.shop_table_responsive tr:nth-child(2n) td{background:transparent}
  /* Block display so the stacked rows can never be wider than the screen */
  .woocommerce-cart .woocommerce table.shop_table.cart,.woocommerce-cart .woocommerce table.shop_table.cart tbody{display:block;width:100%}
  .woocommerce-cart .woocommerce table.shop_table_responsive td{overflow-wrap:anywhere}
  .woocommerce-cart .woocommerce table.shop_table_responsive td::before{margin-right:10px;font-weight:600;color:var(--ink)}
  .woocommerce-cart .woocommerce table.cart td.actions .coupon{float:none;width:100%;margin-bottom:10px}
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text{flex:1 1 auto;width:auto;min-width:0}
  .woocommerce-cart .woocommerce table.cart td.actions .coupon .button{flex:0 0 auto;width:auto;padding-left:20px;padding-right:20px;white-space:nowrap;overflow-wrap:normal}
  .woocommerce-cart .woocommerce table.cart td.actions>.button{width:100%}
  /* Account tables on phones: no zebra stripes, a line between orders
     instead of between every field, labels like the cart */
  .woocommerce-account .woocommerce table.shop_table_responsive tr:nth-child(2n) td{background:transparent}
  .woocommerce-account .woocommerce table.shop_table_responsive,.woocommerce-account .woocommerce table.shop_table_responsive tbody{display:block;width:100%}
  .woocommerce-account .woocommerce table.shop_table_responsive td{padding:6px 0;border-top:0;overflow-wrap:anywhere}
  .woocommerce-account .woocommerce table.shop_table_responsive td::before{margin-right:10px;font-weight:600;color:var(--ink)}
  .woocommerce-account .woocommerce table.shop_table_responsive tbody tr{padding-top:14px;padding-bottom:14px}
  .woocommerce-account .woocommerce table.shop_table_responsive tbody tr+tr{border-top:1px solid var(--mist)}
  .woocommerce-account .woocommerce table.shop_table_responsive tbody tr:first-child{padding-top:0}
  .woocommerce-account .woocommerce table.shop_table_responsive tbody tr:last-child{padding-bottom:0}
  .woocommerce-cart .woocommerce .cart-collaterals{margin-top:30px}
  .md-quote__row{padding-top:30px;padding-bottom:50px}
  .md-quote__features li{margin-bottom:16px;font-size:16px}
  .wpcf7 .contact-form__row--cols-2 .contact-form__col,.wpcf7 .contact-form__row--cols-3 .contact-form__col,.wpcf7 .contact-form__row--cols-4 .contact-form__col{width:100%;margin-bottom:20px}
  .wpcf7 .contact-form__title{font-size:18px}
  .md-woo-page{padding-bottom:50px}
  .md-help__faq{padding-bottom:40px}
  .md-help__contact{padding-top:50px;padding-bottom:50px}
  .md-help__faq .md-help__main{padding-left:15px;padding-right:15px}
  .md-faq__item summary{padding:18px 16px;font-size:17px}
  .md-faq__body{padding:16px 16px 0;font-size:15px}
  .md-help__email{font-size:16px}
  .md-services__grid,.md-services__banners{grid-template-columns:1fr}
  .md-svc-card{min-height:0}
  .md-pod__desc{padding:0}
  .md-heading{font-size:24px}
  .md-stickers__item .md-heading{padding-right:0}
  .md-stickers__item+.md-stickers__item{margin-bottom:20px}
  .md-highlight::after{height:8px}
  .woocommerce div.product .product_title{font-size:24px}
  .woocommerce div.product p.price{font-size:16px}
  ul.products{grid-template-columns:repeat(2,1fr);gap:20px}
  .md-shop{padding-bottom:50px}
  .md-title{margin-bottom:20px}
  .md-shop .page-description,.md-shop .term-description{margin-bottom:30px}
  .md-shop .page-description h2{font-size:22px}
  .md-strip-section{padding-top:40px;padding-bottom:40px}
  .md-strip{flex-direction:column;align-items:flex-start;padding:20px}
  .md-strip .md-strip__text .md-strip__title{font-size:20px}
  .md-strip .md-strip__text .md-strip__desc{font-size:15px}
  .md-wrap{width:auto;margin-left:10px;margin-right:10px}
  .md-hero__inner{flex-wrap:wrap}
  .md-hero__text,.md-hero__media{flex-basis:100%}
  .md-hero__title{font-size:28px}
  .md-hero__sub{margin:20px 0 calc(10px + 5%)}
  .md-how__title{font-size:24px}
  .md-how__intro{margin:calc(20px - 3%) 0 calc(10px + 6%);padding:0}
  .md-steps{--step-gap:20px;padding:0}
  .md-step{position:relative;padding-left:55px}
  .md-step__image,.md-step__info{flex-basis:100%}
  .md-step__info{margin-top:20px}
  .md-step__num{position:absolute;left:0;top:0;bottom:0;min-width:0;width:36px}
  .md-steps{--num-size:36px}
  .md-step__num span{font-size:16px}
  .md-step__title{font-size:18px}
}
@media (max-width:900px){
  .woocommerce #content div.product div.images,.woocommerce div.product div.images,
  .woocommerce #content div.product div.summary,.woocommerce div.product div.summary{width:100%;float:none}
  .woocommerce div.product div.summary{margin-top:20px}
  .nav-toggle{display:inline-flex}
  .nav-links,.nav-actions .quote-btn{display:none}
  .brand{justify-self:center}
  .foot-cols{grid-template-columns:1fr 1fr;gap:32px}
  .foot-quote{display:none}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (min-width:901px){
  .mobile-menu{display:none}
}
@media (max-width:782px){
  .admin-bar .site-header{top:46px}
}
@media (max-width:600px){
  .admin-bar .site-header{top:0}
}
@media (max-width:820px){
  body{overflow-x:clip}
  .woocommerce-account .woocommerce-MyAccount-content{padding:20px}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}