/* Sweet Treats by Sleeping Lady — Luxury Gallery Upgrade
   Add AFTER the existing storefront, membership, member-account and status CSS.
   Designed for the original index.html and auth.js selectors.
   Browse-only: no ordering, prices, or checkout features. */

:root{--gallery-pink:#e8278c;--gallery-berry:#a81760;--gallery-ink:#4d2540;--gallery-line:#f0c7db;--gallery-shadow:0 18px 45px rgba(128,31,82,.10)}

#collection.wrap{max-width:1360px;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(65px,7vw,110px)}
#collection>.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gallery-berry);letter-spacing:2.3px;font-size:11px}
#collection>.eyebrow::before{content:'✦';font-size:14px;color:var(--gallery-pink)}
#collection .section-title{font-size:clamp(34px,4.5vw,54px);line-height:1.1;letter-spacing:-.025em;margin:12px 0 14px}
#collection>.muted{max-width:640px;line-height:1.7}

#collection .tools{margin:30px 0 12px;gap:12px}
#collection .tools input#search{min-height:52px;max-width:660px;border:1px solid var(--gallery-line);border-radius:100px;padding:15px 20px;background:#fff;box-shadow:0 5px 20px rgba(133,35,88,.045);transition:border-color .2s,box-shadow .2s}
#collection .tools input#search:focus{border-color:var(--gallery-pink);box-shadow:0 0 0 4px rgba(232,39,140,.12);outline:none}
#collection .tools .secondary{min-height:47px;padding:11px 18px;transition:transform .2s,background .2s}
#collection .tools .secondary:hover{transform:translateY(-2px);background:#fff2f8}

#filters.filters{gap:10px;padding:13px 1px 24px;scroll-padding-inline:8px}
#filters.filters button{border:1px solid #efc4d9;padding:12px 19px;border-radius:100px;background:rgba(255,255,255,.93);font-size:13px;box-shadow:0 3px 12px rgba(141,48,93,.035);transition:background .2s,border-color .2s,color .2s,transform .2s}
#filters.filters button:hover{border-color:var(--gallery-pink);transform:translateY(-2px)}
#filters.filters button.active{background:var(--gallery-pink);border-color:var(--gallery-pink);color:white;box-shadow:0 7px 19px rgba(232,39,140,.2)}
#count{font-size:12px;color:#98667f;letter-spacing:.025em;margin:0 0 20px}

#grid.grid{gap:clamp(14px,2.2vw,28px);align-items:stretch}
#grid .tile{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid #f2d5e3;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 8px 25px rgba(128,31,82,.065);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
#grid .tile:hover{transform:translateY(-6px);box-shadow:var(--gallery-shadow);border-color:#edb5d1}
#grid .tile:focus-within{border-color:var(--gallery-pink);box-shadow:0 0 0 3px rgba(232,39,140,.13)}
#grid .tile>img{aspect-ratio:4/4.6;width:100%;object-fit:contain;object-position:center;background:linear-gradient(145deg,#fff0f8,#fffafd 65%,#ffeaf4);padding:clamp(10px,1.7vw,20px);transition:transform .4s ease}
#grid .tile:hover>img{transform:scale(1.035)}
#grid .tile-body{padding:clamp(14px,2vw,21px);display:flex;flex-direction:column;flex:1}
#grid .tile .cat{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--gallery-pink)}
#grid .tile h3{font-size:clamp(15px,1.6vw,19px);line-height:1.35;color:#51223c;margin:10px 0 7px;overflow-wrap:anywhere}
#grid .tile p{font-size:13px;line-height:1.6;color:#8b697d;margin:0 0 18px;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#grid .tile .secondary{margin-top:auto;min-height:43px;background:#fff2f8;border:1px solid #f2c3da;color:var(--gallery-berry);border-radius:100px;font-weight:800;font-size:12px;transition:background .2s,color .2s,border-color .2s}
#grid .tile .secondary:hover{background:var(--gallery-pink);color:#fff;border-color:var(--gallery-pink)}
#grid .empty{border:1px dashed #e8b4d0;border-radius:20px;padding:55px 20px;background:#fff;text-align:center}

#modal.modal{z-index:1000;background:rgba(39,12,30,.78);padding:clamp(12px,3vw,30px);backdrop-filter:blur(8px)}
#modal .modal-card{width:min(100%,900px);max-height:min(90vh,850px);gap:clamp(20px,3vw,40px);padding:clamp(20px,3vw,38px);border:1px solid #f4d1e3;border-radius:28px;box-shadow:0 28px 90px rgba(22,7,16,.27);align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#modal .modal-card>img{width:100%;max-height:560px;min-height:220px;object-fit:contain;background:linear-gradient(135deg,#fff0f8,#fffafd);border-radius:20px;padding:16px}
#modal .modal-card>div{min-width:0}
#modal #modalTitle{font-family:Georgia,serif;color:var(--gallery-berry);font-size:clamp(27px,3vw,41px);line-height:1.13;overflow-wrap:anywhere;margin:14px 0}
#modal #modalDesc{line-height:1.75;color:#77546a;white-space:pre-wrap;overflow-wrap:anywhere}
#modal .note{line-height:1.7}
#modal .close{right:12px;top:12px;z-index:2;width:43px;height:43px;background:#fff;border:1px solid #f0c4d9;box-shadow:0 3px 12px rgba(90,20,55,.09);color:#9e235e}
#modal #close2{margin-top:12px;padding:12px 20px}

@media(min-width:750px) and (max-width:1049px){#grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1050px){#grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:749px){#grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))}#collection .tools input#search{max-width:none}#modal .modal-card{grid-template-columns:1fr;gap:16px}#modal .modal-card>img{max-height:290px;min-height:160px}#modal #modalTitle{font-size:29px}}
@media(max-width:420px){#collection.wrap{padding-left:13px;padding-right:13px}#grid.grid{gap:11px}#grid .tile{border-radius:18px}#grid .tile>img{aspect-ratio:1/1.18;padding:9px}#grid .tile-body{padding:12px}#grid .tile h3{font-size:14px}#grid .tile p{font-size:12px;-webkit-line-clamp:2;margin-bottom:13px}#grid .tile .secondary{font-size:11px;padding:10px 6px}#filters.filters button{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){#grid .tile,#grid .tile>img,#grid .tile .secondary,#filters.filters button,#collection .tools .secondary{transition:none!important}#grid .tile:hover,#grid .tile:hover>img,#filters.filters button:hover{transform:none!important}}