store

<!DOCTYPE html>

<head>

<title>CasaFae — Water for the good dog in your life.</title>

<style>

* { box-sizing: border-box; margin: 0; padding: 0; }

:root{

--cream:#FBF6EE; --cream-deep:#F3ECDD; --ink:#1F1E1B; --ink-soft:#3a3833;

--paper:#FFFDF8; --coral:#FF7A5C; --coral-deep:#E55A3D;

--blush:#F3B6C8; --blush-soft:#FFE3EA; --teal:#7ED6CC;

--warm:#6e665a; --warm-mute:#a89e8f; --line:rgba(31,30,27,.1);

--r-pill:999px;

}

html{scroll-behavior:smooth}

body{font-family:"Manrope",-apple-system,system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.01em;line-height:1.08;color:var(--ink)}

h1 em,h2 em{font-style:italic;color:var(--coral);font-weight:500}

img{display:block;max-width:100%}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

a{text-decoration:none;color:inherit}

.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin-bottom:1rem}

.eyebrow.center{display:block;text-align:center}

.eyebrow.light{color:var(--blush)}

.center{text-align:center}

.stars{color:#F0A93B;letter-spacing:1px}

.stars.big{font-size:1.2rem}

.annc{background:var(--ink);color:var(--cream);font-size:.78rem;letter-spacing:.06em;padding:11px 0;overflow:hidden}

.annc-track{display:flex;gap:3.5rem;white-space:nowrap;animation:marquee 32s linear infinite}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.nav{position:sticky;top:0;z-index:100;background:rgba(251,246,238,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:14px 5vw;display:flex;align-items:center;justify-content:space-between}

.logo{display:flex;align-items:center;gap:10px}

.logo-word{font-family:"Fraunces",serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}

.logo-dot{color:var(--coral)}

.nav-links{display:flex;gap:2.2rem;list-style:none}

.nav-links a{font-size:.88rem;font-weight:500;color:var(--warm);transition:color .2s}

.nav-links a:hover{color:var(--ink)}

.nav-cta{background:var(--ink);color:var(--cream);padding:11px 22px;border-radius:var(--r-pill);font-weight:600;font-size:.88rem;transition:transform .2s,background .2s}

.nav-cta:hover{background:var(--coral);transform:translateY(-1px)}

.hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:5rem;padding:5rem 5vw 7rem;max-width:1280px;margin:0 auto;position:relative}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--blush-soft);color:var(--coral-deep);padding:8px 16px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.75rem}

.dot{width:7px;height:7px;background:var(--coral);border-radius:50%;animation:pulse 1.6s infinite}

@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}

.hero-h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin-bottom:1.5rem}

.hero-sub{font-size:1.05rem;color:var(--warm);max-width:480px;margin-bottom:1.5rem;line-height:1.7}

.hero-stars{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--warm);margin-bottom:2rem}

.hero-stars strong{color:var(--ink)}

.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:2rem}

.btn-cta{background:var(--ink);color:var(--cream);padding:18px 30px;border-radius:var(--r-pill);font-size:1rem;font-weight:700;display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 30px -10px rgba(31,30,27,.4);transition:all .25s}

.btn-cta:hover{background:var(--coral);transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,122,92,.5)}

.btn-link{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--coral);padding:14px 4px}

.hero-badges{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--warm);font-weight:500}

.hero-visual{position:relative;aspect-ratio:1}

.hero-blob{position:absolute;border-radius:50%;filter:blur(40px);z-index:0;pointer-events:none}

.hero-blob-1{background:var(--blush);width:60%;height:60%;top:5%;left:10%;opacity:.7}

.hero-blob-2{background:var(--teal);width:45%;height:45%;bottom:5%;right:5%;opacity:.5}

.hero-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:32px;box-shadow:0 50px 80px -30px rgba(31,30,27,.35);animation:floaty 6s ease-in-out infinite}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.hero-tag{position:absolute;z-index:2;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);font-size:.82rem;font-weight:600;box-shadow:0 18px 50px -22px rgba(31,30,27,.18);border:1px solid var(--line)}

.tag-1{top:8%;right:-4%}

