/*
Theme Name: Bee's Custom Tees
Theme URI: https://example.com/bees-custom-tees
Author: Bee's Custom Tees
Description: Urban streetwear theme for Bee's Custom Tees. WooCommerce-ready, with a customer artwork upload page, auto-created pages, menu and Men / Women / Teens / Kids categories.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: bees
*/

:root{
  --asphalt:#18181A;
  --asphalt-2:#26262A;
  --honey:#FFC21A;
  --honey-deep:#E0A400;
  --concrete:#E9E7E2;
  --tag:#FF4F9A;
  --white:#FFFFFF;
  --ink-soft:#5C5A55;
  --display:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  --marker:"Permanent Marker", "Comic Sans MS", cursive;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--asphalt);background:var(--concrete)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--tag);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.5px;margin:0 0 .4em}
h1{font-size:clamp(3rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:1.6rem}
p{max-width:68ch}

/* Header */
.site-header{background:var(--asphalt);color:var(--white);position:sticky;top:0;z-index:50;border-bottom:4px solid var(--honey)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:44px;height:44px;flex:none}
.brand-name{font-family:var(--display);font-size:1.7rem;letter-spacing:1px;color:var(--white)}
.brand-name span{color:var(--honey)}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.main-nav a{display:block;padding:10px 14px;text-decoration:none;font-weight:700;font-size:.95rem;border-radius:2px}
.main-nav a:hover,.main-nav .current-menu-item>a{background:var(--honey);color:var(--asphalt)}
.header-cart{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;background:var(--white);color:var(--asphalt);padding:9px 14px;border-radius:2px}
.header-cart b{background:var(--tag);color:var(--white);border-radius:50%;min-width:24px;height:24px;display:inline-grid;place-items:center;font-size:.8rem}
.nav-toggle{display:none;background:none;border:2px solid var(--honey);color:var(--honey);font:700 1rem var(--body);padding:8px 12px;cursor:pointer}

/* Hero */
.hero{background:var(--asphalt);color:var(--white);position:relative;overflow:hidden;padding:72px 0 96px}
.hero::before{content:"";position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23FFC21A' stroke-width='2'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.hero-title{font-size:clamp(4rem,13vw,10.5rem);line-height:.82;margin:0;color:var(--white)}
.hero-title .line2{display:block;color:var(--honey)}
.hero-title .line3{display:block;-webkit-text-stroke:2px var(--white);color:transparent}
.hero-sub{font-size:1.15rem;color:#CFCDC7;margin:24px 0 32px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.tee-stage{position:relative;justify-self:center;width:min(100%,420px)}
.tee-stage svg{width:100%;height:auto;filter:drop-shadow(10px 14px 0 rgba(0,0,0,.45))}
.sticker{position:absolute;right:-6px;top:6%;background:var(--tag);color:var(--white);font-family:var(--marker);font-size:1.35rem;padding:14px 18px;transform:rotate(9deg);border:3px solid var(--white);box-shadow:5px 5px 0 var(--asphalt-2);line-height:1.1;text-align:center}

/* Buttons */
.btn,.button,button.button,.wc-block-components-button,input[type=submit]{display:inline-block;font-family:var(--display);font-size:1.25rem;letter-spacing:1px;text-decoration:none;padding:14px 28px;border:3px solid var(--asphalt);background:var(--honey);color:var(--asphalt);cursor:pointer;box-shadow:5px 5px 0 var(--asphalt);transition:transform .12s, box-shadow .12s;border-radius:0}
.btn:hover,.button:hover,input[type=submit]:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--asphalt)}
.hero .btn{border-color:var(--white);box-shadow:5px 5px 0 var(--white)}
.hero .btn:hover{box-shadow:2px 2px 0 var(--white)}
.btn-ghost{background:transparent;color:var(--white)}

/* Ticker */
.ticker{background:var(--honey);border-block:4px solid var(--asphalt);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:48px;padding:14px 0;font-family:var(--display);font-size:1.6rem;animation:tick 28s linear infinite}
.ticker-track span::after{content:"⬢";margin-left:48px;font-size:1rem;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}html{scroll-behavior:auto}}

