/* =====================================================================
   DM COLLECTIONS - SHOP STYLES
   Nav bar, buttons, product details, cart & checkout.
   Uses the existing brand colours:
     pink  rgb(250,157,214)   soft pink rgba(224,138,191,.6)
     black footer, accent rgb(164,245,245), hover darkslateblue
   Every rule is scoped to a class so it can't affect existing pages.
   ===================================================================== */

[hidden]{ display: none !important; }

/* ---------- Cart count badge (also used on the Home page nav) ---------- */
.cart-count{
    display: inline-block;
    min-width: 1.5em;
    padding: 0 .4em;
    border-radius: 1em;
    background: black;
    color: white;
    font-size: .75em;
    font-style: normal;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
}
.cart-count.is-empty{ background: rgba(0,0,0,.35); }

/* ---------- Page basics ---------- */
.shop-page{
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.shop-page main{ flex: 1; }
.shop-page a{ color: inherit; text-decoration: none; }
.shop-page a:hover{ color: darkslateblue; }
.shop-main{
    width: min(1200px, 94vw);
    margin: 0 auto;
    padding: 24px 0 48px;
}
.page-title{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin: 8px 0 4px;
}
.page-sub{ text-align: center; color: #555; margin-bottom: 24px; }
.crumbs{ font-size: 14px; color: #666; margin-bottom: 8px; }
.crumbs a{ text-decoration: underline !important; }
.back-link{ text-align: center; margin-top: 32px; font-weight: bold; }

/* ---------- Nav bar (every page) ---------- */
.shop-nav{
    position: relative;
    z-index: 1000;
    background-color: rgb(250, 157, 214);
    font-family: Arial, Helvetica, sans-serif;
}
.shop-nav .nav-inner{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 110px;
    padding: 0 34px;
}
.shop-nav .brand{
    font-size: 35px;
    color: black !important;
    margin-right: auto;
    text-decoration: none;
    white-space: nowrap;
}
.shop-nav .brand span{ font-style: italic; font-size: 22px; }
.shop-nav .nav-links{
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 36px;
}
.shop-nav .nav-links a{
    color: black !important;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    transition: color .2s;
}
/* underline drawn only on hover / current page (slides in from the middle) */
.shop-nav .nav-links a::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .2s ease;
}
.shop-nav .nav-links a:hover{ color: darkslateblue !important; }
.shop-nav .nav-links a:hover::after,
.shop-nav .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.shop-nav .nav-toggle,
.shop-nav .nav-cart-mobile{ display: none; }

/* Phones: brand + cart icon + hamburger; links drop down when opened */
@media screen and (max-width: 740px){
    .shop-nav .nav-inner{ min-height: 64px; padding: 0 12px 0 16px; }
    .shop-nav .brand{ font-size: 28px; }
    .shop-nav .brand span{ font-size: 18px; }
    .shop-nav .nav-cart-mobile{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 24px;
        color: black !important;
        padding: 8px;
        text-decoration: none;
    }
    .shop-nav .nav-cart-mobile .cart-count{ font-size: 12px; }
    .shop-nav .nav-toggle{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-size: 30px;
        color: black;
        cursor: pointer;
    }
    .shop-nav .nav-toggle:hover,
    .shop-nav.open .nav-toggle{ background: rgba(255,255,255,.45); }
    .shop-nav .nav-links{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgb(250, 157, 214);
        border-top: 1px solid rgba(0,0,0,.1);
        box-shadow: 0 12px 24px rgba(0,0,0,.15);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height .3s ease, visibility .3s;
    }
    .shop-nav.open .nav-links{ max-height: 400px; visibility: visible; }
    .shop-nav .nav-links li{ border-bottom: 1px solid rgba(0,0,0,.08); }
    .shop-nav .nav-links a{
        display: block;
        padding: 15px 20px;
        font-size: 18px;
        font-weight: bold;
    }
    .shop-nav .nav-links a::after{ display: none; }
    .shop-nav .nav-links a:hover,
    .shop-nav .nav-links a[aria-current="page"]{ background: rgba(255,255,255,.4); }
}

/* ---------- Footer (look comes from style.css) ---------- */
.shop-footer{ position: relative; text-align: center; margin-top: 40px; }
.shop-footer .arrow{ top: 12px; font-size: 22px; }
.shop-page .shop-footer a:hover{ color: rgb(164, 245, 245); }
.shop-footer table{ width: 80%; }
@media screen and (max-width: 740px){ .shop-footer table{ width: 100%; } }

/* ---------- Buttons ---------- */
.btn-shop{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid black;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, transform .1s;
}
.btn-shop:active{ transform: scale(.98); }
.btn-shop:disabled{ opacity: .6; cursor: wait; }
.btn-dark{ background: black; color: white !important; }
.btn-dark:hover:not(:disabled){ background: rgb(250, 157, 214); color: black !important; }
.btn-outline{ background: white; color: black !important; }
.btn-outline:hover{ background: rgb(250, 157, 214); }
.btn-whatsapp{ background: #1f9d55; border-color: #1f9d55; color: white !important; }
.btn-whatsapp:hover:not(:disabled){ background: #167a41; border-color: #167a41; }
.btn-block{ width: 100%; }
.link-btn{
    background: none; border: 0; padding: 0;
    text-decoration: underline; font-weight: bold; cursor: pointer; color: inherit;
}

/* ---------- Card grids (categories + products) ----------
   3 per row on laptops/desktops, 2 per row on tablets and phones.
   A last card on its own is centred, so rows never look lopsided. */
body .products,
.product-list{
    --gap: 28px;
    --cols: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    width: min(1140px, 92vw);
    margin: 0 auto;
}
body .products > .carrier,
.product-list > .product-card{
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    width: auto;
    min-width: 0;
}
@media screen and (max-width: 900px){
    body .products, .product-list{ --cols: 2; --gap: 18px; }
}
@media screen and (max-width: 480px){
    body .products, .product-list{ --gap: 12px; width: calc(100vw - 24px); }
}

/* ---------- Card look: soft border, rounded, lifts on hover ---------- */
.products figure,
.product-list .product-card,
.more-item{
    position: relative;
    height: 100%;
    margin: 0;
    padding: 14px 14px 20px;
    background: white;
    border: 1px solid rgba(224, 138, 191, .45);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(120, 40, 90, .06);
    text-align: center;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.cat-card:hover figure,
.cat-card:focus-visible figure,
.product-list .product-card:hover,
.product-list .product-card:focus-within,
.more-item:hover{
    transform: translateY(-8px);
    border-color: rgb(250, 157, 214);
    box-shadow: 0 18px 36px rgba(120, 40, 90, .18);
}
.card-media{
    overflow: hidden;
    border-radius: 12px;
    background: #faf6f8;
}
.card-media img,
.products .card-media img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: none !important;
    transition: transform .5s ease;
}
.cat-card:hover .card-media img,
.product-list .product-card:hover .card-media img{ transform: scale(1.05); }
@media (prefers-reduced-motion: reduce){
    .products figure, .product-list .product-card, .more-item, .card-media img{ transition: none; }
}

/* Category cards: the whole card is the link, so no link styling inside */
.shop-page a.cat-card,
.shop-page a.cat-card:hover{ color: #222; text-decoration: none; display: block; }
.cat-card:focus-visible{ outline: none; }
.cat-card:focus-visible figure{ outline: 3px solid darkslateblue; outline-offset: 3px; }
.products figcaption{ margin-top: 14px; }
.cat-name{
    display: block;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
}
.products .cat-count{
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: normal;
    color: #666;
}
.cat-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(250, 157, 214, .28);
    font-size: 14px;
    font-weight: bold;
    transition: background .25s, color .25s;
}
.cat-card:hover .cat-cta{ background: black; color: white; }
.cat-cta i{ transition: transform .25s; }
.cat-card:hover .cat-cta i{ transform: translateX(3px); }

/* Product cards: name + price read as text, one clear button.
   The name's link is stretched over the whole card, so tapping anywhere
   (except the button) opens the product page. */
.product-list .product-card{ cursor: pointer; display: flex; flex-direction: column; }
.product-list figcaption{ margin-top: 14px; display: flex; flex-direction: column; flex: 1; padding: 0; font-weight: normal; font-size: inherit; }
.shop-page .product-list .product-name,
.shop-page .product-list .product-name:hover{
    display: block;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
}
.product-list .product-name::after{ content: ''; position: absolute; inset: 0; border-radius: 18px; }
.product-list .product-name:focus-visible{ outline: none; }
.product-list .product-name:focus-visible::after{ outline: 3px solid darkslateblue; outline-offset: 3px; }
.product-list .price{ font-size: 20px; font-weight: bold; margin: 6px 0 0; color: black; }
.card-actions{
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 14px;
}
.card-actions .btn-shop{ padding: 10px 14px; font-size: 15px; }

@media screen and (max-width: 480px){
    .products figure, .product-list .product-card{ padding: 8px 8px 14px; border-radius: 14px; }
    .card-media{ border-radius: 10px; }
    .cat-name{ font-size: 17px; }
    .products .cat-count{ font-size: 12px; }
    .cat-cta{ font-size: 12px; padding: 5px 12px; margin-top: 8px; }
    .shop-page .product-list .product-name{ font-size: 14px; }
    .product-list .price{ font-size: 16px; }
    .card-actions .btn-shop{ padding: 8px 6px; font-size: 13px; gap: 5px; }
}

/* ---------- Product details (product.html) ---------- */
.pd{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 16px;
}
.pd-media{
    border: 1px solid black;
    background: rgba(247, 247, 250, .6);
    padding: 16px;
}
.pd-media img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}
.pd-cat{ text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: #666; margin: 0; }
.pd-name{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 6px 0;
}
.pd-price{ font-size: 1.8rem; font-weight: bold; margin-bottom: 16px; }
.pd-desc{ font-size: 1.05rem; line-height: 1.6; color: #333; }
.pd-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.pd-actions.center{ justify-content: center; }
.pd-note{ color: #555; margin: 6px 0; }
.pd-note a{ text-decoration: underline !important; }
.qty-row{ display: flex; align-items: center; gap: 16px; margin-top: 18px; font-weight: bold; }

.more{ margin-top: 56px; }
.more h2{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; text-align: center; margin-bottom: 16px; }
.more-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.more-item{ display: block; padding: 10px 10px 14px; }
.shop-page a.more-item:hover{ color: #222; }
.more-item img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 8px; border-radius: 10px; }
.more-item span, .more-item b{ display: block; }

@media screen and (max-width: 800px){
    .pd{ grid-template-columns: 1fr; gap: 20px; }
    .more-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Quantity selector ---------- */
.qty{
    display: inline-flex;
    align-items: center;
    border: 2px solid black;
    border-radius: 30px;
    overflow: hidden;
    background: white;
}
.qty button{
    width: 38px; height: 38px;
    border: 0; background: white;
    font-size: 20px; font-weight: bold; cursor: pointer;
}
.qty button:hover{ background: rgb(250, 157, 214); }
.qty input{
    width: 46px; height: 38px;
    border: 0; text-align: center;
    font-size: 16px; font-weight: bold;
    -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ---------- Cart page ---------- */
.cart-layout{
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
}
.cart-items{ border-top: 2px solid black; }
.cart-item{
    display: grid;
    grid-template-columns: 90px 1fr auto 110px 36px;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ccc;
}
.ci-img img{ width: 90px; height: 90px; object-fit: cover; border: 1px solid black; display: block; }
.ci-name{ font-weight: bold; font-size: 17px; display: block; }
.ci-meta{ color: #666; font-size: 14px; }
.ci-total{ font-weight: bold; text-align: right; }
.ci-remove{ background: none; border: 0; font-size: 20px; cursor: pointer; color: #900; }
.ci-remove:hover{ color: red; }
.cart-tools{ margin-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cart-tools a{ text-decoration: underline !important; font-weight: bold; }

.cart-summary{
    background: rgba(224, 138, 191, .18);
    border: 2px solid black;
    padding: 22px;
    position: sticky;
    top: 16px;
}
.cart-summary h2{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; font-size: 1.5rem; }
.cart-summary h3{ font-size: 1.1rem; font-weight: bold; margin-top: 20px; }
.sum-row{ display: flex; justify-content: space-between; padding: 6px 0; }
.sum-row.total{ font-size: 1.4rem; font-weight: bold; border-top: 2px solid black; margin-top: 6px; padding-top: 10px; }
.muted{ color: #555; font-size: 14px; }
.checkout-buttons{ display: grid; gap: 10px; margin-top: 16px; }

.field{ margin-bottom: 12px; }
.field label{ display: block; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.field label small{ font-weight: normal; color: #666; }
.field input, .field textarea{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 16px; /* 16px stops iPhones zooming in */
    background: white;
}
.field input:focus, .field textarea:focus{ outline: 3px solid rgb(250, 157, 214); border-color: black; }

.cart-layout > *{ min-width: 0; }
@media screen and (max-width: 900px){
    .cart-layout{ grid-template-columns: minmax(0, 1fr); }
    .cart-summary{ position: static; }
}
@media screen and (max-width: 560px){
    .cart-item{
        grid-template-columns: 70px 1fr 30px;
        grid-template-areas: "img info rm" "img qty total";
        gap: 8px 12px;
    }
    .ci-img{ grid-area: img; }
    .ci-img img{ width: 70px; height: 70px; }
    .ci-info{ grid-area: info; }
    .cart-item .qty{ grid-area: qty; justify-self: start; }
    .ci-total{ grid-area: total; grid-column: 2 / 4; justify-self: end; }
    .ci-remove{ grid-area: rm; }
    .cart-item .qty button{ width: 32px; height: 32px; }
    .cart-item .qty input{ width: 38px; height: 32px; }
}

/* ---------- Notices, toast, spinner ---------- */
.notice{
    padding: 14px 16px;
    border-radius: 8px;
    margin: 16px 0;
    border: 1px solid;
}
.notice a{ text-decoration: underline !important; font-weight: bold; }
.notice-info{ background: #fdf0f8; border-color: rgb(250, 157, 214); }
.notice-success{ background: #e9f8ef; border-color: #1f9d55; }
.notice-error{ background: #fdecec; border-color: #c0392b; }

.dm-toast{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 150%);
    background: black;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    z-index: 2000;
    max-width: 92vw;
    transition: transform .3s;
    font-family: Arial, Helvetica, sans-serif;
}
.dm-toast.show{ transform: translate(-50%, 0); }
.dm-toast a{ color: rgb(250, 157, 214) !important; text-decoration: underline !important; font-weight: bold; margin-left: 6px; }
.dm-toast i{ color: rgb(164, 245, 245); }

.spinner{
    width: 16px; height: 16px;
    border: 3px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    display: inline-block;
    animation: dmspin .8s linear infinite;
}
@keyframes dmspin{ to{ transform: rotate(360deg); } }

/* ---------- Order success ---------- */
.success-card{ text-align: center; max-width: 640px; margin: 20px auto; }
.success-icon{ font-size: 64px; color: #1f9d55; }
.success-card .ref{ font-size: 1.1rem; }
.success-items{ list-style: none; padding: 0; text-align: left; border: 2px solid black; margin: 20px 0; }
.success-items li{ display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #ddd; }
.success-items li.total{ border-bottom: 0; font-size: 1.2rem; background: rgba(224, 138, 191, .18); }