/*
Theme Name: Shuushinkan
Theme URI: https://shuushinkan.letsinspire.com
Description: Brand theme for the Shuushinkan International store (Isao Machii merch). Child of Storefront, dark cinematic look layered on WooCommerce. Visual direction in /demo/index.html.
Author: Let's Inspire
Version: 0.2.0
Template: storefront
Requires PHP: 8.0
Text Domain: shuushinkan
*/

:root{
  --sk-bg:#0b0b0d;
  --sk-bg-2:#101013;
  --sk-bg-3:#15151a;
  --sk-ink:#f3f1ec;
  --sk-ink-soft:#b4b0a8;
  --sk-ink-faint:#76736c;
  --sk-line:rgba(255,255,255,.10);
  --sk-line-soft:rgba(255,255,255,.06);
  --sk-accent:#b1392c;
  --sk-accent-bright:#cf4636;
  --sk-radius:14px;
  --sk-maxw:1240px;
}

/* ---------- global dark base ---------- */
body,
body.woocommerce,
body.woocommerce-page{
  background:var(--sk-bg);
  color:var(--sk-ink);
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body, #page{background:var(--sk-bg);}
a{color:var(--sk-ink);}
a:hover{color:var(--sk-accent-bright);}
h1,h2,h3,h4{color:var(--sk-ink);font-weight:900;letter-spacing:-.01em;}
p{color:var(--sk-ink-soft);}
.sk-wrap{max-width:var(--sk-maxw);margin:0 auto;padding:0 24px;}
.sk-accent{color:var(--sk-accent-bright);}

/* ---------- header / nav ---------- */
.site-header{
  background:rgba(11,11,13,.82) !important;
  border-bottom:1px solid var(--sk-line-soft);
  backdrop-filter:saturate(140%) blur(12px);
  padding:14px 0;
  position:sticky;top:0;z-index:100;
}
.site-header .col-full{max-width:var(--sk-maxw);}
.site-branding .custom-logo{max-height:46px;width:auto;}
.site-header .site-title a,.site-header .site-description{color:var(--sk-ink) !important;}
.main-navigation ul li a,
.site-header-cart .cart-contents{color:var(--sk-ink-soft) !important;font-weight:500;}
.main-navigation ul li a:hover,
.site-header-cart .cart-contents:hover{color:var(--sk-ink) !important;}
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children{background:var(--sk-bg-2);border:1px solid var(--sk-line);}
.site-header-cart .cart-contents{border-radius:999px;}
.site-header-cart .count{background:var(--sk-accent) !important;color:#fff !important;}

/* ---------- buttons (brand + woo) ---------- */
.sk-btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button,
button.single_add_to_cart_button{
  font-family:inherit;font-weight:700;letter-spacing:.01em;border-radius:999px !important;
  border:1px solid transparent;transition:transform .12s ease,background .2s ease,border-color .2s ease;
  text-transform:none;
}
.sk-btn{display:inline-block;font-size:15px;padding:15px 28px;cursor:pointer;}
.sk-btn-primary,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce .button.alt,button.single_add_to_cart_button{
  background:var(--sk-accent) !important;color:#fff !important;border-color:var(--sk-accent) !important;
}
.sk-btn-primary:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
button.single_add_to_cart_button:hover{background:var(--sk-accent-bright) !important;
  box-shadow:0 0 28px rgba(177,57,44,.32);}
.sk-btn-ghost{background:transparent;color:var(--sk-ink);border-color:var(--sk-line);}
.sk-btn-ghost:hover{border-color:rgba(255,255,255,.4);color:var(--sk-ink);}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button{
  background:transparent;color:var(--sk-ink);border-color:var(--sk-line);
}
.sk-btn:active,.woocommerce .button:active{transform:translateY(1px);}

/* ---------- HERO ---------- */
.sk-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--sk-line-soft);}
.sk-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:84vh;align-items:stretch;}
.sk-hero-copy{display:flex;flex-direction:column;justify-content:center;max-width:600px;margin-left:auto;width:100%;padding:64px 40px 64px 24px;
  opacity:0;transform:translateY(28px);animation:skFadeUp .9s cubic-bezier(.16,1,.3,1) .2s forwards;}
.sk-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--sk-accent-bright);font-weight:700;margin:0 0 22px;}
.sk-title{font-size:clamp(38px,5.2vw,70px);line-height:1.02;margin:0 0 10px;}
.sk-title span{color:var(--sk-ink-soft);font-weight:700;}
.sk-hero-jp{font-size:15px;color:var(--sk-ink-faint);letter-spacing:.2em;margin:0 0 24px;}
.sk-lead{font-size:18px;color:var(--sk-ink-soft);margin:0 0 32px;max-width:46ch;}
.sk-hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.sk-hero-photo{position:relative;overflow:hidden;}
.sk-hero-photo img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:center top;
  transition:transform .3s ease,translate .15s linear;}
.sk-hero-photo.parallax img{will-change:transform;translate:none;}
.sk-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sk-bg) 0%,rgba(11,11,13,.25) 22%,rgba(11,11,13,0) 50%);z-index:3;}
.sk-hero-photo::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,var(--sk-bg) 0%,rgba(11,11,13,0) 30%);}

@keyframes skFadeUp{to{opacity:1;transform:translateY(0);}}

/* ---------- scroll reveal ---------- */
.sk-rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);}
.sk-rv.in{opacity:1;transform:translateY(0);}