.tag-2{bottom:20%;left:-6%;background:var(--coral);color:#fff}

.tag-3{bottom:6%;right:8%;background:var(--ink);color:var(--cream)}

.marquee{background:var(--paper);padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}

.m-track{display:flex;gap:3rem;align-items:center;white-space:nowrap;animation:marquee 28s linear infinite;color:var(--warm-mute);font-size:.9rem;letter-spacing:.08em}

.m-brand{font-family:"Fraunces",serif;font-style:italic;font-size:1.45rem;color:var(--ink-soft);font-weight:600}

.why{padding:7rem 5vw;max-width:1200px;margin:0 auto}

.why-head{text-align:center;max-width:720px;margin:0 auto 4rem}

.why-head h2{font-size:clamp(2rem,3.8vw,3.2rem);margin-bottom:1.25rem}

.lede{color:var(--warm);font-size:1.05rem;line-height:1.75}

.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

.why-card{background:var(--paper);border-radius:24px;padding:2.5rem;border:1px solid var(--line)}

.why-card.good{background:linear-gradient(135deg,var(--blush-soft) 0%,#fff5e6 100%);border-color:var(--coral)}

.why-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#b54545;background:#fdecea;padding:6px 12px;border-radius:var(--r-pill);margin-bottom:1.5rem}

.why-tag.good{background:var(--coral);color:#fff}

.why-card ul{list-style:none}

.why-card ul li{padding:.65rem 0;font-size:1rem;color:var(--ink-soft);border-bottom:1px dashed var(--line)}

.why-card ul li:last-child{border-bottom:none}

.bottle{padding:6rem 5vw;background:var(--paper)}

.bottle-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;max-width:1280px;margin:0 auto}

.bottle-imgwrap{position:sticky;top:100px}

.bottle-main{width:100%;aspect-ratio:1;border-radius:28px;object-fit:cover;box-shadow:0 30px 60px -25px rgba(31,30,27,.18)}

.bottle-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}

.thumb{padding:0;border-radius:12px;overflow:hidden;aspect-ratio:1;border:2.5px solid transparent;transition:border-color .2s}

.thumb img{width:100%;height:100%;object-fit:cover}

.thumb.active,.thumb:hover{border-color:var(--coral)}

.bottle-info h2{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:2.5rem}

.feat-list{list-style:none;display:flex;flex-direction:column;gap:1.5rem}

.feat-list li{display:flex;gap:1.25rem;padding:1.5rem;background:var(--cream);border-radius:18px}

.feat-list li:hover{background:var(--cream-deep)}

.feat-num{font-family:"Fraunces",serif;font-size:1.2rem;font-weight:700;color:var(--coral);min-width:36px}

.feat-list h4{font-size:1.15rem;margin-bottom:4px}

.feat-list p{font-size:.92rem;color:var(--warm);line-height:1.65}

.how{padding:7rem 5vw;max-width:1100px;margin:0 auto}

.how h2{font-size:clamp(2rem,3.5vw,3rem);margin:0 auto 3.5rem;max-width:700px}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

.how-step{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:2.5rem 2rem;text-align:center;transition:transform .25s,box-shadow .25s}

.how-step:hover{transform:translateY(-4px);box-shadow:0 18px 50px -22px rgba(31,30,27,.18)}

.how-num{width:56px;height:56px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-size:1.5rem;font-weight:700;margin:0 auto 1.25rem}

.how-step h4{font-size:1.2rem;margin-bottom:.5rem}

.how-step p{color:var(--warm);font-size:.92rem}

.life{padding:0 5vw 6rem}

.life-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;grid-template-rows:480px}

.life-card{position:relative;border-radius:24px;overflow:hidden;background:var(--cream-deep)}

.life-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}

.life-card:hover img{transform:scale(1.05)}

.life-cap{position:absolute;bottom:16px;left:16px;background:rgba(31,30,27,.7);color:#fff;padding:6px 14px;border-radius:var(--r-pill);font-size:.78rem;backdrop-filter:blur(8px)}

.reviews{padding:7rem 5vw;background:var(--paper)}

.reviews-head{text-align:center;margin-bottom:4rem}

.reviews-head h2{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:1.5rem}

.agg{display:inline-flex;align-items:center;gap:12px;font-size:.95rem;color:var(--warm)}

.agg strong{color:var(--ink);font-size:1.1rem}

.muted{color:var(--warm-mute)}

.reviews-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

.review-card{background:var(--cream);border-radius:22px;padding:2.25rem;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}

.review-card:hover{transform:translateY(-3px);box-shadow:0 18px 50px -22px rgba(31,30,27,.18)}

.review-card blockquote{font-family:"Fraunces",serif;font-size:1.05rem;line-height:1.6;color:var(--ink-soft);margin:1rem 0 1.5rem;font-style:italic}

.reviewer{display:flex;align-items:center;gap:12px}

.r-av{width:42px;height:42px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}

.r-name{font-weight:700;font-size:.92rem}

.r-loc{font-size:.78rem;color:var(--warm-mute)}

.buy{padding:7rem 5vw;background:linear-gradient(180deg,var(--blush-soft) 0%,var(--cream) 100%)}

.buy-card{max-width:1100px;margin:0 auto;background:var(--paper);border-radius:28px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 60px -25px rgba(31,30,27,.18);overflow:hidden}

.buy-images{padding:2rem;background:var(--cream)}

.buy-main{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px}

.buy-thumbs{display:flex;gap:10px;margin-top:14px;justify-content:center}

.buy-thumb{width:44px;height:44px;border-radius:50%;border:3px solid transparent;transition:border-color .2s}

.buy-thumb.active{border-color:var(--ink)}

.trust-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.5rem;padding:1.25rem;background:var(--paper);border-radius:14px;border:1px solid var(--line);text-align:center}

