:root{
  --bg:#fbfaf7;--ink:#151712;--green:#344C34;--gold:#A6712E;
  --line:#e7e0d7;--panel:#fffdfa;--cream:#f7f3ee;
}
*{box-sizing:border-box}
html{margin:0;width:100%;background:var(--bg)}
body{margin:0;min-width:1640px;background:var(--bg);color:var(--ink);font-family:Roboto,Arial,Helvetica,sans-serif;font-size:17px}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
.site{width:1640px;margin:0 auto;overflow:hidden;background:var(--bg)}

main{position:relative;padding:14px 36px 18px;background:linear-gradient(90deg,rgba(190,203,181,.08),transparent 12%,transparent 88%,rgba(190,203,181,.05))}
main:before{content:"";position:absolute;top:0;left:0;width:640px;height:1988px;background:url("../images/Fern_Artwork.png") left top/auto 1988px no-repeat;opacity:.34;pointer-events:none}
main>*{position:relative;z-index:1}

.panel{width:1568px;margin:0 auto 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.75)}
.studio-title{height:108px;display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:0 20px;color:#365a3d;}
.title-icon{width:65px;height:65px;border-radius:11px;background:#fff0f6;display:grid;place-items:center}
.title-icon img{width:65px;height:65px;object-fit:contain}
.studio-title h1{font-size:22px;margin:0 0 6px;font-weight:700;color:#365a3d;}
.studio-title p{font-size:14px;margin:0}
.how-button{border:1px solid var(--line);border-radius:8px;padding:12px 15px;background:#fff;font-weight:700;font-size:12px}

.design-panel{padding:18px 20px 22px;background:#f8f5f0}
.section-heading h2,.shop-heading h2{font-size:19px;margin:0 0 7px;color:#365a3d;}
.section-heading p,.shop-heading p{font-size:14px;margin:0}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:22px}
.tool-card{overflow:hidden;border:5px solid var(--line);border-radius:9px;background:white;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.tool-card>img{width:100%;height:345px;object-fit:cover;display:block}
.tool-body{padding:13px 14px 15px}
.tool-body h3{font-size:19px;margin:0 0 10px}
.tool-body p{font-size:14px;line-height:1.55;margin:0 0 12px;min-height:35px}
.tool-body a{height:41px;border:2px solid var(--green);border-radius:6px;display:flex;align-items:center;padding:0 12px;font-weight:700;font-size:14px;color:#294d31}
.tool-body a span{font-size:19px;margin-right:8px}

.shop-panel{padding:18px 20px 20px;background:#f8f5f0}
.shop-heading{display:flex;align-items:flex-start;justify-content:space-between}
.shop-heading h2{
  font-size:22px;
  color:#344C34;
  font-weight:700;
}
.view-all{height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.shop-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:22px;margin-top:18px}
.shop-card{height:210px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.shop-image{height:145px;padding-top:5px;background:#fff center/cover no-repeat}
.shop-info{height:45px;position:relative;padding:10px 7px}
.shop-info b{font-size:14px;font-weight:400}.shop-info b small{font-size:14px}.shop-info>span{position:absolute;right:7px;top:4px;font-size:22px}
.shop-info>small{display:block;font-size:14px;margin-top:2px;padding-bottom:10px}
.placeholder{background:#f4f0ea}
.p1{background-image:linear-gradient(135deg,#f1d7bf,#fff)}
.p2{background-image:linear-gradient(135deg,#f8e1e7,#fff)}
.p3{background-image:linear-gradient(135deg,#f4d7c3,#fff)}
.p4{background-image:linear-gradient(135deg,#d7dfcc,#fff)}
.p5{background-image:linear-gradient(135deg,#f3c7ca,#fff)}
.p6{background-image:linear-gradient(135deg,#f6dfc2,#fff)}
.p7{background-image:linear-gradient(135deg,#efcbd6,#fff)}
.p8{background-image:linear-gradient(135deg,#e6d5c8,#fff)}

footer{height:500px;position:relative;background:#f8f5ef;border-top:1px solid #eee7df;overflow:hidden}
.leaf{position:absolute;top:0;bottom:0;width:250px;background:url("../images/Fern_Artwork.png") center/cover no-repeat;opacity:.30}
.leaf-left{left:0}.leaf-right{right:0;transform:scaleX(-1)}
.footer-grid{position:relative;z-index:1;width:1420px;margin:0 auto;display:grid;grid-template-columns:1.1fr .62fr .86fr .58fr .72fr 1fr;gap:42px;padding-top:46px}
.footer-brand img{width:175px}.footer-brand p{font-size:14px;line-height:1.7;margin-top:26px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start}
.footer-grid h3{font-family:Georgia,serif;font-size:19px;margin:0 0 17px}
.footer-col h3:after{content:"";display:block;width:27px;height:2px;background:#c28a42;margin-top:9px}
.footer-col a{font-size:14px;margin-bottom:13px}
.tools-col a{display:flex;align-items:center;gap:7px}.tools-col a img{width:24px;height:24px;object-fit:contain}
.support-box h3 span{color:#c28a42}.support-box p{font-size:14px;line-height:1.5;margin:0 0 12px}.support-box small{font-size:14px;color:#666}
.footer-bottom{position:absolute;left:74px;right:74px;bottom:0;height:73px;border-top:1px solid #ddd6ce;display:grid;grid-template-columns:1fr 1.6fr auto;align-items:center;font-size:13px;z-index:2}
.trust{display:flex;align-items:center;justify-content:center;gap:12px}.trust span{display:flex;align-items:center;gap:7px}.trust img{width:26px;height:26px;object-fit:contain}.trust i{font-style:normal}
.payments{display:flex;align-items:center;gap:8px}.payments img{height:28px;width:auto;max-width:48px;object-fit:contain}


/* Shop thumbnails: centre the existing images only */
.shop-card .shop-image{
  object-position:center center !important;
  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   DESIGN STUDIO - HOVER POLISH
   Keeps the existing layout, sizes and content.
   ========================================================= */

/* Main design tool cards */
.tool-card{
  transition:transform .17s ease, box-shadow .17s ease,
             border-color .17s ease;
}

.tool-card:hover{
  transform:translateY(-4px);
  border-color:#d2c8be;
  box-shadow:0 10px 22px rgba(54,44,35,.10);
}

.tool-card>img{
  transition:transform .22s ease, filter .22s ease;
}

.tool-card:hover>img{
  transform:scale(1.018);
  filter:saturate(1.03);
}

/* View tool buttons */
.tool-body a{
  transition:transform .15s ease, background .15s ease,
             box-shadow .15s ease;
}

.tool-body a:hover{
  transform:translateY(-1px);
  background:#f0f5ed;
  box-shadow:0 3px 8px rgba(53,90,58,.10);
}

.tool-body a .view-icon{
  transition:transform .15s ease;
}

.tool-body a:hover .view-icon{
  transform:translateX(2px);
}

/* Shop cards */
.shop-card{
  transition:transform .17s ease, box-shadow .17s ease,
             border-color .17s ease;
}

.shop-card:hover{
  transform:translateY(-3px);
  border-color:#d3c9bf;
  box-shadow:0 8px 20px rgba(54,44,35,.09);
}

.shop-card .shop-image{
  transition:transform .20s ease;
}

.shop-card:hover .shop-image{
  transform:scale(1.018);
}

.shop-info>span{
  cursor:pointer;
  transition:transform .15s ease, color .15s ease;
}

.shop-info>span:hover{
  transform:scale(1.12);
  color:#365a3d;
}

/* View All and How it works */
.view-all,
.how-button{
  transition:transform .16s ease, background .16s ease,
             border-color .16s ease, box-shadow .16s ease;
}

.view-all:hover,
.how-button:hover{
  transform:translateY(-2px);
  border-color:#cfc6bc;
  background:#fffdfa;
  box-shadow:0 6px 14px rgba(54,44,35,.07);
}

.view-all span{
  transition:transform .15s ease;
}

.view-all:hover span{
  transform:translateX(3px);
}