:root{
    --teal:#2a9d8f;
    --ro:#e76f51;          /* red–orange */
    --green-tan:#c7d1b9;   /* earthy neutral */
    --lt-blue:#bde0fe;     /* light blue pop */
    --ink:#111;
    --muted:#5b5b5b;
    --white:#fff;
  

    --bg-teal:#e6f6f3;
    --bg-ro:#ffe9e2;
    --bg-ltblue:#e9f4ff;
    --bg-green:#eef3e8;
  
    --radius:16px;
    --pill:9999px;
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --shadow-2:0 16px 40px rgba(0,0,0,.12);
    --max:1120px;
  }
  
  /* Local fonts */
  @font-face{
    font-family:"Abang Fashion";
    src:url("../abang-fashion-font/AbangFashionDemoVersionBlack-nRwd0.otf") format("opentype");
    font-display:swap;
  }
  @font-face{
    font-family:"American Signature";
    src:url("../american-signature-font/AmericanSignature-w14En.ttf") format("truetype");
    font-display:swap;
  }
  
  /* Base */
  :where(html,body){margin:0;padding:0}
  body{
    font:16px/1.6 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:var(--ink);
    background:var(--white);
  }
  .container{max-width:var(--max); 
    margin:0 auto; padding:0 20px}
  h1,h2,h3{
    font-family:"Abang Fashion", serif; 
    line-height:1.1; 
    margin:0 0 .45em;
}
  h1{
    font-size:clamp(36px,5.2vw,64px);
}
  h2{
    font-size:clamp(26px,3.2vw,42px);
}
  h3{
    font-size:clamp(20px,2.2vw,28px);
}
  p{
    margin:0 0 1em; color:var(--muted);
}
  a{
    color:inherit;
}
  
  /* Header */
  .site-header{
    position:sticky; 
    top:0; 
    z-index:50;
    background:var(--white);
    border-bottom:2px solid #eee;
  }
  .nav{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    height:74px;
}
  .brand{display:flex; 
    align-items:center; 
    gap:12px; 
    text-decoration:none;
}
  .brand img{
    width:36px;
     height:36px; 
     object-fit:contain;
    }
  .brand .name{
    font-family:"Abang Fashion"; 
    font-size:24px; 
    letter-spacing:.02em;
}
  .nav-links{
    display:flex; 
    gap:18px;
}
  .nav-links a{
    text-decoration:none; 
    font-weight:600; 
    padding:10px 12px; 
    border-radius:10px;
}
  .nav-links a:hover{
    background:#f4f4f4;
}
  
  /* Buttons */
  .btn{
    --b:var(--ink);
    --bg:var(--white);
    --reveal:var(--teal);
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:.6rem;
    padding:.9rem 1.2rem; 
    border:2px solid var(--b); 
    border-radius:var(--pill);
    background:var(--bg); 
    color:var(--ink); 
    font-weight:800; 
    text-decoration:none;
    position:relative; 
    overflow:hidden; 
    box-shadow:var(--shadow); 
    transition:transform .15s ease;
  }
  .btn::before{
    content:""; 
    position:absolute; 
    inset:0; 
    background:var(--reveal);
    transform:translateY(100%); 
    transition:transform .25s ease;
  }
  .btn > span{
    position:relative; 
    z-index:1;
}
  .btn:hover{
    transform:translateY(-1px);
}
  .btn:hover::before{
    transform:translateY(0);
}
  .btn.teal{
    --b:var(--teal); 
    --reveal:var(--teal);
}
  .btn.ro{
    --b:var(--ro); 
    --reveal:var(--ro);
}
  .btn.ltblue{
    --b:var(--lt-blue); 
    --reveal:var(--lt-blue);
}
  
  /* Solid CTA variant (no reveal) */
  .btn.solid.teal{ 
    background:var(--teal); 
    color:#fff; 
    border-color:var(--teal); 
}
  .btn.solid.ro{   
    background:var(--ro);   
    color:#fff; 
    border-color:var(--ro);
}
  .btn.solid.blue{ 
    background:var(--lt-blue); 
    color:#0a2b45; 
    border-color:var(--lt-blue);
}
  .btn.solid:hover::before{ 
    transform:none;
}
  .btn.solid:hover{ 
    filter:saturate(1.1) brightness(1.02); 
    transform:translateY(-2px); 
}
  
  /* Cursive kicker – larger */
  .kicker{
    font-family:"American Signature";
    font-size:clamp(32px,4vw,45px);
    color:var(--ro);
    letter-spacing:.02em;
    margin-bottom:.4rem;
    display:inline-block;
    transform:translateY(4px);
  }
  .kicker::after{ 
    content:" •"; 
    color:var(--teal); 
    font-size:.9em;
}
  
  /* Color block helpers */
  .bg-teal{  
    background:var(--bg-teal);
 }
  .bg-ro{    
    background:var(--bg-ro);
 }
  .bg-blue{  
    background:var(--bg-ltblue);
 }
  .bg-green{ 
    background:var(--bg-green);
 }
  .border-teal{
    border-color:var(--teal)!important;
}
  .border-ro{  
    border-color:var(--ro)!important;
}
  .border-blue{
    border-color:var(--lt-blue)!important;
}
  
  /* Headline color underlines */
  /*.h-accent-teal{  box-shadow:inset 0 -10px 0 rgba(42,157,143,.18); display:inline }
  .h-accent-ro{    box-shadow:inset 0 -10px 0 rgba(231,111,81,.18); display:inline }
  .h-accent-blue{  box-shadow:inset 0 -10px 0 rgba(189,224,254,.35); display:inline }*/
  
  /* Sections + triangles */
  .section {
    padding:80px 0; 
    position:relative;
}
  
  /* top triangle (points down) */
  .tri-top { 
    position:relative;
     isolation:isolate;
     }
  .tri-top::before {
    content:""; 
    position:absolute; 
    inset:auto 0 100% 0; 
    height:0;
    border-left:100vw solid transparent; 
    border-right:0 solid transparent;
    border-bottom:60px solid var(--bg-teal); 
    z-index:-1;
  }
  /* bottom triangle (points up) */
  .tri-bottom { 
    position:relative;
    isolation:isolate; 
    }
  .tri-bottom::after{
    content:""; 
    position:absolute; 
    inset:100% 0 auto 0; 
    height:0;
    border-left:0 solid transparent; 
    border-right:100vw solid transparent;
    border-top:60px solid var(--bg-ro);       
    z-index:-1;
  }
  
  /* diagonal slices */
  .slice-left { 
    position:relative; 
    isolation:isolate; 
}
  .slice-left::before {
    content:""; 
    position:absolute; 
    inset:0;
    clip-path:polygon(0 0,38% 0,22% 100%,0 100%);
    background:var(--bg-ltblue); 
    z-index:-1;
  }
  .slice-right{ 
    position:relative; 
    isolation:isolate; 
}
  .slice-right::before{
    content:""; 
    position:absolute; 
    inset:0;
    clip-path:polygon(62% 0,100% 0,100% 100%,78% 100%);
    background:var(--bg-green); 
    z-index:-1;
  }
  
  /* Texture wash */
  .texture { 
    position:relative; 
    isolation:isolate;
}
  .texture::after {
    content:""; 
    position:absolute; 
    inset:0;
    background:url("../images/weather-white-wall.jpg") center/cover no-repeat;
    opacity:.08; 
    pointer-events:none; 
    z-index:-1;
  }
  
  /* HERO video */
  .hero {
    position:relative; 
    block-size:min(86vh,760px); 
    background:#000; 
    color:#fff; 
    overflow:hidden;
  }
  .hero video{ 
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    filter:brightness(.8);
}
  .hero .overlay{ 
    position:relative; 
    z-index:2; 
    display:grid; 
    height:100%; 
    align-content:center;
 }
  .hero h1{ 
    margin-bottom:.2em;
 }
  .hero p{ 
    color:#f1f1f1; 
    margin-bottom:1rem;
 }
  
  /* Split layout */
  .split{
    display:grid; 
    grid-template-columns:1.1fr .9fr; 
    gap:36px; 
    align-items:center;
}
  .image{
    border-radius:var(--radius); 
    overflow:hidden; 
    box-shadow:var(--shadow);
}
  .image img{
    width:100%; 
    height:auto; 
    display:block;
}
  .image.frame-teal{ 
    border:4px solid var(--teal);
 }
  .image.frame-ro{   
    border:4px solid var(--ro);
 }
  .image.frame-blue{ 
    border:4px solid var(--lt-blue);
 }
  
  /* Three-up grid + cards */
  .grid-3{
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:20px;
}
  .card{
    background:var(--white); 
    border:2px solid #eee; 
    border-radius:var(--radius);
    box-shadow:var(--shadow); 
    overflow:hidden; 
    transition:transform .2s ease, box-shadow .2s ease;
    border-top:8px solid var(--teal);
  }
  .card[data-variant="ro"]{   
    border-top-color:var(--ro);
 }
  .card[data-variant="blue"]{ 
    border-top-color:var(--lt-blue);
 }
  .card:hover{
    transform: translateY(-4px); 
    box-shadow: var(--shadow-2);
}
  .card .pic{aspect-ratio:16/10; 
    background:#ddd center/cover no-repeat;
}
  .card .body{
    padding: 18px;
}
  
  /* Shop filters + product cards */
  .filters{
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 18px;
}
  .filter-chip {
    border: 2px solid var(--ink); 
    border-radius: var(--pill);
    padding: .4rem .8rem; 
    cursor: pointer; 
    user-select: none; 
    font-weight: 700;
  }
  .filter-chip.active{
    background:var(--teal); 
    color:#fff; 
    border-color:var(--teal);
}

  .products{
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); 
    gap:18px;
}
  .product-card{
    background:#fff; 
    border:2px solid #eee; 
    border-radius:var(--radius); 
    box-shadow:var(--shadow); 
    overflow:hidden;
}
  .product-card .pic{
    aspect-ratio:1/1;
    background:#ddd center/cover no-repeat;
}
  .product-card .body{
    padding:14px;
}
  .price{
    font-weight:800;
}
  
  /* Product detail */
  .product-wrap{
    display:grid; 
    grid-template-columns:1.1fr .9fr; 
    gap:32px; align-items:start;
}
  .product-hero{
    border-radius:var(--radius); 
    overflow:hidden; 
    box-shadow:var(--shadow);
}
  .product-hero img{
    width:100%; 
    display:block;
}
  .opts{
    display:grid; 
    gap:12px; 
    margin:14px 0;
}
  .select{
    padding:.7rem .9rem; 
    border:2px solid #ddd; 
    border-radius:12px; 
    font-weight:600;
}
  
  /* Gallery masonry */
  .masonry{ 
    column-count:4; 
    column-gap:18px;
 }
  .masonry img{ 
    width:100%; 
    display:block; 
    margin:0 0 18px; 
    border-radius:12px; 
    box-shadow:var(--shadow);
 }
  
  /* Footer */
  footer{ 
    border-top:2px solid #eee; 
    padding:28px 0; 
    margin-top:60px; 
    background:var(--white);
 }
  .footer-inner{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px; 
    flex-wrap:wrap;
}
  .badge{
    padding:.4rem .7rem; 
    border-radius:var(--pill); 
    font-weight:700;
}
  .badge.teal{
    background:var(--teal); 
    color:#fff;
}
  .badge.ro{
    background:var(--ro); 
    color:#fff;
}
  .badge.ltblue{
    background:var(--lt-blue);
}
  
  /* Responsive */
  @media (max-width:1000px){
    .split,.product-wrap{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr}
    .masonry{column-count:2}
  }
  @media (max-width:640px){
    .masonry{column-count:1}
  }

