/* YourFlowers v4 (21 Oct 2026): product page conversion upgrades, gallery views, bag cross-sell, boeketmaker density,
   mobile fixes. Loaded last. */

/* ── Product page layout ── */
html body .pd{max-width:1240px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
html body .pd > div:last-child{padding-top:4px}
html body .pd h1{font-family:var(--zy-serif);font-weight:500;font-size:clamp(30px,3vw,42px);line-height:1.08;color:#2B2824}
html body .pd-price{margin-top:10px;font-family:var(--zy-sans);font-size:24px;font-weight:700;color:#2B2824}
html body .pd-desc p{font-size:16px;line-height:1.65;color:#4E463E;max-width:52ch}
html body .rs-crumb{font-size:12.5px}

/* ── Gallery: one big photo, the other views as small thumbnails underneath ── */
html body .pd .pd-art.zy-gallery{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;padding:0!important;margin:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
html body .zy-gallery .zy-gmain{position:relative!important;display:block!important;width:100%!important;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#F3EEE7;cursor:zoom-in}
html body .zy-gallery .zy-gmain.is-contain{background:#EFE8DF}
html body .zy-gallery .zy-gmain img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover;border-radius:0!important}
html body .zy-gallery span.zy-badge{position:absolute!important;top:14px!important;left:14px!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;display:inline-block!important;padding:5px 12px!important;border-radius:20px!important;background:#FFFDFA!important;color:#2B2824!important;font-size:12px!important;font-weight:600!important;line-height:1.3!important;box-shadow:0 1px 3px rgba(0,0,0,.08)!important;transform:none!important}
html body .zy-gallery span.zy-badge.is-premium{background:#343A2E!important;color:#F2EEE6!important}
html body .zy-gallery .zy-gthumbs{display:flex!important;flex-wrap:wrap;gap:10px;margin-top:12px;width:100%}
html body .zy-gallery .zy-gthumbs button{position:relative;flex:none;width:84px!important;height:105px!important;padding:0!important;border:1px solid #E4DBD1!important;border-radius:6px!important;overflow:hidden;background:#F3EEE7!important;cursor:pointer;opacity:.8;transition:opacity .2s,border-color .2s}
html body .zy-gallery .zy-gthumbs button:hover{opacity:1}
html body .zy-gallery .zy-gthumbs button.on{opacity:1;border-color:#2B2824!important;box-shadow:0 0 0 1px #2B2824}
html body .zy-gallery .zy-gthumbs img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}
html body .zy-gallery .zy-gthumbs button span{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;display:block!important;padding:3px 0!important;border-radius:0!important;background:rgba(255,253,250,.9)!important;color:#2B2824!important;font-size:10.5px!important;font-weight:600!important;text-align:center!important;line-height:1.3!important}
html body .zy-gallery .zy-gnote{display:block!important;width:100%;margin-top:8px;font-size:12px;color:#7E7368;text-align:left}

/* Product cards: a colour dot's photo replaces the hover close-up while it is shown; no hover swap on touch screens */
.zy-pcard.is-colour .zy-pcard-img img.alt{opacity:0!important}
.zy-pcard-sw i[data-img]{cursor:pointer}
@media (hover:none){.zy-pcard-img img.alt{display:none!important}}

/* Buy row */
html body .pd-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end;margin-top:22px}
html body .pd-row .pd-opt label{font-size:13px;font-weight:600;color:#2B2824}
html body .pd-row #rsQty{min-width:84px!important;width:84px!important;height:56px;text-align:center;font-size:16px;font-weight:600;border:1px solid #D9D2C8;border-radius:8px;background:#fff;color:#2B2824}
html body .pd-row button.pd-buy[data-rs-add]{width:100%;height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.01em;border-radius:8px;background:#3E4A33!important;border-color:#3E4A33!important;color:#FFFFFF!important;box-shadow:0 6px 18px rgba(62,74,51,.28);transition:transform .15s ease,box-shadow .15s ease,background .2s}
html body .pd-row button.pd-buy[data-rs-add]::before{content:"";width:20px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
html body .pd-row button.pd-buy[data-rs-add]:hover{background:#2F3927!important;transform:translateY(-1px);box-shadow:0 10px 22px rgba(62,74,51,.32)}
html body .pd-row button.pd-buy.is-added{background:#2B2824!important;border-color:#2B2824!important}
html body .pd-row a.pd-buynow{grid-column:1 / -1;margin:0!important;height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;font-weight:600}
.zy4-deliv{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:8px;background:#EEF1E8;color:#2F3927;font-size:14px;line-height:1.4}
.zy4-deliv .zy-ico{width:20px;height:20px;flex:none;color:#3E4A33}
.zy4-deliv b{font-weight:700}

/* Often bought together */
.zy4-bundle{margin-top:24px;padding:18px;border:1px solid #E4DBD1;border-radius:10px;background:#FFFDFA}
.zy4-bundle h2{font-size:16px;font-weight:700;color:#2B2824}
.zy4-bitems{display:grid;gap:8px;margin-top:12px}
.zy4-bitem{display:flex;align-items:center;gap:12px;padding:6px;border-radius:8px;cursor:pointer}
.zy4-bitem:hover{background:#F7F3EE}
.zy4-bitem input{width:20px;height:20px;margin:0;accent-color:#3E4A33;flex:none}
.zy4-bitem img{width:46px;height:58px;object-fit:cover;border-radius:4px;flex:none}
.zy4-bitem span{display:flex;flex-direction:column;font-size:14px;color:#2B2824;min-width:0}
.zy4-bitem em{font-style:normal;font-weight:700;font-size:13.5px}
.zy4-bfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #E4DBD1;font-size:14px;color:#2B2824}
.zy4-bfoot b{font-size:17px}
html body .zy4-bbtn{padding:11px 16px;border:1px solid #3E4A33;border-radius:8px;background:#FFFDFA!important;color:#3E4A33!important;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
html body .zy4-bbtn:hover{background:#3E4A33!important;color:#FFFFFF!important}
html body .zy4-bbtn:disabled{opacity:.5;cursor:not-allowed}
.zy4-bdone{margin-top:10px;font-size:14px;color:#2F3927}
.zy4-bdone a{color:#2B2824;font-weight:600;text-decoration:underline}

/* About this product */
.zy4-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(56px,7vw,96px)}
.zy4-about-img{position:sticky;top:70px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#F3EEE7}
.zy4-about-img img{width:100%;height:100%;object-fit:cover}
.zy4-about-text h2{font-family:var(--zy-serif);font-weight:500;font-size:clamp(28px,2.8vw,38px);line-height:1.1;color:#2B2824}
.zy4-lead{margin-top:14px;font-size:18px;line-height:1.6;color:#2B2824}
.zy4-about-text h3{margin-top:28px;font-size:17px;font-weight:700;color:#2B2824}
.zy4-about-text p{margin-top:8px;font-size:15.5px;line-height:1.7;color:#4E463E;max-width:60ch}
.zy4-about-text a{color:#2B2824;text-decoration:underline;text-underline-offset:3px}
.zy4-ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.zy4-ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.6;color:#4E463E}
.zy4-ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:#EEF1E8 no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E4A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.zy4-faq{margin-top:28px;border-top:1px solid #E4DBD1}
.zy4-faq details{border-bottom:1px solid #E4DBD1}
.zy4-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-size:15.5px;font-weight:600;color:#2B2824}
.zy4-faq summary::-webkit-details-marker{display:none}
.zy4-faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:#EFDFD4;display:flex;align-items:center;justify-content:center;font-weight:400}
.zy4-faq details[open] summary::after{content:"−"}
.zy4-faq details p{margin:0 0 16px}

/* Photo zoom */
.zy4-zoom{position:fixed;inset:0;z-index:2000;background:rgba(20,18,16,.88);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.zy4-zoom img{max-width:100%;max-height:100%;border-radius:6px;object-fit:contain}
.zy4-zoom button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#FFFDFA!important;color:#2B2824!important;font-size:24px;line-height:1;cursor:pointer}

/* Bag: cross-sell */
.zy4-xsell{padding-top:40px;padding-bottom:40px}
.zy4-xsell h2{font-family:var(--zy-serif);font-weight:500;font-size:30px;color:#2B2824}
.zy4-xsell > p{margin-top:4px;font-size:15px;color:#5E554C}
.zy4-xgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.zy4-xcard{display:flex;flex-direction:column;gap:6px;padding:8px 8px 12px;border:1px solid #E4DBD1;border-radius:10px;background:#FFFDFA}
.zy4-xcard a{color:#2B2824;text-decoration:none}
.zy4-xcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.zy4-xcard b{display:block;margin-top:8px;font-size:14px;font-weight:500}
.zy4-xcard span{font-size:14px;font-weight:700;color:#2B2824}
html body .zy4-xadd{margin-top:4px;min-height:42px;padding:10px;border:1px solid #3E4A33;border-radius:8px;background:#3E4A33!important;color:#FFFFFF!important;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
html body .zy4-xadd:hover{background:#2F3927!important}
html body .zy4-xadd.is-added{background:#2B2824!important}

/* ── Boeketmaker: smaller choice tiles so more fit on screen ── */
.bm-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
.bm-card{padding:6px 6px 10px!important;border-radius:8px!important}
.bm-img{aspect-ratio:1/1!important;border-radius:5px!important}
.bm-name{margin-top:7px!important;font-size:12.5px!important;line-height:1.3!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-price{font-size:12.5px!important}
.bm-plus{width:32px!important;height:32px!important;right:6px!important;bottom:6px!important;font-size:19px!important}
.bm-qty{right:6px!important;bottom:6px!important}
.bm-qty button{width:28px!important;height:28px!important;font-size:16px!important}
.bm-dots{margin-top:6px!important;gap:5px!important}
.bm-dots button{width:18px!important;height:18px!important}
.bm-img .zy-len{top:6px!important;left:6px!important;font-size:10.5px!important;padding:2px 7px!important}
.bm-preset-img{height:70px!important}

/* Site fixes: empty collections never show in the store menu */
a[href$="/category/vases"],a[href$="/category/sets-gifts"]{display:none!important}

/* ── Responsive ── */
@media (max-width:1400px){.bm-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media (max-width:1180px){.bm-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:900px){
  html body .pd{grid-template-columns:1fr;gap:20px}
  html body .zy-gallery .zy-gthumbs button{width:68px!important;height:85px!important}
  .zy4-about{grid-template-columns:1fr}
  .zy4-about-img{position:static;aspect-ratio:16/10}
  .zy4-xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zy4-bfoot{flex-direction:column;align-items:stretch}
  .zy4-bbtn{width:100%}
  .bm-main{padding-bottom:110px!important}
}
@media (max-width:700px){
  /* Mobile: compact hero, USPs as a swipe row, comfortable tap targets */
  .zy-hero{min-height:440px!important}
  .zy-hero h1{font-size:40px!important}
  .zy-hero-copy p{font-size:15px!important}
  .zy-home > .zy-usp,.zy-uspband .zy-usp{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:14px var(--zy-gutter)!important;scrollbar-width:none}
  .zy-home > .zy-usp::-webkit-scrollbar,.zy-uspband .zy-usp::-webkit-scrollbar{display:none}
  .zy-home > .zy-usp li,.zy-uspband .zy-usp li{flex:0 0 72%;scroll-snap-align:start;border-left:0!important;padding:4px 12px 4px 0!important}
  .zy-sec{padding-top:44px!important}
  .zy-h2{font-size:28px!important}
  .zy-sechead{flex-direction:row!important;align-items:flex-end!important}
  .zy-sechead .zy-lede{display:none}
  html body .pd h1{font-size:30px}
  html body .pd-row #rsQty{width:72px!important;min-width:72px!important}
  .zy4-about{padding-top:40px}
  .bm-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .bm-head{flex-direction:column;align-items:flex-start!important}
  .bm-preset-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .bm-preset{flex:0 0 62%;scroll-snap-align:start}
  .bm-name{font-size:12px!important}
  .zy3-cat-head h1{font-size:32px}
  .zy3-bar{justify-content:space-between}
}
@media (max-width:380px){.bm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