/* ---------- RECORDS ---------- */
.sk-records{background:var(--sk-bg-2);border-bottom:1px solid var(--sk-line-soft);}
.sk-records-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 24px;}
.sk-rec h3{margin:0;font-size:30px;}
.sk-rec p{margin:4px 0 0;font-size:13px;color:var(--sk-ink-faint);line-height:1.4;}
.sk-rec .sk-unit{font-size:15px;color:var(--sk-ink-faint);}

/* ---------- STORY ---------- */
.sk-story{padding:92px 0;}
.sk-story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.sk-story-photo{border-radius:var(--sk-radius);overflow:hidden;border:1px solid var(--sk-line);aspect-ratio:3/4;background:var(--sk-bg-3);}
.sk-story-photo img{width:100%;height:100%;object-fit:cover;}
.sk-section-head{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--sk-ink-faint);font-weight:700;margin-bottom:18px;}
.sk-story h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin:0 0 22px;}
.sk-story p{font-size:17px;margin:0 0 18px;max-width:60ch;}
.sk-sig{margin-top:24px;color:var(--sk-ink-faint);font-size:14px;}
.sk-sig b{color:var(--sk-ink);}

/* ---------- PRODUCTS (homepage grid) ---------- */
.sk-shop{padding:30px 0 96px;}
.sk-shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;flex-wrap:wrap;}
.sk-shop-head h2{font-size:clamp(28px,3.6vw,46px);margin:0;}
.sk-shop-head p{margin:8px 0 0;font-size:16px;}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.sk-card{background:var(--sk-bg-2);border:1px solid var(--sk-line-soft);border-radius:var(--sk-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,border-color .2s ease;}
.sk-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18);color:var(--sk-ink);}
.sk-card:active{transform:translateY(-2px);}
.sk-card-shot{aspect-ratio:3/4;overflow:hidden;background:#0e0e11;}
.sk-card-shot img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);}
.sk-card:hover .sk-card-shot img{transform:scale(1.06);}
.sk-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;}
.sk-card-name{font-size:16px;font-weight:700;}
.sk-card-price{font-size:16px;font-weight:700;color:var(--sk-ink);}
.sk-card-price .amount{color:var(--sk-ink);}
.sk-empty{color:var(--sk-ink-faint);grid-column:1/-1;text-align:center;padding:40px;}

/* ---------- HOW ---------- */
.sk-how{background:var(--sk-bg-2);border-top:1px solid var(--sk-line-soft);border-bottom:1px solid var(--sk-line-soft);padding:80px 0;}
.sk-how h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 12px;text-align:center;}
.sk-sub{text-align:center;max-width:60ch;margin:0 auto 46px;font-size:17px;}
.sk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sk-step{padding:30px 26px;border:1px solid var(--sk-line-soft);border-radius:var(--sk-radius);background:var(--sk-bg);}
.sk-step .sk-n{font-size:13px;font-weight:700;color:var(--sk-accent-bright);letter-spacing:.2em;margin-bottom:14px;}
.sk-step h3{margin:0 0 8px;font-size:20px;font-weight:700;}
.sk-step p{margin:0;font-size:15px;}

/* ---------- WooCommerce shop + single (dark) ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{background:var(--sk-bg-2);border:1px solid var(--sk-line-soft);border-radius:var(--sk-radius);overflow:hidden;padding:0 0 16px;}
.woocommerce ul.products li.product a img{margin:0 0 12px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--sk-ink);padding:8px 16px 0;font-size:16px;font-weight:700;}
.woocommerce ul.products li.product .price{color:var(--sk-ink) !important;padding:0 16px;display:block;}
.woocommerce ul.products li.product .price .amount{color:var(--sk-ink);}
.woocommerce ul.products li.product .button{margin:10px 16px 0;}
.woocommerce .star-rating span{color:var(--sk-accent-bright);}
.woocommerce div.product .product_title{color:var(--sk-ink);}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--sk-ink);}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--sk-accent);background:var(--sk-bg-2);color:var(--sk-ink-soft);}
.woocommerce-breadcrumb{color:var(--sk-ink-faint);}
.site-content,.content-area{background:var(--sk-bg);}
.storefront-full-width-content .site-main,.site-main{background:transparent;}
.page-template-default .entry-title,.woocommerce .page-title{color:var(--sk-ink);}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],textarea,select,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{
  background:var(--sk-bg-3);border:1px solid var(--sk-line);color:var(--sk-ink);border-radius:8px;
}

/* ---------- footer ---------- */
.site-footer{background:var(--sk-bg-2) !important;color:var(--sk-ink-faint);border-top:1px solid var(--sk-line-soft);}
.site-footer a{color:var(--sk-ink-soft);}
.site-footer a:hover{color:var(--sk-ink);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .sk-hero-grid{grid-template-columns:1fr;min-height:auto;}
  .sk-hero-copy{padding:54px 24px 30px;max-width:none;margin:0;}
  .sk-hero-photo{height:60vh;min-height:360px;}
  .sk-hero-photo::after{background:linear-gradient(0deg,var(--sk-bg),rgba(11,11,13,0) 55%);}
  .sk-hero-photo::before{display:none;}
  .sk-records-grid{grid-template-columns:repeat(2,1fr);}
  .sk-story-grid{grid-template-columns:1fr;gap:30px;}
  .sk-story-photo{max-width:420px;}
  .sk-grid{grid-template-columns:repeat(2,1fr);}
  .sk-steps{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .sk-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .sk-card,.sk-btn,.sk-hero-copy,.sk-rv{transition:none;animation:none;}
  .sk-hero-copy{opacity:1;transform:none;animation:none;}
  .sk-rv{opacity:1;transform:none;}
  .sk-card-shot img,.sk-hero-photo img{transform:none !important;}
  .sk-btn-primary:hover{box-shadow:none;}
}