/* Seasonal carousel band */
.diag-band{
    position:relative;
    padding:150px 0;
    color:#fff;
    clip-path:polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%);
  }
  .diag-band.ro{ background:var(--ro) }
  
  .band-title{
    text-align:center;
    margin-bottom:22px;
    color:#fff;
  }
  
  .carousel{ 
    position:relative;
 }
  .track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(460px, 2fr);
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:6px 8px;
  }
  .track::-webkit-scrollbar{ 
    display:none; 
}
  
  .slide{
    scroll-snap-align:start;
    border-radius:16px;
    overflow:hidden;
    background:#0003;
    box-shadow:var(--shadow-2);

  }
  .slide img{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
  }
  
  /* nav buttons */
  .car-btn{
    position:absolute; 
    top:50%; 
    transform:translateY(-50%);
    z-index:2;
    border:none; 
    cursor:pointer;
    background:#fff; 
    color:#111; 
    font-weight:900;
    width:42px; 
    height:42px; 
    border-radius:999px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  .car-btn.prev{ 
    left:-6px;
 }
  .car-btn.next{ 
    right:-6px;
 }
  .car-btn:active{ 
    transform:translateY(-50%) scale(.98);
 }
  
  /* responsive tweaks */
  @media (max-width:900px){
    .slide img{ 
        height:240px;
     }
    .car-btn.prev{ 
        left:6px;
     } 
     .car-btn.next{ 
        right:6px;
     }
  }
  @media (max-width:640px){
    .diag-band{ 
        padding:56px 0; 
        clip-path:polygon(0 8vw,100% 0,100% calc(100% - 8vw),0 100%);
     }
    .track{ 
        grid-auto-columns:85%;
     } 
  }
  
.diag-reverse {
    position: relative;
    padding: 170px 0;
    clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));
    overflow: hidden;
  }
  
  .parallax-market {
    background: url("../images/different-beautiful-bouquets-market-woman-s-day.jpg")
                center / cover no-repeat fixed;
    color: #fff;
  }
  .parallax-market::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    pointer-events: none;
  }
  
  .band-inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
  }
  .band-title { 
    color: #fff; 
    margin-bottom: .4rem; 
  }
  .on-dark { 
    color: #fff; 
  }
  
  /* iOS/older mobile fallback */
  @media (max-width: 900px) {
    .parallax-market {
         background-attachment: scroll; 
        }
  }
  
  


