/* ================================================================
       CSS CUSTOM PROPERTIES — konsisten dengan product.php
       ================================================================ */
    :root {
      --c-nav:        #CC8896;
      --c-accent:     #E8758A;
      --c-accent-hov: #D4607A;
      --c-pink-light: #FCE8EC;
      --c-pink-mid:   #F1A8B5;
      --c-bg:         #F0F3F8;
      --c-white:      #FFFFFF;
      --c-dark:       #1A1A2E;
      --c-medium:     #4E4E6A;
      --c-muted:      #8E8EA0;
      --c-card-bg:    #1A1A1A;
      --radius:       12px;
      --shadow-sm:    0 4px 15px rgba(0,0,0,.06);
      --shadow-md:    0 8px 30px rgba(0,0,0,.09);
      --shadow-pink:  0 8px 30px rgba(204,136,150,.25);
      --ease:         cubic-bezier(.4,0,.2,1);
      --ease-bounce:  cubic-bezier(.34,1.56,.64,1);
      --dur:          .3s;
    }

    /* ── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html  { scroll-behavior:smooth; font-size:16px; }
    body  { font-family:'Outfit',sans-serif; background:var(--c-bg); color:var(--c-dark); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
    a     { color:inherit; text-decoration:none; }
    button{ cursor:pointer; font-family:inherit; }
    img, svg { display:block; max-width:100%; }
    ::-webkit-scrollbar       { width:7px; }
    ::-webkit-scrollbar-track { background:var(--c-pink-light); }
    ::-webkit-scrollbar-thumb { background:var(--c-pink-mid); border-radius:4px; }

    /* ── KEYFRAMES ────────────────────────────────────────────── */
    @keyframes starPop {
      0%  { transform:scale(0) rotate(-30deg); opacity:0 }
      65% { transform:scale(1.3) rotate(6deg) }
      100%{ transform:scale(1) rotate(0); opacity:1 }
    }
    @keyframes ripple    { to { transform:scale(5); opacity:0 } }
    @keyframes pulseRing { 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.35); opacity:.4 } }
    @keyframes fadeUp    { from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
    @keyframes slideInR  { from{ opacity:0; transform:translateX(18px) } to{ opacity:1; transform:none } }
    @keyframes heartBeat { 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.22) } 30%{ transform:scale(1) } 45%{ transform:scale(1.14) } 60%{ transform:scale(1) } }
    @keyframes fadeIn    { from{ opacity:0 } to{ opacity:1 } }
    @keyframes cardOut   { to{ opacity:0; transform:scale(.9) translateY(10px) } }

    /* ── SCROLL REVEAL ────────────────────────────────────────── */
    .js-reveal { opacity:0; transform:translateY(30px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
    .js-reveal.is-visible { opacity:1; transform:none; }

    /* ================================================================
       ANNOUNCEMENT BAR
       ================================================================ */
    .bar { background:linear-gradient(90deg,var(--c-nav),#E8A0AE,var(--c-nav)); color:#fff; text-align:center; padding:9px 20px; font-size:13px; font-weight:500; letter-spacing:.4px; }
    .bar a { color:#fff; text-decoration:underline; margin-left:6px; }

    /* ================================================================
       NAVBAR — identik dengan product.php
       ================================================================ */
    .navbar { position:sticky; top:0; z-index:900; background:var(--c-nav); box-shadow:0 2px 16px rgba(204,136,150,.28); transition:background var(--dur) var(--ease),box-shadow var(--dur); }
    .navbar.is-scrolled { background:rgba(204,136,150,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 4px 24px rgba(204,136,150,.38); }
    .nav-inner { max-width:1380px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:18px; }
    .nav-links  { list-style:none; display:flex; gap:2px; }
    .nav-links > li { position:relative; }
    .nav-links a { display:block; color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:7px 12px; border-radius:6px; transition:background var(--dur); white-space:nowrap; }
    .nav-links a:hover, .nav-links a.nav-active { background:rgba(255,255,255,.22); }
    .has-drop:hover .drop-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
    .drop-menu { position:absolute; top:calc(100% + 8px); left:-8px; background:var(--c-white); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.12); min-width:200px; padding:8px 0; opacity:0; transform:translateY(-10px) scale(.96); pointer-events:none; transition:all .22s var(--ease); z-index:50; }
    .drop-menu a { display:block; color:var(--c-medium); font-size:13.5px; font-weight:500; padding:10px 18px; letter-spacing:normal; text-transform:none; transition:background .18s,color .18s; }
    .drop-menu a:hover { background:var(--c-pink-light); color:var(--c-accent); }
    .logo { font-family:'Dancing Script',cursive; font-size:30px; font-weight:700; color:#fff; white-space:nowrap; transition:transform var(--dur) var(--ease-bounce); text-shadow:0 2px 8px rgba(0,0,0,.12); }
    .logo:hover { transform:scale(1.04); color:#000; }
    .nav-search { flex:1; max-width:380px; position:relative; }
    .nav-search input { width:100%; padding:9.5px 42px 9.5px 16px; border:2px solid rgba(255,255,255,.45); border-radius:22px; background:rgba(255,255,255,.88); font-size:13.5px; font-family:inherit; outline:none; transition:border-color var(--dur),background var(--dur),box-shadow var(--dur); color:var(--c-dark); }
    .nav-search input:focus { border-color:#fff; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28); }
    .nav-search input::placeholder { color:#aaa; }
    .nav-search-btn { position:absolute; right:13px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--c-nav); font-size:15px; transition:transform var(--dur) var(--ease-bounce); }
    .nav-search-btn:hover { transform:translateY(-50%) scale(1.22); }
    .nav-actions { display:flex; gap:10px; margin-left:auto; }
    .nav-action-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.2); color:#fff; border:1.5px solid rgba(255,255,255,.38); padding:7px 14px; border-radius:20px; font-size:13px; font-weight:500; transition:background var(--dur),transform var(--dur) var(--ease-bounce),box-shadow var(--dur); }
    .nav-action-btn:hover { background:rgba(255,255,255,.32); transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.1); }
    .badge { background:var(--c-dark); color:#fff; min-width:18px; height:18px; border-radius:9px; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; }
    .user-dropdown { position:relative; }
    .user-dropdown:hover .user-drop-menu, .user-dropdown.active .user-drop-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
    .user-drop-menu { position:absolute; top:calc(100% + 8px); right:0; background:var(--c-white); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.12); min-width:180px; padding:8px 0; opacity:0; transform:translateY(-10px) scale(.96); pointer-events:none; transition:all .22s var(--ease); z-index:50; }
    .user-drop-menu a { display:block; color:var(--c-medium); font-size:13.5px; font-weight:500; padding:10px 18px; transition:background .18s,color .18s; text-transform:none; letter-spacing:normal; }
    .user-drop-menu a:hover { background:var(--c-pink-light); color:var(--c-accent); }
    .user-drop-divider { height:1px; background:#f0f0f5; margin:6px 14px; }
    .user-drop-menu .logout-link { color:#ff4d4f; }
    .user-drop-menu .logout-link:hover { background:#fff1f0; color:#ff4d4f; }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:5px; }
    .hline { width:23px; height:2.5px; background:#fff; border-radius:2px; transition:all .3s var(--ease); transform-origin:center; }
    .hamburger.is-open .hline:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
    .hamburger.is-open .hline:nth-child(2) { opacity:0; transform:scaleX(0); }
    .hamburger.is-open .hline:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

    /* ================================================================
       BREADCRUMB
       ================================================================ */
    .breadcrumb-wrap { max-width:1380px; margin:0 auto; padding:16px 24px 10px; }
    .breadcrumb-nav  { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:13px; color:var(--c-muted); }
    .breadcrumb-nav a { color:var(--c-medium); font-weight:500; transition:color var(--dur); }
    .breadcrumb-nav a:hover { color:var(--c-accent); }
    .breadcrumb-nav .bc-sep     { margin:0 3px; color:var(--c-pink-mid); }
    .breadcrumb-nav .bc-current { color:var(--c-accent); font-weight:600; }

    /* ================================================================
       WISHLIST PAGE HEADER BANNER
       ================================================================ */
    .wl-banner {
      max-width: 1380px;
      margin: 0 auto 22px;
      padding: 0 24px;
    }

    .wl-banner-inner {
      background: linear-gradient(135deg, #CC8896 0%, #E8758A 45%, #F1A8B5 100%);
      border-radius: var(--radius);
      padding: 36px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
      overflow: hidden;
      animation: fadeUp .5s var(--ease) both;
    }

    /* Decorative floating hearts */
    .wl-banner-inner::before {
      content: '♥ ♡ ♥ ♡ ♥';
      position: absolute;
      top: -10px; right: 32px;
      font-size: 80px;
      color: rgba(255,255,255,.07);
      letter-spacing: 18px;
      pointer-events: none;
      white-space: nowrap;
    }
    .wl-banner-inner::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -30px;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
      pointer-events: none;
    }

    .wl-banner-text { position:relative; z-index:1; }

    .wl-banner-title {
      font-family: 'Playfair Display', serif;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 6px;
      text-shadow: 0 2px 8px rgba(0,0,0,.1);
    }

    .wl-banner-sub {
      font-size: 13.5px;
      color: rgba(255,255,255,.82);
      margin-bottom: 16px;
    }

    .wl-banner-stats {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .wl-stat-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      background: rgba(255,255,255,.18);
      border: 1.5px solid rgba(255,255,255,.28);
      backdrop-filter: blur(6px);
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }

    .wl-stat-chip .chip-ico { font-size: 15px; }

    .wl-banner-heart {
      position: relative;
      z-index: 1;
      font-size: 72px;
      animation: heartBeat 2.8s ease infinite;
      flex-shrink: 0;
      line-height: 1;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
    }

    /* ================================================================
       PAGE LAYOUT
       ================================================================ */
    .wl-page-wrap { max-width:1380px; margin:0 auto 52px; padding:0 24px; }
    .wl-layout    { display:grid; grid-template-columns:1fr 284px; gap:22px; align-items:start; }

    /* ── Sort Bar ─────────────────────────────────────────────── */
    .sort-bar { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
    .sort-select { padding:9px 40px 9px 16px; border:1.5px solid #e4e4f0; border-radius:22px; background-color:var(--c-white); font-family:inherit; font-size:13.5px; font-weight:500; color:var(--c-medium); cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E8EA0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; transition:border-color var(--dur),box-shadow var(--dur); }
    .sort-select:hover { border-color:var(--c-pink-mid); }
    .sort-select:focus { border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(232,117,138,.12); }
    .product-count { margin-left:auto; font-size:13px; color:var(--c-muted); font-weight:500; white-space:nowrap; }
    .product-count strong { color:var(--c-accent); font-size:15px; }

    .clear-all-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      border-radius: 22px;
      border: 1.5px solid #ffd6d6;
      background: #fff5f5;
      color: #ff4d4f;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      transition: all var(--dur) var(--ease-bounce);
    }
    .clear-all-btn:hover {
      background: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255,77,79,.22);
    }

    /* ── Wishlist Grid ────────────────────────────────────────── */
    .wl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

    /* ================================================================
       WISHLIST CARD — ekstensi dari pcard product.php
       ================================================================ */
    .wcard {
      background: var(--c-white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur), opacity .3s var(--ease);
      position: relative;
    }
    .wcard:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(0,0,0,.11); }
    .wcard.removing {
      animation: cardOut .3s var(--ease) forwards;
      pointer-events: none;
    }

    /* Card header */
    .wcard-head { background:var(--c-card-bg); padding:11px 15px 9px; text-align:center; }
    .wcard-head h3 { color:#fff; font-size:14px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .wcard-date { color:rgba(255,255,255,.38); font-size:10.5px; margin-top:4px; }
    .stars { display:flex; justify-content:center; gap:3px; }
    .star  { color:#F48FB1; font-size:13px; display:inline-block; opacity:0; transform:scale(0) rotate(-30deg); }
    .wcard.in-view .star { animation:starPop .4s var(--ease-bounce) both; }
    .wcard.in-view .star:nth-child(1){ animation-delay:.08s }
    .wcard.in-view .star:nth-child(2){ animation-delay:.17s }
    .wcard.in-view .star:nth-child(3){ animation-delay:.26s }
    .wcard.in-view .star:nth-child(4){ animation-delay:.35s }
    .wcard.in-view .star:nth-child(5){ animation-delay:.44s }

    /* Card image */
    .wcard-img { aspect-ratio:1.1; position:relative; overflow:hidden; }
    .wcard-img-inner { width:100%; height:100%; transition:transform .55s var(--ease); }
    .wcard:hover .wcard-img-inner { transform:scale(1.07); }
    .pb1 { background:linear-gradient(135deg,#ffecd2,#fcb69f) }
    .pb2 { background:linear-gradient(135deg,#a1c4fd,#c2e9fb) }
    .pb3 { background:linear-gradient(135deg,#d4fc79,#96e6a1) }
    .pb4 { background:linear-gradient(135deg,#fbc2eb,#a6c1ee) }
    .pb5 { background:linear-gradient(135deg,#fddb92,#d1fdff) }
    .wcard-img-inner::after { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='30' cy='30' rx='12' ry='8' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='1.5'/%3E%3C/svg%3E"); background-size:60px 60px; }
    .wcard-badge { position:absolute; top:11px; left:11px; z-index:2; background:var(--c-accent); color:#fff; font-size:10px; font-weight:700; padding:3px 10px; border-radius:10px; letter-spacing:.5px; text-transform:uppercase; }

    /* Remove button — always visible (berbeda dari pcard-wish) */
    .wcard-remove {
      position: absolute;
      top: 9px; right: 9px;
      z-index: 2;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,.92);
      border: none;
      font-size: 13px;
      color: #ff4d4f;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.14);
      transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-bounce);
    }
    .wcard-remove:hover {
      background: #ff4d4f;
      color: #fff;
      transform: scale(1.14) rotate(90deg);
    }

    /* Card footer */
    .wcard-foot {
      background: var(--c-card-bg);
      padding: 11px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .wcard-price {
      flex: 1;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wcard-price span { font-size:11px; font-weight:400; opacity:.65; }
    .wcard-btns { display:flex; gap:6px; flex-shrink:0; }

    .wcard-btn {
      display: flex; align-items: center; gap: 4px;
      border-radius: 16px;
      padding: 7px 12px;
      font-size: 11.5px;
      font-weight: 600;
      font-family: inherit;
      transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur);
      position: relative; overflow: hidden;
      white-space: nowrap;
      text-decoration: none;
    }
    .wcard-btn-cart {
      background: var(--c-accent);
      color: #fff;
      border: none;
    }
    .wcard-btn-cart:hover  { transform:scale(1.07); box-shadow:0 5px 14px rgba(232,117,138,.42); }
    .wcard-btn-view {
      background: rgba(255,255,255,.12);
      color: rgba(255,255,255,.82);
      border: 1.5px solid rgba(255,255,255,.2);
    }
    .wcard-btn-view:hover { background:rgba(255,255,255,.22); transform:scale(1.07); }

    .ripple-el { position:absolute; border-radius:50%; background:rgba(255,255,255,.32); pointer-events:none; transform:scale(0); animation:ripple .55s var(--ease) forwards; }

    /* ================================================================
       EMPTY STATE & LOGIN PROMPT
       ================================================================ */
    .wl-empty, .wl-login {
      grid-column: 1 / -1;
      text-align: center;
      padding: 70px 20px;
      animation: fadeIn .5s var(--ease) both;
    }

    .wl-empty-ico, .wl-login-ico {
      font-size: 72px;
      margin-bottom: 20px;
      line-height: 1;
      display: block;
    }
    .wl-empty-ico { animation: heartBeat 2.8s ease infinite; }

    .wl-empty h3, .wl-login h3 {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      color: var(--c-dark);
      margin-bottom: 10px;
    }
    .wl-empty p, .wl-login p {
      font-size: 14px;
      color: var(--c-muted);
      margin-bottom: 26px;
      line-height: 1.7;
    }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--c-accent); color: #fff;
      border: none; border-radius: 22px;
      font-family: inherit; font-weight: 600; font-size: 13.5px;
      padding: 12px 28px;
      transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur);
      cursor: pointer; text-decoration: none;
    }
    .btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(232,117,138,.42); }

    .btn-outline {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--c-white); color: var(--c-accent);
      border: 2px solid var(--c-accent); border-radius: 22px;
      font-family: inherit; font-weight: 600; font-size: 13.5px;
      padding: 11px 26px;
      transition: all var(--dur) var(--ease-bounce);
      cursor: pointer; text-decoration: none;
    }
    .btn-outline:hover { background: var(--c-pink-light); transform:translateY(-3px); }

    .btn-group { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

    /* ================================================================
       FILTER SIDEBAR — identik dengan product.php
       ================================================================ */
    .filter-sidebar { position:sticky; top:76px; animation:slideInR .55s var(--ease) both; }
    .filter-section { background:var(--c-white); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
    .filter-section:last-child { margin-bottom:0; }
    .filter-section h3 { font-family:'Playfair Display',serif; font-size:15.5px; font-weight:700; color:var(--c-dark); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--c-pink-light); position:relative; }
    .filter-section h3::after { content:''; position:absolute; bottom:-2px; left:0; width:30px; height:2px; background:var(--c-accent); border-radius:2px; }

    /* ── Wishlist Summary Card ────────────────────────────────── */
    .wl-summary-card { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:16px; animation:fadeUp .55s var(--ease) both; }

    .wl-summary-hd {
      background: linear-gradient(135deg, var(--c-nav), var(--c-accent));
      padding: 18px 20px;
      display: flex; align-items: center; gap: 10px;
    }
    .wl-summary-hd .sum-ico { font-size: 22px; }
    .wl-summary-hd h3 { font-family:'Playfair Display',serif; font-size:16px; font-weight:700; color:#fff; }

    .wl-summary-body { padding: 18px 20px; }

    .wl-stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--c-pink-light);
      font-size: 13.5px;
    }
    .wl-stat-row:last-of-type { border-bottom: none; }
    .wl-stat-row .stat-lbl { color: var(--c-muted); font-weight: 500; display:flex; align-items:center; gap:6px; }
    .wl-stat-row .stat-val { font-weight: 700; color: var(--c-dark); }
    .wl-stat-row .stat-val.accent { color: var(--c-accent); font-size: 16px; }

    .wl-summary-actions { padding: 14px 20px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--c-pink-light); }

    .sum-btn {
      width: 100%;
      padding: 11px 16px;
      border-radius: 22px;
      font-size: 13px; font-weight: 700; font-family: inherit;
      cursor: pointer; border: none;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      transition: all var(--dur) var(--ease-bounce);
    }
    .sum-btn-primary { background: var(--c-accent); color: #fff; }
    .sum-btn-primary:hover { background: var(--c-accent-hov); transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,117,138,.38); }
    .sum-btn-secondary { background: var(--c-pink-light); color: var(--c-accent); }
    .sum-btn-secondary:hover { background: var(--c-pink-mid); color:#fff; transform:translateY(-2px); }
    .sum-btn-danger { background: #fff5f5; color: #ff4d4f; border: 1.5px solid #ffd6d6; }
    .sum-btn-danger:hover { background: #ff4d4f; color: #fff; border-color:#ff4d4f; transform:translateY(-2px); }

    /* ── Recommended Products (sidebar) ──────────────────────── */
    .rec-list { display:flex; flex-direction:column; gap:11px; }

    .rec-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px;
      border-radius: 10px;
      border: 1.5px solid #f0f0f8;
      transition: all .22s var(--ease);
      text-decoration: none;
    }
    .rec-item:hover { border-color:var(--c-pink-mid); background:var(--c-pink-light); transform:translateX(3px); }

    .rec-img {
      width: 52px; height: 52px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
    }
    .rec-img img { width:100%; height:100%; object-fit:cover; }

    .rec-info { flex: 1; min-width: 0; }
    .rec-name { font-size:12.5px; font-weight:600; color:var(--c-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
    .rec-price { font-size:13px; font-weight:700; color:var(--c-accent); }
    .rec-price span { font-size:10px; font-weight:400; opacity:.7; }

    /* ── Category Links ───────────────────────────────────────── */
    .filter-links { list-style:none; display:flex; flex-direction:column; gap:2px; }
    .filter-links li a { display:flex; align-items:center; gap:9px; padding:9px 10px; font-size:13.5px; color:var(--c-medium); font-weight:500; border-radius:8px; border-left:3px solid transparent; transition:all .22s var(--ease); }
    .filter-links li a:hover { color:var(--c-accent); background:var(--c-pink-light); border-left-color:var(--c-accent); padding-left:16px; }
    .fl-arr { color:var(--c-pink-mid); font-size:16px; flex-shrink:0; line-height:1; }

    /* ── Tips Section ─────────────────────────────────────────── */
    .tips-list { display:flex; flex-direction:column; gap:10px; }
    .tip-item  { display:flex; align-items:flex-start; gap:10px; }
    .tip-ico   { font-size:18px; flex-shrink:0; margin-top:1px; }
    .tip-text  { font-size:12.5px; color:var(--c-medium); line-height:1.6; }
    .tip-text strong { color:var(--c-dark); display:block; margin-bottom:1px; font-size:13px; }

    /* ================================================================
       FOOTER — identik dengan product.php
       ================================================================ */
    .footer { background:var(--c-dark); color:#fff; padding:56px 0 0; margin-top:42px; }
    .footer-inner { max-width:1380px; margin:0 auto; padding:0 24px; }
    .footer-grid  { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding-bottom:48px; }
    .f-logo { font-family:'Dancing Script',cursive; font-size:34px; font-weight:700; color:#fff; display:block; margin-bottom:14px; }
    .f-about p { font-size:13px; color:rgba(255,255,255,.55); line-height:1.82; margin-bottom:18px; }
    .f-contact { display:flex; align-items:flex-start; gap:9px; margin-bottom:11px; font-size:13px; color:rgba(255,255,255,.65); }
    .f-contact .ico { color:var(--c-pink-mid); flex-shrink:0; margin-top:2px; font-size:14px; }
    .footer h4 { font-size:14.5px; font-weight:700; margin-bottom:18px; padding-bottom:10px; position:relative; }
    .footer h4::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:2.5px; background:var(--c-pink-mid); border-radius:2px; }
    .f-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .f-links a { color:rgba(255,255,255,.55); font-size:13px; display:flex; align-items:center; gap:6px; transition:color var(--dur),padding-left var(--dur); }
    .f-links a::before { content:'›'; color:var(--c-pink-mid); }
    .f-links a:hover { color:var(--c-pink-mid); padding-left:4px; }
    .social-row { display:flex; gap:10px; margin-bottom:22px; }
    .soc-btn { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; transition:background var(--dur),border-color var(--dur),color var(--dur),transform var(--dur) var(--ease-bounce); }
    .soc-btn:hover { background:var(--c-accent); border-color:var(--c-accent); color:#fff; transform:translateY(-3px); }
    .pay-row { display:flex; gap:7px; flex-wrap:wrap; }
    .pay-chip { background:rgba(255,255,255,.12); border-radius:6px; padding:4px 10px; font-size:11px; font-weight:700; color:rgba(255,255,255,.78); letter-spacing:.5px; }
    .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 0; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.38); flex-wrap:wrap; gap:10px; }
    .footer-bottom a { color:var(--c-pink-mid); }
    .secure-chips { display:flex; gap:10px; align-items:center; }
    .secure-chip  { display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.08); border-radius:5px; padding:4px 9px; font-size:11px; }

    /* ================================================================
       FLOATING BUTTONS — identik dengan product.php
       ================================================================ */
    .wa-wrap { position:fixed; bottom:28px; right:28px; z-index:800; }
    .wa-btn  { width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; font-size:25px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,.38); transition:transform var(--dur) var(--ease-bounce),box-shadow var(--dur); position:relative; text-decoration:none; }
    .wa-btn::before { content:''; position:absolute; inset:-7px; border:2px solid rgba(37,211,102,.38); border-radius:50%; animation:pulseRing 2.4s ease infinite; }
    .wa-btn:hover { transform:scale(1.14); box-shadow:0 10px 28px rgba(37,211,102,.5); }
    .wa-tip { position:absolute; right:66px; top:50%; transform:translateY(-50%); background:var(--c-dark); color:#fff; padding:7px 13px; border-radius:8px; font-size:12.5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--dur),right var(--dur); }
    .wa-tip::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--c-dark); border-right-width:0; }
    .wa-wrap:hover .wa-tip { opacity:1; right:70px; }
    .btt { position:fixed; bottom:28px; right:96px; z-index:800; width:42px; height:42px; border-radius:50%; background:var(--c-accent); color:#fff; border:none; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(232,117,138,.32); opacity:0; transform:translateY(16px); transition:opacity var(--dur),transform var(--dur) var(--ease-bounce),box-shadow var(--dur); }
    .btt.show { opacity:1; transform:translateY(0); }
    .btt:hover { transform:translateY(-4px) scale(1.1); box-shadow:0 8px 22px rgba(232,117,138,.4); }

    /* ================================================================
       TOAST — identik dengan product.php
       ================================================================ */
    .toast-stack { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column-reverse; align-items:center; gap:8px; pointer-events:none; }
    .toast-msg   { background:var(--c-dark); color:#fff; padding:10px 22px; border-radius:24px; font-size:13.5px; font-weight:500; box-shadow:0 6px 20px rgba(0,0,0,.2); opacity:0; transform:translateY(14px); transition:all .32s var(--ease-bounce); white-space:nowrap; }
    .toast-msg.in { opacity:1; transform:translateY(0); }

    /* ================================================================
       COOKIE BAR — identik dengan product.php
       ================================================================ */
    .cookie-bar { position:fixed; bottom:24px; left:24px; max-width:500px; background:var(--c-dark); color:#fff; border-radius:var(--radius); padding:20px 24px; z-index:1500; box-shadow:0 10px 38px rgba(0,0,0,.18); display:flex; align-items:center; gap:16px; flex-wrap:wrap; transform:translateY(20px); opacity:0; transition:all .5s var(--ease-bounce); }
    .cookie-bar.show { transform:translateY(0); opacity:1; }
    .cookie-bar p { font-size:13px; color:rgba(255,255,255,.72); flex:1; min-width:200px; line-height:1.6; }
    .cookie-bar a { color:var(--c-pink-mid); }
    .cookie-ok { background:var(--c-accent); color:#fff; border:none; padding:9px 20px; border-radius:18px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:all .3s var(--ease-bounce); white-space:nowrap; }
    .cookie-ok:hover { transform:scale(1.06); }

    /* ================================================================
       MOBILE MENU — identik dengan product.php
       ================================================================ */
    .mob-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1050; opacity:0; pointer-events:none; transition:opacity .3s; }
    .mob-overlay.open { opacity:1; pointer-events:all; }
    .mob-panel { position:fixed; top:0; left:-290px; bottom:0; width:280px; background:var(--c-white); z-index:1060; box-shadow:6px 0 30px rgba(0,0,0,.1); transition:left .4s var(--ease); display:flex; flex-direction:column; }
    .mob-panel.open { left:0; }
    .mob-hd { background:var(--c-nav); padding:20px; display:flex; align-items:center; justify-content:space-between; }
    .mob-logo { font-family:'Dancing Script',cursive; font-size:24px; color:#fff; font-weight:700; }
    .mob-close-btn { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; transition:transform .3s; }
    .mob-close-btn:hover { transform:rotate(90deg); }
    .mob-nav-list { list-style:none; padding:14px 0; flex:1; overflow-y:auto; }
    .mob-nav-list li a { display:block; padding:13px 22px; font-size:14.5px; font-weight:600; color:var(--c-medium); border-left:3px solid transparent; transition:all .2s; }
    .mob-nav-list li a:hover { border-left-color:var(--c-accent); color:var(--c-accent); background:var(--c-pink-light); }
    .mob-hr { height:1px; background:#f0f0f5; margin:6px 16px; }

    /* ================================================================
       RESPONSIVE
       ================================================================ */
    @media(max-width:1100px) {
      .wl-layout { grid-template-columns:1fr 240px; }
      .wl-grid   { grid-template-columns:repeat(2,1fr); }
    }

    @media(max-width:800px) {
      .wl-layout       { grid-template-columns:1fr; }
      .filter-sidebar  { display:none; }
      .nav-links       { display:none; }
      .hamburger       { display:flex; }
      .footer-grid     { grid-template-columns:1fr 1fr; gap:32px; }
      .wl-banner-inner { flex-direction:column; text-align:center; padding:28px 24px; }
      .wl-banner-heart { font-size:52px; }
      .wl-banner-title { font-size:26px; }
      .wl-banner-stats { justify-content:center; }
    }

    @media(max-width:560px) {
      .wl-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .footer-grid { grid-template-columns:1fr; gap:24px; }
    }

    @media(max-width:400px) {
      .wl-grid  { grid-template-columns:1fr; }
      .nav-inner { flex-wrap:wrap; }
      .nav-search { order:3; max-width:100%; flex:0 0 100%; }
    }