img.catimage{
  width:200px !important;
}

:root{
  --cream:#FCFAF6;
  --char:#34383A;
  --burg:#8B2028;
  --burg-dark:#741A21;
  --sage:#87947D;
  --sage-dark:#6F7E67;
  --line:#D7D8CE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#f4f2ed;color:var(--char);
  font-family:Arial,Helvetica,sans-serif;line-height:1.45;
}
.site{
  position:relative;width:96%;max-width:1550px;margin:0 auto;background:var(--cream);
  min-height:100vh;box-shadow:0 0 20px rgba(40,40,35,.09);
}
.utility{
  position:relative;
  z-index:5;
  top:auto;
  right:auto;
  height:28px;
  padding:6px 12px 0;
  font-size:12px;
  text-align:right;
}
.utility a{margin-left:16px;color:var(--burg);text-decoration:none}

/* HEADER: decorative image behind live HTML text */
.head,.header{
  min-height:250px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:var(--cream);
  
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  padding:38px 250px 24px;
}
.head h1,.header h1{
  position:static!important;width:auto!important;height:auto!important;
  margin:0!important;padding:0!important;overflow:visible!important;
  clip:auto!important;white-space:normal!important;border:0!important;
  color:var(--char);
  font:normal clamp(48px,5.4vw,78px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-1px;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.head p,.header .tagline{
  position:static!important;width:auto!important;height:auto!important;
  margin:8px 0 0!important;padding:0!important;overflow:visible!important;
  clip:auto!important;white-space:normal!important;border:0!important;
  color:var(--burg);
  font:italic clamp(23px,2.4vw,35px)/1.15 "Segoe Print","Bradley Hand","Lucida Handwriting",cursive;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.head .sprig,.header .sprig{
  position:static!important;width:310px!important;height:25px!important;
  margin:12px 0 0!important;padding:0!important;overflow:visible!important;
  clip:auto!important;white-space:normal!important;border:0!important;
  display:flex!important;align-items:center;justify-content:center;gap:12px;
  color:var(--burg);
  font-size:23px;
}
.head .sprig:before,.head .sprig:after,
.header .sprig:before,.header .sprig:after{
  content:"";height:2px;flex:1;
  background:var(--sage);
}
.berry{color:var(--burg)}

nav,.topnav{background:var(--burg);text-align:center}
nav a,.topnav a{
  display:inline-block;padding:14px 22px;color:#fff;text-decoration:none;
  font-size:13px;font-weight:bold;letter-spacing:.02em;
}
nav a:hover,.topnav a:hover{background:rgba(255,255,255,.12)}

.layout,.store-layout{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  align-items:start;background:var(--cream);
}
.side,.sidebar{padding:22px 15px 38px}
.sidebox,.sidebar-box{
  position:sticky;top:12px;border:3px solid var(--sage);border-radius:5px;
  padding:14px 12px 17px;background:var(--cream);
}
.sidebox h2,.sidebar-box h2{
  font:normal 17px Georgia,"Times New Roman",serif;margin:0 0 8px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.links,.shop-links{list-style:none;padding:0;margin:0}
.links li,.shop-links li{border-bottom:1px solid var(--line)}
.links a,.shop-links a{
  display:flex;justify-content:space-between;gap:8px;padding:10px 3px;
  text-decoration:none;color:var(--char);font:15px Georgia,"Times New Roman",serif;
}
.links a:after,.shop-links a:after{
  content:">";
  color:var(--sage-dark);
}
.links a:hover,.shop-links a:hover{color:var(--burg)}
.join,.mail-list{text-align:center;border-top:1px solid var(--sage);margin-top:18px;padding-top:16px}
.join h3,.mail-list h3{font:normal 20px Georgia,serif;margin:0 0 7px}
.join p,.mail-list p{font-size:12px;margin:0 0 12px}
.btn,.button{
  display:inline-block;background:var(--burg);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:3px;font-size:13px;font-weight:bold;
}
.btn:hover,.button:hover{background:var(--burg-dark)}
.btn.sage,.button.sage{background:var(--sage-dark)}

main{min-width:0}
.hero{
  display:grid;grid-template-columns:.8fr 1.35fr;gap:28px;
  align-items:center;padding:25px 3.5%;
}
.herotxt{text-align:center}
.hero h2{font:normal clamp(31px,3.5vw,51px)/1.05 Georgia,serif;margin:0 0 13px}
.hero p{font-size:15px}
.photo{display:grid;place-items:center;background:#eeece7;color:#777;letter-spacing:.08em;font-size:11px}
.hero .photo{min-height:315px;border:1px solid var(--line)}
section{padding:22px 3.5% 28px}
.title{text-align:center;font:normal 30px Georgia,serif;margin:0 0 4px}
.title:before,.title:after{
  content:"\2767";
  color:var(--sage-dark);
  margin:0 12px;
  font-size:20px;
}
.intro{text-align:center;font-size:13px;margin:0 0 17px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{border:2px solid var(--sage);border-radius:3px;overflow:hidden;text-align:center;background:var(--cream);padding-bottom:12px}
.card .photo{aspect-ratio:4/3}
.card h3{font:normal 17px Georgia,serif;margin:9px 6px 3px}
.card p{font-size:12px;margin:0 8px 8px}
.price{display:block;color:var(--char);font:bold 17px Georgia,serif;margin:6px}

.ect-content{min-width:0;min-height:700px;padding:30px 3.5% 45px;background:var(--cream)}
.ect-placeholder{
  min-height:620px;display:flex;align-items:center;justify-content:center;padding:40px;
  border:2px dashed var(--sage);border-radius:5px;text-align:center;color:#70736d;
}
.ect-placeholder h2{margin:0 0 8px;color:var(--char);font:normal 30px Georgia,serif}
.ect-placeholder p{max-width:580px;margin:0 auto;font-size:14px}

.signup{
  display:grid;grid-template-columns:1.3fr 1fr;gap:25px;align-items:center;
  background:var(--sage);color:#fff;padding:25px 5%;
}
.signup h2{font:italic 30px Georgia,serif;margin:0 0 5px}
.signup p{font-size:12px;margin:0}
.form,.signup-form{display:flex;gap:8px}
.form input,.signup-form input{flex:1;min-width:0;padding:11px}

/* FOOTER: artwork-only background + one live set of links/copyright */
.foot,.footer{
  min-height:180px;padding:42px 29% 28px;text-align:center;
  background-color:var(--cream);
  
  background-repeat:no-repeat;background-position:center center;background-size:cover;
}
.foot a,.footer a{color:var(--char);text-decoration:none;margin:0 7px;font-size:12px}
.foot p,.footer p{font-size:11px;margin:9px 0}
.footer .heart,.foot .heart{color:var(--burg);font-size:21px;line-height:1}

.mobile,.mobile-categories{display:none}

@media(max-width:1050px){
  .layout,.store-layout{grid-template-columns:200px minmax(0,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head,.header{padding-left:190px;padding-right:190px}
}
@media(max-width:760px){
  body{background:var(--cream)}.site{width:100%}
  .utility{position:relative;right:auto;text-align:center;background:var(--cream)}
  .head,.header{min-height:190px;padding:30px 70px 20px;background-size:cover}
  .head h1,.header h1{font-size:42px}
  .head p,.header .tagline{font-size:20px}
  .head .sprig,.header .sprig{width:210px}
  .layout,.store-layout{display:block}.side,.sidebar{display:none}
  .mobile,.mobile-categories{display:block;padding:12px 5%;border-bottom:2px solid var(--sage);font-weight:bold}
  .hero{grid-template-columns:1fr;padding:30px 6%}.grid{grid-template-columns:1fr}
  .signup{grid-template-columns:1fr;text-align:center}.form,.signup-form{flex-direction:column}
  nav a,.topnav a{padding:12px 9px;font-size:11px}
  .ect-content{padding:25px 5%;min-height:500px}.ect-placeholder{min-height:430px}
  .foot,.footer{min-height:150px;padding:34px 18%}
}

/* FINAL HEADER TEST: logo, script tagline and heart divider are baked into header.png */
.head h1, .head p, .head .sprig,
.header h1, .header .tagline, .header .sprig {
  display:none !important;
}
.head, .header {
  min-height:250px;
  padding:0 !important;
  background-position:center center !important;
  background-size:cover !important;
}


/* FINAL STORE TEMPLATE LOCKED STYLES */
.head, .header {
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:2048 / 512;
    padding:0 !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
}
.head h1,.head p,.head .sprig,
.header h1,.header .tagline,.header .sprig {
    display:none !important;
}
.foot, .footer {
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1482 / 290;
    padding:0 !important;
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-color:#FCFAF6 !important;
}
.foot > *, .footer > * {
    display:none !important;
}

/* Expression-friendly header/footer image rules */
.header-art { width:100%; line-height:0; }
.header-art img { display:block; width:100%; height:auto; }
.footer-art { width:100%; line-height:0; }
.footer-art img { display:block; width:100%; height:auto; }

/* HOME PAGE HERO IMAGE */
.hero-photo {
  width:100%;
  height:315px;
  overflow:hidden;
  border:1px solid var(--line);
}

.hero-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* HOME PAGE MAIN COLUMN WIDTH FIX */
.layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr) !important;
  width:100%;
}

.layout main {
  grid-column:2;
  width:100%;
  min-width:0;
}

.hero {
  display:grid;
  width:100%;
  grid-template-columns:.8fr 1.35fr;
  gap:28px;
  align-items:center;
  padding:25px 3.5%;
}
/* HOMEPAGE CATEGORY IMAGES */
.category-photo {
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
}

.category-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
/* =========================================
   NEW HUGS & STITCHES - ECT PRODUCT LISTINGS
   ========================================= */

div.products{
  gap:0px;
}
div.product{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  margin:0 0 28px !important;
  padding:18px !important;
  border:1px solid #E3E1DA !important;
  background:var(--cream);
}

div.prodimage{
  margin-bottom:14px;
  text-align:center;
}

img.prodimage{
  max-width:100%;
  height:auto;
}

div.prodname{
  margin:8px 0 12px !important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px !important;
  font-weight:bold;
  line-height:1.3;
  text-align:center;
  color:var(--char);
}

div.proddescription{
  max-width:714px;
  margin:0 auto 16px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:16px !important;
  font-weight:normal !important;
  line-height:1.55 !important;
  text-align:center !important;
  color:var(--char) !important;
}

div.prodoptions{
  margin:14px 0 !important;
  text-align:center;
}

div.prodprice{
  margin:14px 0 10px !important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px !important;
  font-weight:bold;
  text-align:center;
  color:var(--char) !important;
}

button.ectbutton{
  background-color:var(--sage-dark) !important;
  color:#fff !important;
}

button.ectbutton:hover{
  background-color:var(--burg) !important;
}

button.ectbutton:hover{
  background-color:var(--burg-dark) !important;
}
.ect-content .price{
  color:var(--char) !important;
}
/* =========================================
   NEW HUGS & STITCHES - ECT PRODUCT LISTING
   ========================================= */
   
ect-content div.product div.proddescription,
.ect-content div.product div.proddescription b,
.ect-content div.product div.proddescription strong {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1.55 !important;
  text-align: center !important;
  color: var(--char) !important;
}
.ect-content div.product div.prodname {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 1.35 !important;
  text-align: center !important;
  color: var(--char) !important;
}
/* CATEGORY PAGE LAYOUT */

div.category{
  border:none !important;
  background:transparent !important;
  padding:10px 12px 24px !important;
  text-align:center !important;
  box-shadow:none !important;
}
/* =========================================
   ECT BREADCRUMBS
   ========================================= */

.ect-content .catnav{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:14px !important;
  color:var(--char) !important;
  margin-bottom:18px !important;
}

.ect-content .catnav a.ectlink{
  color:var(--burg) !important;
  text-decoration:none !important;
}

.ect-content .catnav a.ectlink:hover{
  text-decoration:underline !important;
}

.ect-content .navcurrentcat{
  color:var(--char) !important;
  font-weight:normal !important;
}
/* SINGLE COLUMN PRODUCT LAYOUT */

.ect-content div.products{
  display:block !important;
}

.ect-content div.products > div.product{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  margin:0 0 28px !important;
  border:none !important;
}
/* FORCE PRODUCT PRICES TO CHARCOAL */

.ect-content div.prodprice,
.ect-content div.prodprice .price,
.ect-content span.price{
  color:var(--char) !important;
}
/* =========================================
   CATEGORY IMAGE + NAME LAYOUT
   ========================================= */

.ect-content div.catimage{
  width:100% !important;
  display:block !important;
  text-align:center !important;
}

.ect-content div.catimage a{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

.ect-content img.catimage{
  width:200px !important;
  max-width:90% !important;
  height:auto !important;
}

.ect-content div.catname{
  width:100% !important;
  display:block !important;
  margin-top:12px !important;
  text-align:center !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:18px !important;
  color:var(--char) !important;
}


/* =========================================
   CHECKOUT IMAGE + NAME LAYOUT
   ========================================= */

button.ectbutton.checkoutbutton{
  background-color:#6F7E67 !important;
  color:#FFFFFF !important;
  border:none !important;
}

button.ectbutton.checkoutbutton:hover{
  background-color:#741A21 !important;
  color:#FFFFFF !important;
}

/* ECT CART BOXES */
.ect-content div.cartlistdiv{
  border:1px solid #E3E1DA !important;
  background:var(--cream) !important;
}

/* ECT CART HEADER BOXES */
.ect-content div.ectdivhead{
  border:1px solid #E3E1DA !important;
  background:var(--cream) !important;
}
/* =========================================
   SEARCH PAGE BOXES + NAME LAYOUT
   ========================================= */

.ect-content div.searchheader{
  border-bottom:1px solid #E3E1DA !important;
}
/* =========================================
   STANDARD TEXT LINKS
   ========================================= */

.ect-content a,
.ect-content a:link,
.ect-content a:visited {
  color:#741A21 !important;
  text-decoration:underline;
}

.ect-content a:hover {
  color:#6F7E67 !important;
}

.ect-content a:focus,
.ect-content a:active {
  color:#741A21 !important;
}