/*  Global Rounded Scrollbar */

/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
    width: 12px;
  }
  
  html::-webkit-scrollbar-track {
    background: var(--white);
    border-radius: 999px;
  }
  
  html::-webkit-scrollbar-thumb {
    background-color: var(--ro);  
    border-radius: 999px;
    border: 2px solid var(--white); 
    transition: background-color 0.25s ease;
  }
  
  html::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--ro) 80%, var(--teal) 20%);
  }
  
  html::-webkit-scrollbar-thumb:active {
    background-color: var(--teal);
  }
  
  /* Firefox */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ro) var(--white);
  }
  html:active {
    scrollbar-color: var(--teal) var(--white);
  }
  

  /*  Hide scrollbar for carousel track only  */

.track::-webkit-scrollbar {
    display: none;
  }
  
  .track {
    scrollbar-width: none;
  }
  
  .track {
    -ms-overflow-style: none; 
  }
  


  /*  Contact page */

.hero-contact video{
    filter: brightness(.75) contrast(1.05);
  }
  .hero-contact .overlay{
    text-align:center;
  }
  .hero-contact .overlay h1{
    margin-bottom:.25rem;
  }
  .hero-contact .overlay p{
    color:#f1f1f1;
    margin-bottom:1rem;
  }
  
  .form-card{
    background:var(--white);
    border:2px solid #eee;
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
  }
  
  .form-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px 18px;
  }
  
  .field{
    display:grid;
    gap:8px;
  }
  
  .field.full{
    grid-column: 1 / -1;
 }
  
  .field label{
    font-weight:600;
    color: var(--ink);
  }
  
  .field input,
  .field select,
  .field textarea{
    appearance:none;
    width:75%;
    padding:.85rem 1rem;
    border:2px solid #ddd;
    border-radius:14px;
    font: 600 16px/1.4 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background:#fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  }
  
  .field input:hover,
  .field select:hover,
  .field textarea:hover{
    border-color: var(--green-tan);
  }
  
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(42,157,143,.14);
    transform: translateY(-1px);
  }
  
  .field select{
    background-image:
      linear-gradient(var(--ink), var(--ink));
    background-repeat:no-repeat;
    background-position: right 14px center;
    background-size: 12px 2px; 
    padding-right: 40px;
  }
  
  .field textarea{
    resize: vertical;
    min-height: 140px;
  }
  
  .actions{
    grid-column: 1 / -1;
    display:flex;
    gap:14px;
    align-items:center;
    margin-top: 4px;
  }
  
  .form-note{ color: var(--muted); }
  
  .btn.solid{
    --bg: var(--teal);
    --b: var(--teal);
    --reveal: var(--teal);
    color:#fff;
  }
  .btn.solid.teal{ background: var(--teal); border-color: var(--teal); }
  .btn.solid.teal:hover{ box-shadow:0 10px 24px rgba(42,157,143,.25); }
  .btn.solid:active{ transform: translateY(0); }
  
  @media (max-width: 820px){
    .form-grid{ grid-template-columns: 1fr; }
    .actions{ flex-wrap:wrap; }
  }
  


  /* Navbar hover effect */
  .nav-links a {
    position: relative;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 9999px;
    transition: all 0.25s ease;
  }
  
  .nav-links a:hover {
    background-color: rgba(42, 157, 143, 0.08);
    color: var(--teal);
    transform: translateY(-1px);
  }
  
  
  
  /* Lightbox  */
