/* CSNStore — base + components, ported from Claude Design export */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.csn{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.csn a{color:var(--link);text-decoration:none}
.csn a:hover{color:var(--link-hover)}
.csn button{font-family:inherit;border:none;background:none;cursor:pointer}
.csn input,.csn textarea,.csn select{font-family:inherit}
.csn ::selection{background:var(--brand-soft);color:var(--brand-press)}
.csn ::-webkit-scrollbar{width:11px;height:11px}
.csn ::-webkit-scrollbar-thumb{background:var(--sand-200);border-radius:99px;border:3px solid var(--bg-app)}
.csn input::placeholder,.csn textarea::placeholder{color:var(--stone-400)}

@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes floaty2{0%,100%{translate:0 0}50%{translate:0 12px}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes spinslow{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.csn *{animation:none!important}}

/* ---- Hover interactions (design used inline style-hover; real CSS here) ---- */
.csn-nav-link:hover{background:var(--sand-50);color:var(--brand-press)}
.csn-icon-btn:hover{background:var(--sand-100)}
.csn-bag-btn:hover{transform:translateY(-2px) scale(1.04)}
.csn-cta-primary:hover{transform:translateY(-2px)}
.csn-cta-outline:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-soft)}
.csn-workshop-btn:hover{transform:translateY(-1px);background:var(--teal-100)}
.csn-cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.csn-product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.csn-product-card:hover .csn-product-media{transform:scale(1.06)}
.csn-add-btn:hover{transform:scale(1.08);background:var(--brand)}
.csn-gallery-tile:hover{transform:scale(1.04)}
.csn input:focus,.csn textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(42,157,143,.2);outline:none}
.csn-swatch:hover{transform:scale(1.12)}
.csn-upload-drop:hover{border-color:var(--brand);background:var(--brand-soft)}

/* ---- Reveal on scroll ---- */
.csn [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.csn [data-reveal].is-shown{opacity:1;transform:none}

/* ---- Logo/mark sizing guard: WooCommerce's own woocommerce-layout.css ships
   `.woocommerce img{height:auto;max-width:100%}` which can override intended
   fixed-size logo marks on WC pages. Inline styles on the tags themselves are
   the primary fix; this is a defensive backstop. ---- */
.csn-header img[alt="CSN Store"]{height:36px!important;width:36px!important;max-width:36px!important}
footer img[alt="CSN"]{height:34px!important;width:34px!important;max-width:34px!important}

/* ---- Header ---- */
.csn-header{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.csn-marquee-strip{background:var(--soft-black);color:#fff;overflow:hidden;white-space:nowrap;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;padding:7px 0}
.csn-marquee-strip>div{display:inline-flex;gap:44px;padding-left:44px;animation:marquee 26s linear infinite;will-change:transform}
.csn-header-row{max-width:var(--container-max);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:26px}
.csn-header-nav{display:flex;gap:2px;margin-left:8px}
.csn-header-nav a{cursor:pointer;white-space:nowrap;padding:9px 13px;border-radius:var(--radius-pill);font-weight:500;font-size:15px;color:var(--text-secondary);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.csn-mobile-toggle{display:none}
.csn-mobile-nav{display:none}

/* ---- Category marquee ---- */
.csn-cat-marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--paper);overflow:hidden;padding:16px 0}
.csn-cat-marquee>div{display:inline-flex;gap:40px;white-space:nowrap;animation:marquee 30s linear infinite;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--sand-200);align-items:center;will-change:transform}

/* ---- Product/category card grids ---- */
.csn-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.csn-grid-4-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.csn-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

/* ---- Responsive ---- */
@media (max-width: 1024px){
  .csn-grid-4,.csn-grid-4-cat{grid-template-columns:repeat(2,1fr)}
  .csn-grid-6{grid-template-columns:repeat(3,1fr)}
  .csn-hero-grid{grid-template-columns:1fr!important}
  .csn-hero-visual{display:none}
  .csn-why-grid{grid-template-columns:1fr!important}
}
@media (max-width: 768px){
  .csn-header-nav{display:none}
  [data-hidemobile]{display:none!important}
  .csn-mobile-toggle{display:grid;place-items:center}
  .csn-grid-4,.csn-grid-4-cat{grid-template-columns:repeat(2,1fr)}
  .csn-grid-6{grid-template-columns:repeat(2,1fr)}
  .csn-why-values{grid-template-columns:1fr!important}
  .csn-order-steps{grid-template-columns:1fr!important}
}
@media (max-width: 480px){
  .csn-grid-4,.csn-grid-4-cat,.csn-grid-6{grid-template-columns:repeat(2,1fr)}
}

/* ---- Header tagline: hide on narrow screens to keep header row tidy ---- */
@media (max-width: 768px){
  .csn-header-tagline{display:none}
}

/* ---- Mobile nav close button ---- */
.csn-mobile-nav-close{align-self:flex-end;width:40px;height:40px;border-radius:50%;background:var(--surface-card);display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:var(--text-primary)}

/* ---- Mobile-only fixes: category card title truncation ---- */
@media (max-width: 768px){
  .csn-cat-card h3{font-size:20px!important;overflow-wrap:break-word;word-break:break-word}
}
@media (max-width: 480px){
  .csn-cat-card h3{font-size:18px!important}
  .csn-cat-card{min-height:290px!important}
}

/* ---- Mobile nav drawer ---- */
.csn-mobile-nav.is-open{display:flex}
.csn-mobile-nav{position:fixed;inset:0;z-index:95;background:var(--bg-app);flex-direction:column;padding:20px 24px;gap:4px;overflow-y:auto}
.csn-mobile-nav a,.csn-mobile-nav button{padding:16px 4px;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);border-bottom:1px solid var(--border);text-align:left;width:100%}

