/*
Theme Name: Paper & Twine
Theme URI: https://example.com
Author: Your Studio
Author URI: https://example.com
Description: A minimalist theme for a handmade paper-goods shop (cards, invitations, sticker sheets). Built to pair with the WP EasyCart plugin for catalog and checkout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paper-twine
*/

:root{
  --paper:#FAF6EF;
  --paper-alt:#F1E9D8;
  --kraft:#E7D9C0;
  --kraft-dark:#D8C6A4;
  --ink:#2B2622;
  --ink-soft:#5A5148;
  --forest:#3F5D45;
  --forest-dark:#324A38;
  --berry:#A8455B;
  --twine:#C9A971;
  --line:rgba(43,38,34,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}

a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

::selection{background:var(--twine); color:var(--ink);}
:focus-visible{outline:2px solid var(--forest); outline-offset:3px;}

.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--forest);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,239,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:20px; letter-spacing:-0.01em;}
.stamp{
  width:38px; height:38px; border-radius:50%;
  border:1.5px dashed var(--forest);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transform:rotate(-8deg);
}
.stamp span{font-family:'Fraunces', serif; font-weight:700; font-size:13px; color:var(--forest); transform:rotate(8deg);}

.brand--custom-logo{display:flex; align-items:center;}
.brand--custom-logo a{display:flex; align-items:center;}
.brand--custom-logo img{
  max-height:44px;
  width:auto;
  display:block;
}
.foot-brand .brand--custom-logo img{max-height:38px;}

.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0;}
.main-nav a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover{color:var(--ink); border-color:var(--twine);}

.header-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--ink); border-radius:20px;
  padding:7px 14px; cursor:pointer; font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ink);
  transition:background .2s ease, color .2s ease;
}
.icon-btn:hover{background:var(--ink); color:var(--paper);}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0;}

@media (max-width:800px){
  .main-nav ul{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 28px 16px;
  }
  .main-nav.open ul{display:flex;}
  .main-nav ul li{border-top:1px solid var(--line);}
  .main-nav ul a{display:block; padding:12px 0;}
  .nav-toggle{display:block;}
  .brand-name{font-size:18px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:26px; font-size:14.5px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--forest); color:var(--paper);}