.trust-row>div{display:flex;flex-direction:column;gap:2px}

.trust-row strong{font-size:.9rem;color:var(--ink)}

.trust-row span{font-size:.72rem;color:var(--warm)}

.buy-form{padding:2.5rem}

.buy-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.25rem}

.badge-sale{background:var(--coral);color:#fff;padding:5px 12px;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;letter-spacing:.08em}

.badge-stock{background:var(--blush-soft);color:var(--coral-deep);padding:5px 12px;border-radius:var(--r-pill);font-size:.72rem;font-weight:600}

.buy-title{font-size:1.85rem;margin-bottom:4px}

.buy-rating{font-size:.88rem;color:var(--warm);margin-bottom:1.75rem}

.var-label{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--warm);margin-bottom:.75rem}

.var-label strong{color:var(--ink)}

.color-row{display:flex;gap:12px;margin-bottom:1.75rem}

.color-chip{width:38px;height:38px;border-radius:50%;border:3px solid transparent;outline:1px solid var(--line);transition:all .2s}

.color-chip.active{border-color:var(--ink);transform:scale(1.1)}

.bundles{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}

.bundle{position:relative;padding:14px 18px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);display:grid;grid-template-columns:1fr auto;gap:6px;text-align:left;transition:all .2s}

.bundle:hover{border-color:var(--ink-soft)}

.bundle.active{border-color:var(--coral);background:var(--blush-soft)}

.bundle-top{display:flex;flex-direction:column}

.bundle-top strong{font-size:.95rem}

.bundle-sub{font-size:.78rem;color:var(--warm)}

.bundle-price{display:flex;align-items:baseline;gap:8px}

.bp-now{font-family:"Fraunces",serif;font-size:1.4rem;font-weight:700}

.bp-was{text-decoration:line-through;color:var(--warm-mute);font-size:.85rem}

.bundle-per{grid-column:1/-1;font-size:.78rem;color:var(--warm)}

.bundle-per em{color:var(--coral-deep);font-style:normal;font-weight:700}

.bundle-badge{position:absolute;top:-9px;right:14px;background:var(--ink);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;padding:4px 10px;border-radius:var(--r-pill);text-transform:uppercase}

.add-cart{width:100%;padding:18px;background:var(--coral);color:#fff;border-radius:var(--r-pill);font-size:1.02rem;font-weight:700;display:flex;justify-content:center;align-items:center;gap:12px;box-shadow:0 14px 28px -10px rgba(255,122,92,.5);transition:all .25s;text-align:center}

.add-cart:hover{background:var(--coral-deep);transform:translateY(-2px)}

.ac-strike{text-decoration:line-through;opacity:.7;font-weight:500;font-size:.85rem}

.urgency{text-align:center;margin-top:1rem;font-size:.85rem;color:var(--ink-soft)}

.urgency strong{color:var(--coral-deep);font-variant-numeric:tabular-nums}

.payment-row{text-align:center;margin-top:.85rem;font-size:.78rem;color:var(--warm-mute)}

.payment-row em{font-style:normal;color:var(--warm);margin:0 4px;font-weight:500}

.guar{padding:0 5vw 5rem}

.guar-inner{max-width:980px;margin:0 auto;background:var(--ink);color:var(--cream);border-radius:28px;padding:3rem;display:flex;align-items:center;gap:2.5rem}

.guar-icon{font-size:3.5rem;width:90px;height:90px;background:var(--coral);border-radius:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.guar h3{color:var(--cream);font-size:1.6rem;margin-bottom:.5rem}

.guar p{color:rgba(251,246,238,.78);font-size:.96rem;line-height:1.65}

.faq{padding:6rem 5vw;max-width:820px;margin:0 auto}

.faq h2{font-size:clamp(2rem,3.5vw,2.8rem);margin:0 auto 3rem}

.faq-list{display:flex;flex-direction:column}

.faq-item{border-bottom:1px solid var(--line);padding:1.5rem 0;cursor:pointer}

.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.05rem;font-weight:600;color:var(--ink)}

.faq-icon{font-size:1.5rem;color:var(--coral);transition:transform .3s;font-weight:300}

.faq-item.open .faq-icon{transform:rotate(45deg)}

.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s}

