/*
Theme Name: Chiitan USA
Description: Official Chiitan USA store theme. Child theme of Storefront carrying the chiitanusa.com design system: cream + pattern background, crayon brand colors, chunky outlines, sticker buttons.
Author: Chiitan USA LLC
Template: storefront
Version: 1.9.0
*/

:root{
  --pink:#D9628E;
  --blue:#4E8FC7;
  --red:#D95436;
  --yellow:#F2CE4B;
  --green:#5BAD5B;
  --ink:#3B2B25;
  --paper:#FFFDE6;
  --display:'Titan One', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
  --mono:'Space Mono', monospace;
}

/* ---------- Base ---------- */
body{
  font-family:var(--body) !important;
  background-color:var(--paper) !important;
  background-image:url('assets/pattern.png');
  background-size:330px 330px;
  color:var(--ink) !important;
}
@media (pointer:fine){
  html{cursor:url('assets/cursor-star.png') 16 16, auto}
  a, button, .button, input[type=submit], select, summary{
    cursor:url('assets/cursor-star-hover.png') 16 16, pointer !important;
  }
  input[type=text], input[type=email], input[type=tel], input[type=password], textarea{cursor:text !important}
}
::selection{background:var(--pink);color:#fff}

h1,h2,h3,.woocommerce-loop-product__title, .product_title,
.wp-block-heading, .site-branding .site-title{
  font-family:var(--display) !important;
  text-transform:uppercase;
  color:var(--ink);
  letter-spacing:.02em;
}
h1, .product_title{color:var(--pink)}


/* ---------- Caution tape (matches homepage) ---------- */
.chiitan-tape{
  background:var(--pink);
  color:#fff;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(.8rem,2vw,1rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.55em 0;
  white-space:nowrap;
  overflow:hidden;
  border-bottom:3px solid var(--ink);
}
.chiitan-tape__track{display:inline-block;animation:chiitanScroll 22s linear infinite}
.chiitan-tape span{margin:0 1.4em;display:inline-block}
@keyframes chiitanScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.chiitan-tape__track{animation:none}}

/* ---------- Header: slim single row, sticky, like the homepage ---------- */
/* overflow-x:hidden on ancestors kills position:sticky; clip prevents
   horizontal scroll without breaking it */
html, body{overflow-x:clip !important}
#page, .site, .site-content{overflow:visible !important}
.site-header{
  background:var(--paper) !important;
  border-bottom:3px solid var(--ink);
  box-shadow:none !important;
  padding:0 !important;
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:500;
}
body.admin-bar .site-header{top:32px !important}
@media(max-width:782px){body.admin-bar .site-header{top:46px !important}}
.site-header .col-full{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:1.3rem;
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:.8rem clamp(1rem,4vw,3rem) !important;
}
.site-branding, .site-header .site-branding{margin:0 !important;padding:0 !important}
.site-branding img, .site-header .custom-logo{max-height:44px !important;width:auto !important;display:block}
.site-branding .site-title{font-size:1.4rem !important;margin:0}
.site-branding .site-title a{color:var(--ink) !important;text-decoration:none}
.site-branding .site-description{display:none}

.site-header .main-navigation{margin-left:auto !important;padding:0 !important;width:auto !important;flex:0 0 auto}
.site-header-cart{flex:0 0 auto}
.chiitan-branding img{max-height:44px;width:auto;display:block}
/* Join the Chaos pill in the menu, identical to homepage */
.main-navigation ul li.chiitan-cta a{
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:.35em 1em !important;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.main-navigation ul li.chiitan-cta a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);color:var(--ink) !important}
.main-navigation ul.menu, .main-navigation ul.nav-menu{display:flex;gap:1.3rem;align-items:center}
.main-navigation ul li{margin:0 !important}
.main-navigation ul li a{
  font-weight:900 !important;
  font-size:.9rem !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink) !important;
  padding:.3em .2em !important;
}
.main-navigation ul li a:hover{color:var(--pink) !important}
.storefront-primary-navigation{background:transparent !important;padding:0;margin:0}