.btn-primary:hover{background:var(--forest-dark); box-shadow:0 4px 14px rgba(63,93,69,0.28); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* ---------- Hero ---------- */
.hero{padding:76px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center;}
.hero h1{font-size:clamp(38px, 5.4vw, 62px); line-height:1.04; margin:14px 0 22px;}
.hero h1 em{font-style:italic; font-weight:400; color:var(--forest);}
.hero p.lede{font-size:17px; color:var(--ink-soft); max-width:440px; margin:0 0 30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.hero-art{position:relative; height:400px;}
.float-card{
  position:absolute; background:var(--paper-alt);
  border:1px solid var(--line); border-radius:3px;
  box-shadow:0 14px 30px -12px rgba(43,38,34,0.28);
  padding:16px;
}
.float-card svg{width:100%; height:100%;}
.fc1{width:180px; height:130px; top:6%; left:8%; transform:rotate(-9deg);}
.fc2{width:170px; height:170px; top:32%; right:2%; transform:rotate(7deg);}
.fc3{width:200px; height:140px; bottom:2%; left:20%; transform:rotate(4deg);}
.hero-stamp{
  position:absolute; top:44%; left:44%; width:96px; height:96px; border-radius:50%;
  border:2px dashed var(--berry); display:flex; align-items:center; justify-content:center;
  transform:rotate(-14deg); background:var(--paper); z-index:5;
}
.hero-stamp span{
  font-family:'Caveat', cursive; font-weight:600; font-size:15px; color:var(--berry);
  text-align:center; line-height:1.15; transform:rotate(14deg);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding-top:0;}
  .hero-art{height:300px; order:-1;}
  .hero p.lede{max-width:none;}
}

/* ---------- Ticker ---------- */
.ticker-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--kraft); overflow:hidden; padding:13px 0;
}
.ticker{
  display:flex; gap:40px; white-space:nowrap; width:max-content;
  animation:scroll 26s linear infinite;
  font-size:13px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ticker span{display:flex; align-items:center; gap:10px;}
.ticker span::after{content:'✂'; color:var(--berry); font-size:11px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Section shell ---------- */
.section{padding:84px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:40px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(28px,3.4vw,38px);}
.section-head p{color:var(--ink-soft); max-width:380px; font-size:15px; margin:10px 0 0;}

/* ---------- Store page hero (page-store.php) ---------- */
.store-hero{padding:56px 0 20px; text-align:left;}
.store-hero h1{font-size:clamp(32px,4vw,46px); margin:12px 0 10px;}
.store-hero p{color:var(--ink-soft); max-width:520px; font-size:15.5px;}
.store-content{padding-bottom:80px;}

/* ---------- Process ---------- */
.process{background:var(--kraft);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:20px; position:relative;}
.steps::before{
  content:''; position:absolute; top:26px; left:12%; right:12%; height:0;
  border-top:2px dashed var(--twine); z-index:0;
}
@media (max-width:800px){.steps{grid-template-columns:1fr;} .steps::before{display:none;}}
.step{position:relative; z-index:1;}
.step-num{
  width:54px; height:54px; border-radius:50%; background:var(--paper);
  border:1.5px dashed var(--forest);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:17px; color:var(--forest);
  margin-bottom:16px;
}
.step h3{font-size:19px; margin-bottom:8px;}
.step p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* ---------- Quote ---------- */
.quote{text-align:center; max-width:700px; margin:0 auto; padding:90px 28px;}
.quote blockquote{
  font-family:'Caveat', cursive; font-weight:600; font-size:clamp(26px,3.6vw,36px);
  line-height:1.35; color:var(--ink); margin:0 0 18px;
}
.quote cite{font-style:normal; font-size:13.5px; color:var(--ink-soft); letter-spacing:0.04em;}

/* ---------- Custom orders (content area, editable via block editor) ---------- */
.custom-section{background:var(--paper);}
.custom{
  background:var(--forest); color:var(--paper);
  border-radius:4px; padding:56px;
}
.custom h2{color:var(--paper); font-size:clamp(26px,3vw,34px);}
.custom p{color:rgba(250,246,239,0.82); font-size:15px; max-width:560px; margin:14px 0 0;}
.custom a.btn-primary{background:var(--paper); color:var(--forest-dark);}
.custom a.btn-primary:hover{background:var(--paper-alt); color:var(--forest-dark);}
@media (max-width:800px){.custom{padding:36px 26px;}}

/* ---------- Generic page content ---------- */
.page-content{padding:70px 0; max-width:760px; margin:0 auto;}
.page-content h1{font-size:clamp(30px,4vw,42px); margin-bottom:18px;}
.page-content p{color:var(--ink-soft); font-size:16px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--kraft-dark); padding:56px 0 30px;}
.foot-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:36px; border-bottom:1px solid rgba(43,38,34,0.15);
}
.foot-brand p{max-width:260px; color:var(--ink-soft); font-size:14px; margin-top:12px;}
.foot-cols{display:flex; gap:60px; flex-wrap:wrap;}
.foot-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; color:var(--ink-soft);}
.foot-col ul{list-style:none; margin:0; padding:0;}
.foot-col a{display:block; text-decoration:none; font-size:14px; margin-bottom:9px; color:var(--ink);}
.foot-col a:hover{color:var(--forest);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:10px;}
.foot-bottom span{font-size:12.5px; color:var(--ink-soft);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* =====================================================================
   WP EasyCart skin
   ---------------------------------------------------------------------
   These rules re-skin EasyCart's own catalog/cart/account markup to
   match the Paper & Twine palette and type. EasyCart's exact class
   names can vary slightly by plugin version and by the "product style"
   (1–6) you choose in Store Settings, so after activating, inspect the
   rendered markup on your Store/Cart/Account pages in your browser and
   adjust the selectors below if something doesn't pick up the style.
   ===================================================================== */
.ec-store, #ec-store, .ec-cart-wrapper, .ec-account-wrapper{
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
}
.ec-store .ec-product, .ec-store .ec_product, .ec-store [class*="ec-product-"]{
  background:var(--paper-alt) !important;
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  box-shadow:none !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ec-store .ec-product:hover, .ec-store .ec_product:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -16px rgba(43,38,34,0.35) !important;
}
.ec-store [class*="title"]{
  font-family:'Fraunces', serif !important;
  font-weight:600 !important;
  color:var(--ink) !important;
}
.ec-store [class*="price"]{
  font-weight:600 !important;
  color:var(--ink) !important;
}
.ec-store [class*="cart-button"], .ec-store button, .ec-store input[type="submit"],
.ec-cart-wrapper button, .ec-cart-wrapper input[type="submit"],
.ec-account-wrapper button, .ec-account-wrapper input[type="submit"]{
  background:var(--forest) !important;
  border:1px solid var(--forest) !important;
  color:var(--paper) !important;
  border-radius:22px !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  padding:10px 20px !important;
  cursor:pointer;
  transition:background .18s ease;
}
.ec-store [class*="cart-button"]:hover, .ec-store button:hover, .ec-store input[type="submit"]:hover,
.ec-cart-wrapper button:hover, .ec-account-wrapper button:hover{
  background:var(--forest-dark) !important;
}
.ec-store [class*="category"], .ec-store [class*="menu"] a{
  color:var(--forest) !important;
}
.ec-store [class*="sale"], .ec-store [class*="badge"]{
  background:var(--berry) !important;
  color:var(--paper) !important;
}
.ec-cart-wrapper table, .ec-account-wrapper table{
  border-color:var(--line) !important;
}