.faq-item.open .faq-a{max-height:300px;padding-top:.85rem}

.faq-a p{color:var(--warm);font-size:.95rem;line-height:1.7}

.news{padding:5rem 5vw 7rem}

.news-inner{max-width:1100px;margin:0 auto;background:linear-gradient(135deg,var(--ink) 0%,#2a2925 100%);border-radius:32px;padding:4rem;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;position:relative;overflow:hidden}

.news-inner::before{content:"";position:absolute;width:280px;height:280px;background:var(--coral);border-radius:50%;filter:blur(80px);opacity:.4;top:-100px;right:-50px}

.news h2{color:var(--cream);font-size:clamp(1.8rem,2.8vw,2.6rem);margin:.5rem 0 1rem;position:relative}

.news p{color:rgba(251,246,238,.7);font-size:.95rem;position:relative}

.news-form{display:flex;gap:0;position:relative}

.news-form input{flex:1;padding:18px 22px;border:none;border-radius:var(--r-pill) 0 0 var(--r-pill);font-family:inherit;font-size:.95rem;background:var(--cream);color:var(--ink);outline:none}

.news-form button{background:var(--coral);color:#fff;padding:18px 26px;font-weight:700;font-size:.92rem;border-radius:0 var(--r-pill) var(--r-pill) 0;transition:background .2s}

.news-form button:hover{background:var(--coral-deep)}

.foot{background:var(--ink);color:rgba(251,246,238,.65);padding:5rem 5vw 2rem}

.foot-top{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:4rem;padding-bottom:3rem;border-bottom:1px solid rgba(251,246,238,.1)}

.foot-brand .logo-word{color:var(--cream);font-size:2rem;margin-bottom:1rem;display:block}

.foot-brand p{font-size:.92rem;line-height:1.7;max-width:360px}

.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}

.foot-cols h5{color:var(--cream);font-family:"Manrope",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}

.foot-cols a{display:block;font-size:.88rem;padding:6px 0;transition:color .2s}

.foot-cols a:hover{color:var(--cream)}

.foot-bot{max-width:1280px;margin:2rem auto 0;display:flex;justify-content:space-between;font-size:.78rem}

.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--paper);border-top:1px solid var(--line);padding:14px 1rem;justify-content:space-between;align-items:center;box-shadow:0 -10px 30px -15px rgba(31,30,27,.25)}

.sm-info{display:flex;align-items:baseline;gap:8px}

.sm-info strong{font-family:"Fraunces",serif;font-size:1.3rem}

.sm-info s{color:var(--warm-mute);font-size:.85rem}

.sm-stars{color:var(--warm);font-size:.8rem;font-weight:600}

.sticky-cta a{background:var(--coral);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-weight:700;font-size:.9rem}

@media(max-width:980px){

.hero{grid-template-columns:1fr;gap:3rem;padding:3.5rem 5vw 5rem;text-align:center}

.hero-sub{margin-left:auto;margin-right:auto}

.hero-visual{max-width:460px;margin:0 auto;width:100%}

.hero-ctas,.hero-badges{justify-content:center}

.why-grid{grid-template-columns:1fr}

.bottle-grid{grid-template-columns:1fr;gap:3rem}

.bottle-imgwrap{position:static}

.how-grid{grid-template-columns:1fr}

.life-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 280px}

.life-tall{grid-column:1/-1;grid-row:1}

.reviews-grid{grid-template-columns:1fr}

.buy-card{grid-template-columns:1fr}

.guar-inner{flex-direction:column;text-align:center;padding:2.5rem;gap:1.5rem}

.news-inner{grid-template-columns:1fr;padding:2.5rem}

.foot-top{grid-template-columns:1fr;gap:2.5rem}

.nav-links{display:none}

.sticky-cta{display:flex}

body{padding-bottom:70px}

.tag-1{right:4%;top:4%;font-size:.74rem;padding:8px 12px}

.tag-2{left:0}

.tag-3{right:4%;bottom:4%}

}