/* Sections */
.section{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.section-head p{margin:0;color:var(--ink-soft)}
.section-dark{background:var(--asphalt);color:var(--white)}
.section-dark p{color:#CFCDC7}

/* Category blocks */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:4px solid var(--asphalt)}
.cat{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;text-decoration:none;border-right:4px solid var(--asphalt);overflow:hidden}
.cat:last-child{border-right:0}
.cat:nth-child(1){background:var(--asphalt);color:var(--white)}
.cat:nth-child(2){background:var(--tag);color:var(--white)}
.cat:nth-child(3){background:var(--honey);color:var(--asphalt)}
.cat:nth-child(4){background:var(--white);color:var(--asphalt)}
.cat .cat-big{position:absolute;top:-14px;left:10px;font-family:var(--display);font-size:9rem;line-height:1;opacity:.14;pointer-events:none}
.cat h3{font-size:3rem;margin:0}
.cat p{margin:4px 0 0;font-weight:600}
.cat:hover h3{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}

/* Steps (a real sequence) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
.step{border-top:4px solid var(--honey);padding-top:18px}
.step::before{counter-increment:step;content:counter(step);font-family:var(--display);font-size:4rem;color:var(--honey);line-height:1;display:block;margin-bottom:8px}
.step h3{color:var(--white)}

/* Upload CTA band */
.cta-band{background:var(--tag);color:var(--white);padding:64px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{margin:0;max-width:16ch}

/* Page header */
.page-hero{background:var(--asphalt);color:var(--white);padding:64px 0 48px;border-bottom:4px solid var(--honey)}
.page-hero h1{margin:0}
.page-hero p{color:#CFCDC7;margin:12px 0 0;font-size:1.1rem}
.page-body{padding:64px 0 96px}
.entry-content > *{max-width:760px}
.entry-content .alignwide,.entry-content .woocommerce{max-width:none}

/* Forms */
.bee-form{background:var(--white);border:4px solid var(--asphalt);box-shadow:10px 10px 0 var(--asphalt);padding:32px;max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.bee-form label{display:block;font-weight:700;margin-bottom:6px}
.bee-form input[type=text],.bee-form input[type=email],.bee-form input[type=tel],.bee-form input[type=number],.bee-form select,.bee-form textarea{width:100%;font:inherit;padding:12px 14px;border:2px solid var(--asphalt);background:var(--concrete);border-radius:0}
.bee-form textarea{min-height:130px;resize:vertical}
.hint{font-size:.9rem;color:var(--ink-soft);margin-top:4px}
.drop-zone{border:3px dashed var(--asphalt);background:repeating-linear-gradient(-45deg,var(--concrete),var(--concrete) 14px,#F4F2EE 14px,#F4F2EE 28px);padding:36px 20px;text-align:center;cursor:pointer;position:relative}
.drop-zone.is-over{border-color:var(--tag);background:#FFE3EF}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-zone strong{font-family:var(--display);font-size:1.8rem;display:block;font-weight:400}
.drop-preview{margin-top:16px;display:none;align-items:center;gap:14px;text-align:left}
.drop-preview.show{display:flex}
.drop-preview img{width:90px;height:90px;object-fit:contain;background:var(--white);border:2px solid var(--asphalt)}
.notice{padding:16px 20px;border:3px solid var(--asphalt);margin-bottom:24px;font-weight:600;max-width:760px}
.notice-ok{background:var(--honey)}
.notice-err{background:#FFD3E4}
.hp-field{position:absolute;left:-9999px}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pull{font-family:var(--marker);font-size:1.9rem;line-height:1.25;color:var(--asphalt);background:var(--honey);padding:28px;transform:rotate(-1.5deg);border:4px solid var(--asphalt)}
.values{display:grid;gap:18px;margin-top:8px}
.values div{border-left:6px solid var(--tag);padding:4px 0 4px 16px}
.values h3{margin:0 0 4px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px}
.contact-card{background:var(--asphalt);color:var(--white);padding:28px;border:4px solid var(--asphalt)}
.contact-card h3{color:var(--honey)}
.contact-card p{color:#CFCDC7;margin:0 0 18px}

/* WooCommerce */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:var(--white);border:3px solid var(--asphalt);padding:14px!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-weight:400;font-size:1.4rem!important}
.woocommerce ul.products li.product .price{color:var(--asphalt)!important;font-weight:700}
.woocommerce span.onsale{background:var(--tag);border-radius:0;min-height:auto;line-height:1;padding:8px 10px}
.shop-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.shop-filter a{padding:10px 18px;border:3px solid var(--asphalt);text-decoration:none;font-weight:700;background:var(--white)}
.shop-filter a.active,.shop-filter a:hover{background:var(--asphalt);color:var(--honey)}

/* Footer */
.site-footer{background:var(--asphalt);color:#CFCDC7;padding:64px 0 28px;border-top:6px solid var(--honey)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.site-footer h4{font-family:var(--display);font-weight:400;font-size:1.4rem;color:var(--white);margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:6px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--honey)}
.footer-big{font-family:var(--display);font-size:clamp(3rem,10vw,8rem);color:var(--asphalt-2);line-height:.9;margin:48px 0 16px;-webkit-text-stroke:1px #3A3A3F}
.footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;border-top:1px solid #3A3A3F;padding-top:20px}
.pay-badges{display:flex;gap:8px}
.pay-badges span{background:var(--white);color:var(--asphalt);font-weight:800;font-size:.8rem;padding:4px 10px}

/* Responsive */
@media (max-width:960px){
  .hero .wrap,.about-grid,.contact-grid{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat:nth-child(2){border-right:0}
  .cat:nth-child(-n+2){border-bottom:4px solid var(--asphalt)}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .steps,.footer-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:var(--asphalt);display:none;border-bottom:4px solid var(--honey)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding:12px 24px 20px}
  .header-cart .label{display:none}
  .form-grid{grid-template-columns:1fr}
  .bee-form{padding:22px;box-shadow:6px 6px 0 var(--asphalt)}
}
@media (max-width:520px){
  .cats{grid-template-columns:1fr}
  .cat{border-right:0;border-bottom:4px solid var(--asphalt);min-height:200px}
  .woocommerce ul.products{grid-template-columns:1fr}
}