/* Mobile: stack naturally, keep the border */
@media(max-width:768px){
  .site-header .col-full{flex-wrap:wrap;gap:.8rem}
  .site-header .main-navigation{margin-left:0 !important;width:100% !important;order:3}
  .main-navigation ul.menu{flex-wrap:wrap;gap:.9rem}
}
.storefront-handheld-footer-bar{background:var(--paper) !important;border-top:3px solid var(--ink)}

/* ---------- Buttons ---------- */
.button, button, input[type=submit],
.woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.wc-block-components-button, .single_add_to_cart_button{
  font-family:var(--display) !important;
  font-size:1rem !important;
  text-transform:uppercase !important;
  letter-spacing:.03em;
  background:var(--yellow) !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  border-radius:999px !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  padding:.7em 1.6em !important;
  transition:transform .1s ease, box-shadow .1s ease !important;
}
.button:hover, button:hover, input[type=submit]:hover,
.woocommerce a.button:hover, .single_add_to_cart_button:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink) !important;
  background:var(--yellow) !important;
  color:var(--ink) !important;
}
.single_add_to_cart_button, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--pink) !important;
  color:#fff !important;
}

/* ---------- Product cards ---------- */
ul.products li.product{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--ink);
  padding:0 0 1.2rem !important;
  overflow:hidden;
  transition:transform .12s ease;
}
ul.products li.product:hover{transform:translate(-3px,-3px) rotate(-.5deg)}
ul.products li.product img{
  border-bottom:3px solid var(--ink);
  border-radius:0 !important;
  margin-bottom:.9rem !important;
}
ul.products li.product .woocommerce-loop-product__title{
  font-size:1.1rem !important;
  padding:0 1rem;
}
ul.products li.product .price{
  font-family:var(--mono) !important;
  font-weight:700;
  color:var(--red) !important;
  padding:0 1rem;
}
ul.products li.product .button{margin:0.6rem 1rem 0 !important}

/* ---------- Single product ---------- */
.single-product div.product .woocommerce-product-gallery img{
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:8px 8px 0 var(--ink);
  background:var(--paper);
}
.single-product div.product p.price{
  font-family:var(--mono) !important;
  font-weight:700;
  font-size:1.4rem;
  color:var(--red) !important;
}
table.variations select{
  font-family:var(--body);font-weight:700;
  border:3px solid var(--ink) !important;
  border-radius:14px !important;
  padding:.5em 1em !important;
  background:#fff;
}

/* ---------- Cart / checkout ---------- */
.woocommerce-cart table.cart, .woocommerce table.shop_table,
.wc-block-components-sidebar, .wc-block-components-main{
  background:var(--paper);
  border:3px solid var(--ink) !important;
  border-radius:18px;
}
.woocommerce table.shop_table th{font-family:var(--mono);text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner{
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:16px !important;
  color:var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink);
}
.woocommerce-message::before{color:var(--green)}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.wc-block-components-text-input input{
  border:3px solid var(--ink) !important;
  border-radius:14px !important;
  font-family:var(--body);font-weight:700;
  padding:.7em 1em !important;
  background:#fff !important;
}

