:root{
      /* VIB */
      --vib-main:#0FBDA6;
      --vib-main-2:#0EE8CF;
      --vib-soft:#EAF9FB;
      --vib-pink:#FFB6C1;
      --vib-yellow:#FFE7A3;

      --bg:#F7FCFD;
      --card:#ffffff;
      --text:#2F3A3E;
      --muted:#7C9BA3;

      --radius-xl:24px;
      --radius-lg:18px;

      --shadow-soft:0 10px 28px rgba(110,206,212,.18);
      --shadow-card:0 6px 18px rgba(0,0,0,.06);

      --container:1200px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--text);
      background: linear-gradient(180deg, var(--bg), #ffffff 30%);
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:var(--container); margin:0 auto; padding:0 14px}

    /* Top bar */
    .topbar{
      background: linear-gradient(-90deg, var(--vib-main), var(--vib-main-2));
      color:#fff; font-size:13px;
    }
    .topbar .row{
      display:flex; gap:14px; align-items:center; justify-content:space-between;
      padding: 2px 0; flex-wrap:wrap;
    }
    .topbar .left, .topbar .right{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
    .pill{
      background: rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.24);
      padding:3px 10px; border-radius:999px;
      display:flex; gap:8px; align-items:center;
    }
    .pill small{opacity:.92}

    /* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .35s ease;
}

.site-header.hide{
  transform: translateY(-100%);
}

header{
  background: linear-gradient(-90deg, var(--vib-main), var(--vib-main-2));
  padding:1px 0 0;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
    .header-grid{
      display:grid;
      grid-template-columns: 320px 1fr 240px;
      gap:10px; align-items:center;
      margin-top: -20px;
    }
    .logo{
      display:flex; align-items:center; gap:10px;
      color:#fff; font-weight:900; letter-spacing:.2px;
    }
    .logo:hover,
    .logo:focus{
      color:#fff;
      text-decoration:none;
    }
    a.logo,
    a.logo:hover,
    a.logo:focus,
    a.logo:active{
      color:#fff !important;
      text-decoration:none;
    }
    .logo-badge{
      width:40px; height:40px; border-radius:50%;
      background:#fff;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.35);
      font-weight:1000;
      color:var(--vib-main);
    }
    .logo small{
      display:block;
      font-weight:400;
      opacity:.92;
      margin-top:2px;
font-size:11px;
    }
.header-cats-wrapper{
  position:relative;
  margin-top: -35px;
}
.header-cats{
  display:flex;
  gap:1px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow-x:auto;
  white-space:normal;
}
.header-cats a{
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  text-align:center;
  line-height:1;
  padding:4px 10px 10px;
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  white-space:normal;
  transition:color .2s ease, opacity .2s ease;
  max-width:120px;
}

.header-cats a::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  height:3px;
  background:#FFE7A3;
  border-radius:999px;
  transition:width .25s ease;
}

.header-cats a:hover{
  color:#FFE7A3;
}

.header-cats a:hover::after{
  width:70%;
}
.header-cats::-webkit-scrollbar{
  display:none;
}
    /* Search */
    .search{
      background:#fff;
      border-radius:10px;
      display:flex; align-items:center; gap:10px;
      padding:8px 14px;
      box-shadow: var(--shadow-soft);
    }
    .search input{
      border:none; outline:none; width:100%;
      font-size:14px;
    }
    .search button{
      border:none; cursor:pointer;
      background: linear-gradient(90deg, var(--vib-main), var(--vib-main-2));
      color:#fff; padding:3px 10px; border-radius:999px;
      font-weight:900;
    }
    .search button:active{transform: translateY(1px)}
    .hint{
      color:#fff; font-size:10px; opacity:.96; margin-top:4px;
      display:flex; gap:12px; flex-wrap:wrap;
    }
    .hint a:hover{text-decoration:underline}

    /* Actions */
    .actions{
      display:flex; justify-content:flex-end; gap:10px; align-items:center; flex-wrap:nowrap;
    }
    .icon-btn{
      background: rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.24);
      color:#fff; border-radius:999px;
      padding:8px 14px;
      display:flex; gap:6px; align-items:center;
      cursor:pointer;
      font-weight:900;
      font-size:13px;
      text-decoration: none !important;
      position: relative;
      white-space: nowrap;
    }

    /* Override Molla theme .cart-dropdown .dropdown-toggle (font-size:3.2rem, color:#333) */
    .actions .cart-dropdown .dropdown-toggle.icon-btn{
      font-size:13px !important;
      color:#fff !important;
      padding:8px 14px !important;
      background: rgba(255,255,255,.16) !important;
      border:1px solid rgba(255,255,255,.24) !important;
      border-radius:999px !important;
      line-height:1.2 !important;
      box-shadow:none !important;
      height:34px !important;
    }

    /* Match Account button height to My Bag */
    .actions > a.icon-btn{
      height:34px;
      padding:8px 14px;
      font-size:13px;
      line-height:1.2;
    }

    /* Override Molla theme .cart-dropdown .cart-count */
    .actions .cart-dropdown .cart-count{
      position: absolute !important;
      top: -6px !important;
      right: -6px !important;
      background: #E89B84 !important;
      color: #fff !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      min-width: 16px !important;
      height: 16px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 2px solid rgba(15,189,166,1) !important;
      margin:0 !important;
      padding:0 2px !important;
      line-height: 1 !important;
    }

    .member-name {
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      max-width: 120px;
      white-space: nowrap;
      vertical-align: middle;
    }

    /* Ensure Continue Shopping button in cart dropdown shows full text */
    .actions .cart-dropdown .dropdown-cart-products .continue-shopping,
    .actions .cart-dropdown .dropdown-cart-action .continue-shopping {
        min-width: 150px !important;
        display: inline-flex !important;
        border-radius: 30px !important;
        font-size: 13px !important;
        margin-top: 10px !important;
    }

    /* My Bag dropdown — View Cart / Checkout buttons (with !important to beat Molla style.css) */
    .actions .cart-dropdown .dropdown-cart-action .btn,
    .actions .cart-dropdown .dropdown-cart-products .btn,
    .cart-dropdown .dropdown-cart-action .btn,
    .cart-dropdown .dropdown-cart-products .btn {
        height: 35px !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-weight: 1000 !important;
        font-size: 13px !important;
        background: linear-gradient(90deg, var(--vib-main), var(--vib-main-2)) !important;
        color: #fff !important;
        box-shadow: 0 10px 18px rgba(110, 206, 212, .22) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .actions .cart-dropdown .dropdown-cart-action .btn:hover,
    .actions .cart-dropdown .dropdown-cart-action .btn:focus,
    .actions .cart-dropdown .dropdown-cart-products .btn:hover,
    .actions .cart-dropdown .dropdown-cart-products .btn:focus,
    .cart-dropdown .dropdown-cart-action .btn:hover,
    .cart-dropdown .dropdown-cart-action .btn:focus,
    .cart-dropdown .dropdown-cart-products .btn:hover,
    .cart-dropdown .dropdown-cart-products .btn:focus {
        background: linear-gradient(90deg, var(--vib-main), var(--vib-main-2)) !important;
        color: #fff !important;
        border: none !important;
    }

    .actions .cart-dropdown .dropdown-cart-action .btn i,
    .actions .cart-dropdown .dropdown-cart-products .btn i,
    .cart-dropdown .dropdown-cart-action .btn i,
    .cart-dropdown .dropdown-cart-products .btn i {
        font-size: 1.6rem !important;
        margin-right: .3rem !important;
        margin-left: 0 !important;
    }

    /* Push View Cart button to the right when it's the only action */
    .cart-dropdown .dropdown-cart-action,
    .actions .cart-dropdown .dropdown-cart-action {
        justify-content: flex-end !important;
    }

    footer{
      padding:30px 0;
      color:#6b7280;
      font-size:13px;
    }

    /* Footer (Watsons-style) */
    .site-footer{
      background:#fff;
      border-top:1px solid rgba(15,189,166,.18);
      margin-top:24px;
    }
    .footer-payments{
      padding:18px 0;
      border-bottom:1px solid rgba(0,0,0,.06);
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
    }
    .pay-chip{
      height:28px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
      box-shadow: 0 6px 18px rgba(0,0,0,.05);
      display:flex;
      align-items:center;
      font-weight:1000;
      font-size:12px;
      color:#475569;
    }

    .footer-main{
      padding:26px 0 20px;
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
      gap:18px;
      align-items:start;
    }
    .footer-col h4{
      margin:0 0 10px;
      font-size:13px;
      font-weight:1000;
      letter-spacing:.2px;
      color:#1f6f76;
      text-transform:uppercase;
    }
    .footer-links{
      display:grid;
      gap:8px;
      font-size:13px;
      color:#5b7280;
    }
    .footer-links a:hover{ text-decoration:underline; }

    .footer-app{
      border-left:1px solid rgba(0,0,0,.08);
      padding-left:18px;
      display:grid;
      gap:12px;
    }
    .footer-app h3{
      margin:0;
      font-size:20px;
      font-weight:1000;
      color:#1f6f76;
    }
    .footer-app p{
      margin:0;
      color:#5b7280;
      font-size:13px;
      line-height:1.35;
    }
    .app-row{
      display:flex;
      gap:12px;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .qr{
      width:92px;
      height:92px;
      border-radius:14px;
      background:
        radial-gradient(28px 28px at 20% 20%, rgba(15,189,166,.28), transparent 60%),
        radial-gradient(26px 26px at 80% 70%, rgba(255,182,193,.35), transparent 60%),
        linear-gradient(135deg, rgba(234,249,251,1), rgba(255,255,255,1));
      border:1px solid rgba(15,189,166,.22);
      display:grid;
      place-items:center;
      color:#1f6f76;
      font-weight:1000;
      font-size:12px;
      box-shadow: 0 10px 20px rgba(15,189,166,.12);
    }
    .store-badges{
      display:grid;
      gap:10px;
    }
    .store-badge{
      width:180px;
      height:44px;
      border-radius:12px;
      background:#0b1220;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:1000;
      font-size:12px;
      letter-spacing:.2px;
    }
    .store-badge.light{ background:#111827; }
    .store-badge:active{ transform: translateY(1px); }

    .social-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
.social-dot img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}
    .social-dot{
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.10);
      background:#fff;
      display:grid;
      place-items:center;
      box-shadow: 0 6px 18px rgba(0,0,0,.05);
      cursor:pointer;
      font-weight:1000;
      color:#64748b;
    }

    .footer-bottom{
      padding:16px 0;
      border-top:1px solid rgba(0,0,0,.06);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      color:#64748b;
      font-size:12px;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:1000;
      color:#1f6f76;
    }
    .footer-brand .mark{
      width:38px; height:38px;
      display:grid;
      place-items:center;
      color:#fff;
    }

    /* Global Responsive Adjustments */
    @media (max-width: 1100px){
      .header-grid{grid-template-columns: 220px 1fr 220px;}
    }
    @media (max-width: 900px){
      .footer-main{ grid-template-columns: 1fr 1fr; }
      .footer-app{
        border-left:none;
        padding-left:0;
        border-top:1px solid rgba(0,0,0,.08);
        padding-top:16px;
        grid-column: 1 / -1;
      }
    }
    @media (max-width: 760px){
      .header-grid{grid-template-columns: 1fr;}
      .actions{justify-content:flex-start}
      .hint{display:none}
    }

    /* Hide old search */
    .header-search {
        display: none !important;
    }