@media(max-width:560px){

.hero-h1{font-size:2.4rem}

.why-card,.feat-list li,.review-card{padding:1.5rem}

.buy-form{padding:1.75rem}

.foot-cols{grid-template-columns:1fr 1fr}

.foot-bot{flex-direction:column;gap:8px;text-align:center}

.news-inner{padding:2rem 1.5rem}

.news-form{flex-direction:column;gap:10px}

.news-form input{border-radius:var(--r-pill)}

.news-form button{border-radius:var(--r-pill);padding:16px 22px}

}

</style>

</head>

<body>

<!-- ════════════════════════════════════════════════════════════════════

⚙️ SHOPIFY CONFIG — EDIT THIS BLOCK ONLY

────────────────────────────────────────────────────────────────────

1) Set SHOP_DOMAIN to your storefront domain (with no protocol).

2) Get your variant IDs from Shopify admin:

- Open the product → Variants → click a variant → URL bar shows

...variants/XXXXXXXXXXXXX → that number is the variant ID.

- OR Admin → Products → Export → CSV has the variant IDs column.

3) Paste the ID into the matching color × pack-size slot below.

4) (Optional) DISCOUNT_CODE auto-applies at checkout.

═══════════════════════════════════════════════════════════════════ -->

window.CASAFAE = {

SHOP_DOMAIN: "casafae.shop",

DISCOUNT_CODE: "", // e.g. "WELCOME10" to auto-apply

// For each color, give variant ID for 1-pack, 2-pack, 3-pack.

// If you only sell single bottles, point all three at the same single-variant ID

// and the cart will add that variant with quantity 1, 2, or 3.

VARIANTS: {

blush: { single: "REPLACE_VARIANT_ID_BLUSH", pack2: "REPLACE_VARIANT_ID_BLUSH", pack3: "REPLACE_VARIANT_ID_BLUSH" },

sky: { single: "REPLACE_VARIANT_ID_SKY", pack2: "REPLACE_VARIANT_ID_SKY", pack3: "REPLACE_VARIANT_ID_SKY" },

mint: { single: "REPLACE_VARIANT_ID_MINT", pack2: "REPLACE_VARIANT_ID_MINT", pack3: "REPLACE_VARIANT_ID_MINT" }

// QTY tells Shopify how many of the selected variant to add.

// If 2-pack & 3-pack are SEPARATE variants in Shopify, leave these as 1.

// If you only have a single-bottle SKU, change to 2 and 3.

PACK_QTY: { single: 1, pack2: 1, pack3: 1 }

};

</script>

<span>🌿 Free US shipping over $40</span><span>🐾 30-day happy-dog guarantee</span><span>✨ 12,400+ pups hydrated</span><span>🚚 Next-day dispatch on orders before 3pm</span>

</div>

</svg>

<span class="logo-word">casafae<span class="logo-dot">.</span></span>

</a>

<li><a href="#why">Why CasaFae</a></li>

<li><a href="#bottle">The Bottle</a></li>

<li><a href="#reviews">Reviews</a></li>

</ul>

</nav>

<div>

<div class="hero-eyebrow"><span class="dot"></span> New · Spring drop</div>

<h1 class="hero-h1">Water for the<br><em>good dog</em> in your life.</h1>

<p class="hero-sub">One palm-sized bottle from CasaFae. Fresh water on every walk, hike, beach day & road trip. Food-grade stainless steel inside, soft silicone shell outside, snap-out drinking bowl built in.</p>

<div class="hero-stars"><span class="stars">★★★★★</span> <strong>4.9 / 5</strong> · 1,847 verified reviews</div>

<a class="btn-cta" href="#buy">Get yours · <span id="heroPrice">$48</span> <span>→</span></a>

<a class="btn-link" href="#how">See how it works</a>

</div>

<ul class="hero-badges"><li>✓ 30-day returns</li><li>✓ Free US shipping $40+</li><li>✓ 1-yr warranty</li></ul>

</div>

<div class="hero-tag tag-2">Leak-proof seal</div>

</div>

</header>

<span>FEATURED IN</span><span class="m-brand">The Wildest</span><span>·</span><span class="m-brand">Modern Dog</span><span>·</span><span class="m-brand">Outside</span><span>·</span><span class="m-brand">Cool Hunting</span><span>·</span><span class="m-brand">Apartment Therapy</span><span>·</span><span class="m-brand">Goodful</span><span>·</span>

</div>

</section>

<div class="eyebrow">The walk problem</div>

<h2>Your dog drinks. Where, though?</h2>

<p class="lede">Public bowls are gross. Cupped hands don't work. Most pet bottles look like medical equipment. We built the bottle we wanted to carry — beautiful enough for your bag, smart enough for the trail.</p>

</div>

<div class="why-card"><div class="why-tag">Before CasaFae</div><ul><li>— Sticky plastic, BPA-laced</li><li>— Bulky shapes that won't fit your tote</li><li>— Leaks in your bag (always)</li><li>— Looks like a gas station accessory</li></ul></div>

<div class="why-card good"><div class="why-tag good">With CasaFae</div><ul><li>✓ 304 food-grade stainless steel core</li><li>✓ Egg-shape fits palm, pocket, or bag</li><li>✓ Triple-sealed, upside-down safe</li><li>✓ Pastel silicone you'll actually want to show off</li></ul></div>

</div>

</section>

</div>

<div class="eyebrow">Designed in detail</div>

<h2>Built around one ritual:<br><em>your walk, together.</em></h2>

<li><span class="feat-num">01</span><div><h4>Snap-out drinking bowl</h4><p>The silicone shell pops off to become a 4.5" bowl. Lock it back on with one click — no separate pieces to lose.</p></div></li>

<li><span class="feat-num">02</span><div><h4>Food-grade stainless inside</h4><p>BPA-free 304 steel. Keeps water cool for hours, never plastic-tasting, won't hold odors.</p></div></li>

<li><span class="feat-num">03</span><div><h4>Triple-sealed lid</h4><p>Two silicone gaskets + a locking cap. Tossed in our tote, dropped in a bag — zero drips, ever.</p></div></li>

<li><span class="feat-num">04</span><div><h4>Carry it your way</h4><p>Built-in carabiner clip, woven wrist strap, and bag-handle loop. 220 g — lighter than your phone.</p></div></li>

</ol>

</div>

</section>

<div class="eyebrow center">3 seconds, paw to mouth</div>

<h2 class="center">From bag to bowl in three steps.</h2>

<div class="how-step"><div class="how-num">1</div><h4>Unclip</h4><p>Pop the carabiner from your bag or belt loop.</p></div>

<div class="how-step"><div class="how-num">2</div><h4>Twist & pour</h4><p>Open the cap, snap the shell into bowl mode, and pour.</p></div>

<div class="how-step"><div class="how-num">3</div><h4>Hydrate the pup</h4><p>Let them drink. Snap it back, clip up, walk on.</p></div>

</div>

</section>

<div class="life-card life-tall"><img src="https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/dpr4f2r7_image10.png" alt=""><span class="life-cap">Mango · 4 yrs · Malibu</span></div>

<div class="life-card"><img src="https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/yih82l6m_image12.png" alt=""><span class="life-cap">Saturdays in summer</span></div>

<div class="life-card"><img src="https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/homaxh37_image5.png" alt=""><span class="life-cap">Trail-tested</span></div>

</div>

</section>

<div class="eyebrow">12,400+ happy dogs</div>

<h2>What the pack is saying.</h2>

<div class="agg"><span class="stars big">★★★★★</span> <strong>4.9 / 5</strong> <span class="muted">based on 1,847 verified reviews</span></div>

</div>

<article class="review-card"><span class="stars">★★★★★</span><blockquote>"Honestly the prettiest pet thing I own. Bear drinks from it on every walk now — no more cupping water in my hand at the park."</blockquote><div class="reviewer"><span class="r-av">M</span><div><div class="r-name">Maya R.</div><div class="r-loc">Verified · Austin, TX</div></div></div></article>

<article class="review-card"><span class="stars">★★★★★</span><blockquote>"The handle clip is the unsung hero. I clip it to my tote and forget about it. Steel keeps water cool for hours."</blockquote><div class="reviewer"><span class="r-av">J</span><div><div class="r-name">Jamie L.</div><div class="r-loc">Verified · Brooklyn, NY</div></div></div></article>

<article class="review-card"><span class="stars">★★★★★</span><blockquote>"Survived a 6-mile coastal hike, two airline trips, and a curious toddler. Zero leaks. Worth every penny."</blockquote><div class="reviewer"><span class="r-av">P</span><div><div class="r-name">Priya S.</div><div class="r-loc">Verified · Seattle, WA</div></div></div></article>

</div>

</section>

</div>

<div><strong>30-day</strong><span>returns</span></div>

<div><strong>1-yr</strong><span>warranty</span></div>

</div>

<div class="buy-badges"><span class="badge-sale">SAVE 25% TODAY</span><span class="badge-stock">Low stock · Mint Teal</span></div>

<h2 class="buy-title">The CasaFae Bottle</h2>

<div class="var-label">Color · <strong id="colorName">Blush Pink</strong></div>

</div>

<div class="var-label">Bundle & save</div>

<div class="bundle-top"><strong>1 Bottle</strong><span class="bundle-sub">For one good dog</span></div>

<div class="bundle-per">$29.00/bottle</div>

</button>

<span class="bundle-badge">Bestseller</span>

<div class="bundle-top"><strong>2 Bottles</strong><span class="bundle-sub">Most loved · save 18%</span></div>

<div class="bundle-per">$24.00/bottle · <em>Save $30</em></div>

</button>

<span class="bundle-badge">Best value</span>

<div class="bundle-top"><strong>3 Bottles</strong><span class="bundle-sub">Pack mom / Gift</span></div>

<div class="bundle-per">$21.67/bottle · <em>Save $52</em></div>

</button>

</div>

Add to cart — <span id="cartPrice">$48</span> <span class="ac-strike" id="cartWas">$78</span>

</a>

<div class="urgency">⏱ Order in <strong id="countdown">03:47:22</strong> for next-day dispatch</div>

<div class="payment-row"><span>Pay with</span> <em>Apple Pay</em> · <em>Shop Pay</em> · <em>Klarna</em> · <em>Visa</em></div>

</div>

</section>

<div><h3>The Happy-Dog Promise</h3><p>If your dog won't drink from it, won't carry it, won't fall in love with it — send it back within 30 days. Full refund, no awkward questions. We've only had to issue this 41 times. Out of 12,400.</p></div>

</div>

</section>

<div class="eyebrow center">Good questions</div>

<h2 class="center">Things people actually ask.</h2>

<div class="faq-item open"><div class="faq-q"><span>How much water does it actually hold?</span><span class="faq-icon">+</span></div><div class="faq-a"><p>285 ml / 9.6 oz — enough for two medium dogs on a 90-min walk, or one big drinker on a 2-hour adventure.</p></div></div>

<div class="faq-item"><div class="faq-q"><span>Is it really leak-proof in a bag?</span><span class="faq-icon">+</span></div><div class="faq-a"><p>Yes. Double silicone gasket + locking lid. We tested it upside-down in a tote for 24 hours. Bone dry.</p></div></div>

<div class="faq-item"><div class="faq-q"><span>Can I put it in the dishwasher?</span><span class="faq-icon">+</span></div><div class="faq-a"><p>Top rack only. The stainless inner sphere is fine; we recommend hand-washing the silicone shell to keep colors vivid.</p></div></div>

<div class="faq-item"><div class="faq-q"><span>Shipping & returns?</span><span class="faq-icon">+</span></div><div class="faq-a"><p>Free shipping on all US orders over $40. 30-day no-questions returns. 1-year warranty on the bottle.</p></div></div>

<div class="faq-item"><div class="faq-q"><span>Will it fit my dog's snout?</span><span class="faq-icon">+</span></div><div class="faq-a"><p>The flip-out bowl is 4.5" wide and 1.6" deep — sized for everything from a chihuahua to a golden retriever.</p></div></div>

</div>

</section>

<div>

<h2>Get 10% off + early access to new colors.</h2>

<p>One short letter a month — never spam, never selling your data, always with a dog photo.</p>

</div>

</form>

</div>

</section>

<span class="logo-word">casafae<span class="logo-dot">.</span></span>

<p>Beautiful, functional gear for the good dogs in our lives. Designed in California, made for the trail.</p>

</div>

<div><h5>Shop</h5><a href="#bottle">The Bottle</a><a href="#bottle">Colors</a><a href="#buy">Bundles</a><a href="#buy">Gift Cards</a></div>

<div><h5>Help</h5><a href="#faq">FAQ</a><a href="#faq">Shipping</a><a href="#faq">Returns</a><a href="#faq">Contact</a></div>

<div><h5>Pack</h5><a href="#">Instagram</a><a href="#">TikTok</a><a href="#">Pinterest</a><a href="#">Our story</a></div>

</div>

<div class="foot-bot"><span>© <span id="yr"></span> CasaFae Co. · Made with paws in California</span><span><a href="#">Privacy</a> · <a href="#">Terms</a></span></div>

</footer>

<a id="smCart" href="#buy">Shop CasaFae →</a>

</div>

(function(){

const IMG = {

studio: "https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/1hwt5bng_image13.png", // pink + blue studio

pinkLake: "https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/x3z112dh_image4.png", // pink, lake/mountain

tealMountain: "https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/homaxh37_image5.png", // teal on rock

totebag: "https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/yih82l6m_image12.png", // pink on tote, beach

dogDrink: "https://customer-assets.emergentagent.com/job_c3aeaa5b-9d7c-476b-a61b-2ab900f8cdc6/artifacts/dpr4f2r7_image10.png" // golden drinking

};

const colorImg = {

blush: IMG.pinkLake,

sky: IMG.studio,

mint: IMG.tealMountain

};

// Each color shows a curated gallery (5 shots — first one matches the chosen color)

const colorGalleries = {

blush: [IMG.pinkLake, IMG.totebag, IMG.dogDrink, IMG.studio, IMG.tealMountain],

sky: [IMG.studio, IMG.pinkLake, IMG.dogDrink, IMG.totebag, IMG.tealMountain],

mint: [IMG.tealMountain, IMG.studio, IMG.pinkLake, IMG.dogDrink, IMG.totebag]

};

const colorName = { blush:"Blush Pink", sky:"Sky Blue", mint:"Mint Teal" };

let state = { color:"blush", bundle:"pack2", price:48, was:78 };

// Gallery — re-renders for the current color

const thumbsEl = document.getElementById("galleryThumbs");

const mainEl = document.getElementById("galleryMain");

function renderGallery(){

const list = colorGalleries[state.color];

mainEl.src = list[0];

thumbsEl.innerHTML = "";

list.forEach((src,i)=>{

const b = document.createElement("button");

b.className = "thumb" + (i===0?" active":"");

b.innerHTML = `<img src="${src}" alt="">`;

b.onclick = () => {

mainEl.src = src;

thumbsEl.querySelectorAll(".thumb").forEach(t=>t.classList.remove("active"));

b.classList.add("active");

};

thumbsEl.appendChild(b);

});

}

renderGallery();

// Color

document.querySelectorAll("[data-color]").forEach(el=>{

el.onclick = () => {

state.color = el.dataset.color;

document.querySelectorAll(".color-chip").forEach(c=>c.classList.toggle("active", c.dataset.color===state.color));

document.querySelectorAll(".buy-thumb").forEach(c=>c.classList.toggle("active", c.dataset.color===state.color));

document.getElementById("colorName").textContent = colorName[state.color];

document.getElementById("buyMain").src = colorImg[state.color];

// Update hero image too so the whole page reflects color choice

document.querySelector(".hero-img").src = colorImg[state.color];

// And re-paint the bottle gallery

renderGallery();

updateCart();

};

});

// Bundle

document.querySelectorAll(".bundle").forEach(b=>{

b.onclick = () => {

state.bundle = b.dataset.bundle;

state.price = +b.dataset.price;

state.was = +b.dataset.was;

document.querySelectorAll(".bundle").forEach(x=>x.classList.toggle("active", x===b));

updateCart();

};

});

// FAQ

document.querySelectorAll(".faq-item").forEach(it=>{

it.onclick = () => it.classList.toggle("open");

});

// Countdown

let h=3,m=47,s=22;

setInterval(()=>{

s--; if(s<0){s=59;m--;} if(m<0){m=59;h--;} if(h<0){h=3;m=47;s=22;}

const pad = n => String(n).padStart(2,"0");

const el = document.getElementById("countdown");

if(el) el.textContent = pad(h)+":"+pad(m)+":"+pad(s);

},1000);

// Year

document.getElementById("yr").textContent = new Date().getFullYear();

// ─── Shopify Cart URL builder ───────────────────────────────

function cartURL(){

const cfg = window.CASAFAE;

const vid = cfg.VARIANTS[state.color][state.bundle];

const qty = cfg.PACK_QTY[state.bundle] || 1;

let url = "https://" + cfg.SHOP_DOMAIN + "/cart/" + vid + ":" + qty;

const params = [];

if (cfg.DISCOUNT_CODE) params.push("discount=" + encodeURIComponent(cfg.DISCOUNT_CODE));

params.push("channel=buy_button");

return url + "?" + params.join("&");

}

function updateCart(){

const url = cartURL();

document.getElementById("addCart").href = url;

document.getElementById("smCart").href = url;

document.getElementById("cartPrice").textContent = "$" + state.price;

document.getElementById("cartWas").textContent = "$" + state.was;

document.getElementById("heroPrice").textContent = "$" + state.price;

document.getElementById("navPrice").textContent = "$" + state.price;

document.getElementById("smPrice").textContent = "$" + state.price;

document.getElementById("smWas").textContent = "$" + state.was;

}

updateCart();

})();

</script>

</body>

</html>

store

Join our email list

Your cart is empty

Your cart is empty