:root {
    --color-primary: #FB0A73;
    --color-primary-dark: #971C60;
    --color-secondary: #05ACB3;
    --color-gold: #F4B544;
    --color-pink-light: #FCE7F3;
    --color-lavender: #F6E3FC;
    --color-background: #FFFFFF;
    --color-surface: #F8F7FA;
    --color-text: #24212B;
    --color-text-muted: #77727E;
    --color-border: #EDE7EF;
    --color-teal-dark: #006F76;
    --color-primary-hover: #7C164F;
    --gradient-primary: linear-gradient(135deg, #cf095e, #971C60);
    --gradient-secondary: linear-gradient(135deg, #05ACB3, #70D6DB);
    --gradient-soft: linear-gradient(135deg, #FCE7F3, #F6E3FC);
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --shadow-card: 0 8px 30px #971c6014;
    --shadow-hover: 0 15px 40px #971c6026;
    --ink: var(--color-text);
    --muted: #665f6d;
    --paper: var(--color-background);
    --line: var(--color-border);
    --accent: var(--color-primary-dark);
    --accent-dark: var(--color-primary-hover);
    --soft: var(--color-surface);
    --white: var(--color-background);
    --radius: var(--radius-medium);
    --shadow: var(--shadow-card);
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,"Segoe UI",sans-serif;
    font-size:15px;
    line-height:1.65
}
a{
    color:inherit;
    text-decoration:none
}
a:hover{
    color:var(--accent)
}
img{
    max-width:100%;
    display:block
}
button,input,select,textarea{
    font:inherit
}
button,a,input,textarea,select{
    touch-action:manipulation
}
button{
    cursor:pointer
}
button:disabled{
    cursor:wait;
    opacity:.65
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid #006F76;
    outline-offset:3px
}
[hidden]{
    display:none!important
}
h1,h2,h3,p{
    margin-top:0
}
h1,h2,h3{
    line-height:1.16;
    font-weight:600;
    letter-spacing:-.035em
}
h1{
    font-size:clamp(2.4rem,4.5vw,4.5rem);
    margin-bottom:24px
}
h2{
    font-size:clamp(1.8rem,3vw,2.7rem);
    margin-bottom:20px
}
h3,.h3{
    font-size:1.3rem
}
p{
    margin-bottom:18px
}
small{
    font-size:.82rem;
    color:var(--muted)
}
.wrap{
    width:min(1280px,calc(100% - 96px));
    margin-inline:auto
}
.section{
    padding-block:70px
}
.eyebrow{
    font-size:.73rem;
    letter-spacing:.19em;
    font-weight:700;
    color:var(--accent);
    margin-bottom:18px
}
.lead{
    font-size:1.13rem;
    color:var(--muted);
    max-width:610px;
    line-height:1.8
}
.muted{
    color:var(--muted);
    font-size:.87rem
}
.preserve{
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.skip{
    position:absolute;
    top:-100px;
    background:white;
    z-index:20;
    padding:15px
}
.skip:focus{
    top:0
}
.announcement{
    background:var(--ink);
    color:#fff8ec;
    text-align:center;
    padding:9px;
    font-size:.72rem;
    letter-spacing:.09em
}
.store-header{
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand{
    display:flex;
    gap:10px;
    align-items:center;
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:-.07em;
    white-space:nowrap
}
.brand small{
    display:block;
    font-size:.55rem;
    letter-spacing:.21em;
    font-weight:500;
    margin-top:-5px
}
.brand-mark{
    font-family:Georgia,serif;
    font-size:3.7rem;
    color:var(--accent);
    font-style:italic;
    line-height:1;
    position:relative;
    margin-right:10px
}
.brand-mark>span{
    font-size:1.25rem;
    position:absolute;
    right:-13px;
    top:-3px
}
.store-header nav{
    display:flex;
    gap:32px;
    font-size:.88rem
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:14px 24px;
    background:var(--accent);
    color:white;
    border:1px solid var(--accent);
    border-radius:7px;
    font-weight:600;
    font-size:.88rem;
    line-height:1.5;
    transition:background .15s
}
.button:hover{
    background:var(--accent-dark);
    color:white;
    border-color:var(--accent-dark)
}
.button.secondary{
    background:transparent;
    color:var(--ink);
    border-color:#bfc6b9
}
.button.secondary:hover{
    background:var(--soft);
    color:var(--ink)
}
.button.small{
    font-size:.79rem;
    padding:9px 14px
}
.button.full{
    width:100%
}
.actions{
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap
}
.text-link{
    font-size:.88rem;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:5px
}
.hero{
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:40px;
    padding-block:52px 76px;
    align-items:center
}
.hero-copy{
    padding:15px 0
}
.hero h1{
    font-family:Georgia,serif;
    font-size:clamp(3rem,5.3vw,5.2rem);
    font-weight:400;
    max-width:680px;
    line-height:1.06;
    letter-spacing:-.045em
}
.hero .lead{
    max-width:510px;
    margin-block:28px 32px
}
.promise-strip{
    background:#f3ecdf;
    border-block:1px solid #e6e0d3;
    padding:19px 0
}
.promise-strip>.wrap{
    display:flex;
    justify-content:space-around;
    gap:20px;
    font-size:.87rem
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:30px
}
.section-heading h2{
    margin-bottom:0
}
.category-list{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:32px
}
.category-list a{
    background:white;
    border:1px solid var(--line);
    padding:13px 20px;
    border-radius:50px;
    display:flex;
    gap:24px;
    font-size:.85rem
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px
}
.product-card{
    min-width:0;
    background:var(--white);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--line);
    transition:transform .15s,box-shadow .15s
}
.product-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow)
}
.product-photo{
    aspect-ratio:1/1;
    display:block;
    position:relative;
    background:#f5edf4;
    overflow:hidden
}
.product-photo>img{
    width:100%;
    height:100%;
    object-fit:cover
}
.photo-placeholder{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    padding:25px;
    font-size:.85rem
}
.badge{
    position:absolute;
    left:13px;
    bottom:13px;
    background:#fffaf0ed;
    padding:5px 11px;
    border-radius:4px;
    font-size:.68rem
}
.card-body{
    padding:22px 18px
}
.card-body h3{
    font-size:1.08rem;
    margin-bottom:9px;
    letter-spacing:-.02em
}
.clamp{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.82rem;
    color:var(--muted);
    min-height:2.7em
}
.card-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px;
    align-items:center
}
.card-bottom strong{
    font-size:1.08rem
}
.card-bottom a{
    font-size:.73rem;
    color:var(--accent);
    font-weight:600
}
.pack-section{
    background:var(--soft)
}
.empty{
    padding:70px 30px;
    text-align:center;
    background:#faf7fb;
    border:1px dashed #ded0df;
    border-radius:var(--radius);
    margin-block:25px
}
.empty p{
    max-width:520px;
    margin-inline:auto;
    color:var(--muted)
}
.empty h2,.empty h3{
    font-size:1.7rem
}
.empty-icon{
    display:block;
    color:var(--accent);
    font-size:3.5rem;
    line-height:1.2;
    margin-bottom:20px
}
.personal-banner{
    display:flex;
    align-items:center;
    gap:35px;
    background:#f1e2d6;
    padding:45px;
    border-radius:12px;
    margin-bottom:70px
}
.personal-banner>span{
    font-size:4rem;
    color:var(--accent)
}
.personal-banner h2{
    font-family:Georgia,serif;
    font-weight:400;
    font-size:2rem
}
.personal-banner p{
    margin-bottom:8px
}
.personal-banner .button{
    margin-left:auto;
    white-space:nowrap
}
.store-footer{
    background:var(--ink);
    color:#faf5fa;
    padding:60px 0 20px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr 1.3fr;
    gap:40px;
    font-size:.84rem
}
.footer-grid strong{
    display:block;
    font-size:.82rem;
    margin-bottom:18px
}
.footer-grid a:not(.brand){
    display:block;
    margin-bottom:10px
}
.footer-grid p{
    color:#e6dbe6
}
.footer-bottom{
    border-top:1px solid #ffffff25;
    margin-top:45px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    font-size:.75rem
}
.filter-bar{
    display:flex;
    gap:16px;
    align-items:end;
    flex-wrap:wrap;
    background:#f1f0e9;
    padding:22px;
    border-radius:12px;
    margin:30px 0
}
.filter-bar label{
    flex:1;
    min-width:160px;
    margin:0
}
.filter-bar>.text-link{
    margin-bottom:14px
}
label{
    display:block;
    font-size:.84rem;
    font-weight:600;
    margin-bottom:20px
}
input:not([type=checkbox],[type=radio]),select,textarea{
    display:block;
    width:100%;
    border:1px solid #cec4cf;
    border-radius:6px;
    background:white;
    color:var(--ink);
    padding:11px 12px;
    margin-top:7px;
    min-height:46px;
    max-width:100%
}
input[type=file]{
    font-size:.8rem;
    padding:8px
}
input[type=checkbox]{
    accent-color:var(--accent);
    width:18px;
    height:18px
}
textarea{
    resize:vertical
}
label small{
    display:block;
    margin-top:7px;
    font-weight:400
}
select{
    cursor:pointer
}
.pagination{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:35px
}
.pagination a{
    text-decoration:underline
}
.breadcrumbs{
    display:flex;
    gap:12px;
    color:var(--muted);
    font-size:.83rem;
    margin-bottom:30px;
    flex-wrap:wrap
}
.detail-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:65px;
    align-items:start
}
.detail-copy{
    padding-block:20px
}
.detail-copy h1{
    font-family:Georgia,serif;
    font-weight:400;
    font-size:clamp(2rem,4vw,3.4rem)
}
.detail-price{
    font-size:1.8rem;
    font-weight:600;
    color:var(--accent)
}
.gallery-main{
    border:0;
    padding:0;
    background:#f8f1f7;
    width:100%;
    border-radius:15px;
    overflow:hidden;
    position:relative;
    cursor:zoom-in;
    aspect-ratio:1
}
.gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain
}
.gallery-main span{
    position:absolute;
    bottom:16px;
    right:16px;
    padding:5px 10px;
    background:#fffffff0;
    border-radius:4px;
    font-size:.75rem
}
.thumbnails{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-block:15px
}
.thumbnails button{
    flex:0 0 80px;
    padding:0;
    border:2px solid transparent;
    border-radius:7px;
    overflow:hidden;
    background:#f5edf4
}
.thumbnails button[aria-pressed=true]{
    border-color:var(--accent)
}
.thumbnails img{
    height:78px;
    width:100%;
    object-fit:cover
}
.gallery-empty{
    aspect-ratio:1;
    display:grid;
    place-items:center;
    background:#f7f0f7;
    border-radius:15px;
    color:var(--muted)
}
.lightbox{
    border:0;
    border-radius:12px;
    padding:18px;
    max-width:95vw;
    width:min(1000px,95vw);
    max-height:95vh;
    background:var(--paper)
}
.lightbox::backdrop{
    background:#241624e8
}
.lightbox>img{
    max-height:75vh;
    margin:auto;
    object-fit:contain
}
.lightbox>button{
    display:block;
    margin-left:auto;
    border:0;
    background:none;
    font-size:1rem;
    padding:10px
}
.lightbox-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    padding-top:12px
}
.lightbox-controls button{
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 20px
}
.availability{
    color:#386540;
    font-size:.9rem
}
.info-box{
    background:var(--soft);
    border-radius:8px;
    padding:20px;
    margin-bottom:25px
}
.info-box p{
    font-size:.9rem;
    margin-block:8px 0
}
.included{
    padding-left:22px
}
.included li{
    padding-block:5px
}
.related-heading{
    margin-top:70px
}
.price-preview{
    font-size:1.3rem;
    font-weight:600
}
.login-card{
    width:min(450px,calc(100% - 32px));
    margin:60px auto 90px;
    padding:35px;
    background:white;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow)
}
.login-card h1{
    font-size:2rem
}
.validation{
    color:#a72e28;
    background:#fff1ed;
    border-radius:8px;
    margin-bottom:20px
}
.validation:empty,.validation.validation-summary-valid{
    display:none
}
.validation ul{
    padding:16px 32px
}
.input-validation-error{
    border-color:#b4362d!important
}
.admin-body{
    background:#f8f7fa
}
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:235px;
    background:#fff;
    color:#24212b;
    padding:35px 24px;
    display:flex;
    flex-direction:column;
    z-index:5
}
.sidebar .brand{
    font-size:1.65rem
}
.sidebar .brand span{
    color:#e9b79b
}
.sidebar-caption{
    font-size:.6rem;
    letter-spacing:.2em;
    color:#b4c4b5;
    margin-block:12px 35px
}
.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:8px
}
.sidebar nav a{
    padding:12px 14px;
    border-radius:6px;
    font-size:.87rem
}
.sidebar nav a:hover,.sidebar nav a[aria-current=page]{
    background:#ffffff12;
    color:white
}
.visit-store{
    margin-top:auto;
    border-top:1px solid #ffffff22;
    padding-top:20px;
    font-size:.85rem
}
.admin-shell{
    margin-left:235px
}
.admin-topbar{
    padding:20px 38px;
    background:white;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    font-size:.8rem;
    gap:20px
}
.admin-topbar>div{
    display:flex;
    align-items:center;
    gap:20px
}
.admin-main{
    padding:40px;
    max-width:1550px;
    margin:auto
}
.admin-main h1{
    font-size:2.2rem;
    margin-bottom:10px
}
.admin-main h2{
    font-size:1.3rem;
    letter-spacing:-.02em
}
.admin-main h3{
    font-size:1.05rem
}
.page-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px
}
.page-heading p{
    margin-bottom:0;
    color:var(--muted)
}
.page-heading .eyebrow{
    margin-bottom:10px
}
.back-link{
    display:inline-block;
    margin-bottom:12px;
    font-size:.85rem
}
.panel{
    padding:28px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:25px;
    min-width:0
}
.edit-form{
    max-width:1100px
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px
}
.form-grid>.wide{
    grid-column:1/-1
}
.checks{
    display:flex;
    flex-wrap:wrap;
    gap:15px 25px;
    border-block:1px solid var(--line);
    padding:20px 0;
    margin:25px 0
}
.checks label,.check{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500
}
.checks label{
    margin:0
}
.form-footer{
    display:flex;
    gap:25px;
    align-items:center
}
.edit-form h2{
    margin-top:25px
}
.edit-form .panel h2{
    margin-top:0
}
.metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:25px
}
.metric{
    padding:24px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    min-width:0
}
.metric>span{
    font-size:.78rem;
    color:var(--muted);
    display:block
}
.metric strong{
    display:block;
    font-size:clamp(1.3rem,2.1vw,2rem);
    letter-spacing:-.04em;
    margin-block:8px;
    overflow-wrap:anywhere
}
.metric small{
    font-size:.72rem
}
.metric.accent{
    background:#fce7f3;
    border-color:#ead6e7
}
.metrics.compact{
    grid-template-columns:repeat(6,minmax(0,1fr))
}
.compact .metric{
    padding:18px
}
.quick-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:30px 0 40px
}
.quick-links>a{
    padding:12px 18px;
    background:white;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:.84rem
}
.table-wrap{
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:10px;
    background:white
}
table{
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:.82rem
}
th{
    font-size:.69rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:#f5f0f6;
    padding:15px 18px;
    color:var(--muted);
    white-space:nowrap
}
td{
    padding:18px;
    border-top:1px solid var(--line);
    vertical-align:top
}
td small{
    display:block;
    margin-top:4px
}
td p{
    margin-block:8px;
    font-size:.8rem
}
.row-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center
}
.row-actions a{
    color:var(--accent);
    font-weight:600
}
.text-button{
    border:0;
    padding:0;
    background:none;
    color:var(--ink);
    font-size:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
    line-height:1.6
}
.danger{
    color:#a0322b
}
.status{
    display:inline-block;
    font-size:.7rem;
    padding:4px 9px;
    background:#e7f7f7;
    border-radius:30px;
    white-space:nowrap
}
.status.large{
    font-size:.9rem;
    padding:10px 20px
}
.alert{
    padding:15px 20px;
    margin-bottom:25px;
    border-radius:8px;
    font-size:.9rem
}
.success{
    background:#e0edda;
    color:#30562d
}
.error{
    background:#fbe2db;
    color:#983a29
}
.repeat-row{
    display:flex;
    gap:15px;
    align-items:end;
    padding:18px;
    background:#f8f7fa;
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:15px
}
.repeat-row label{
    flex:1;
    min-width:0;
    margin-bottom:0
}
.repeat-row>.text-button{
    margin-bottom:10px
}
.repeat-row label:has(input[type=number]){
    flex:.3
}
.repeat-row.order-line{
    display:block
}
.order-line label{
    margin-bottom:15px
}
.order-line .text-button{
    margin:0
}
.order-line .pack-choices{
    background:white;
    border-radius:6px;
    padding:15px;
    margin-bottom:15px
}
.order-total strong{
    display:block;
    font-size:2rem;
    color:var(--accent)
}
.order-total>span{
    font-size:.85rem
}
.totals{
    margin:25px 0 0 auto;
    max-width:320px
}
.totals p{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding-bottom:10px
}
.timeline{
    list-style:none;
    padding:0 0 0 15px;
    border-left:2px solid var(--line)
}
.timeline li{
    position:relative;
    padding:0 0 25px 15px
}
.timeline li:before{
    content:"";
    position:absolute;
    left:-21px;
    top:7px;
    width:10px;
    height:10px;
    background:var(--accent);
    border-radius:50%
}
.timeline small{
    display:block
}
.timeline p{
    margin:5px 0
}
.customization-image{
    width:90px;
    max-height:100px;
    object-fit:contain;
    border-radius:5px
}
.upload-zone{
    border:2px dashed #d4bfd1;
    background:#faf7fb
}
.upload-zone.dragover{
    border-color:var(--accent);
    background:#fce7f3
}
.upload-zone p{
    font-size:.85rem;
    color:var(--muted)
}
.upload-preview{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:15px
}
.upload-preview img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:5px
}
.image-manager{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.image-tile{
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    overflow:hidden;
    min-width:0
}
.image-tile>img{
    aspect-ratio:1;
    object-fit:cover;
    width:100%
}
.image-tile-body{
    padding:16px;
    font-size:.82rem
}
.image-tile form,.image-tile details{
    margin-top:15px
}
.image-tile summary{
    cursor:pointer
}
.image-tile.dragging{
    opacity:.5
}
.image-tile[draggable]{
    cursor:grab
}
@media(min-width:1600px){
    .hero{
        padding-block:70px 90px
    }
}
@media(max-width:1150px){
    .wrap{
        width:calc(100% - 56px)
    }
    .store-header nav{
        gap:20px
    }
    .header-contact{
        display:none
    }
    .hero-art{
        min-height:400px
    }
    .product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .metrics{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .metrics.compact{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .sidebar{
        width:205px;
        padding:30px 18px
    }
    .admin-shell{
        margin-left:205px
    }
    .admin-main{
        padding:28px
    }
    .repeat-row{
        flex-wrap:wrap
    }
    .image-manager{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .detail-grid{
        gap:35px
    }
    .footer-grid{
        gap:25px
    }
}
@media(max-width:800px){
    .hero{
        gap:25px
    }
    .hero h1{
        font-size:3rem
    }
    .hero-art{
        min-height:350px
    }
    .gift{
        transform:rotate(-10deg) scale(.8)
    }
    .hero-note{
        gap:10px;
        margin-top:25px
    }
    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
    .personal-banner{
        flex-wrap:wrap;
        padding:30px
    }
    .personal-banner .button{
        margin:0
    }
    .detail-grid{
        grid-template-columns:1fr
    }
    .gallery{
        max-width:650px;
        width:100%;
        margin:auto
    }
    .sidebar{
        position:static;
        width:auto;
        padding:18px 22px
    }
    .sidebar-caption{
        display:none
    }
    .sidebar .brand{
        font-size:1.3rem
    }
    .sidebar nav{
        flex-direction:row;
        overflow-x:auto;
        gap:5px;
        margin-top:10px;
        padding-bottom:3px
    }
    .sidebar nav a{
        white-space:nowrap;
        padding:9px 12px;
        font-size:.78rem
    }
    .visit-store{
        display:none
    }
    .admin-shell{
        margin-left:0
    }
    .admin-topbar{
        padding:15px 24px
    }
    .admin-main{
        padding:26px 20px
    }
    .page-heading{
        align-items:start
    }
    .page-heading h1{
        font-size:1.8rem
    }
    .page-heading>.button{
        white-space:nowrap
    }
    .panel{
        padding:22px
    }
}
@media(max-width:560px){
    .wrap{
        width:calc(100% - 36px)
    }
    .store-header{
        height:auto;
        min-height:105px;
        flex-wrap:wrap;
        justify-content:center;
        gap:16px;
        padding-block:20px
    }
    .store-header .brand{
        font-size:1.4rem
    }
    .brand-mark{
        font-size:3rem
    }
    .store-header nav{
        width:100%;
        justify-content:center;
        font-size:.8rem;
        gap:28px
    }
    .hero{
        grid-template-columns:1fr;
        padding-block:25px 40px
    }
    .hero h1{
        font-size:3.1rem;
        margin-bottom:20px
    }
    .hero .lead{
        font-size:1rem;
        margin-block:20px
    }
    .hero-art{
        min-height:320px;
        margin-top:12px;
        border-radius:45% 45% 12px 12px
    }
    .hero-copy{
        padding:0
    }
    .hero-note{
        font-size:.72rem;
        justify-content:space-between
    }
    .hero .actions{
        gap:18px
    }
    .hero .text-link{
        font-size:.8rem
    }
    .promise-strip>.wrap{
        justify-content:space-between;
        gap:8px;
        font-size:.63rem
    }
    .section{
        padding-block:42px
    }
    .section-heading{
        align-items:start;
        flex-direction:column;
        gap:15px
    }
    .product-grid{
        gap:12px
    }
    .card-body{
        padding:14px 12px
    }
    .card-body h3{
        font-size:.97rem
    }
    .card-bottom{
        align-items:start;
        flex-direction:column
    }
    .card-bottom strong{
        font-size:1rem
    }
    .badge{
        font-size:.57rem;
        padding:4px 6px;
        left:6px;
        bottom:6px
    }
    .clamp{
        font-size:.74rem
    }
    .personal-banner{
        padding:25px;
        margin-bottom:42px;
        gap:18px
    }
    .personal-banner>span{
        display:none
    }
    .personal-banner h2{
        font-size:1.7rem
    }
    .personal-banner p{
        font-size:.85rem
    }
    .footer-grid{
        gap:30px 18px
    }
    .footer-grid>div:first-child{
        grid-column:1/-1
    }
    .footer-grid>div:last-child{
        grid-column:1/-1
    }
    .store-footer{
        padding-top:40px
    }
    .filter-bar{
        padding:17px;
        gap:12px
    }
    .filter-bar label{
        flex-basis:100%
    }
    .empty{
        padding:45px 20px
    }
    .empty h2,.empty h3{
        font-size:1.4rem
    }
    .form-grid{
        grid-template-columns:1fr
    }
    .form-grid>.wide{
        grid-column:auto
    }
    .page-heading{
        flex-direction:column;
        gap:18px
    }
    .admin-topbar>span{
        display:none
    }
    .admin-topbar>div{
        justify-content:space-between;
        width:100%;
        min-width:0
    }
    .admin-topbar>div>span{
        overflow-wrap:anywhere
    }
    .metrics{
        gap:12px
    }
    .metric{
        padding:17px
    }
    .metric strong{
        font-size:1.4rem
    }
    .metrics.compact{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .metric>span{
        font-size:.72rem
    }
    .image-manager{
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .image-tile-body{
        padding:12px
    }
    .repeat-row{
        display:block
    }
    .repeat-row label{
        margin-bottom:15px
    }
    .form-footer{
        align-items:start;
        flex-direction:column
    }
    .panel{
        padding:18px
    }
    .edit-form .button{
        max-width:100%
    }
    .image-tile input[type=file]{
        font-size:.65rem
    }
    .login-card{
        padding:25px
    }
    .detail-copy{
        padding-top:0
    }
    .detail-copy h1{
        font-size:2.4rem
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *{
        transition:none!important
    }
}

@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-400.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: Poppins;
    src: url("../fonts/Poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: Poppins;
    src: url("../fonts/Poppins-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

.icon {
    width: 1.2em;
    height: 1.2em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
h1, h2, h3, .brand { font-family: Poppins, Inter, sans-serif; }
h1, h2, h3 { overflow-wrap: anywhere; }
h1 { font-weight: 700; }
.store-header { height: 88px; }
.store-header nav { gap: clamp(18px, 3vw, 45px); font-weight: 600; }
.store-header nav a[aria-current="page"] { color: var(--color-primary-dark); }
.brand { letter-spacing: -.06em; }
.brand small { letter-spacing: .16em; font-family: Inter, sans-serif; margin-top: 1px; }
.brand-accent { color: var(--color-primary-dark); }
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-right: 0;
    border-radius: 15px;
    font: 700 28px/1 Poppins, sans-serif;
    color: var(--color-primary-dark);
    background: var(--gradient-soft);
}
.brand-mark > span { right: 5px; top: 5px; font-size: 10px; color: var(--color-primary); }
.store-logo { width: 54px; height: auto; flex: none; border-radius: 10px; }
.announcement { background: #007b80; color: white; letter-spacing: .09em; }
.announcement .icon { margin-right: 6px; color: #ffdf69; }
.store-tools { display: flex; align-items: center; gap: 18px; }
.header-contact { color: var(--color-teal-dark); text-decoration: none; }
.cart-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: .85rem;
    font-weight: 650;
}
.cart-link:hover { border-color: var(--color-primary-dark); }
.cart-count { background: var(--color-pink-light); color: var(--color-primary-dark); border-radius: 999px; padding: 1px 7px; }
.button {
    gap: 10px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 5px 15px #971c601d;
    transition: background .18s, box-shadow .18s, transform .18s;
    text-align: center;
}
.button:hover { background: var(--color-primary-hover); color: white; border-color: transparent; }
.button:active { transform: translateY(1px); }
.button.secondary { background: var(--color-teal-dark); border-color: transparent; color: white; box-shadow: none; }
.button.secondary:hover { background: #00575d; color: white; }
.button.tertiary { background: white; border-color: #cfc5d1; color: var(--color-text); box-shadow: none; }
.button.tertiary:hover { background: var(--color-surface); border-color: var(--color-primary-dark); color: var(--color-primary-dark); }
.button:disabled { cursor: not-allowed; opacity: .6; transform: none; }
[data-busy][aria-busy=true] .button[aria-disabled=true]::after {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero {
    background: radial-gradient(circle, #cf078b20 1.5px, transparent 2px) 0 0 / 20px 20px,
        linear-gradient(115deg, #ffe0f1, #fceafa 53%, #e1f9f6);
    border: 2px solid #f6b8db;
    border-bottom: 5px solid #0aa9ad;
    border-radius: var(--radius-large);
    grid-template-columns: minmax(0, .97fr) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 60px);
    padding: clamp(22px, 4vw, 58px);
    margin-block: 14px 30px;
}
.hero-copy { padding: 0; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffe274;
    color: #63284e;
    box-shadow: 2px 3px #e3ad2c;
}
.hero h1 {
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(2.4rem, 5.2vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.063em;
    font-weight: 700;
    max-width: 16ch;
    color: #82139c;
    text-shadow: 2px 3px #fff;
}
.hero .lead { font-size: clamp(.95rem, 1.45vw, 1.14rem); max-width: 37ch; margin-bottom: 29px; }
.hero .button:not(.tertiary) { background: #ca0065; box-shadow: 0 4px #9c004c; }
.hero .button:not(.tertiary):hover { background: #a90055; }
.hero-brand {
    position: relative;
    isolation: isolate;
    margin: 0 auto;
    padding: 14px 22px;
    width: min(100%, 420px);
}
.hero-brand::before {
    content: "";
    position: absolute;
    inset: 7% 0;
    border: 3px dashed #09a8ab;
    border-radius: 50%;
    z-index: -1;
}
.hero-brand img {
    width: 100%;
    height: auto;
    border: 5px solid white;
    border-radius: 25px;
    box-shadow: 0 14px 32px #8c156a25;
    transform: rotate(3deg);
}
.hero-brand figcaption {
    position: absolute;
    inset: auto auto 8px 1px;
    background: #007b80;
    padding: 9px 14px;
    border: 3px solid white;
    border-radius: 13px;
    color: white;
    box-shadow: 2px 5px #0758593d;
    transform: rotate(-7deg);
    font: 700 clamp(.83rem, 1.5vw, 1.05rem)/1.15 Poppins, sans-serif;
}
.hero-spark {
    position: absolute;
    color: #ffc22e;
    text-shadow: 2px 2px #a96506;
    font-size: clamp(1.65rem, 4vw, 3.2rem);
    line-height: 1;
    z-index: 1;
}
.hero-spark-top { inset: 1% auto auto 1%; }
.hero-spark-bottom { inset: auto 1% 7% auto; }
.promise-strip { background: #7a188c; color: white; border-block: 1px solid #7a188c; }
.promise-strip > .wrap { justify-content: space-between; }
.promise-strip span { display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; }
.promise-strip .icon { color: #ffdf69; width: 19px; height: 19px; }
.section-heading { align-items: flex-end; }
.category-list a:hover { border-color: var(--color-primary-dark); }
.product-card { border-radius: var(--radius-medium); box-shadow: var(--shadow-card); }
.product-card:hover { box-shadow: var(--shadow-hover); }
.product-photo { aspect-ratio: 1.12; }
.product-photo img { transition: transform .35s; }
.product-card:hover .product-photo img { transform: scale(1.04); }
.badge { background: #fff5fbf5; color: var(--color-primary-dark); font-weight: 650; }
.stock-badge { inset: 12px 12px auto auto; background: #fff; color: #842b41; }
.pack-section { background: #faf5fc; }
.personal-banner { background: var(--gradient-soft); border: 1px solid var(--color-border); border-radius: var(--radius-large); }
.personal-banner h2 { font-family: Poppins, sans-serif; font-weight: 600; }
.personal-banner > .icon { width: 42px; height: 42px; color: var(--color-primary-dark); }
.store-footer { background: #2a1b2a; }
.store-footer a:hover { color: #ffc0e0; }
.filter-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.detail-copy h1 { font-family: Poppins, sans-serif; font-weight: 700; }
.detail-price { color: var(--color-primary-dark); }
.buy-form { margin-bottom: 16px; }
.buy-actions { display: flex; align-items: flex-end; gap: 12px; margin: 18px 0; }
.buy-actions > label { flex: 0 0 94px; margin: 0; }
.buy-actions > .button { flex: 1; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: 25px; }
.cart-lines { display: grid; gap: 14px; }
.cart-line { display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: white; }
.cart-line h2 { font-size: 1.12rem; margin-bottom: 6px; }
.cart-line p { margin-bottom: 7px; font-size: .88rem; }
.cart-photo { display: grid; place-items: center; height: 102px; border-radius: 12px; overflow: hidden; background: var(--gradient-soft); color: var(--color-primary-dark); }
.cart-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-photo .icon { width: 28px; height: 28px; }
.cart-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cart-actions label { margin: 0; width: 86px; }
.cart-actions button { min-height: 44px; }
.cart-summary h2 { font-size: 1.65rem; }
.cart-summary dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 650; padding-block: 14px; border-block: 1px solid var(--line); }
.cart-summary dd { margin: 0; color: var(--color-primary-dark); }
.cart-summary .text-link { display: inline-block; margin-top: 15px; }
.cart-issue { color: #952244; font-weight: 600; }
.toast {
    position: fixed;
    z-index: 12;
    right: 24px;
    bottom: 24px;
    width: min(430px, calc(100% - 48px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid currentColor;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-hover);
    animation: enter .25s ease-out;
}
.toast button { min-width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: 6px; color: inherit; font-size: 1.35rem; }
.connection-status { margin-bottom: 18px; padding: 11px 15px; background: #fff4db; color: #61420a; border-radius: 10px; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.product-photo.is-loading, .gallery-main.is-loading {
    background: linear-gradient(95deg, #f2edf4 25%, #faf7fb 47%, #f2edf4 70%) 0 0 / 230% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.is-loading > img { opacity: 0; }
@keyframes shimmer { to { background-position: -230% 0; } }
.admin-body { background: var(--color-surface); }
.sidebar { background: white; color: var(--color-text); border-right: 1px solid var(--line); gap: 0; }
.sidebar .brand { font-size: 1.27rem; }
.sidebar .brand-mark { color: var(--color-primary-dark); }
.sidebar .brand-mark span { color: var(--color-primary); }
.sidebar .brand-accent { color: var(--color-primary-dark); }
.sidebar-caption { color: var(--muted); margin: 25px 0 14px; font-weight: 700; }
.sidebar nav { gap: 4px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; border-radius: 10px; color: var(--color-text); font-weight: 550; }
.sidebar nav a:hover, .sidebar nav a[aria-current="page"] { background: var(--color-pink-light); color: var(--color-primary-dark); }
.sidebar nav a[aria-current="page"] { font-weight: 700; }
.sidebar .icon { width: 18px; height: 18px; }
.visit-store { border-color: var(--color-border); color: var(--color-teal-dark); }
.admin-topbar { color: var(--muted); font-weight: 550; }
.admin-topbar form { margin: 0; }
.admin-topbar .account-name { overflow-wrap: anywhere; }
.menu-toggle { display: none; }
.metric, .panel, .table-wrap { border-radius: var(--radius-medium); box-shadow: 0 4px 22px #971c6008; }
.metric.accent { background: var(--gradient-soft); border-color: #ebcce3; }
.metric.accent strong { color: var(--color-primary-dark); }
.table-wrap table { min-width: 600px; }
.table-wrap td, .table-wrap th { white-space: normal; overflow-wrap: anywhere; }
.inline-form { display: flex; align-items: center; gap: 8px; }
.inline-form input[type="number"] { width: 110px; min-height: 44px; margin: 0; }
.status { color: var(--color-teal-dark); background: #e7f7f7; }
@media (max-width: 800px) {
    .hero { margin-top: 8px; }
    .hero h1 { font-size: clamp(2.2rem, 5.7vw, 3.6rem); }
    .store-header { gap: 14px; }
    .header-contact { display: none; }
    .sidebar { padding: 13px 18px; border-bottom: 1px solid var(--line); }
    .sidebar-brand { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 13px; }
    .sidebar nav a { min-height: 44px; white-space: normal; }
    .sidebar[data-menu-ready] .menu-toggle { display: inline-flex; }
    .sidebar[data-menu-ready]:has(.menu-toggle[aria-expanded=false]) nav { display: none; }
    .admin-topbar { gap: 10px; }
}
@media (max-width: 560px) {
    .store-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; height: auto; }
    .store-logo { width: 42px; }
    .store-tools { grid-column: 2; grid-row: 1; }
    .store-header nav { grid-column: 1 / -1; justify-content: flex-start; width: 100%; padding-top: 9px; border-top: 1px solid var(--line); }
    .store-header nav a { padding-block: 7px; }
    .cart-link-text { display: none; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; }
    .hero h1 { font-size: clamp(2.05rem, 9vw, 3.2rem); margin-bottom: 13px; }
    .hero .lead { margin: 0 0 20px; }
    .hero .actions { gap: 8px; }
    .hero .button { padding-inline: 11px; font-size: .78rem; }
    .hero-brand { width: min(100%, 295px); }
    .promise-strip span { font-size: .67rem; flex-direction: column; align-items: flex-start; }
    .personal-banner > .icon { display: none; }
    .cart-grid { grid-template-columns: 1fr; }
    .cart-line { grid-template-columns: 63px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .cart-photo { height: 63px; }
    .buy-actions { gap: 8px; }
    .buy-actions > label { flex-basis: 77px; }
    .buy-actions > .button { padding-inline: 9px; }
    .toast { right: 12px; bottom: 12px; width: calc(100% - 24px); }
    .metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric strong { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}