/* ---------- Footer: mirror of the homepage ---------- */
.site-footer{
  background:var(--ink) !important;
  color:var(--paper) !important;
  border-top:3px solid var(--ink);
  padding:2.5rem 1rem !important;
}
.chiitan-footer{text-align:center;max-width:1000px;margin:0 auto}
.chiitan-footer .foot-logo{margin-bottom:1.2rem}
.chiitan-footer .foot-logo img{height:52px;width:auto;display:block;margin:0 auto;float:none}
.chiitan-footer .legal-links{font-family:var(--mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:1.6rem 0 .6rem}
.chiitan-footer .legal-links a{color:var(--yellow) !important;text-decoration:none;border:0;padding:0;background:none}
.chiitan-footer .legal-links a:hover{text-decoration:underline}
.chiitan-footer .socials{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.chiitan-footer .socials a{
  text-decoration:none;font-weight:900;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;
  border:2px solid var(--paper);border-radius:999px;padding:.5em 1.2em;
  color:var(--paper) !important;
  transition:background .12s,color .12s;
}
.chiitan-footer .socials a:hover{background:var(--yellow);color:var(--ink) !important;border-color:var(--yellow)}
.chiitan-footer .sns-world-title{
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;opacity:.8;margin:1.8rem 0 1rem;
}
.chiitan-footer .socials--world{max-width:820px;margin-left:auto;margin-right:auto;gap:.6rem;margin-bottom:0}
.chiitan-footer .socials--world a{font-size:.72rem;font-weight:700;padding:.4em .95em;border-width:1px;opacity:.85}
.chiitan-footer .socials--world a:hover{opacity:1}
.chiitan-footer .socials--world .cnt{
  display:inline-block;background:var(--yellow);color:var(--ink);
  border-radius:999px;padding:.1em .55em;margin-left:.35em;font-size:.9em;
}
.chiitan-footer .fine{
  font-family:var(--mono);font-size:.7rem;opacity:.65;max-width:46em;
  margin:1.6rem auto 0;line-height:1.7;
}

/* ---------- Sale badge / misc ---------- */
.onsale{
  background:var(--red) !important;
  font-family:var(--display) !important;
  border:3px solid var(--ink) !important;
  border-radius:999px !important;
  box-shadow:3px 3px 0 var(--ink);
  text-transform:uppercase;
}
.storefront-breadcrumb{background:transparent !important;border:0 !important}
.woocommerce-breadcrumb{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

@media(prefers-reduced-motion:reduce){
  .button, ul.products li.product{transition:none !important}
}

/* ---------- Cart/checkout block repairs ---------- */
/* Quantity stepper: compact, not giant circles */
.wc-block-components-quantity-selector{
  border:2px solid var(--ink) !important;
  border-radius:12px !important;
  overflow:hidden;
  background:#fff;
}
.wc-block-components-quantity-selector button,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:.15em .7em !important;
  font-family:var(--body) !important;
  font-size:1rem !important;
  min-width:0 !important;
  transform:none !important;
}
.wc-block-components-quantity-selector button:hover{
  background:var(--yellow) !important;
  transform:none !important;
  box-shadow:none !important;
}
.wc-block-components-quantity-selector input{
  border:0 !important;background:transparent !important;font-weight:700;
}
/* Remove-item link: plain text, no pill */
.wc-block-cart__remove-link, .wc-block-cart-item__remove-link{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;font-family:var(--mono) !important;font-size:.7rem !important;
  text-transform:uppercase;letter-spacing:.06em;color:var(--red) !important;
  transform:none !important;
}
/* Breathing room inside the two panels */
.wc-block-components-main{padding:1.6rem !important;background:var(--paper)}
.wc-block-components-sidebar{padding:1.6rem !important;background:var(--paper)}
.wc-block-cart-items th{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;padding:.6rem .5rem !important;
}
.wc-block-components-product-name{color:var(--blue) !important;font-weight:800}
/* Checkout CTA pink like homepage CTAs */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{
  background:var(--pink) !important;color:#fff !important;
}

/* ---------- Mini-Cart / cart widget in sidebar ---------- */
.widget .wc-block-mini-cart__button, .widget_shopping_cart{
  font-family:var(--body);
}
.widget{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:1.2rem !important;margin-bottom:1.5rem}
.widget .widget-title, .widget .wp-block-heading{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;margin-bottom:.7rem}
.widget_shopping_cart .total{font-family:var(--mono);font-weight:700;border-top:2px dashed rgba(59,43,37,.3);padding-top:.6rem}
.widget_shopping_cart .buttons .button{width:100%;text-align:center;margin-bottom:.5rem}

/* ---------- Two-column layout, independent of Storefront's body classes ---------- */
@media(min-width:900px){
  .site-content > .col-full{
    display:flex !important;
    gap:2.2rem;
    align-items:flex-start;
  }
  .site-content > .col-full > #primary,
  .site-content > .col-full > .content-area{
    flex:1 1 auto;
    min-width:0;
    width:auto !important;
    float:none !important;
    margin:0 !important;
  }
  .site-content > .col-full > #secondary,
  .site-content > .col-full > .widget-area{
    flex:0 0 300px;
    width:300px !important;
    float:none !important;
    margin:0 !important;
  }
}

/* ---------- Wide-but-capped content, centered, homepage-style padding ---------- */
.site-content > .col-full{
  max-width:1280px !important;
  width:100% !important;
  margin:0 auto !important;
  padding-left:clamp(1rem,4vw,3rem) !important;
  padding-right:clamp(1rem,4vw,3rem) !important;
}

/* ---------- Page title: old store hero treatment ---------- */
.woocommerce-products-header{text-align:center;padding:1.2rem 0 .6rem}
.woocommerce-products-header__title.page-title,
.archive .site-content h1.page-title{
  font-family:var(--display) !important;
  font-size:clamp(2.2rem,6vw,4rem) !important;
  text-transform:uppercase;
  color:var(--pink) !important;
  -webkit-text-stroke:2px var(--ink);
  text-shadow:4px 4px 0 var(--yellow);
  display:inline-block;
  transform:rotate(-1.5deg);
  margin-bottom:.6rem !important;
}
/* Product titles: calm, readable, on-brand */
.single-product div.product .product_title,
.single-product h1.entry-title,
h1.entry-title{
  font-family:var(--display) !important;
  font-size:clamp(1.5rem,3vw,2.1rem) !important;
  text-transform:uppercase;
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  transform:none !important;
  line-height:1.2;
  margin-bottom:.5rem !important;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header p{
  font-weight:700;
  max-width:34em;
  margin:0 auto 1rem;
}

/* ---------- Category tiles on the shop page ---------- */
ul.products li.product.product-category{
  text-align:center;
  padding-bottom:1.4rem !important;
}
ul.products li.product.product-category h2,
ul.products li.product.product-category .woocommerce-loop-category__title{
  font-family:var(--display) !important;
  font-size:1.2rem !important;
  text-transform:uppercase;
  color:var(--ink);
  padding:0 1rem;
}
ul.products li.product.product-category mark.count{
  background:var(--yellow);
  color:var(--ink);
  border-radius:999px;
  padding:.1em .6em;
  font-family:var(--mono);
  font-size:.8em;
  margin-left:.3em;
}

/* ---------- 404 page ---------- */
.chiitan-404{text-align:center;padding:clamp(2rem,6vw,4rem) 1rem}
.chiitan-404__code{
  font-family:var(--display);
  font-size:clamp(5rem,18vw,11rem);
  line-height:1;
  color:var(--pink);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:6px 6px 0 var(--yellow);
  display:flex;align-items:center;justify-content:center;gap:.05em;
  margin-bottom:.5rem;
}
.chiitan-404__kame{
  width:clamp(70px,14vw,150px);
  height:clamp(70px,14vw,150px);
  border-radius:50%;
  border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  animation:kameSpin 6s linear infinite;
  background:#fff;
}
@keyframes kameSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chiitan-404__kame{animation:none}}
.chiitan-404__title{
  font-family:var(--display) !important;
  font-size:clamp(1.6rem,4vw,2.6rem) !important;
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.chiitan-404__text{font-weight:700;max-width:34em;margin:0 auto 1.8rem}
.chiitan-404__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.chiitan-404__home{background:var(--pink) !important;color:#fff !important}
.chiitan-404__search{max-width:420px;margin:0 auto}
.chiitan-404__hint{font-family:var(--mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem;opacity:.75}