/*
Theme Name: Groovy Phone Case
Theme URI: https://groovyphonecase.com
Author: Groovy Phone Case
Description: A 70s retro storefront theme for WooCommerce, built to match the Groovy Phone Cases Printify pop-up store. Navy header, slate background, white product tiles, chunky slab headings, pill-style variation buttons and accordion product details. Works with Printify's WooCommerce plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: groovy-phone-case
Tags: e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column
*/

/* ---------- Tokens ---------- */
:root{
  --navy:#0a1129;
  --slate:#3d526e;
  --slate-deep:#33465f;
  --cream:#f7f0dc;
  --mustard:#e2a21e;
  --orange:#c4500a;
  --olive:#5b6b1e;
  --brown:#3b2312;
  --white:#fff;
  --slab:"Alfa Slab One","Rockwell Extra Bold","Rockwell","Bookman Old Style",Georgia,serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1100px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--slate);color:var(--white);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--mustard)}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--slab);font-weight:400;line-height:1.2;margin:0 0 .5em;letter-spacing:.005em}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;background:var(--mustard);color:var(--navy);height:auto;width:auto;left:8px;top:8px;padding:10px 14px;z-index:1000;font-weight:700}
.groovy-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.groovy-main{min-height:60vh}
.groovy-section{padding-top:48px;padding-bottom:48px}
.groovy-center{text-align:center}

