/*
 * Purefit — Global Stylesheet /assets/css/style.css
 * Dark navy/blue design system — all CSS variables defined here
 */

/* ══ DESIGN TOKENS ══════════════════════════════════════════════════════════ */
:root {
  --primary:         #0057FF;
  --primary-light:   #4D9FFF;
  --primary-dark:    #0041CC;
  --primary-08:      rgba(0,87,255,.08);
  --primary-15:      rgba(0,87,255,.15);
  --grad-primary:    linear-gradient(135deg,#0057FF 0%,#00D4FF 100%);
  --grad-secondary:  linear-gradient(135deg,#7C3AED 0%,#EC4899 100%);
  --grad-radial:     radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,87,255,.08),transparent);
  --bg-base:         #050A18;
  --bg-surface:      #080E1F;
  --bg-card:         #0B1424;
  --bg-card-2:       #0D1830;
  --bg-input:        rgba(255,255,255,.04);
  --bg-hover:        rgba(255,255,255,.05);
  --text-primary:    #F0F4FF;
  --text-secondary:  #9BAACC;
  --text-muted:      #5E6F8A;
  --text-disabled:   #3A4660;
  --border:          rgba(255,255,255,.07);
  --border-md:       rgba(255,255,255,.13);
  --border-lg:       rgba(255,255,255,.2);
  --success:         #10B981;
  --success-bg:      rgba(16,185,129,.1);
  --warning:         #F59E0B;
  --warning-bg:      rgba(245,158,11,.1);
  --error:           #EF4444;
  --error-bg:        rgba(239,68,68,.1);
  --danger:          #EF4444;
  --info:            #3B82F6;
  --info-bg:         rgba(59,130,246,.1);
  --shadow-sm:       0 1px 4px rgba(0,0,0,.3);
  --shadow-md:       0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.5);
  --shadow-xl:       0 16px 60px rgba(0,0,0,.6);
  --shadow-primary:  0 4px 20px rgba(0,87,255,.4);
  --radius-sm:       6px;
  --radius:          10px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --radius-2xl:      28px;
  --radius-full:     9999px;
  --z-base:          1;
  --z-elevated:      10;
  --z-sticky:        100;
  --z-dropdown:      200;
  --z-modal:         500;
  --z-toast:         900;
  --z-top:           1000;
  --ease-out:        cubic-bezier(.16,1,.3,1);
  --ease-spring:     cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:     cubic-bezier(.4,0,.2,1);
  --container:       1280px;
  --container-sm:    960px;
  --header-h:        64px;
  --catbar-h:        44px;
}

