/* When the cart drawer is open, the sticky bar is redundant and (with its
           max z-index) would paint over the drawer's own header — hide it. */
        body.cart-open .header-cart-bar { display: none !important; }
        .header-cart-bar {
          position: -webkit-sticky;
          position: sticky;
          top: 0;
          /* Max safe z-index — defeats stray modals/banners that grew their own */
          z-index: 2147483600;
          /* New stacking context so transformed/overflow-hidden ancestors can't trap it */
          isolation: isolate;
          /* iOS Safari: promote to its own layer so sticky doesn't drop on scroll */
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          will-change: transform;
          background: rgba(255,255,255,0.94);
          -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
          padding: 9px 14px;
          padding-left:  max(14px, env(safe-area-inset-left));
          padding-right: max(14px, env(safe-area-inset-right));
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          box-shadow: 0 1px 8px rgba(0,0,0,0.06);
          border-bottom: 1px solid #eee;
          transition: background 0.3s ease, box-shadow 0.3s ease, padding-top 0.18s ease;
          -webkit-tap-highlight-color: transparent;
        }
        .header-cart-bar.has-items {
          background: linear-gradient(135deg, #E91E63, #C2185B);
          box-shadow: 0 2px 12px rgba(233, 30, 99, 0.28);
          border-bottom: none;
        }
        .share-gallery-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          background: #f5f5f5;
          color: #666;
          border: 1px solid #e5e5e5;
          border-radius: 999px;
          padding: 0 14px;
          min-height: 40px;
          min-width: 44px;     /* iOS minimum tappable */
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.15s, transform 0.08s;
          font-family: inherit;
          -webkit-tap-highlight-color: transparent;
        }
        .share-gallery-btn:hover { background: #eee; }
        .share-gallery-btn:active { transform: scale(0.96); }
        .share-gallery-btn span {
          display: inline-block;
        }
        @media (max-width: 380px) {
          /* Icon-only on narrow phones to keep the cart pill prominent */
          .share-gallery-btn span { display: none; }
          .share-gallery-btn { padding: 0 12px; }
        }
        .header-cart-bar.has-items .share-gallery-btn {
          background: rgba(255,255,255,0.16);
          color: white;
          border: 1px solid rgba(255,255,255,0.32);
        }
        .header-cart-bar.has-items .share-gallery-btn:hover {
          background: rgba(255,255,255,0.28);
        }
        .header-cart-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          background: #111827;
          color: #ffffff;
          border: 1px solid #111827;
          border-radius: 999px;
          padding: 0 18px;
          min-height: 44px;     /* iOS HIG minimum */
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
          transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
          font-family: inherit;
          box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
          -webkit-tap-highlight-color: transparent;
        }
        .header-cart-bar.has-items .header-cart-btn {
          background: rgba(255,255,255,0.95);
          color: #C2185B;
          border: 1px solid rgba(255,255,255,0.95);
          box-shadow: 0 2px 10px rgba(0,0,0,0.18);
        }
        .header-cart-btn:hover { background: #0b1220; }
        .header-cart-bar.has-items .header-cart-btn:hover {
          background: #ffffff;
        }
        .header-cart-btn:active { transform: scale(0.97); }
        .header-cart-btn i { font-size: 15px; }
        .header-cart-count {
          background: #E91E63;
          color: white;
          min-width: 22px;
          height: 22px;
          border-radius: 11px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 700;
          padding: 0 6px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }
        .header-cart-bar.has-items .header-cart-count {
          background: white;
          color: #C2185B;
        }
        /* Running total on the sticky cart bar — only shown once items exist */
        .header-cart-total {
          font-size: 14px;
          font-weight: 800;
          letter-spacing: -0.2px;
        }
        .header-cart-total:empty { display: none; }
        .header-cart-total::before {
          content: "";
          display: inline-block;
          width: 1px;
          height: 13px;
          margin: 0 8px 0 2px;
          vertical-align: -2px;
          background: currentColor;
          opacity: 0.32;
        }

        /* Share Gallery Popup */
        .share-overlay {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.55);
          z-index: 10000000;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          animation: shareOverlayIn 0.2s ease;
        }
        .share-overlay.open { display: flex; }
        @keyframes shareOverlayIn { from { opacity: 0; } to { opacity: 1; } }
        .share-popup {
          background: #fff;
          border-radius: 20px;
          width: 92%;
          max-width: 420px;
          box-shadow: 0 24px 64px rgba(0,0,0,0.25);
          overflow: hidden;
          position: relative;
          animation: sharePopupSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes sharePopupSlide { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .share-popup-close {
          position: absolute;
          top: 12px;
          right: 14px;
          background: rgba(0,0,0,0.06);
          border: none;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          font-size: 20px;
          line-height: 1;
          color: #999;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.15s;
          z-index: 1;
        }
        .share-popup-close:hover { background: rgba(0,0,0,0.1); color: #333; }
        .share-popup-header {
          padding: 2rem 1.75rem 1.25rem;
          text-align: center;
        }
        .share-popup-header i {
          font-size: 2rem;
          background: linear-gradient(135deg, #667eea, #764ba2);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          margin-bottom: 0.5rem;
          display: block;
        }
        .share-popup-header h3 {
          margin: 0 0 0.3rem;
          font-size: 1.3rem;
          font-weight: 700;
          color: #1a1a2e;
        }
        .share-popup-header p {
          margin: 0;
          font-size: 0.85rem;
          color: #888;
        }
        .share-link-box {
          display: flex;
          gap: 0;
          margin: 0 1.5rem 1.25rem;
          border: 2px solid #e5e7eb;
          border-radius: 12px;
          overflow: hidden;
          transition: border-color 0.2s;
        }
        .share-link-box:focus-within { border-color: #764ba2; }
        .share-link-box input {
          flex: 1;
          border: none;
          outline: none;
          padding: 0.75rem 1rem;
          font-size: 0.85rem;
          color: #333;
          background: #fafafa;
          font-family: monospace;
          min-width: 0;
        }
        .share-link-box button {
          border: none;
          background: linear-gradient(135deg, #667eea, #764ba2);
          color: white;
          padding: 0.75rem 1.1rem;
          font-size: 0.85rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 6px;
          white-space: nowrap;
          transition: opacity 0.15s;
        }
        .share-link-box button:hover { opacity: 0.9; }
        .share-link-box button.copied {
          background: #10b981;
        }
        .share-platforms {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          padding: 0 1.5rem 1.75rem;
        }
        .share-platform-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          border: none;
          border-radius: 14px;
          padding: 14px 8px;
          font-size: 0.78rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.15s;
          color: white;
        }
        .share-platform-btn i { font-size: 1.4rem; }
        .share-platform-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
        .share-platform-btn:active { transform: scale(0.96); }
        .share-platform-btn.whatsapp { background: #25D366; }
        .share-platform-btn.facebook { background: #1877F2; }
        .share-platform-btn.twitter { background: #000; }
        .share-platform-btn.telegram { background: #2AABEE; }
        .share-platform-btn.email { background: #6366f1; }
        .share-platform-btn.pinterest { background: #E60023; }

        /* Inline share card inside artwork grid */
        .share-gallery-card {
          background: linear-gradient(135deg, #f8f9ff 0%, #f0e7ff 100%);
          border: 2px dashed #c4b5fd;
          border-radius: 12px;
          padding: 18px 16px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 12px;
          min-height: 200px;
          box-sizing: border-box;
        }
        .share-gallery-card .share-card-header { text-align: center; }
        .share-gallery-card .share-card-header i {
          font-size: 1.5rem;
          background: linear-gradient(135deg, #667eea, #764ba2);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          display: block;
          margin-bottom: 4px;
        }
        .share-gallery-card .share-card-header h3 {
          margin: 0 0 2px;
          font-size: 1rem;
          font-weight: 700;
          color: #1a1a2e;
        }
        .share-gallery-card .share-card-header p {
          margin: 0;
          font-size: 0.72rem;
          color: #777;
          line-height: 1.35;
        }
        .share-gallery-card .share-link-box {
          margin: 0;
          border-width: 1px;
          border-radius: 8px;
        }
        .share-gallery-card .share-link-box input {
          padding: 0.5rem 0.6rem;
          font-size: 0.72rem;
        }
        .share-gallery-card .share-link-box button {
          padding: 0.5rem 0.7rem;
          font-size: 0.72rem;
        }
        .share-gallery-card .share-platforms {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
          padding: 0;
        }
        .share-gallery-card .share-platform-btn {
          padding: 10px 4px;
          font-size: 0.7rem;
          border-radius: 10px;
          gap: 4px;
        }
        .share-gallery-card .share-platform-btn i { font-size: 1.1rem; }

        @media (max-width: 480px) {
          .header-cart-bar {
            padding: 6px 12px;
            gap: 8px;
          }
          .share-gallery-btn {
            padding: 6px 12px;
            font-size: 12px;
          }
          .share-gallery-btn span { display: none; }
          .header-cart-btn {
            padding: 6px 16px;
            font-size: 13px;
          }
          .share-platforms { grid-template-columns: repeat(3, 1fr); gap: 8px; }
          .share-platform-btn { padding: 12px 6px; font-size: 0.72rem; }
          .share-popup { border-radius: 16px; }
        }