/* ---------- Buttons ---------- */
.groovy-btn,
body .woocommerce a.button,body .woocommerce button.button,body .woocommerce input.button,
body .woocommerce a.button.alt,body .woocommerce button.button.alt,body .woocommerce input.button.alt,
body .woocommerce #respond input#submit,body .woocommerce-page a.button,
body .wc-block-components-button:not(.is-link){
  display:inline-block;background:var(--mustard);color:var(--navy);border:2px solid var(--mustard);border-radius:6px;
  padding:11px 22px;font:700 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s
}
.groovy-btn:hover,
body .woocommerce a.button:hover,body .woocommerce button.button:hover,body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,body .woocommerce button.button.alt:hover,body .woocommerce input.button.alt:hover,
body .woocommerce #respond input#submit:hover{background:#f4c04f;border-color:#f4c04f;color:var(--navy)}
body .woocommerce button.button.disabled,body .woocommerce button.button:disabled,body .woocommerce button.button.alt.disabled{opacity:.5;cursor:not-allowed;background:var(--mustard);color:var(--navy)}
.groovy-btn--outline{background:transparent;color:#fff;border-color:#fff;padding:9px 20px;font-size:14px}
.groovy-btn--outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.groovy-btn--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.groovy-btn--navy:hover{background:#17224a;border-color:#17224a;color:#fff}

/* ---------- Header ---------- */
.groovy-header{background:var(--navy);color:#fff;position:relative;z-index:50}
.groovy-header__inner{display:flex;align-items:center;gap:22px;min-height:82px}
.groovy-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.groovy-brand .custom-logo-link{display:block;line-height:0}
.groovy-brand .custom-logo{height:44px;width:auto;border-radius:3px;display:block}
.groovy-brand__name{color:#fff;text-decoration:none;font-weight:500;font-size:15px}
.groovy-nav{flex:1 1 auto}
.groovy-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.groovy-menu a{color:#fff;text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;display:inline-block;border-bottom:2px solid transparent}
.groovy-menu a:hover,.groovy-menu .current-menu-item>a,.groovy-menu .current_page_item>a{border-bottom-color:var(--mustard);color:#fff}
.groovy-cart{position:relative;color:#fff;display:inline-flex;padding:8px;margin-left:auto;line-height:0}
.groovy-cart:hover{color:var(--mustard)}
.groovy-cart svg{width:24px;height:24px}
.groovy-cart__count{position:absolute;top:0;right:-2px;min-width:19px;height:19px;border-radius:10px;background:var(--mustard);color:var(--navy);font:700 11px/19px var(--sans);text-align:center;padding:0 5px}
.groovy-nav-toggle{display:none;background:none;border:0;color:#fff;padding:10px;cursor:pointer}
.groovy-nav-toggle__bars,.groovy-nav-toggle__bars::before,.groovy-nav-toggle__bars::after{display:block;width:24px;height:2px;background:currentColor;content:"";position:relative}
.groovy-nav-toggle__bars::before{position:absolute;top:-7px}
.groovy-nav-toggle__bars::after{position:absolute;top:7px}

/* ---------- Hero ---------- */
.groovy-hero{position:relative;min-height:340px;display:flex;align-items:center;background:#efe3c2 url(assets/hero-rings.svg) center/cover no-repeat}
.groovy-hero.has-image{background-position:center;background-size:cover}
.groovy-hero__panel{background:rgba(10,17,41,.86);color:#f7f0dc;padding:28px 32px;max-width:470px;border-radius:8px}
.groovy-hero__title{font-size:clamp(34px,5vw,52px);color:var(--mustard);margin:0 0 10px;line-height:1.05}
.groovy-hero__text{margin:0 0 20px;font-size:17px}
.groovy-hero--empty{min-height:260px}

/* ---------- Home sections ---------- */
.groovy-section__title{text-align:center;font-size:32px;margin-bottom:28px}
.groovy-grid-wrap{padding-top:8px}

/* ---------- Product grid (WooCommerce loops) ---------- */
.groovy-main .woocommerce ul.products,
.groovy-main ul.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px;margin:0 0 24px;padding:0;list-style:none;clear:both}
.groovy-main ul.products::before,.groovy-main ul.products::after{display:none!important;content:none!important}
.groovy-main .woocommerce ul.products[class*=columns-] li.product,
.groovy-main ul.products[class*=columns-] li.product,
.groovy-main ul.products li.product{width:auto!important;float:none!important;margin:0!important;padding:0;position:relative;text-align:left}
.groovy-main li.product a.woocommerce-LoopProduct-link{display:block;color:#fff;text-decoration:none}
.groovy-main li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title{text-decoration:underline;text-underline-offset:3px}
.groovy-main li.product img{display:block;width:100%!important;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:10px;margin:0 0 12px!important;border-radius:2px}
.groovy-main li.product .woocommerce-loop-product__title{font-family:var(--slab);font-size:15px;line-height:1.28;color:#fff;margin:0 0 6px;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.groovy-main li.product .price{display:block;color:#fff;font:700 13px var(--sans);margin:0}
.groovy-main li.product .price del{opacity:.6;font-weight:400}
.groovy-main li.product .price ins{text-decoration:none}
.groovy-main li.product .star-rating{display:none}
.groovy-main span.onsale{position:absolute;top:8px;left:8px;z-index:2;min-height:0;min-width:0;line-height:1;padding:7px 10px;border-radius:4px;background:var(--orange);color:#fff;font:700 12px var(--sans);margin:0}

/* Carousel */
.groovy-carousel{position:relative}
.groovy-carousel__track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.groovy-carousel__track::-webkit-scrollbar{display:none}
.groovy-carousel__track .woocommerce ul.products,
.groovy-carousel .groovy-carousel__track ul.products{display:flex;gap:24px;margin:0}
.groovy-carousel__track ul.products li.product{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start}
.groovy-carousel__btn{position:absolute;top:34%;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.groovy-carousel__btn:hover{background:var(--mustard)}
.groovy-carousel__btn[disabled]{opacity:.35;cursor:default}
.groovy-carousel__btn--prev{left:-18px}
.groovy-carousel__btn--next{right:-18px}
.groovy-carousel__btn svg{width:18px;height:18px}

/* ---------- Shop / archive ---------- */
.woocommerce-breadcrumb{font-size:13px;color:rgba(255,255,255,.75);margin:0 0 18px}
.woocommerce-breadcrumb a{color:#fff}
.groovy-main .woocommerce-products-header__title,.groovy-main h1.page-title{text-align:center;font-size:34px;margin:0 0 26px}
.woocommerce-result-count{float:left;margin:6px 0 20px;font-size:14px;color:rgba(255,255,255,.85)}
.woocommerce-ordering{float:right;margin:0 0 20px}
.woocommerce-ordering select{background:#fff;color:var(--navy);border:0;border-radius:4px;padding:7px 10px;font:14px var(--sans)}
nav.woocommerce-pagination{margin:36px 0 0;text-align:center}
nav.woocommerce-pagination ul{display:inline-flex;gap:8px;border:0!important;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
nav.woocommerce-pagination ul li{border:0!important;float:none;overflow:visible}
nav.woocommerce-pagination ul li a,nav.woocommerce-pagination ul li span{display:block;min-width:40px;padding:9px 13px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;line-height:1.2}
nav.woocommerce-pagination ul li a:hover,nav.woocommerce-pagination ul li a:focus{background:rgba(255,255,255,.25);color:#fff}
nav.woocommerce-pagination ul li span.current{background:var(--mustard);color:var(--navy)}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-radius:6px}

/* ---------- Single product ---------- */
body.single-product div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 52px;align-items:start}
body.single-product div.product div.images,
body.single-product div.product div.summary{float:none!important;width:auto!important;margin:0!important}
body.single-product div.product>.woocommerce-tabs,
body.single-product div.product>section.related,
body.single-product div.product>section.upsells,
body.single-product div.product>.onsale{grid-column:1/-1}
body.single-product div.product div.images{position:relative}
body.single-product div.product div.images .woocommerce-product-gallery__wrapper{margin:0}
body.single-product div.product div.images .woocommerce-product-gallery__image{background:#fff}
body.single-product div.product div.images img{display:block;width:100%;height:auto;background:#fff}
body.single-product .flex-control-thumbs{display:flex!important;gap:10px;margin:12px 0 0!important;padding:0;list-style:none}
body.single-product .flex-control-thumbs li{width:calc(25% - 8px)!important;float:none!important;margin:0!important}
body.single-product .flex-control-thumbs img{background:#fff;border:2px solid transparent;opacity:.65;cursor:pointer;transition:opacity .15s}
body.single-product .flex-control-thumbs img.flex-active,body.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--mustard)}
body.single-product span.onsale{position:absolute;top:10px;left:10px;z-index:5;background:var(--orange);color:#fff;border-radius:4px;min-height:0;min-width:0;line-height:1;padding:8px 11px;font:700 12px var(--sans)}
.woocommerce-product-gallery__trigger{z-index:6}
.woocommerce div.product .product_title{font-size:clamp(24px,3vw,30px);margin:0 0 10px;color:#fff}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--slab);font-size:24px;color:#fff;margin:0 0 20px}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-rating{margin:0 0 12px}
.woocommerce div.product .woocommerce-product-rating a{color:#fff}
.woocommerce-product-details__short-description{margin:0 0 18px}
.woocommerce div.product form.cart{margin:0 0 18px}
.woocommerce div.product form.cart .variations{width:100%;border:0;margin:0 0 14px}
.woocommerce div.product form.cart .variations tr{display:block;margin:0 0 12px}
.woocommerce div.product form.cart .variations th,.woocommerce div.product form.cart .variations td{display:block;padding:0;border:0;text-align:left;background:none}
.woocommerce div.product form.cart .variations th.label{margin-bottom:8px;font-size:14px;font-weight:400;color:rgba(255,255,255,.8)}
.woocommerce div.product form.cart .variations label{color:inherit;font-weight:400}
.groovy-hidden-select{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
.groovy-swatches{display:flex;flex-wrap:wrap;gap:10px}
.groovy-swatch{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:4px;padding:8px 14px;font:14px/1.2 var(--sans);cursor:pointer;transition:background .12s,color .12s}
.groovy-swatch:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.groovy-swatch[aria-checked=true]{background:var(--cream);color:var(--navy);border-color:var(--cream);font-weight:700}
.groovy-swatch.is-unavailable{text-decoration:line-through;opacity:.45;cursor:not-allowed}
.groovy-swatch.is-unavailable:hover{background:transparent;border-color:rgba(255,255,255,.55)}
.woocommerce div.product form.cart .reset_variations{display:inline-block;margin-top:10px;font-size:13px;color:#fff}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price{margin:0 0 12px;font-weight:700}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-description{margin:0 0 10px}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,.woocommerce div.product form.cart div.quantity+button{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.woocommerce div.product form.cart:not(.variations_form){display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.woocommerce .quantity{margin:0!important;float:none}
.woocommerce .quantity .qty{width:72px;height:44px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:transparent;color:#fff;font:700 16px var(--sans);text-align:center}
.groovy-return-note{font-size:14px;margin:0 0 6px;color:rgba(255,255,255,.9)}
.groovy-about{margin-top:28px}
.groovy-about h2{font-family:var(--sans);font-size:17px;font-weight:700;margin:0 0 10px}
.groovy-about p{margin:0 0 1em}
.groovy-about ul{padding-left:1.2em}
.product_meta{font-size:13px;color:rgba(255,255,255,.75);margin-top:18px}
.product_meta a{color:#fff}

/* Accordion product tabs */
.woocommerce-tabs{margin:48px 0 0}
.woocommerce-tabs ul.tabs{display:none!important}
.woocommerce-tabs .groovy-acc-btn{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font:500 17px var(--sans);padding:18px 2px;text-align:left;cursor:pointer}
.woocommerce-tabs .groovy-acc-btn::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:6px}
.woocommerce-tabs .groovy-acc-btn[aria-expanded=true]::after{transform:rotate(-135deg)}
.woocommerce-tabs.is-accordion .woocommerce-Tabs-panel{display:none!important;padding:18px 2px 6px;margin:0;border-bottom:1px solid rgba(255,255,255,.35)}
.woocommerce-tabs.is-accordion .woocommerce-Tabs-panel.is-open{display:block!important}
.woocommerce-tabs .woocommerce-Tabs-panel h2{font-family:var(--sans);font-size:18px;font-weight:700}
.woocommerce-tabs table.shop_attributes{border:0;width:100%}
.woocommerce-tabs table.shop_attributes th,.woocommerce-tabs table.shop_attributes td{border:0;border-bottom:1px solid rgba(255,255,255,.2);background:none;color:#fff;font-style:normal;padding:10px 6px}
.woocommerce-tabs table.shop_attributes td p{margin:0}
.woocommerce-tabs #reviews #comments ol.commentlist li .comment-text{border-color:rgba(255,255,255,.3);color:#fff}
.woocommerce-tabs #reviews #review_form_wrapper{color:#fff}
.woocommerce-tabs #review_form #respond textarea,.woocommerce-tabs #review_form #respond input[type=text],.woocommerce-tabs #review_form #respond input[type=email]{background:#fff;color:var(--navy);border:0;border-radius:4px;padding:10px}
section.related,section.upsells{margin-top:56px}
section.related>h2,section.upsells>h2{text-align:center;font-size:28px;margin-bottom:26px}

/* ---------- Pages (cart, checkout, account, legal) on a cream card ---------- */
.groovy-page-title{text-align:center;font-size:clamp(28px,4vw,38px);margin:0 0 28px}
.groovy-paper{background:var(--cream);color:#2b1a0e;border-radius:10px;padding:clamp(20px,4vw,40px);overflow:hidden}
.groovy-paper h1,.groovy-paper h2,.groovy-paper h3,.groovy-paper h4{color:var(--brown)}
.groovy-paper a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button){color:#a63f06}
.groovy-paper a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):hover{color:var(--brown)}
.groovy-paper .woocommerce{color:#2b1a0e}
.groovy-paper table{border-collapse:collapse}
.groovy-paper input[type=text],.groovy-paper input[type=email],.groovy-paper input[type=tel],.groovy-paper input[type=password],.groovy-paper input[type=number],.groovy-paper select,.groovy-paper textarea{background:#fff;color:#2b1a0e;border:1px solid #b9a77f;border-radius:4px;padding:10px}
.groovy-paper .woocommerce-message,.groovy-paper .woocommerce-info,.groovy-paper .woocommerce-error{background:#fff}
.groovy-paper .quantity .qty{background:#fff;color:#2b1a0e;border-color:#b9a77f}
.groovy-entry-meta{font-size:14px;opacity:.8;margin-bottom:18px}
.groovy-post{margin-bottom:28px}
.groovy-post h2 a{color:#fff;text-decoration:none}
.groovy-404{text-align:center;padding:60px 0}

/* ---------- Footer ---------- */
.groovy-footer{background:var(--navy);color:#fff;margin-top:0;padding:34px 0 38px}
.groovy-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 40px;align-items:flex-start}
.groovy-footer .groovy-menu{gap:8px 24px}
.groovy-footer .groovy-menu a{font-size:14px;font-weight:400}
.groovy-footer__copy{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.8)}
.groovy-social{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.groovy-social a{color:#fff;display:block;line-height:0;padding:4px}
.groovy-social a:hover{color:var(--mustard)}
.groovy-social svg{width:22px;height:22px}

/* ---------- WordPress core alignment bits ---------- */
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{display:block;margin:0 auto 1em}
.wp-caption-text{font-size:13px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .groovy-main .woocommerce ul.products,.groovy-main ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .groovy-carousel__track ul.products li.product{flex-basis:calc((100% - 48px)/3)}
  .groovy-carousel__btn--prev{left:-8px}.groovy-carousel__btn--next{right:-8px}
}
@media (max-width:800px){
  body.single-product div.product{grid-template-columns:minmax(0,1fr)}
  body.single-product div.product div.images{margin-bottom:26px!important}
  .groovy-nav-toggle{display:block;order:3}
  .groovy-cart{order:2}
  .groovy-header__inner{flex-wrap:wrap;gap:0 12px;min-height:72px}
  .groovy-nav{display:none;order:4;flex:1 0 100%;padding:6px 0 16px}
  .groovy-nav.is-open{display:block}
  .groovy-menu{flex-direction:column;gap:0}
  .groovy-menu a{padding:12px 0;display:block;border-bottom:1px solid rgba(255,255,255,.15)}
  .groovy-hero{min-height:300px}
  .groovy-hero__panel{margin:0 0;max-width:none}
}
@media (max-width:640px){
  .groovy-wrap{padding:0 16px}
  .groovy-main .woocommerce ul.products,.groovy-main ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .groovy-carousel__track ul.products li.product{flex-basis:calc((100% - 14px)/2)}
  .groovy-carousel__track .woocommerce ul.products{gap:14px}
  .groovy-section{padding-top:36px;padding-bottom:36px}
  .groovy-section__title{font-size:27px}
  .groovy-hero{padding:24px 0;align-items:flex-end}
  .groovy-hero__panel{padding:22px}
  .woocommerce-result-count{float:none;display:block}
  .woocommerce-ordering{float:none}
}