/* ══ RESET & BASE ════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body,.pf-body {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background-color:var(--bg-base); color:var(--text-primary); line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Syne','Plus Jakarta Sans',sans-serif; font-weight:800;
  line-height:1.2; letter-spacing:-.03em; color:var(--text-primary);
}
a { color:var(--primary-light); text-decoration:none; transition:color .2s; }
a:hover { opacity:.85; }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
button,input,select,textarea { font-family:inherit; font-size:inherit; }
button { cursor:pointer; }

/* ══ LAYOUT ══════════════════════════════════════════════════════════════════ */
.container    { max-width:var(--container);    margin:0 auto; padding:0 24px; }
.container-sm { max-width:var(--container-sm); margin:0 auto; padding:0 24px; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col     { display:flex; flex-direction:column; }
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.grid{display:grid}.w-full{width:100%}.h-full{height:100%}
.text-center{text-align:center}.mt-auto{margin-top:auto}.d-none{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══ BUTTONS ═════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 22px; border-radius:var(--radius-full);
  font-size:14px; font-weight:700; font-family:inherit;
  text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  transition:all .22s var(--ease-out); position:relative; overflow:hidden; flex-shrink:0;
}
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-primary  { background:var(--grad-primary); color:#fff; box-shadow:0 4px 18px rgba(0,87,255,.3); }
.btn-primary:hover  { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,87,255,.5); color:#fff; }
.btn-primary:active { transform:translateY(0); }
.btn-secondary { background:rgba(255,255,255,.07); border:1px solid var(--border-md); color:var(--text-primary); }
.btn-secondary:hover { background:rgba(255,255,255,.12); color:var(--text-primary); }
.btn-outline { background:transparent; border:1.5px solid var(--border-md); color:var(--text-secondary); }
.btn-outline:hover { border-color:var(--primary-light); color:var(--primary-light); background:var(--primary-08); }
.btn-ghost { background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.18); color:#fff; }
.btn-white { background:#fff; color:var(--primary); font-weight:800; }
.btn-white:hover { background:var(--primary-light); color:#fff; box-shadow:0 6px 20px rgba(0,87,255,.3); }
.btn-danger  { background:var(--error); color:#fff; }
.btn-danger:hover  { background:#dc2626; color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; color:#fff; }
.btn-sm  { padding:7px 16px;  font-size:12px; }
.btn-lg  { padding:14px 32px; font-size:15px; }
.btn-xl  { padding:16px 40px; font-size:16px; }
.btn.loading { pointer-events:none; opacity:.75; }
.btn.loading::after { content:''; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin-left:6px; }

/* ══ FORMS ═══════════════════════════════════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.form-control,.form-select,.form-textarea {
  width:100%; background:var(--bg-input); border:1.5px solid var(--border-md);
  border-radius:var(--radius); padding:11px 16px; color:var(--text-primary);
  font-size:14px; font-family:inherit; outline:none; transition:border-color .2s,box-shadow .2s;
}
.form-control::placeholder,.form-textarea::placeholder { color:var(--text-muted); }
.form-control:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,87,255,.12); background:rgba(0,87,255,.04);
}
.form-control.is-invalid,.form-textarea.is-invalid { border-color:var(--error); }
.form-error { font-size:12px; color:var(--error); margin-top:4px; }
.form-hint  { font-size:12px; color:var(--text-muted); }
.form-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239BAACC'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px; cursor:pointer;
}
.form-select option { background:var(--bg-card); color:var(--text-primary); }
.form-textarea { resize:vertical; min-height:100px; line-height:1.6; }
.form-check { display:flex; align-items:center; gap:10px; cursor:pointer; }
.form-check input[type="checkbox"],.form-check input[type="radio"] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; flex-shrink:0; }
.form-check-label { font-size:14px; color:var(--text-secondary); cursor:pointer; user-select:none; }

/* ══ CARDS ═══════════════════════════════════════════════════════════════════ */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.card-body   { padding:24px; }
.card-header { padding:18px 24px; border-bottom:1px solid var(--border); font-weight:700; color:var(--text-primary); }
.card-footer { padding:16px 24px; border-top:1px solid var(--border); }

/* ══ BADGES ══════════════════════════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.badge-primary { background:var(--primary-08); color:var(--primary-light); border:1px solid var(--primary-15); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-danger  { background:var(--error-bg);   color:var(--error); }
.badge-info    { background:var(--info-bg);    color:var(--info); }
.badge-muted   { background:rgba(255,255,255,.06); color:var(--text-muted); }

/* ══ TOAST ═══════════════════════════════════════════════════════════════════ */
#pf-toast-container {
  position:fixed; bottom:24px; right:24px; z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
  width:320px; max-width:calc(100vw - 32px);
}
.pf-toast {
  display:flex; align-items:flex-start; gap:12px; background:var(--bg-card);
  border:1px solid var(--border-md); border-radius:var(--radius-lg); padding:14px 16px;
  box-shadow:var(--shadow-xl); pointer-events:auto;
  animation:toastIn .35s var(--ease-spring) both; position:relative; overflow:hidden;
}
.pf-toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; }
.pf-toast.success::before { background:var(--success); }
.pf-toast.error::before   { background:var(--error); }
.pf-toast.warning::before { background:var(--warning); }
.pf-toast.info::before    { background:var(--info); }
.pf-toast.removing        { animation:toastOut .28s var(--ease-in-out) both; }
.pf-toast-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.pf-toast.success .pf-toast-icon { background:var(--success-bg); color:var(--success); }
.pf-toast.error   .pf-toast-icon { background:var(--error-bg);   color:var(--error); }
.pf-toast.warning .pf-toast-icon { background:var(--warning-bg); color:var(--warning); }
.pf-toast.info    .pf-toast-icon { background:var(--info-bg);    color:var(--info); }
.pf-toast-body  { flex:1; min-width:0; }
.pf-toast-title { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.pf-toast-msg   { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.pf-toast-close { width:24px; height:24px; border-radius:6px; background:none; border:none; color:var(--text-muted); font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .15s; }
.pf-toast-close:hover { background:rgba(255,255,255,.07); color:var(--text-primary); }

/* ══ PAGINATION ══════════════════════════════════════════════════════════════ */
.pf-pagination { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:40px; }
.pf-page-btn { min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--border-md); color:var(--text-secondary); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit; transition:all .2s; padding:0 12px; }
.pf-page-btn:hover  { background:var(--primary-08); border-color:var(--primary-15); color:var(--primary-light); }
.pf-page-btn.active { background:var(--grad-primary); border-color:transparent; color:#fff; box-shadow:var(--shadow-primary); }
.pf-page-btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }

/* ══ ALERTS ══════════════════════════════════════════════════════════════════ */
.alert { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-radius:var(--radius-lg); font-size:14px; line-height:1.6; margin-bottom:16px; border:1px solid transparent; }
.alert i { font-size:16px; flex-shrink:0; margin-top:1px; }
.alert-success { background:var(--success-bg); border-color:rgba(16,185,129,.25); color:#6ee7b7; }
.alert-error   { background:var(--error-bg);   border-color:rgba(239,68,68,.25);  color:#fca5a5; }
.alert-warning { background:var(--warning-bg); border-color:rgba(245,158,11,.25); color:#fcd34d; }
.alert-info    { background:var(--info-bg);    border-color:rgba(59,130,246,.25); color:#93c5fd; }

/* ══ DIVIDERS ════════════════════════════════════════════════════════════════ */
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.divider-text { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:13px; margin:20px 0; }
.divider-text::before,.divider-text::after { content:''; flex:1; border-top:1px solid var(--border-md); }

/* ══ TABLE ═══════════════════════════════════════════════════════════════════ */
.pf-table-wrap { overflow-x:auto; border-radius:var(--radius-xl); border:1px solid var(--border); }
.pf-table { width:100%; border-collapse:collapse; font-size:14px; }
.pf-table th { padding:13px 16px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); white-space:nowrap; }
.pf-table td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--text-secondary); vertical-align:middle; }
.pf-table tr:last-child td { border-bottom:none; }
.pf-table tr:hover td { background:rgba(255,255,255,.02); }

/* ══ EMPTY STATE ═════════════════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:60px 24px; color:var(--text-muted); }
.empty-state i { font-size:56px; margin-bottom:20px; display:block; opacity:.2; }
.empty-state h3 { font-size:20px; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
.empty-state p  { font-size:14px; color:var(--text-muted); max-width:360px; margin:0 auto 24px; line-height:1.7; }

/* ══ SPINNER ═════════════════════════════════════════════════════════════════ */
.pf-spinner { display:inline-block; width:40px; height:40px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--primary-light); border-radius:50%; animation:spin .8s linear infinite; }
.pf-loading { display:flex; align-items:center; justify-content:center; min-height:200px; gap:12px; color:var(--text-muted); font-size:14px; }

/* ══ STAR RATING ═════════════════════════════════════════════════════════════ */
.star-rating { display:inline-flex; gap:2px; color:#F59E0B; font-size:13px; }
.star-rating .far { color:var(--border-md); }

/* ══ PRODUCT GRID ════════════════════════════════════════════════════════════ */
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:1100px) { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .products-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
@media(max-width:380px)  { .products-grid { grid-template-columns:1fr 1fr; gap:10px; } }

/* ══ SECTIONS ════════════════════════════════════════════════════════════════ */
.section     { padding:72px 0; }
.section-alt { background:rgba(11,20,36,.55); }
.section-sm  { padding:44px 0; }
.section-lg  { padding:100px 0; }
.eyebrow {
  display:inline-flex; align-items:center; gap:6px; background:var(--primary-08);
  border:1px solid var(--primary-15); color:var(--primary-light);
  border-radius:var(--radius-full); padding:5px 14px; font-size:11px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px;
}

/* ══ PAGE HEADER ═════════════════════════════════════════════════════════════ */
.pf-page-hdr { padding:48px 0 36px; background:linear-gradient(180deg,rgba(0,87,255,.05) 0%,transparent 100%); border-bottom:1px solid var(--border); }
.pf-page-hdr h1 { font-size:clamp(24px,3.5vw,40px); font-weight:900; margin-bottom:8px; }
.pf-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; }
.pf-breadcrumb a { color:var(--text-muted); }
.pf-breadcrumb a:hover { color:var(--primary-light); }
.pf-breadcrumb .sep { color:var(--border-md); }
.pf-breadcrumb .current { color:var(--text-secondary); }

/* ══ QTY CONTROL ═════════════════════════════════════════════════════════════ */
.qty-control { display:inline-flex; align-items:center; background:var(--bg-card); border:1px solid var(--border-md); border-radius:var(--radius-full); overflow:hidden; height:44px; }
.qty-btn { width:44px; height:44px; background:none; border:none; color:var(--text-secondary); font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.qty-btn:hover { background:var(--primary-08); color:var(--primary-light); }
.qty-input { width:52px; text-align:center; background:none; border:none; color:var(--text-primary); font-size:15px; font-weight:700; font-family:'Syne',sans-serif; outline:none; }
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.qty-input[type=number] { -moz-appearance:textfield; }

/* ══ TABS ════════════════════════════════════════════════════════════════════ */
.tab-list { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; overflow-x:auto; scrollbar-width:none; }
.tab-list::-webkit-scrollbar { display:none; }
.tab-btn { padding:10px 20px; border:none; background:none; color:var(--text-muted); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; white-space:nowrap; transition:all .2s; margin-bottom:-1px; }
.tab-btn:hover  { color:var(--text-primary); }
.tab-btn.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.tab-pane        { display:none; }
.tab-pane.active { display:block; }

/* ══ MODAL ═══════════════════════════════════════════════════════════════════ */
.pf-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; }
.pf-modal-overlay.open { opacity:1; pointer-events:auto; }
.pf-modal { background:var(--bg-card); border:1px solid var(--border-md); border-radius:var(--radius-2xl); padding:32px; width:100%; max-width:480px; position:relative; box-shadow:var(--shadow-xl); animation:modalIn .35s var(--ease-spring) both; }
.pf-modal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); border:none; color:var(--text-muted); font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.pf-modal-close:hover { background:rgba(255,255,255,.14); color:var(--text-primary); }

/* ══ FOOTER ══════════════════════════════════════════════════════════════════ */
.pf-footer { background:#04080F; border-top:1px solid var(--border); margin-top:auto; }
.pf-footer-top { padding:64px 0 40px; border-bottom:1px solid var(--border); }
.pf-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.pf-footer-brand-desc { font-size:14px; color:var(--text-muted); line-height:1.75; margin:16px 0 24px; max-width:280px; }
.pf-footer-social { display:flex; gap:10px; }
.pf-social-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border-md); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; transition:all .2s; }
.pf-social-btn:hover { background:var(--primary-08); border-color:var(--primary-15); color:var(--primary-light); transform:translateY(-2px); }
.pf-footer-col-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-primary); margin-bottom:16px; }
.pf-footer-links { display:flex; flex-direction:column; gap:10px; }
.pf-footer-links a { font-size:14px; color:var(--text-muted); text-decoration:none; transition:color .2s; display:flex; align-items:center; gap:6px; }
.pf-footer-links a:hover { color:var(--text-primary); }
.pf-footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.pf-footer-contact-item i { color:var(--primary-light); font-size:13px; width:16px; flex-shrink:0; margin-top:2px; }
.pf-footer-bottom { padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pf-footer-copy { font-size:13px; color:var(--text-muted); }
.pf-footer-payment { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-payment-badge { height:28px; width:auto; border-radius:5px; object-fit:contain; filter:grayscale(.3) opacity(.8); transition:filter .2s; }
.pf-payment-badge:hover { filter:none; }
.pf-payment-text-badge { padding:4px 10px; background:rgba(255,255,255,.07); border:1px solid var(--border-md); border-radius:6px; font-size:11px; font-weight:700; color:var(--text-muted); white-space:nowrap; }

/* ══ NEWSLETTER ══════════════════════════════════════════════════════════════ */
.pf-newsletter-form { display:flex; gap:10px; max-width:480px; }
.pf-newsletter-form input { flex:1; min-width:0; height:52px; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.3); border-radius:var(--radius-full); padding:0 22px; color:#fff; font-size:14px; font-family:inherit; outline:none; backdrop-filter:blur(8px); transition:border-color .2s; }
.pf-newsletter-form input::placeholder { color:rgba(255,255,255,.5); }
.pf-newsletter-form input:focus { border-color:rgba(255,255,255,.8); }

/* ══ BACK TO TOP ═════════════════════════════════════════════════════════════ */
#back-to-top,#backToTop { position:fixed; bottom:24px; left:24px; width:44px; height:44px; border-radius:50%; background:var(--grad-primary); color:#fff; border:none; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:var(--z-elevated); box-shadow:var(--shadow-primary); opacity:0; transform:translateY(12px); transition:all .3s var(--ease-out); pointer-events:none; }
#back-to-top.visible,#backToTop.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
#back-to-top:hover,#backToTop:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,87,255,.5); }

/* ══ NOTICE BAR ══════════════════════════════════════════════════════════════ */
.notice-bar { background:var(--warning-bg); border-bottom:1px solid rgba(245,158,11,.3); padding:10px 24px; text-align:center; font-size:13px; color:var(--warning); display:flex; align-items:center; justify-content:center; gap:8px; }

/* ══ ANIMATIONS ══════════════════════════════════════════════════════════════ */
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes pulse       { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.85} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastIn     { from{opacity:0;transform:translateX(20px) scale(.95)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut    { from{opacity:1;transform:translateX(0);max-height:120px} to{opacity:0;transform:translateX(20px);max-height:0;padding:0;margin:0} }
@keyframes modalIn     { from{opacity:0;transform:scale(.9) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes popIn       { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes marquee     { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes pfBlobFloat { 0%{transform:translate(0,0) rotate(0)} 33%{transform:translate(14px,-12px) rotate(120deg)} 66%{transform:translate(-10px,8px) rotate(240deg)} 100%{transform:translate(0,0) rotate(360deg)} }
@keyframes pfFlip      { 0%{transform:translateY(-8px);opacity:.3} 100%{transform:translateY(0);opacity:1} }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .pf-footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .section,.section-lg { padding:56px 0; }
}
@media(max-width:768px) {
  .pf-footer-grid   { grid-template-columns:1fr 1fr; gap:24px; }
  .pf-footer-top    { padding:40px 0 28px; }
  .pf-footer-bottom { flex-direction:column; text-align:center; }
  .section,.section-lg { padding:44px 0; }
  .container { padding:0 16px; }
  .pf-pagination { gap:4px; }
}
@media(max-width:480px) {
  .pf-footer-grid { grid-template-columns:1fr; }
  .pf-page-hdr    { padding:32px 0 24px; }
}

/* ══ PRINT ═══════════════════════════════════════════════════════════════════ */
@media print {
  .pf-header,.pf-footer,#pf-toast-container,
  #pf-cart-side,.pf-topbar,#back-to-top { display:none!important; }
  body { background:#fff; color:#000; }
}