/*
Theme Name: iCANS Shop
Description: Child of Storefront. Header (with The Crew dropdown) and footer match the-icans.com.
Template: storefront
Version: 1.2
*/

@font-face{font-family:'Marker';src:url('fonts/marker.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hand';src:url('fonts/hand.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Note';src:url('fonts/note.woff2') format('woff2');font-weight:600;font-display:swap}

:root{ --sky:#3E9FD8; --font-display:'Marker',system-ui,sans-serif; --font-body:'Hand',system-ui,sans-serif; --font-note:'Note','Hand',cursive; }

/* iCANS shop styling, matched to the-icans.com (Source/web/styles.css). Paste into Appearance > Customize > Additional CSS. */


:root{
  --paper:#F3EAD6; --card:#FBF7EC;
  --ink:#2A2622; --ink-soft:#6E6353;
  --blue:#1E5FA8; --sun:#F4C13C; --red:#D8483B;
  --line:rgba(42,38,34,.16); --line-strong:rgba(42,38,34,.34);
}

body{
  background-color:var(--paper);
  background-image:url('https://the-icans.com/bg-road.jpg');
  background-repeat:no-repeat; background-position:top center; background-size:cover; background-attachment:fixed;
  color:var(--ink); font-family:'Hand',system-ui,sans-serif; font-size:18px; line-height:1.5;
}

h1,h2,h3,h4,.site-title,.site-title a,.woocommerce-loop-product__title,.woocommerce-products-header__title{
  font-family:'Marker',system-ui,sans-serif; font-weight:400; color:var(--ink); line-height:1.05;
}

/* Header: same dark bar and cream text as the main site */
.site-header,.storefront-primary-navigation,.secondary-navigation,.site-header-cart{background:#29282f}
.site-header{border-bottom:none; box-shadow:none}
.site-header .site-title a,.site-header a,.site-header .site-header-cart a,.main-navigation a,.site-header-cart .cart-contents{color:#fff; font-family:'Hand',system-ui,sans-serif; font-size:17px; text-decoration:none}
.main-navigation ul li a:hover,.main-navigation ul li.current-menu-item > a{color:var(--sun)}
.site-branding .site-title{font-family:'Marker',system-ui,sans-serif; font-size:24px}
.site-header .site-title a{color:#fff}

/* Buttons: sun-yellow with ink outline, like the main site */
.button,button,input[type=submit],.wc-block-components-button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.added_to_cart{
  background:var(--sun); color:var(--ink); border:2.5px solid var(--ink); border-radius:20px;
  font-family:'Hand',system-ui,sans-serif; font-size:19px; box-shadow:none; text-shadow:none;
}
.button:hover,button:hover,input[type=submit]:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.added_to_cart:hover{
  background:var(--blue); color:#fff; border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink);
}
.button.disabled,.button:disabled,.woocommerce a.button.disabled{opacity:.6}

/* Product cards: cream cards with ink outline, like the main site */
.woocommerce ul.products li.product{
  background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:14px; box-shadow:none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.3rem; text-align:center}
.woocommerce ul.products li.product .price{font-family:'Hand',system-ui,sans-serif; color:var(--ink); font-weight:bold}
.woocommerce span.onsale{background:var(--red); color:#fff; border-radius:12px; font-family:'Note',cursive; font-weight:600}
.woocommerce .stock.out-of-stock{color:var(--red); font-family:'Note',cursive; font-size:1.05rem}

/* Main content panel and sidebar */
.site-main,.woocommerce-tabs,.woocommerce-breadcrumb{background:rgba(251,247,236,.55); border-radius:20px}
.site-main{padding:20px}
.widget-area .widget{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:14px}
.woocommerce-breadcrumb{padding:8px 14px; font-family:'Note',cursive; color:var(--ink-soft)}

/* Footer */
.site-footer{background:#29282f; color:#fff}
.site-footer a,.site-info{color:#fff; font-family:'Hand',system-ui,sans-serif}


/* ===== Header and footer, copied from the-icans.com (Source/web/styles.css) ===== */
.icans-header{background:#29282f; color:#fff; position:sticky; top:0; z-index:50}
.bar{display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:14px 24px; gap:20px; flex-wrap:wrap}
.brand{font-family:var(--font-display); font-size:24px; text-decoration:none; color:#fff; display:flex; align-items:center; gap:6px; flex-shrink:0}
.brand .dot{color:var(--sky)}
nav.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav a, .nav summary{
  font-family:var(--font-body); font-size:17px; color:#fff; text-decoration:none;
  cursor:pointer; list-style:none;
}
.nav a:hover, .nav summary:hover{color:var(--sun)}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:' \25BE'; font-size:12px; opacity:.8}
.crew-menu{position:relative}
.crew-menu[open] > summary::after{content:' \25B4'}
.crew-menu .panel{
  position:absolute; top:calc(100% + 10px); left:0;
  background:#1e1d23; border:2px solid var(--line-strong); border-radius:10px;
  padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  min-width:340px; box-shadow:0 14px 30px rgba(0,0,0,.4);
}
.crew-menu .panel a{
  display:block; padding:8px 10px; border-radius:6px; font-size:15px; white-space:nowrap;
}
.crew-menu .panel a:hover{background:#2c2b33}
@media (max-width:760px){
  .crew-menu .panel{grid-template-columns:1fr; min-width:220px}
}

.social-links{display:flex; justify-content:center; gap:18px; margin:0 0 14px}
.social-links a{color:#cfc9bd; transition:color .15s, transform .15s; display:inline-flex}
.social-links a:hover{color:var(--sun); transform:translateY(-2px)}
.social-links svg{width:24px; height:24px}

/* ===== CHARACTER PAGE ===== */
.char-page{display:flex; justify-content:center}
.char-poster{max-width:460px; width:100%; border-radius:18px; border:3px solid var(--card); box-shadow:0 18px 40px var(--shadow)}
.char-back{display:block; text-align:center; margin-top:26px; font-family:var(--font-note); font-size:1.2rem; color:var(--blue)}

/* ===== SIMPLE INFO PAGES (music / youtube / shop / contact) ===== */
.info-card{
  max-width:640px; margin:0 auto; text-align:center;
  background:var(--card); border:2.5px solid var(--ink); border-radius:20px;
  padding:44px 34px; box-shadow:6px 7px 0 var(--shadow);
}
.info-card p{color:var(--ink-soft); font-size:1.1rem; line-height:1.8}
.contact-line{font-family:var(--font-note); font-size:1.4rem; color:var(--blue); display:block; margin:8px 0; text-decoration:none}

/* ===== FOOTER ===== */
footer{background:#29282f; color:#cfc9bd; text-align:center; padding:34px 20px; font-size:15px}
footer a{color:var(--sun); text-decoration:none}
footer a:hover{text-decoration:underline}
.legal-links{margin-top:10px; font-size:13px; opacity:.75}
.legal-links span{margin:0 8px}

.social-links svg{ width:24px !important; height:24px !important; }
.legal-links a{ color:var(--sun) !important; }
/* Storefront's header and footer wrappers stay in place but are reset; their contents come from functions.php */
.site-header, .site-footer { background:transparent; border:0; padding:0; margin:0; box-shadow:none; }
.site-footer { background:#29282f; }
.icans-header { background:#29282f; color:#fff; position:sticky; top:0; z-index:50; }
.icans-footer { background:#29282f; color:#cfc9bd; text-align:center; padding:34px 20px; font-size:15px; }
body .site-content, body .col-full { max-width:1180px; }