/* ella — static stylesheet.
   Rules that interpolate a merchant setting stay in layout/theme.liquid's inline
   style block, which is emitted AFTER this file so those settings still win.
   Split by RULE, never by line: a :root rule and its declarations must not be parted. */

/* ── safety net ────────────────────────────────────────────────────────────────
   The merchant's settings are emitted in the layout's inline block, which comes
   AFTER this file and therefore wins. These are only defaults, so that a theme
   whose inline block is missing or malformed degrades to something readable
   instead of losing every colour and its container — which is exactly what
   happened when a bad split parted `:root` from its declarations. */
:root{
  --ink:#141414; --bg:#ffffff; --muted:#7a7772; --on-dark:#ffffff; --strong:#000000;
  --sand:#f5f2ec; --line:#e7e3dd; --accent:#141414;
  --wrap:1280px; --gutter:24px; --gutter-m:16px; --radius:0px; --btn-r:0px; --btn-bw:1px;
  --fs:100%; --track:-1px; --hw:400;
  --serif:var(--font-heading_font,'Cormorant Garamond',Georgia,serif);
  --sans:var(--font-body_font,'Jost',system-ui,sans-serif);
}

/* saved-to-wishlist state: a filled red heart, on cards and on the product page */
    [data-wish].is-wished{color:#e2342f}
    [data-wish].is-wished svg{fill:#e2342f;stroke:#e2342f}
    .ella-card .wish.is-wished{background:#e2342f;color:#fff;box-shadow:0 2px 10px rgba(226,52,47,.35)}
    .ella-card .wish.is-wished svg{fill:#fff;stroke:#fff}
    .ella-card .wish.is-wished:hover{background:#c62a26}
    .ella-wish.is-wished{border-color:#e2342f;color:#e2342f}
    .ella-wish.is-wished svg{fill:#e2342f;stroke:#e2342f}
    [data-wish]{transition:color .18s,background .18s,border-color .18s}
    /* Element resets sit in the `base` cascade layer. Unlayered, `*{margin:0;padding:0}` and
       `a{color:inherit}` beat every Tailwind utility on the Blade pages this layout wraps (the
       page-builder home of a store with no theme lost all its padding and its button text). */
    @layer base{
      *{box-sizing:border-box;margin:0;padding:0}
      img{max-width:100%;display:block}
      a{color:inherit;text-decoration:none}
      h1,h2,h3{font-weight:var(--hw);letter-spacing:var(--track);line-height:1.08}
    }
    html{font-size:var(--fs)}@keyframes ellaFade{from{opacity:0}to{opacity:1}}
    .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
    @media(max-width:767px){.wrap{padding:0 var(--gutter-m)}}
    .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
    .display{font-weight:300;letter-spacing:.02em}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;text-align:center;background:var(--btn-bg,var(--ink));color:var(--btn-fg,#fff);padding:.85rem 2rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:.25s;border:1px solid var(--btn-bg,var(--ink));cursor:pointer;font-family:inherit;line-height:1.2}
    .btn:hover{background:transparent;color:var(--btn-bg,var(--ink))}
    .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
    .btn-ghost:hover{background:var(--ink);color:#fff}
    .link-underline{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:3px;display:inline-block}
    /* Product cards - 8 designs, `card_style` picks one for the whole site */
    .ella-card{display:block;background:var(--bg);position:relative}
    .ella-card .media-link{display:block;width:100%;height:100%}
    .ella-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,opacity .4s}
    .ella-card .img-alt{position:absolute;inset:0;opacity:0}
    .ella-card:hover .img-alt{opacity:1}
    .ella-card .img-ph{display:block;width:100%;height:100%;background:var(--sand)}
    .ella-card .badges{position:absolute;top:.7rem;left:.7rem;display:flex;flex-direction:column;gap:.35rem;z-index:3;pointer-events:none}
    .ella-card .badge{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .55rem;background:var(--ink);color:#fff;align-self:flex-start}
    .ella-card .badge.sale{background:var(--sale,#e23b3b)}
    .ella-card .badge.sold{background:#8a8a8a}
    .ella-card .hoverbits{position:absolute;inset:0;pointer-events:none;z-index:2}
    .ella-card .hoverbits > *{pointer-events:auto}
    .ella-card .wish,.ella-card .qv{background:#fff;border:0;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:.25s}
    .ella-card .wish{width:34px;height:34px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .ella-card .wish:hover,.ella-card .qv:hover{background:var(--ink);color:#fff}
    .ella-card .qv span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
    .ella-card .atc{display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;width:100%;border:0;background:#fff;color:var(--ink);font-family:inherit;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem;cursor:pointer;font-weight:500;transition:.25s;text-decoration:none}
    .ella-card .atc:hover{background:var(--ink);color:#fff}
    .ella-card .atc.is-out{opacity:.55;cursor:not-allowed}
    .ella-card .info{padding:.9rem .2rem .2rem;display:flex;flex-direction:column;gap:.28rem}
    .ella-card .p-vendor{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .ella-card .p-title{font-size:.88rem;line-height:1.4;color:var(--ink);display:block}
    .ella-card .p-price{font-size:.85rem}
    .ella-card .p-price s{opacity:.55;margin-right:.35rem}
    .ella-card .p-price .now{color:var(--sale,#e23b3b)}
    .ella-card .p-price .off{font-style:normal;color:var(--sale,#e23b3b);font-size:.78rem}
    .ella-card .p-rating{font-size:.76rem;color:#f0a12e;letter-spacing:.06em}
    .ella-card .p-rating em{font-style:normal;color:var(--muted)}
    .ella-card .p-more{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
    .ella-card .p-low{font-size:.7rem;display:inline-block;margin-top:.2rem}
    .ella-card .p-sw{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
    .ella-card .sw{width:17px;height:17px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 2px var(--bg)}
    .ella-card .sw-more{font-size:.68rem;color:var(--muted)}
    .ella-card .row-top,.ella-card .row-bottom{display:flex;align-items:center;justify-content:space-between;gap:.5rem}

    /* 01 - icons top-right, add-to-cart bar across the image foot, centred text */
    .card-s1 .info{text-align:center;align-items:center}
    .card-s1 .wish{position:absolute;top:.7rem;right:.7rem;opacity:0;transform:translateX(6px);transition:.28s}
    .card-s1 .qv{position:absolute;top:3.3rem;right:.7rem;width:34px;height:34px;border-radius:50%;opacity:0;transform:translateX(6px);transition:.28s .05s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .card-s1 .qv span{display:none}
    .card-s1 .atc{position:absolute;left:1rem;right:1rem;bottom:1rem;width:auto;border:1px solid var(--ink);opacity:0;transform:translateY(8px);transition:.28s}
    .card-s1:hover .wish,.card-s1:hover .qv,.card-s1:hover .atc{opacity:1;transform:none}

    /* 02 - bordered tile that lifts, quick-view pill, button below the text */
    .card-s2{border:1px solid var(--line);padding:.9rem;transition:.28s}
    .card-s2:hover{box-shadow:0 14px 32px -18px rgba(0,0,0,.28);transform:translateY(-3px)}
    .card-s2 .info{text-align:left;padding:.9rem 0 0}
    .card-s2 .wish{position:absolute;top:.6rem;left:.6rem;opacity:0;transition:.25s}
    .card-s2 .qv{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:.5rem .9rem;background:var(--ink);color:#fff;opacity:0;transition:.25s}
    .card-s2 .qv svg{display:none}
    .card-s2:hover .wish,.card-s2:hover .qv{opacity:1}
    .card-s2 .hoverbits .atc{display:none}
    .card-s2 .atc-below{margin-top:.7rem}
    .card-s2 .atc-below .atc{border:1px solid var(--line)}

    /* 03 - centred, dark pill mid-image, quick-view strip at the foot */
    .card-s3 .info{text-align:center;align-items:center}
    .card-s3 .wish{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:.25s}
    .card-s3 .atc{position:absolute;left:1.2rem;right:1.2rem;top:50%;width:auto;background:#1e2a38;color:#fff;opacity:0;transform:translateY(-50%) translateY(8px);transition:.28s}
    .card-s3 .atc:hover{background:var(--ink)}
    .card-s3 .qv{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);padding:.7rem;opacity:0;transition:.28s}
    .card-s3 .qv svg{display:none}
    .card-s3:hover .wish{opacity:1;transform:translate(-50%,-50%) scale(1)}
    .card-s3:hover .atc{opacity:1;transform:translateY(-50%)}
    .card-s3:hover .qv{opacity:1}

    /* 04 - left aligned, vendor+rating on one row, outlined button on the image */
    .card-s4 .info{text-align:left}
    .card-s4 .qv{position:absolute;top:.7rem;right:.7rem;padding:.4rem .7rem;border-radius:20px;opacity:0;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .card-s4 .atc{position:absolute;left:1rem;right:1rem;bottom:2.6rem;width:auto;border:1px solid var(--line);opacity:0;transform:translateY(8px);transition:.28s}
    .card-s4 .wish{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);width:auto;height:auto;border-radius:0;background:0;box-shadow:none;font-size:.66rem;opacity:0;transition:.28s}
    .card-s4:hover .qv,.card-s4:hover .atc{opacity:1;transform:none}
    .card-s4:hover .wish{opacity:1}

    /* 05 - eye icon, white bar near the foot, wishlist beside the vendor */
    .card-s5 .info{text-align:left}
    .card-s5 .hoverbits .wish{display:none}
    .card-s5 .row-top .wish{opacity:1;width:26px;height:26px;box-shadow:none;background:0}
    .card-s5 .qv{position:absolute;top:.7rem;right:.7rem;width:32px;height:32px;border-radius:50%;opacity:0;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .card-s5 .qv span{display:none}
    .card-s5 .atc{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;width:auto;opacity:0;transform:translateY(8px);transition:.28s;box-shadow:0 6px 18px -8px rgba(0,0,0,.3)}
    .card-s5:hover .qv,.card-s5:hover .atc{opacity:1;transform:none}
    .card-s5 .row-bottom{margin-top:.15rem}

    /* 06 - minimal: no chrome, no hover buttons, just the product */
    .card-s6 .media{background:transparent}
    .card-s6 .media img{object-fit:contain}
    .card-s6 .hoverbits{display:none}
    .card-s6 .info{text-align:left;padding-top:1.1rem}
    .card-s6 .badges{left:auto;right:.7rem}

    /* 07 - edge to edge, % badge, wishlist resting bottom-right */
    .card-s7 .info{text-align:left;padding:.8rem .2rem 0}
    .card-s7 .qv{display:none}
    .card-s7 .atc{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:0;transform:translateY(100%);transition:.28s}
    .card-s7:hover .atc{opacity:1;transform:none}
    .card-s7 .wish{position:absolute;right:.7rem;bottom:.7rem;background:0;box-shadow:none;opacity:.75}
    .card-s7 .wish:hover{background:0;color:#e23b3b;opacity:1}
    .card-s7 .badge.sale{border-radius:3px}

    /* 08 - vertical icon rail on the image, outlined sale badge */
    .card-s8 .info{text-align:left}
    .card-s8 .badge.sale{background:#fff;color:#e23b3b;border:1px solid #e23b3b}
    .card-s8 .wish{position:absolute;top:.7rem;right:.7rem;opacity:0;transform:translateX(8px);transition:.25s}
    .card-s8 .qv{position:absolute;top:3.1rem;right:.7rem;width:34px;height:34px;border-radius:50%;opacity:0;transform:translateX(8px);transition:.25s .05s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .card-s8 .qv span{display:none}
    .card-s8 .atc{position:absolute;top:5.5rem;right:.7rem;width:34px;height:34px;padding:0;border-radius:50%;font-size:0;opacity:0;transform:translateX(8px);transition:.25s .1s;box-shadow:0 2px 8px rgba(0,0,0,.12);display:grid;place-items:center}
    .card-s8 .atc::after{content:'+';font-size:15px}
    .card-s8:hover .wish,.card-s8:hover .qv,.card-s8:hover .atc{opacity:1;transform:none}

    @media(max-width:640px){
      .ella-card .hoverbits .atc,.ella-card .qv{display:none}
      .card-s2{padding:.6rem}
    }
    .grid-p{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.25rem}
    @media(max-width:900px){.grid-p{grid-template-columns:repeat(2,1fr)}}
    .sec-head{text-align:center;margin-bottom:2.6rem}
    .sec-head h2{font-size:2rem;margin-top:.5rem}
    @media(max-width:640px){.sec-head h2{font-size:1.5rem}}
    /* ---- Editorial sections: responsive layout + mobile nav ---- */
    .ella-burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:.35rem;margin-left:-.35rem;line-height:0}
    @media(max-width:860px){
      .ella-nav{display:none!important}
      .ella-burger{display:inline-flex;align-items:center}
      .ella-nav.open{display:flex!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:1.15rem;background:var(--bg);border-bottom:1px solid var(--line);padding:1.35rem 1.5rem;box-shadow:0 26px 40px -26px rgba(0,0,0,.3)}
    }
    @media(max-width:768px){
      .ella-iwt{grid-template-columns:1fr!important;direction:ltr!important}
      .ella-iwt>div:last-child{padding:2.25rem 1.5rem!important}
      .ella-cats{grid-template-columns:1fr 1fr!important}
      .ella-foot{grid-template-columns:1fr 1fr!important;gap:2rem!important}
    }
    @media(max-width:480px){
      .ella-cats{grid-template-columns:1fr!important}
      .ella-foot{grid-template-columns:1fr!important}
    }
    /* ---- quick-view modal ---- */
    .ella-qv{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(20,20,25,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
    .ella-qv.open{display:flex;animation:ellaFade .25s ease}
    @keyframes ellaFade{from{opacity:0}to{opacity:1}}
    .ella-qv-box{background:var(--bg);max-width:980px;width:100%;max-height:88vh;overflow:auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.42)}
    .ella-qv-close{position:absolute;top:.75rem;right:.85rem;z-index:4;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.06);font-size:20px;line-height:1;cursor:pointer}
    .ella-qv-close:hover{background:rgba(0,0,0,.12)}
    .ella-qv-body{padding:.5rem}

/* wb-icon-align — consistent icon rendering & alignment (Phase-1 upgrade) */
svg{vertical-align:middle}
button svg,a svg,[class*="btn"] svg{flex-shrink:0}
header svg,nav svg,footer svg{display:inline-block;vertical-align:middle}

    /* ── settings-driven styles ───────────────────────────────────────── */
    .btn,.btn-ghost{border-radius:var(--btn-r);border-width:var(--btn-bw)}
    .ella-warn{background:var(--warn-bg);color:var(--warn-ink);padding:.7rem .9rem;font-size:.8rem}
    .ella-cart-variant{color:var(--cart-variant)} .ella-cart-vendor{color:var(--cart-vendor)}
    .ella-cart-coupon{color:var(--cart-coupon)} .ella-cart-tax{color:var(--cart-tax)}
    [data-ella-anim].in{opacity:1;transform:none}
    #ella-top{position:fixed;right:18px;bottom:18px;z-index:85;width:42px;height:42px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:none;place-items:center}
    #ella-top.on{display:grid}
    #ella-loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .35s}
    #ella-loader.off{opacity:0;pointer-events:none}
    #ella-loader i{width:32px;height:32px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:999px;animation:ellaSpin .8s linear infinite;display:block}
    @keyframes ellaSpin{to{transform:rotate(360deg)}}
    .ella-float{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
    .ella-float b{position:absolute;top:-8%;font-size:16px;opacity:.7;animation:ellaFall linear infinite}
    @keyframes ellaFall{to{transform:translateY(115vh) rotate(220deg)}}

    /* ── cart drawer / drop-down ─────────────────────────────────────── */
    .ella-cart-ov{position:fixed;inset:0;background:rgba(20,20,20,.4);opacity:0;visibility:hidden;transition:.25s;z-index:120}
    .ella-cart-ov.on{opacity:1;visibility:visible}
    .ella-cart{position:fixed;background:var(--bg);z-index:130;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s}
    .ella-cart-drawer{top:0;right:0;height:100%;width:400px;max-width:92vw;transform:translateX(101%)}
    .ella-cart-drawer.on{transform:translateX(0)}
    .ella-cart-dropdown{top:64px;right:16px;width:380px;max-width:94vw;max-height:78vh;border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-8px)}
    .ella-cart-dropdown.on{opacity:1;visibility:visible;transform:none}
    .ella-cart header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
    .ella-cart header b{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
    .ella-cart header button{background:0;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
    #ella-cart-body{flex:1;overflow-y:auto;padding:0 1.2rem}
    .ella-cart-empty{text-align:center;color:var(--muted);padding:3rem 0;font-size:.9rem}
    .ella-cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line)}
    .ella-cart-img{aspect-ratio:3/4;background:var(--sand);overflow:hidden}
    .ella-cart-img img{width:100%;height:100%;object-fit:cover}
    .ella-cart-info{display:flex;flex-direction:column;gap:.35rem;min-width:0}
    .ella-cart-info a{font-size:.85rem;line-height:1.35}
    .ella-cart-variant{font-size:.72rem;color:var(--cart-variant,var(--muted))}
    .ella-qty{display:inline-flex;align-items:center;border:1px solid var(--line);align-self:flex-start}
    .ella-qty button{width:26px;height:26px;border:0;background:0;cursor:pointer;font-size:.9rem;color:var(--ink)}
    .ella-qty span{min-width:24px;text-align:center;font-size:.8rem}
    .ella-cart-price{text-align:right;display:flex;flex-direction:column;gap:.4rem}
    .ella-cart-price b{font-size:.85rem;font-weight:500}
    .ella-cart-price button{background:0;border:0;cursor:pointer;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
    #ella-cart-foot{padding:1.1rem 1.2rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.75rem}
    .ella-cart-bar span{font-size:.75rem;color:var(--muted)}
    .ella-cart-bar i{display:block;height:4px;background:var(--sand);margin-top:.45rem}
    .ella-cart-bar i b{display:block;height:100%;background:var(--ink)}
    .ella-cart-bar.ok span{color:var(--cart-coupon,#2f7a4f)}
    .ella-cart-note{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:.4rem}
    .ella-cart-note textarea{width:100%;font-family:inherit;font-size:.85rem;text-transform:none;letter-spacing:normal}
    .ella-cart-sub{display:flex;justify-content:space-between;font-size:.85rem}
    #ella-cart-foot .btn{text-align:center}
    .ella-cart-view{text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    [data-add-to-cart].is-busy{opacity:.6;pointer-events:none}


/* ── mobile: nothing may push the page sideways ───────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, video, svg, iframe, table { max-width: 100%; }
@media (max-width: 900px) {
  .wrap, .container { width: 100%; padding-left: var(--gutter-m, 16px); padding-right: var(--gutter-m, 16px); box-sizing: border-box; }
  [class*="marquee"] { overflow: hidden; }
}

/* ── the card's actions on a touch screen ─────────────────────────────────────
   Was a full-width bar pinned to the bottom of the image behind a white gradient —
   the "shadow" the merchant asked us to remove. Now a top-left opener that reveals
   the actions in a column directly beneath itself. */
.ella-card .card-tap { display: none; }
@media (hover: none), (max-width: 700px) {
  .ella-card { position: relative; }
  .ella-card .card-tap {
    display: grid; place-items: center; position: absolute; top: .5rem; left: .5rem; z-index: 4;
    width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.94); color: #141414;
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
  }
  .ella-card .card-tap[aria-expanded="true"] { background: #141414; color: #fff; }

  /* stacked under the opener, hidden until it is pressed — and NO gradient anywhere */
  .ella-card .hoverbits {
    position: absolute; top: 2.6rem; left: .5rem; right: auto; bottom: auto;
    display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
    padding: 0; background: none; box-shadow: none;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s, transform .18s, visibility .18s; z-index: 3;
  }
  .ella-card.tap-open .hoverbits { opacity: 1; visibility: visible; transform: none; }
  /* every action is the same tile - the compare button was missing from this list and
     rendered at its intrinsic 20px next to three 30px neighbours */
  .ella-card .hoverbits .wb-cmp,
  .ella-card .hoverbits .wish,
  .ella-card .hoverbits .qv,
  .ella-card .hoverbits .atc {
    position: static; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0;
    display: grid; place-items: center; border-radius: 8px; font-size: 0;
    background: rgba(255,255,255,.94); color: #141414; box-shadow: 0 1px 3px rgba(0,0,0,.16);
    opacity: 1; transform: none;
  }
  .ella-card .hoverbits .qv span { display: none; }
  /* the add-to-cart tile showed nothing at all: font-size:0 hides its words and there was
     no icon behind them. Swap the words for the icon at this size. */
  .ella-card .hoverbits .atc .atc-ico { display: grid; place-items: center; }
  .ella-card .hoverbits .atc .atc-txt { display: none; }
  .ella-card .hoverbits .atc.is-out { opacity: .5; }
  /* the card itself must not carry a drop shadow on mobile */
  .ella-card, .ella-card .media, .ella-card .card-media { box-shadow: none !important; }
}

/* ══ Platform widgets — restored 2026-09-09 ═══════════════════════════════
   The markup for these ships in layout/theme.liquid, but their rules were
   lost when the theme CSS was split out into this file. Unstyled:
     · .wb-mnav rendered its icons at the SVG default size — a giant black
       triangle (the Home "roof" path) below the footer, on desktop too
     · .wb-deal sat naked in the top-left corner as plain grey text
   Both were reported by the merchant. Keep these rules with the markup.
   ─────────────────────────────────────────────────────────────────────── */

/* announcement bar (Theme settings -> Announcement bar) */
.wb-promo{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.55rem 2.6rem;font-size:.8rem;letter-spacing:.02em;text-align:center;line-height:1.4}
.wb-promo a{color:inherit;text-decoration:none;display:inline-flex;gap:.5rem;align-items:center}
.wb-promo b{font-weight:600;font-variant-numeric:tabular-nums}
.wb-promo button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:inherit;opacity:.7;font-size:1.2rem;line-height:1;cursor:pointer;padding:.1rem .4rem}
.wb-promo button:hover{opacity:1}

/* mobile bottom nav — must never show on desktop */
.wb-mnav{display:none}
@media (max-width:767px){
  .wb-mnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;
    left:0;right:0;bottom:0;z-index:60;background:#fff;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -2px 14px rgba(0,0,0,.06);
    padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0px))}
  .wb-mnav a{display:flex;flex-direction:column;align-items:center;gap:.18rem;
    padding:.28rem 0;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;
    color:inherit;text-decoration:none}
  /* the markup carries no width/height, so it MUST be sized here */
  .wb-mnav svg{width:21px;height:21px;fill:none;stroke:currentColor}
  /* the product page's sticky add-to-bag bar sat ON the bottom nav and hid Cart/Home */
  body:has(.wb-mnav) #ella-sticky{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:60px}
}

/* compare bar + modal — only once something is selected */
.wb-cmp-bar{display:none;position:fixed;left:50%;transform:translateX(-50%);
  bottom:1rem;z-index:70;align-items:center;gap:.9rem;background:#111;color:#fff;
  padding:.6rem 1rem;border-radius:999px;font-size:.8rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wb-cmp-bar.on{display:flex}
.wb-cmp-bar b{font-weight:700}
.wb-cmp-bar button{border:0;background:#fff;color:#111;font-weight:600;
  font-size:.75rem;padding:.35rem .8rem;border-radius:999px;cursor:pointer}
.wb-cmp-bar a{color:#fff;opacity:.7;cursor:pointer;font-size:.75rem;text-decoration:underline}
.wb-cmp-bar a:hover{opacity:1}
.wb-cmp-modal{display:none;position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.45);padding:1.5rem;overflow:auto}
.wb-cmp-modal.on{display:block}
.wb-cmp-box{position:relative;max-width:900px;margin:4vh auto;background:#fff;
  border-radius:14px;padding:1.6rem}
.wb-cmp-box table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.85rem}
.wb-cmp-box th{text-align:left;font-weight:600;padding:.6rem .5rem;
  border-bottom:1px solid rgba(0,0,0,.08);white-space:nowrap}
.wb-cmp-box td{padding:.6rem .5rem;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:top}
.wb-cmp-box img{width:100%;max-width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
@media (max-width:767px){ .wb-cmp-bar{bottom:74px} }

/* back-to-top button (created by theme.js, shown past 400px of scroll) */
#ella-top{position:fixed;right:1rem;bottom:1rem;z-index:65;width:40px;height:40px;
  display:grid;place-items:center;border:1px solid rgba(0,0,0,.1);border-radius:50%;
  background:#fff;color:#111;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.2s;box-shadow:0 6px 20px rgba(0,0,0,.12)}
#ella-top.on{opacity:1;visibility:visible;transform:none}
@media (max-width:767px){ #ella-top{bottom:74px} }


/* -- compare button -----------------------------------------------------------
   theme.js injects `.wb-cmp` into every card and nothing has ever styled it, so on
   desktop it sat unstyled in the top-left of the image and on mobile it was the one
   undersized tile in the action stack. It now matches the wishlist button and joins
   the same hover reveal as the rest of the card's actions. */
.ella-card .wb-cmp{position:absolute;z-index:3;width:34px;height:34px;border:0;border-radius:50%;
  background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);opacity:0;transition:.28s .1s}
.ella-card:hover .wb-cmp{opacity:1;transform:none}
.ella-card .wb-cmp:hover{background:var(--ink);color:#fff}
.ella-card .wb-cmp.on{background:var(--ink);color:#fff;opacity:1}
/* each card style stacks its actions somewhere different; sit under the existing pair */
.card-s1 .wb-cmp{top:5.9rem;right:.7rem;transform:translateX(6px)}
.card-s2 .wb-cmp{top:3.2rem;left:.6rem}
.card-s3 .wb-cmp{top:.7rem;right:.7rem}
.card-s4 .wb-cmp{top:3.3rem;right:.7rem}
.card-s5 .wb-cmp{top:3.3rem;right:.7rem}
.card-s6 .wb-cmp{display:none}
/* the icon inside add-to-cart is for the mobile tile only - the desktop button has words */
.ella-card .atc .atc-ico{display:none}

/* -- WhatsApp button ----------------------------------------------------------
   layout/theme.liquid has rendered `.ella-wa` for a while but the class was never
   defined anywhere (the only near-match in this file is `.ella-warn`). An unstyled
   anchor wrapped around an inline SVG grows to the full width of the page, which is
   why enabling it put a page-sized black glyph under the footer.
   `bottom` is deliberately left alone - theme.liquid sets it inline from the setting. */
.ella-wa{position:fixed;z-index:70;display:inline-flex;align-items:center;gap:.5rem;
  height:54px;padding:0 1.05rem;border-radius:999px;background:#25D366;color:#fff;
  text-decoration:none;font-weight:700;font-size:.85rem;line-height:1;
  box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s,background .2s}
.ella-wa:hover,.ella-wa:focus-visible{color:#fff;background:#1EBE5B;transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(37,211,102,.55)}
.ella-wa svg{width:28px;height:28px;flex:none;display:block;fill:currentColor}
.ella-wa b{font-weight:700;white-space:nowrap}
.ella-wa{bottom:var(--wa-bottom,18px)}
.ella-wa-right{right:1rem}
.ella-wa-left{left:1rem}
@media(max-width:767px){
  .ella-wa{height:50px;padding:0 .9rem}
  .ella-wa svg{width:26px;height:26px}
  /* clear .wb-mnav, the 60px fixed bottom nav, rather than sit on its Cart tab */
  .ella-wa{bottom:calc(var(--wa-bottom,18px) + 60px)}
  .ella-wa-right{right:.85rem}
  .ella-wa-left{left:.85rem}
  .ella-wa b{display:none}
  .ella-wa-on-desktop{display:none}
}
@media(min-width:768px){ .ella-wa-on-mobile{display:none} }
@media(prefers-reduced-motion:reduce){ .ella-wa{transition:none} }

/* -- page header (main-page) ------------------------------------------------ */
.ella-page-head{padding:2.2rem 0 1.7rem}
/* the body brings its own top padding; do not stack the two */
.ella-page-head + .ella-page-body{padding-top:0}
.ella-page-head h1{font-size:2rem;margin:.2rem 0 0;letter-spacing:-.02em;line-height:1.15}
.ella-page-body{padding:1.2rem 0 3rem;color:#374151;line-height:1.7}
.ella-page-body > *:first-child{margin-top:0}
@media(max-width:640px){ .ella-page-head h1{font-size:1.55rem} }

/* the theme ships no screen-reader helper, and a page whose hero carries the heading
   still needs one <h1> in the document */
.ella-page-h1-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* ══ storeVero core additions ═════════════════════════════════════════════ */

/* count badges on the header / mobile-nav icons (cart, wishlist) */
.wb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;color:inherit}
.wb-count{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--accent,#141414);color:#fff;font:600 10px/17px var(--sans);font-style:normal;text-align:center;
  letter-spacing:0;box-shadow:0 0 0 2px var(--hd-bg,#fff)}
.wb-count[data-hide-zero].is-zero{display:none}
.wb-icon-label{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.wb-mnav a{position:relative}
.wb-mnav .wb-count{top:0;right:calc(50% - 20px)}

/* search panel */
.wb-search[hidden]{display:none}
.wb-search{position:fixed;inset:0;z-index:2147481000}
.wb-search-back{position:absolute;inset:0;background:rgba(20,20,20,.45);opacity:0;transition:opacity .2s}
.wb-search.is-on .wb-search-back{opacity:1}
.wb-search-panel{position:absolute;left:0;right:0;top:0;background:var(--bg,#fff);color:var(--ink);
  padding:1.1rem max(var(--gutter,24px),calc((100vw - var(--wrap,1280px))/2));box-shadow:0 20px 50px -20px rgba(0,0,0,.35);
  transform:translateY(-100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);max-height:90vh;overflow:auto}
.wb-search.is-on .wb-search-panel{transform:none}
.wb-search--popup .wb-search-panel{left:50%;right:auto;top:10vh;width:min(720px,94vw);padding:1.2rem;border-radius:calc(var(--radius,0px) + 6px);
  transform:translate(-50%,-12px);opacity:0;transition:opacity .2s,transform .2s}
.wb-search--popup.is-on .wb-search-panel{transform:translate(-50%,0);opacity:1}
.wb-search-form{display:flex;align-items:center;gap:.7rem;border-bottom:1px solid var(--line);padding:.35rem 0 .8rem}
.wb-search-form input[type=search]{flex:1;min-width:0;border:0!important;background:transparent!important;padding:.55rem .2rem!important;font:inherit;font-size:1.05rem;outline:0;color:inherit}
.wb-search-go{border:0;background:var(--btn-bg,var(--ink));color:var(--btn-fg,#fff);padding:.62rem 1.1rem;border-radius:var(--btn-r,0);font:inherit;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.wb-search-x{border:0;background:rgba(0,0,0,.06);width:36px;height:36px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;color:inherit;flex:none}
.wb-search-popular{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;padding-top:.9rem;font-size:.8rem}
.wb-search-popular span{color:var(--muted);margin-right:.2rem;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem}
.wb-search-popular a{border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}
.wb-search-popular a:hover{border-color:var(--ink)}
.wb-search-results{padding-top:.4rem}
.wb-sr-group{padding-top:1rem}
.wb-sr-h{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.wb-sr-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem .9rem}
.wb-sr-p{display:flex;gap:.8rem;align-items:center;padding:.45rem;border-radius:8px}
.wb-sr-p:hover{background:var(--sand)}
.wb-sr-p img,.wb-sr-p i{width:52px;height:52px;object-fit:cover;background:var(--sand);flex:none;border-radius:6px}
.wb-sr-p b{display:block;font-weight:500;font-size:.88rem;line-height:1.3}
.wb-sr-p em{font-style:normal;font-size:.8rem;color:var(--muted)}
.wb-sr-p em s{margin-right:.35rem;opacity:.7}
.wb-sr-links a{display:block;padding:.35rem 0;font-size:.9rem}
.wb-sr-links a:hover{text-decoration:underline}
.wb-sr-all{display:inline-block;margin-top:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor}
.wb-sr-empty{padding:1.2rem 0;color:var(--muted);font-size:.9rem}
body.wb-lock{overflow:hidden}

/* add-to-cart confirmation */
.wb-notice[hidden]{display:none}
.wb-notice{position:fixed;right:18px;top:18px;z-index:2147482000;width:min(360px,calc(100vw - 24px));background:var(--bg,#fff);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 18px 50px -18px rgba(0,0,0,.35);border-radius:calc(var(--radius,0px) + 6px);padding:1rem;animation:ellaFade .2s ease}
.wb-notice-row{display:flex;gap:.8rem;align-items:center}
.wb-notice img{width:56px;height:56px;object-fit:cover;background:var(--sand);border-radius:6px;flex:none}
.wb-notice b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cart-coupon,#2f7a4f);margin-bottom:.15rem}
.wb-notice p{font-size:.88rem;line-height:1.35}
.wb-notice-actions{display:flex;gap:.5rem;margin-top:.8rem}
.wb-notice-actions a{flex:1;text-align:center;padding:.6rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);border-radius:var(--btn-r,0)}
.wb-notice-actions a.is-dark{background:var(--btn-bg,var(--ink));border-color:var(--btn-bg,var(--ink));color:var(--btn-fg,#fff)}
.wb-notice-x{position:absolute;top:.4rem;right:.5rem;border:0;background:0;font-size:1.2rem;cursor:pointer;color:var(--muted)}
@media(max-width:600px){.wb-notice{top:auto;bottom:74px;right:12px}}

/* quick view panel */
.ella-qv-body{padding:0}
.wb-qv{display:grid;grid-template-columns:1.05fr 1fr;gap:0;min-height:420px}
.wb-qv-media{background:var(--sand);position:relative}
.wb-qv-main{aspect-ratio:1/1;overflow:hidden}
.wb-qv-main img{width:100%;height:100%;object-fit:cover}
.wb-qv-thumbs{display:flex;gap:.45rem;padding:.6rem;overflow-x:auto;background:var(--bg)}
.wb-qv-thumbs button{flex:0 0 58px;height:58px;border:1px solid var(--line);padding:0;background:var(--sand);cursor:pointer;opacity:.65}
.wb-qv-thumbs button.on{opacity:1;border-color:var(--ink)}
.wb-qv-thumbs img{width:100%;height:100%;object-fit:cover}
.wb-qv-info{padding:2rem 2rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}
.wb-qv-info h2{font-size:1.6rem;line-height:1.15;font-weight:var(--hw,400)}
.wb-qv-price{font-size:1.1rem;display:flex;gap:.55rem;align-items:baseline}
.wb-qv-price s{color:var(--muted);font-size:.9rem}
.wb-qv-desc{color:var(--muted);font-size:.9rem;line-height:1.65;max-height:9.5em;overflow:hidden}
.wb-qv-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.wb-qv-actions .btn{flex:1;min-width:150px}
.wb-qv-done{font-size:.85rem;color:var(--cart-coupon,#2f7a4f)}
.wb-qv-done a{text-decoration:underline;margin-left:.35rem;color:var(--ink)}
.wb-qv-more{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;align-self:flex-start}
@media(max-width:760px){.wb-qv{grid-template-columns:1fr}.wb-qv-info{padding:1.2rem}}

/* variant options shared by the product page and quick view */
.wb-opt{display:flex;flex-direction:column;gap:.5rem}
.wb-opt-name{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wb-opt-name b{font-weight:500;color:var(--ink);letter-spacing:normal;text-transform:none;margin-left:.35rem}
.wb-opt-vals{display:flex;flex-wrap:wrap;gap:.45rem}
.wb-opt-vals button{border:1px solid var(--line);background:0;padding:.45rem .8rem;font:inherit;font-size:.82rem;cursor:pointer;color:inherit;min-width:42px;border-radius:var(--btn-r,0)}
.wb-opt-vals button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wb-opt-vals button.is-colour{width:30px;height:30px;min-width:0;padding:0;border-radius:50%;font-size:0}
.wb-opt-vals button.is-colour.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink)}

/* social icons (footer, contact) */
.wb-social{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.wb-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:inherit;transition:.2s}
.wb-social svg{width:18px;height:18px;fill:currentColor;display:block}
.wb-social--plain a{width:auto;height:auto;padding:.2rem}
.wb-social--round a{border:1px solid currentColor;border-radius:50%;opacity:.85}
.wb-social--round a:hover{opacity:1;background:currentColor}
.wb-social--round a:hover svg{fill:var(--social-hover-fg,#141414)}
.wb-social--filled a{border-radius:50%;color:#fff;background:var(--brand,#333)}
.wb-social--filled a:hover{filter:brightness(1.1);transform:translateY(-2px)}

/* payment icons */
.wb-pay{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;margin:0;padding:0}
.wb-pay li{display:inline-flex}
.wb-pay svg{width:46px;height:30px;display:block;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* share buttons on the product page */
.ella-share{margin-top:1.6rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ella-share .eyebrow{margin-right:.35rem}
.ella-share a,.ella-share button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;cursor:pointer;font:inherit;font-size:.76rem;color:var(--ink);background:0;text-decoration:none;transition:.2s}
.ella-share svg{width:16px;height:16px;fill:currentColor;flex:none}
.ella-share-icons a,.ella-share-icons button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line)}
.ella-share-icons a:hover,.ella-share-icons button:hover{border-color:transparent;color:#fff;background:var(--brand,#141414)}
.ella-share-icons b{display:none}
.ella-share-labels a,.ella-share-labels button,.ella-share-buttons a,.ella-share-buttons button{padding:.5rem .85rem;border:1px solid var(--line);border-radius:var(--btn-r,0)}
.ella-share-labels a:hover,.ella-share-labels button:hover,.ella-share-buttons a:hover,.ella-share-buttons button:hover{border-color:var(--brand,#141414);color:var(--brand,#141414)}
.ella-share-pills a,.ella-share-pills button{padding:.5rem .9rem;border-radius:999px;color:#fff;background:var(--brand,#141414)}
.ella-share-pills a:hover,.ella-share-pills button:hover{filter:brightness(1.08)}
.ella-share-text svg{display:none}
.ella-share-text a,.ella-share-text button{text-decoration:underline;color:var(--muted)}

/* newsletter forms */
.wb-news-msg{margin-top:.8rem;font-size:.86rem}
.wb-news-msg.is-error{color:#c0392b}
form[data-newsletter].is-busy button{opacity:.6;pointer-events:none}

/* star rating input (reviews) */
.wb-stars-input{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.wb-stars-input input{position:absolute;opacity:0;pointer-events:none}
.wb-stars-input label{font-size:1.6rem;line-height:1;color:#d5d2cc;cursor:pointer;transition:color .12s}
.wb-stars-input label:hover,.wb-stars-input label:hover ~ label,.wb-stars-input input:checked ~ label{color:#f0a12e}

/* a hint only the merchant sees inside the theme editor */
.wb-editor-hint{border:1px dashed var(--line);padding:1rem;text-align:center;color:var(--muted);font-size:.85rem;border-radius:8px}