/* ==========================================================================
   ASMA STORES — Design tokens & base styles
   Primary blue sampled directly from the brand reference photo (a blue-
   gradient canvas mockup) via PIL pixel sampling: #4A8ABA. All other blue
   shades below are mathematically derived from that same sampled value
   (darken/lighten), not separately chosen, so the whole palette stays
   consistent with the one real reference color.
   ========================================================================== */
:root{
  --brand-primary:#235C93;
  --brand-primary-hover:#1C4E80;
  --brand-primary-active:#163D66;
  --brand-primary-light:#E9F1F8;
  --brand-primary-lighter:#D8E7F3;
  --brand-primary-smooth:#6FA6C5;

  --brand-secondary:#3F7EB1;
  --brand-accent:#6FA6C5;

  --brand-gradient:linear-gradient(135deg,#235C93 0%,#3F7EB1 40%,#4F91BC 70%,#6FA6C5 100%);
  --footer-gradient:linear-gradient(180deg,#2A689D,#235C93,#1B4E7B);

  --surface-page:#F7FAFD;
  --surface-card:#FFFFFF;
  --surface-soft:#EEF5FA;
  --surface-muted:#E4EEF5;

  --text-primary:#18324A;
  --text-secondary:#345273;
  --text-muted:#64748B;
  --text-inverse:#ffffff;

  --border-default:#D8E7F3;
  --border-soft:#E7F0F7;
  --border-strong:#B9D2E5;

  --status-sale:#EF4444;
  --status-success:#22C55E;
  --status-warning:#F59E0B;
  --status-danger:#EF4444;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-card:0 8px 24px rgba(32, 32, 36, .08);
  --shadow-overlay:0 24px 70px rgba(32, 32, 36, .16);
  /* Referenced across several templates/CSS files but never previously
     defined here (a real pre-existing bug — those box-shadows silently
     rendered as nothing). Added to match how they're already being used:
     a lighter resting-state shadow and a more pronounced hover/lift one. */
  --shadow-soft:0 10px 30px rgba(32, 32, 36, .06);
  --shadow-lift:0 20px 48px rgba(32, 32, 36, .14);

  --ease-previous:cubic-bezier(.16, 1, .3, 1);
  --brand-primary-dark:#325D7E;
  --ease:cubic-bezier(.22,1,.36,1); /* keeping existing for backward compat */
}

/* Legacy variable names kept for backward compatibility with anything still
   referencing var(--gold) directly — now holding the real brand blue
   instead of the old gold theme, so nothing renders gold anymore. */
:root{
  --gold:#4A8ABA;
  --gold-light:#7FB2DE;
  --grad-gold:linear-gradient(135deg, var(--gold), var(--gold-light));
  --cream:#FCFAF5;
  --white:#FFFFFF;
  --dark:#202020;
  --light-gray:#F7F7F7;
  --text:#303030;
  --muted:#6B6B6B;
  --success:#2E7D32;
  --sale:#D72638;
  --border:#EAE5D8;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html{
  overflow-x:hidden;
}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif; font-weight:700; letter-spacing:-0.01em; color:var(--text-primary);}
a{text-decoration:none; color:inherit;}
button, input, select, textarea{font-family:'Poppins',sans-serif; cursor:pointer; border:none; background:none; color:inherit;}
.container{width:min(100%,1360px); margin:0 auto; padding-inline:clamp(16px,2vw,32px);}
.muted{color:var(--text-muted);}
.eyebrow{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--brand-primary); font-weight:600; margin-bottom:14px;}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--brand-primary-light);}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Montserrat','Poppins',sans-serif;
  padding:16px 34px; border-radius:100px; font-weight:600; font-size:13.5px; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary{background:#FDD245; color:#c72020;}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(35, 92, 147, .45);}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{
  background:transparent;
  color:var(--brand-primary);
  border:2px solid var(--brand-primary);
}
.btn-secondary:hover{
  background:var(--brand-primary-light);
}
.btn-secondary:active{
  transform:scale(.97);
}
.btn-ghost{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--border-soft);
}
.btn-ghost:hover{
  background:var(--brand-primary-light);
}
.btn-ghost:active{
  transform:scale(.97);
}
.btn-danger{
  background:var(--status-sale);
  color:#fff;
}
.btn-danger:hover{
  background:#b91c1c;
}
.btn-danger:active{
  transform:scale(.97);
}