/* ---- Toast / overlays share transition ---- */
.csn-overlay-in{animation:pop .3s var(--ease-out)}


/* YITH wishlist button hydrated inside .csn-wishlist-btn — force it to fill and center regardless of the plugin's own internal markup/spacing */
.csn-wishlist-btn {
  padding: 0;
}
.csn-wishlist-btn .yith-wcwl-add-to-wishlist-button__label,
.csn-wishlist-btn .yith-wcwl-add-to-wishlist-button-anchor-wrapper .yith-wcwl-add-to-wishlist-button__label {
  display: none !important;
}
.csn-wishlist-btn > *,
.csn-wishlist-btn .yith-add-to-wishlist-button-block > *,
.csn-wishlist-btn a,
.csn-wishlist-btn button {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
}
.csn-wishlist-btn svg,
.csn-wishlist-btn .yith-wcwl-icon-svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--stone-600, #6b6459) !important;
}
.csn-wishlist-btn .yith-wcwl-add-to-wishlist-button--added svg,
.csn-wishlist-btn .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon-svg,
.csn-wishlist-btn .yith-wcwl-add-to-wishlist.exists svg {
  color: var(--brand, #E07A5F) !important;
  fill: var(--brand, #E07A5F);
}
.csn-wishlist-btn > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.csn-wishlist-btn a,
.csn-wishlist-btn button {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
}
.csn-wishlist-btn svg,
.csn-wishlist-btn i {
  display: block;
  margin: 0 auto;
  width: 16px !important;
  height: 16px !important;
}


.csn-ig-feed-wrap{width:100%}
.csn-ig-feed-wrap #sb_instagram{width:100%!important}

/* Visual polish to match the rest of the site: rounded corners, real gap between tiles, hover lift */
.csn-ig-feed-wrap #sbi_images{gap:12px!important}
.csn-ig-feed-wrap .sbi_item{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.csn-ig-feed-wrap .sbi_item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.csn-ig-feed-wrap .sbi_photo_wrap,.csn-ig-feed-wrap .sbi_photo{border-radius:var(--radius-md);overflow:hidden}
.csn-ig-feed-wrap .sbi_photo img{border-radius:var(--radius-md)}