.bh-lightbox{
    position: fixed;
    inset: 0; 
    z-index: 9999;
    display: grid; 
    place-items: center;
    background: rgba(0,0,0,.86);
  }
  .bh-lightbox[hidden]{ 
    display:none;
 }
  
  .bh-lb-img{
    max-width: 92vw; 
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    background: #111;
  }
  
  .bh-lb-cap{
    margin-top: 10px;
    color: var(--white);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }
  
  .bh-lb-btn{
    position: absolute;
    width: 44px; 
    height: 44px;
    border-radius: 9999px;
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    font-size: 26px; 
    line-height: 1;
    display: grid; 
    place-items: center;
    cursor: pointer; 
    user-select: none;
    transition: transform .15s ease, background .15s ease, color .15s ease;
  }
  .bh-lb-btn:hover{ 
    background: var(--white); 
    color: var(--ink); 
    transform: translateY(-1px); 
}
  
  .bh-lb-close{ 
    top: 20px; 
    right: 20px; 
}
  .bh-lb-prev { 
    left: 20px;  
    top: 50%; 
    transform: translateY(-50%); 
}
  .bh-lb-next { 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
}
  
  .bh-lb-btn:active{ 
    outline: 2px solid var(--teal); 
}
  .bh-lb-prev:hover{ 
    border-color: var(--teal); 
}
  .bh-lb-next:hover{ 
    border-color: var(--ro); 
}
  
  body.bh-noscroll{ 
    overflow: hidden; 
}