/* Ripple micro-interaction */
.btn .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s var(--ease);}
@keywords ripple{ to{ transform:scale(3); opacity:0; } }

/* ---------- Section shell ---------- */
section{padding:40px 0;}
.section-head{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:44px; gap:14px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}
.section-head .eyebrow{display:block;}
.view-all{font-size:13.5px; font-weight:600; color:var(--brand-primary); border-bottom:1.5px solid var(--brand-primary-light); padding-bottom:3px; transition:opacity .3s;}
.view-all:hover{opacity:.7;}

/* ---------- Messages ---------- */
.messages{width:min(100%,1360px); margin:14px auto 0; padding-inline:clamp(16px,2vw,32px);}
.msg{padding:13px 18px; border-radius:12px; font-size:13.5px; margin-bottom:8px;}
.msg.success{background:#EFF6FF; color:var(--status-success);}
.msg.error{background:#FEE2E2; color:var(--status-sale);}
.msg.warning{background:#FFF7ED; color:#92400E;}

/* ---------- Footer ---------- */
/*==========================================
FOOTER
==========================================*/

.site-footer{
    background:linear-gradient(
        180deg,
        #184E7A,
        #235C93,
        #173F67
    );
    color:#fff;
    margin-top:clamp(40px, 6vw, 80px);
    overflow:hidden;
}

.site-footer .container{
    max-width:1360px;
    margin:auto;
    padding:clamp(50px, 8vw, 70px) clamp(20px, 4vw, 30px) clamp(20px, 4vw, 30px);
}

/* Footer grid */
.footer-grid{
    display:grid;
    gap:clamp(20px, 4vw, 55px);
    /* For desktop: 5 columns */
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
}

@media (max-width: 768px) {
    .footer-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-brand{
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .footer-column.shop{
        grid-column: 1;
        grid-row: 2;
    }
    .footer-column.support{
        grid-column: 2;
        grid-row: 2;
    }
    .footer-column.company{
        grid-column: 1;
        grid-row: 3;
    }
    .footer-column.footer-newsletter{
        grid-column: 2;
        grid-row: 3;
    }
}

/* Footer brand */
.footer-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.footer-logo img{
    width:clamp(120px, 20vw, 180px);
    height:auto;
    filter:brightness(0) invert(1);
    margin-bottom:clamp(10px, 2vw, 20px);
}

.footer-description{
    font-size:clamp(14px, 1.8vw, 16px);
    line-height:1.8;
    color:rgba(255,255,255,.72);
    max-width:90%;
    margin-bottom:clamp(20px, 2.5vw, 28px);
    margin-left:auto;
    margin-right:auto;
}

.social-row{
    display:flex;
    gap:clamp(10px, 2vw, 14px);
    margin-top:clamp(10px, 2vw, 25px);
    justify-content:center;
}

.social-row a{
    width:clamp(30px, 5vw, 44px);
    height:clamp(30px, 5vw, 44px);
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;
}

.social-row a:hover{
    background:#4A88D4;
    transform:translateY(-4px);
}

.social-row svg{
    width:clamp(12px, 2vw, 18px);
    height:clamp(12px, 2vw, 18px);
    stroke:#fff;
    fill:none;
    stroke-width:1.8;
}

/* Footer columns */
.footer-column h5{
    font-size:clamp(16px, 2.5vw, 20px);
    margin-bottom:clamp(12px, 2vw, 20px);
    font-weight:600;
    position:relative;
}

.footer-column h5::after{
    content:"";
    display:block;
    width:clamp(20px, 4vw, 38px);
    height:clamp(1px, 0.5vw, 2px);
    background:#6FA6C5;
    margin-top:10px;
}

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-column li{
    margin-bottom:clamp(8px, 1.5vw, 12px);
}

.footer-column a{
    text-decoration:none;
    color:rgba(255,255,255,.72);
    transition:.25s;
}

.footer-column a:hover{
    color:#fff;
    padding-left:clamp(4px, 1vw, 6px);
}

/* Newsletter form */
.newsletter-form{
    display:flex;
    height:clamp(40px, 6vw, 52px);
    border-radius:999px;
    overflow:hidden;
    background:#fff;
}

.newsletter-form input{
    flex:1;
    padding:0 clamp(12px, 2vw, 18px);
    border:none;
    outline:none;
    font-size:clamp(14px, 1.6vw, 16px);
}

.newsletter-form button{
    width:clamp(48px, 8vw, 58px);
    background:#235C93;
    border:none;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.3s;
}

.newsletter-form button:hover{
    background:#4A88D4;
}

/* Footer bottom */
.footer-bottom{
    margin-top:clamp(30px, 4vw, 60px);
    padding-top:clamp(15px, 2vw, 25px);
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    color:rgba(255,255,255,.65);
    font-size:clamp(12px, 1.5vw, 14px);
}


/*==========================================
1200px and below
==========================================*/

@media (max-width:1200px){

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:40px 32px;
    }

    /* Brand full width */
    .footer-brand{
        grid-column:1 / -1;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        justify-content:center;
        text-align:center;
        gap:24px;
    }

    .footer-logo{
        flex:0 0 auto;
    }

    .footer-description{
        flex:1 1 320px;
        max-width:600px;
        margin:0;
    }

    .social-row{
        width:100%;
        justify-content:center;
    }

    /* Row 2 */

    .footer-column.shop{
        grid-column:1;
        grid-row:2;
    }

    .footer-column.support{
        grid-column:2;
        grid-row:2;
    }

    /* Row 3 */

    .footer-column.company{
        grid-column:1;
        grid-row:3;
    }

    .footer-newsletter{
        grid-column:2;
        grid-row:3;
    }

}

/*==========================================
768px and below
Keep SAME layout
==========================================*/

@media (max-width:768px){

    .site-footer .container{
        padding:55px 20px 28px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:30px 20px;
    }

    .footer-brand{
        grid-column:1/-1;
        gap:18px;
    }

    .footer-logo img{
        width:150px;
    }

    .footer-description{
        font-size:14px;
        line-height:1.7;
    }

    .footer-column h5{
        font-size:17px;
    }

    .newsletter-form{
        height:48px;
    }

    .newsletter-form input{
        font-size:14px;
    }

}

/*==========================================
480px and below
Still keep 2 columns
==========================================*/

@media (max-width:480px){

    .site-footer .container{
        padding:48px 16px 24px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 14px;
    }

    .footer-brand{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .footer-description{
        max-block-size: fit-content;
        
        max-width:100%;
        margin:auto;
    }

    .social-row{
        justify-content:center;
    }

    .footer-column h5{
        font-size:16px;
    }

    .footer-column li{
        margin-bottom:8px;
    }

    .footer-column a{
        font-size:13px;
    }

    .newsletter-form{
        height:44px;
    }

    .newsletter-form input{
        padding:0 12px;
        font-size:13px;
    }

    .newsletter-form button{
        width:44px;
    }

    .footer-bottom{
        margin-top:36px;
        font-size:13px;
    }

}

/* ==========================================================================
   SIGNATURE PRODUCTS
   ========================================================================== */
.signature-section-head-home{
    width:100%;
    max-width:700px;
    margin:0 auto 48px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
}

.signature-section-head-home div{
    width:100%;
}

.signature-section-head-home .eyebrow,
.signature-section-head-home h2,
.signature-section-head-home p{
    text-align:center;
}

.signature-section-head-home .view-all{
    align-self:center;
}

/* TABS */

.signature-tabs{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:42px;
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}

.signature-tab{
  flex:0 0 auto;
  padding:10px 19px;
  border:1px solid var(--border);
  border-radius:100px;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease;
}

.signature-tab:hover,
.signature-tab.is-active{
  border-color:var(--brand-primary, #3f6f9f);
  background:var(--brand-primary, #3f6f9f);
  color:#fff;
}



/* COLLECTION */

.signature-collection{
  display:none;
}

.signature-collection.is-active{
  display:block;
}

.signature-collection-intro{
  margin-bottom:30px;
}

.signature-collection-intro span{
  color:var(--brand-primary, #3f6f9f);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.signature-collection-intro h3{
  margin:7px 0 8px;
  color:var(--dark);
  font-family:"Playfair Display", serif;
  font-size:30px;
  font-weight:600;
}

.signature-collection-intro p{
  max-width:600px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}



/* PRODUCT GRID */

.signature-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:30px 22px;
}

.signature-card{
  min-width:0;
}

.signature-media{
  position:relative;
  height:410px;
  overflow:hidden;
  background:#eef2f6;
}

.signature-media > a{
  display:block;
  width:100%;
  height:100%;
}

.signature-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}

.signature-card:hover .signature-media img{
  transform:scale(1.055);
}

.signature-placeholder{
  width:100%;
  height:100%;
  background-size:cover;
}



/* BADGE */

.signature-badge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:7px 11px;
  background:#fff;
  color:var(--dark);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}



/* QUICK ADD */

.signature-add{
  position:absolute;
  right:16px;
  bottom:16px;
  left:16px;
  z-index:3;
  opacity:0;
  transform:translateY(15px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.signature-card:hover .signature-add{
  opacity:1;
  transform:none;
}

.signature-add .cart-add-btn{
  width:100%;
  min-height:48px;
  border:0;
  background:#fff;
  color:var(--dark);
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.signature-add .cart-add-btn:hover{
  background:var(--brand-primary, #3f6f9f);
  color:#fff;
}



/* PRODUCT INFO */

.signature-info{
  padding:19px 3px 0;
}

.signature-category{
  display:block;
  margin-bottom:7px;
  color:var(--brand-primary, #3f6f9f);
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.signature-info h4{
  margin:0 0 10px;
  font-family:"Playfair Display", serif;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
}

.signature-info h4 a{
  color:var(--dark);
  text-decoration:none;
}

.signature-info h4 a:hover{
  color:var(--brand-primary, #3f6f9f);
}

.signature-price{
  display:flex;
  align-items:center;
  gap:10px;
}

.signature-price strong{
  color:var(--dark);
  font-size:14px;
  font-weight:600;
}

.signature-price del{
  color:var(--muted);
  font-size:12px;
}

.signature-empty{
  grid-column:1 / -1;
  padding:50px;
  color:var(--muted);
  text-align:center;
}



/* TABLET */

@media(max-width:991px){

  .signature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .signature-section{
    padding:80px 0;
  }

}



/* MOBILE */

@media(max-width:600px){

  .signature-section{
    padding:65px 0;
  }

  .signature-section-head{
    margin-bottom:35px;
  }

  .signature-section-head .view-all{
    display:inline-block;
    margin-top:20px;
  }

  .signature-tabs{
    margin-bottom:30px;
  }

  .signature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:25px 12px;
  }

  .signature-media{
    height:260px;
  }

  .signature-add{
    right:8px;
    bottom:8px;
    left:8px;
    opacity:1;
    transform:none;
  }

  .signature-add .cart-add-btn{
    min-height:40px;
    font-size:9px;
  }

  .signature-info h4{
    font-size:16px;
  }

}



@media(max-width:390px){

  .signature-media{
    height:230px;
  }

}



.floating-whatsapp{

    position:fixed;

    right:26px;

    bottom:28px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 12px 35px rgba(37,211,102,.35),

        0 5px 12px rgba(0,0,0,.18);

    z-index:9999;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.floating-whatsapp svg{

    width:34px;

    height:34px;

}

.floating-whatsapp:hover{

    transform:translateY(-4px) scale(1.08);

    box-shadow:

        0 18px 42px rgba(37,211,102,.45),

        0 8px 16px rgba(0,0,0,.22);

}

.floating-whatsapp:active{

    transform:scale(.95);

}

.floating-whatsapp:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 5px rgba(37,211,102,.25),

        0 10px 30px rgba(37,211,102,.35);

}

/* Tablet */

@media(max-width:991px){

    .floating-whatsapp{

        width:58px;

        height:58px;

        right:20px;

        bottom:22px;

    }

    .floating-whatsapp svg{

        width:31px;

        height:31px;

    }

}

/* Mobile */

@media(max-width:575px){

    .floating-whatsapp{

        width:54px;

        height:54px;

        right:16px;

        bottom:18px;

    }

    .floating-whatsapp svg{

        width:28px;

        height:28px;

    }

}

/* Very Small Phones */

@media(max-width:360px){

    .floating-whatsapp{

        width:50px;

        height:50px;

        right:14px;

        bottom:14px;

    }

    .floating-whatsapp svg{

        width:26px;

        height:26px;

    }

}

.floating-whatsapp::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:2px solid rgba(37,211,102,.45);

    animation:whatsappPulse 2.5s infinite;

}

@keyframes whatsappPulse{

    0%{

        transform:scale(.9);

        opacity:.9;

    }

    70%{

        transform:scale(1.4);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}