/*
Theme Name: Hikmah Collections
Theme URI: https://example.com/
Author: Hikmah Collections
Description: WooCommerce-ready conversion of the supplied Hikmah Collections storefront.
Version: 1.0.0
Text Domain: hikmah-collections
*/
:root{
    --maroon:#5E1F2E;
    --maroon-deep:#3E1220;
    --gold:#C9A15B;
    --gold-soft:#E4CB9A;
    --white:#FFFFFF;
    --off:#FAF8F6;
    --ink:#241B1D;
    --line: rgba(36,27,29,0.10);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--white);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Fraunces',serif;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}

  /* ---------- top utility bar ---------- */
  .util-bar{background:var(--ink); color:#E9DED9; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; text-align:center; padding:7px 12px;}

  /* ---------- promo marquee ---------- */
  .promo-bar{background:var(--maroon); color:var(--white); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:9px 0; overflow:hidden; white-space:nowrap;}
  .promo-track{display:inline-flex; animation: scroll-left 24s linear infinite;}
  .promo-track span{padding:0 26px; display:inline-flex; align-items:center; gap:8px;}
  .promo-track span:after{content:'✦'; opacity:.6; margin-left:26px; color:var(--gold-soft);}
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- header ---------- */
  header{position:sticky; top:0; z-index:50; background:var(--white); border-bottom:1px solid var(--line);}
  .nav-wrap{max-width:1320px;margin:0 auto;padding:14px 28px; display:flex;align-items:center;justify-content:space-between; gap:20px;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{height:46px; width:auto;}
  .brand-text .name{font-family:'Fraunces',serif; font-size:19px; font-weight:600; letter-spacing:.02em; line-height:1.1; color:var(--maroon);}
  .brand-text .tag{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700;}
  nav.links{display:flex; gap:24px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; flex-wrap:wrap;}
  nav.links a{position:relative; padding-bottom:4px; transition:color .2s; white-space:nowrap; color:var(--ink);}
  nav.links a:hover{color:var(--maroon);}
  nav.links a:after{content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--maroon);transition:width .25s;}
  nav.links a:hover:after{width:100%;}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .icon-btn{background:none;border:none;font-size:18px; position:relative; color:var(--ink);}
  .cart-count{position:absolute; top:-7px; right:-9px; background:var(--maroon); color:var(--white); font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .wa-btn{display:flex; align-items:center; gap:7px; background:#25D366; color:#fff; padding:9px 16px; border-radius:20px; font-size:12px; font-weight:600; border:none; white-space:nowrap;}
  @media (max-width:1080px){ nav.links{display:none;} }

  /* ---------- hero ---------- */
  .hero{position:relative; background:linear-gradient(120deg,var(--maroon) 0%, var(--maroon-deep) 100%); overflow:hidden;}
  .hero:before{content:'';position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(201,161,91,0.08) 0 2px, transparent 2px 30px);}
  .hero-inner{position:relative; max-width:1320px;margin:0 auto; padding:74px 28px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
  .hero-eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
  .hero-eyebrow:before{content:'';width:28px;height:1px;background:var(--gold-soft);}
  .hero h1{font-size:50px; line-height:1.08; font-weight:500; margin:0 0 20px; color:var(--white); letter-spacing:-.01em;}
  .hero h1 em{font-style:italic; color:var(--gold-soft);}
  .hero p{font-size:15.5px; line-height:1.7; color:#EAD9DE; max-width:420px; margin:0 0 28px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-gold{background:var(--gold); color:var(--maroon-deep); border:none; padding:14px 28px; border-radius:3px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; transition:background .2s;}
  .btn-gold:hover{background:var(--gold-soft);}
  .btn-outline-w{border:1px solid rgba(255,255,255,0.6); color:var(--white); padding:14px 26px; border-radius:3px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;}
  .btn-outline-w:hover{background:rgba(255,255,255,0.1);}
  .hero-card{background:var(--white); border-radius:4px; padding:22px; box-shadow:0 30px 60px rgba(0,0,0,0.28);}
  .hero-card .swatch{aspect-ratio:4/5; border-radius:3px; margin-bottom:14px; background:linear-gradient(150deg,#8C3350,#5E1F2E); position:relative; overflow:hidden;}
  .hero-card .swatch:after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(70deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 20px);}
  .hero-card .name{font-family:'Fraunces',serif; font-size:16px; margin-bottom:4px;}
  .hero-card .price{font-size:14px; color:var(--maroon); font-weight:700;}
  .hero-card .strike{color:#b3a6a1; text-decoration:line-through; font-weight:400; margin-right:6px;}

  /* ---------- category tile row ---------- */
  .cat-row-wrap{max-width:1320px;margin:0 auto; padding:44px 28px 10px;}
  .cat-row-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px;}
  .cat-row-head h2{font-size:22px; font-weight:500; margin:0;}
  .cat-scroll{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin;}
  .cat-tile{flex:0 0 170px; text-align:center; cursor:pointer;}
  .cat-tile .thumb{aspect-ratio:3/4; border-radius:4px; margin-bottom:10px; position:relative; overflow:hidden; transition:transform .2s;}
  .cat-tile:hover .thumb{transform:translateY(-4px);}
  .cat-tile .thumb:after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(70deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 20px);}
  .cat-tile .label{font-size:12.5px; font-weight:600;}
  .cat-tile .from{font-size:11px; color:#8a7d78;}

  /* ---------- filter chip row ---------- */
  .chip-section{max-width:1320px;margin:0 auto; padding:36px 28px 10px;}
  .chip-section h3{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#8a7d78; margin:0 0 14px; font-weight:600;}
  .chip-row{display:flex; gap:10px; flex-wrap:wrap;}
  .chip{border:1px solid var(--line); background:var(--off); padding:9px 18px; border-radius:20px; font-size:12.5px; font-weight:500; transition:all .2s;}
  .chip:hover{border-color:var(--maroon); color:var(--maroon); background:var(--white);}

  /* ---------- section ---------- */
  .section{max-width:1320px;margin:0 auto; padding:40px 28px;}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; border-bottom:2px solid var(--ink); padding-bottom:16px; flex-wrap:wrap; gap:10px;}
  .section-head h2{font-size:26px; font-weight:600; margin:0; letter-spacing:.01em;}
  .section-head .sub{font-size:12.5px; color:#8a7d78; margin-top:6px;}
  .view-all{font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--maroon); border-bottom:1px solid var(--maroon); padding-bottom:2px;}

  .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
  .filter-pill{border:1px solid var(--line); background:var(--white); padding:8px 16px; border-radius:20px; font-size:12px; font-weight:500; color:#5c504c; transition:all .2s; white-space:nowrap;}
  .filter-pill.active, .filter-pill:hover{background:var(--maroon); color:var(--white); border-color:var(--maroon);}

  /* ---------- product grid ---------- */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;}
  .card{position:relative;}
  .card-media{position:relative; aspect-ratio:3/4; border-radius:4px; overflow:hidden; margin-bottom:12px; display:flex; align-items:flex-end; border:1px solid var(--line);}
  .badge-row{position:absolute; top:12px; left:12px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
  .badge{font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:2px;}
  .badge.sale{background:var(--maroon); color:var(--white);}
  .badge.premium{background:var(--ink); color:var(--gold-soft);}
  .badge.newb{background:var(--gold); color:var(--maroon-deep);}
  .badge.free{background:var(--white); color:var(--ink); border:1px solid var(--line);}
  .card-add{position:absolute; bottom:12px; right:12px; background:var(--white); border:none; border-radius:50%; width:38px; height:38px; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.18); transition:all .18s; opacity:0; transform:translateY(6px); z-index:3;}
  .card:hover .card-add{opacity:1; transform:translateY(0);}
  .card-add:hover{background:var(--maroon); color:var(--white);}
  .card-title{font-size:13.5px; font-weight:600; margin:0 0 4px; line-height:1.3;}
  .card-cat{font-size:10.5px; color:#a89b96; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
  .card-price{font-size:13.5px; display:flex; gap:8px; align-items:baseline;}
  .card-price .now{font-weight:700; color:var(--maroon);}
  .card-price .was{color:#a89b96; text-decoration:line-through; font-size:11.5px;}
  .card-price .off{font-size:10.5px; color:#6f8f6f; font-weight:700;}

  .p1{background:linear-gradient(150deg,#8C3350,#5E1F2E);}
  .p2{background:linear-gradient(150deg,#3E5C4A,#274036);}
  .p3{background:linear-gradient(150deg,#C9A15B,#8A6A34);}
  .p4{background:linear-gradient(150deg,#5B4A7A,#372B52);}
  .p5{background:linear-gradient(150deg,#B5542F,#7A3A1F);}
  .p6{background:linear-gradient(150deg,#33607A,#1E3E52);}
  .p7{background:linear-gradient(150deg,#7A2E4E,#4A1830);}
  .p8{background:linear-gradient(150deg,#6C7A33,#414A1E);}
  .p9{background:linear-gradient(150deg,#9C7A3E,#5E4A22);}
  .p10{background:linear-gradient(150deg,#4A6C7A,#293E46);}
  .card-media:after{content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(70deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 22px); mix-blend-mode:overlay;}
  .card-label{position:relative;z-index:2; padding:14px; color:#fff; font-family:'Fraunces',serif; font-style:italic; font-size:12.5px; opacity:.85;}

  /* ---------- horizontal quick-add rail ---------- */
  .rail-wrap{background:var(--off); padding:44px 0;}
  .rail-inner{max-width:1320px;margin:0 auto; padding:0 28px;}
  .rail{display:flex; gap:18px; overflow-x:auto; padding-bottom:10px;}
  .rail-card{flex:0 0 210px; background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
  .rail-media{aspect-ratio:3/4; position:relative;}
  .rail-media:after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(70deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 22px); mix-blend-mode:overlay;}
  .rail-info{padding:12px;}
  .rail-info .t{font-size:12.5px; font-weight:600; margin-bottom:4px;}
  .rail-info .p{font-size:12.5px;}
  .rail-info .p .now{color:var(--maroon); font-weight:700;}
  .rail-info .p .was{color:#a89b96; text-decoration:line-through; font-size:11px; margin-left:6px;}
  .rail-add{width:100%; border:none; background:var(--ink); color:var(--white); padding:9px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; margin-top:8px; border-radius:2px;}
  .rail-add:hover{background:var(--maroon);}

  /* ---------- editorial band ---------- */
  .band{background:var(--maroon); color:var(--white); margin:0; padding:64px 28px;}
  .band-inner{max-width:1320px;margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .band h2{font-size:30px; font-weight:500; line-height:1.18; margin:0 0 18px;}
  .band p{color:#EAD9DE; font-size:14.5px; line-height:1.7; max-width:420px; margin:0 0 26px;}
  .band-btn{border:1px solid var(--gold-soft); color:var(--gold-soft); padding:13px 26px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:2px; display:inline-block;}
  .band-btn:hover{background:var(--gold-soft); color:var(--maroon-deep);}
  .band-visual{aspect-ratio:16/10; background:linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.25); border-radius:3px; position:relative; overflow:hidden;}
  .band-visual:before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(100deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 30px);}

  /* ---------- trust strip ---------- */
  .trust-strip{max-width:1320px;margin:0 auto; padding:50px 28px 10px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .trust-item{border:1px solid var(--line); padding:20px; border-radius:3px; background:var(--off);}
  .trust-item .k{font-family:'Fraunces',serif; font-size:16px; margin-bottom:4px; color:var(--maroon);}
  .trust-item .v{font-size:12px; color:#8a7d78;}
  @media (max-width:880px){ .trust-strip{grid-template-columns:1fr 1fr;} }

  /* ---------- journal ---------- */
  .journal{max-width:1320px;margin:0 auto; padding:50px 28px;}
  .journal-card{display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:center; border:1px solid var(--line); border-radius:4px; padding:20px; background:var(--off);}
  .journal-thumb{aspect-ratio:16/10; border-radius:3px; background:linear-gradient(150deg,#8C3350,#5E1F2E); position:relative; overflow:hidden;}
  .journal-thumb:after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(100deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 30px);}
  .journal-text h3{font-size:20px; margin:0 0 10px;}
  .journal-text p{font-size:13.5px; color:#5c504c; line-height:1.7; margin:0 0 14px; max-width:520px;}
  .journal-link{font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--maroon); border-bottom:1px solid var(--maroon); padding-bottom:2px;}
  @media (max-width:700px){ .journal-card{grid-template-columns:1fr;} }

  /* ---------- newsletter ---------- */
  .newsletter{max-width:1320px;margin:0 auto; padding:56px 28px; text-align:center;}
  .newsletter h2{font-size:25px; margin:0 0 10px;}
  .newsletter p{color:#8a7d78; font-size:13.5px; margin:0 0 24px;}
  .nl-form{display:flex; justify-content:center; gap:0; max-width:420px; margin:0 auto;}
  .nl-form input{flex:1; border:1px solid var(--ink); border-right:none; padding:13px 16px; font-size:13px; background:transparent; color:var(--ink);}
  .nl-form input:focus{outline:none;}
  .nl-form button{background:var(--maroon); color:var(--white); border:none; padding:0 22px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;}
  .nl-note{font-size:11.5px; color:#a89b96; margin-top:12px;}

  /* ---------- footer ---------- */
  footer{background:var(--ink); color:#cbb8b3; padding:54px 28px 24px;}
  .foot-inner{max-width:1320px;margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  .foot-inner h4{color:var(--white); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px; font-weight:700;}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .foot-brand img{height:38px;}
  .foot-inner p{font-size:12.5px; line-height:1.7; max-width:260px;}
  .foot-inner li{margin-bottom:9px; font-size:13px;}
  .foot-inner li a:hover{color:var(--white);}
  .foot-bottom{max-width:1320px;margin:38px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); font-size:11.5px; color:#8a7873; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* ---------- cart drawer ---------- */
  .overlay{position:fixed; inset:0; background:rgba(36,27,29,0.45); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s;}
  .overlay.open{opacity:1; pointer-events:auto;}
  .drawer{position:fixed; top:0; right:0; height:100%; width:390px; max-width:90vw; background:var(--white); z-index:100; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
  .drawer.open{transform:translateX(0);}
  .drawer-head{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
  .drawer-head h3{margin:0; font-size:19px;}
  .drawer-close{background:none;border:none;font-size:22px;}
  .drawer-items{flex:1; overflow-y:auto; padding:18px 24px;}
  .drawer-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
  .drawer-item .thumb{width:64px; height:80px; border-radius:3px; flex-shrink:0;}
  .drawer-item .info{flex:1;}
  .drawer-item .info .t{font-size:13px; font-weight:600; margin-bottom:4px;}
  .drawer-item .info .p{font-size:12.5px; color:var(--maroon); font-weight:700;}
  .drawer-item .remove{font-size:11.5px; color:#a89b96; margin-top:6px; text-decoration:underline; background:none; border:none; padding:0;}
  .drawer-empty{color:#a89b96; font-size:13.5px; text-align:center; padding:60px 0;}
  .drawer-foot{padding:20px 24px 26px; border-top:1px solid var(--line);}
  .drawer-total{display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:16px; font-weight:700;}
  .drawer-foot .wa-checkout{width:100%; padding:15px; border:none; border-radius:3px; background:#25D366; color:#fff; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px;}
  .wa-checkout:hover{background:#1fb856;}
  .wa-checkout:disabled{background:#c9c2bf; cursor:not-allowed;}
  .free-ship-note{font-size:11.5px; color:#8a7d78; margin-bottom:14px; text-align:center;}
  .drawer-hint{font-size:10.5px; color:#a89b96; text-align:center; margin-top:10px; line-height:1.5;}

  /* ---------- sticky free-delivery bar ---------- */
  .sticky-ship{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--ink); color:var(--white); font-size:12px; text-align:center; padding:10px 12px; letter-spacing:.03em;}
  .sticky-ship b{color:var(--gold-soft);}

  @media (max-width:880px){
    .hero-inner{grid-template-columns:1fr; padding-top:44px;}
    .hero h1{font-size:34px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .band-inner{grid-template-columns:1fr;}
    .foot-inner{grid-template-columns:1fr 1fr;}
  }

/* WooCommerce image normalization */
.woocommerce .card-media img{width:100%;height:100%;object-fit:cover}.card-media img{width:100%;height:100%;object-fit:cover}.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.woocommerce ul.products li.product{width:auto;float:none;margin:0}@media(max-width:880px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}