/* ============================================================
   SQUIDTRONIC — Shared Components
   Header, Footer, Nav, Product Card, Forms, Buttons, Toast
   ============================================================ */

/* ---------- Top Banner ---------- */
.top-banner{background:var(--c-accent);color:var(--c-brand);text-align:center;padding:6px 16px;font-size:var(--text-sm);font-weight:600;letter-spacing:.02em}
.top-banner a{text-decoration:underline;font-weight:700}

/* ---------- Header ---------- */
.header{background:var(--c-brand);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md)}
.header__inner{display:flex;align-items:center;gap:16px;height:var(--header-h);max-width:var(--container);margin:0 auto;padding:0 16px}
.header__logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header__logo img{width:36px;height:36px;border-radius:var(--radius-sm)}
.header__logo-text{color:#fff;font-weight:800;font-size:var(--text-xl);letter-spacing:-.02em}
.header__logo-text span{color:var(--c-accent)}

.header__search{flex:1;max-width:560px;position:relative}
.header__search-input{width:100%;padding:8px 40px 8px 14px;border:2px solid rgba(255,255,255,.15);border-radius:var(--radius-full);background:rgba(255,255,255,.1);color:#fff;font-size:var(--text-sm);transition:border-color .2s,background .2s}
.header__search-input::placeholder{color:rgba(255,255,255,.5)}
.header__search-input:focus{outline:none;border-color:var(--c-accent);background:rgba(255,255,255,.15)}
.header__search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:var(--radius-full);background:var(--c-accent);display:flex;align-items:center;justify-content:center}
.header__search-btn svg{width:16px;height:16px;stroke:var(--c-brand);stroke-width:2.5}

.header__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.header__action{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.8);font-size:var(--text-sm);font-weight:500;padding:6px 10px;border-radius:var(--radius-md);transition:background .15s,color .15s}
.header__action:hover{background:rgba(255,255,255,.1);color:#fff}
.header__action svg{width:20px;height:20px;flex-shrink:0}

.header__cart{position:relative}
.header__cart-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--c-danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.header__cart-badge:empty{display:none}

.header__menu-btn{display:none;color:#fff;padding:8px}
.header__menu-btn svg{width:24px;height:24px}

.header__avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.header__avatar-initials{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--c-accent);color:var(--c-brand);font-size:11px;font-weight:700}

/* ---------- Category Nav ---------- */
.catnav{background:var(--c-brand-light);border-bottom:1px solid rgba(255,255,255,.06)}
.catnav__inner{display:flex;align-items:center;gap:0;max-width:var(--container);margin:0 auto;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.catnav__inner::-webkit-scrollbar{display:none}
.catnav__link{display:flex;align-items:center;gap:6px;padding:10px 16px;color:rgba(255,255,255,.75);font-size:var(--text-sm);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.catnav__link:hover,.catnav__link.active{color:#fff;border-bottom-color:var(--c-accent)}
.catnav__link svg{width:16px;height:16px;opacity:.7}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:12px 0;font-size:var(--text-sm);color:var(--c-text-dim)}
.breadcrumb a{color:var(--c-info);transition:color .15s}
.breadcrumb a:hover{color:var(--c-accent-dark)}
.breadcrumb span{margin:0 6px;opacity:.4}

/* ---------- Product Card ---------- */
.p-card{background:var(--c-bg-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s,transform .15s;display:flex;flex-direction:column}
.p-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.p-card__img{position:relative;aspect-ratio:1;background:var(--c-bg);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.p-card__img-placeholder{width:100%;height:100%;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0e3d1a}
.p-card__img-placeholder svg{display:block;width:100%;height:100%}
.p-card__stock{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.p-card__stock--in{background:#dcfce7;color:#15803d}
.p-card__stock--low{background:#fef3c7;color:#92400e}
.p-card__stock--out{background:#fee2e2;color:#991b1b}
.p-card__badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--c-accent);color:var(--c-brand)}
.p-card__body{padding:12px 16px;flex:1;display:flex;flex-direction:column}
.p-card__cat{font-size:var(--text-xs);color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}
.p-card__title{font-size:var(--text-sm);font-weight:600;line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-card__title a:hover{color:var(--c-info)}
.p-card__sku{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--c-text-light);margin-bottom:8px}
.p-card__specs{font-size:var(--text-xs);color:var(--c-text-dim);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:4px 12px}
.p-card__spec{display:flex;align-items:center;gap:3px}
.p-card__spec b{color:var(--c-text);font-weight:600}
.p-card__footer{margin-top:auto;padding-top:8px;border-top:1px solid var(--c-border-light);display:flex;align-items:center;justify-content:space-between;gap:8px}
.p-card__price-row{display:flex;align-items:center;gap:8px}
.p-card__price{font-size:var(--text-lg);font-weight:800;color:var(--c-text)}
.p-card__stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.p-card__stock-dot--in{background:var(--c-cart-green)}
.p-card__stock-dot--low{background:#f59e0b}
.p-card__stock-dot--out{background:var(--c-danger)}
.p-card__price-from{font-size:var(--text-xs);color:var(--c-text-dim);font-weight:400}
.p-card__add-btn{padding:6px 14px;border-radius:var(--radius-md);background:var(--c-cart-green);color:#fff;font-size:var(--text-sm);font-weight:700;transition:background .15s,transform .1s;white-space:nowrap}
.p-card__add-btn:hover{background:var(--c-cart-hover)}
.p-card__add-btn:active{transform:scale(.96)}
.p-card__add-btn--added{background:var(--c-info)}

/* ---------- Product Grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:32px;padding-top:24px;border-top:1px solid var(--c-border)}
.pagination__btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;border:1px solid var(--c-border);background:var(--c-bg-white);transition:background .15s,border-color .15s}
.pagination__btn:hover{border-color:var(--c-accent);background:rgba(0,212,170,.05)}
.pagination__btn.active{background:var(--c-accent);color:var(--c-brand);border-color:var(--c-accent)}
.pagination__btn:disabled{opacity:.3;pointer-events:none}

/* ---------- Forms (shared) ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.form-row--3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:480px){.form-row--3{grid-template-columns:1fr}}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:6px;color:var(--c-text-mid)}
.form-input,.form-select{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--c-bg-white);transition:border-color .15s,box-shadow .15s}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,212,170,.12)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 10px) center;padding-right:32px;cursor:pointer}

.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:6px;color:var(--c-text-mid)}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--c-bg-white);transition:border-color .15s,box-shadow .15s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,212,170,.12)}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 10px) center;padding-right:32px;cursor:pointer}
.form-field textarea{resize:vertical}
.form-field--error input,.form-field--error select,.form-field--error textarea{border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.form-field--error input:focus,.form-field--error select:focus,.form-field--error textarea:focus{border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.form-field__error{display:none;font-size:var(--text-xs);color:var(--c-danger);margin-top:4px;font-weight:500;line-height:1.3}
.form-field--error .form-field__error{display:block}
.form-field__hint{display:block;margin-top:4px;font-size:12px;color:var(--c-text-light)}
.form-field__input--disabled{opacity:.5;cursor:not-allowed}

.form-checkbox{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-text-light);margin:16px 0;cursor:pointer}
.form-checkbox input[type="checkbox"]{accent-color:var(--c-accent);width:18px;height:18px}

/* ---------- Footer ---------- */
.footer{background:var(--c-brand);color:rgba(255,255,255,.7);padding:48px 0 20px;margin-top:60px}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;max-width:var(--container);margin:0 auto;padding:0 16px 40px}
@media(max-width:768px){.footer__grid{grid-template-columns:1fr 1fr;gap:24px}}
.footer__brand{max-width:280px}
.footer__brand-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:var(--text-lg);color:#fff;margin-bottom:12px}
.footer__brand-name img{width:28px;height:28px;border-radius:var(--radius-sm)}
.footer__brand-desc{font-size:var(--text-sm);line-height:1.6}
.footer__col-title{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.footer__col a{display:block;padding:4px 0;font-size:var(--text-sm);transition:color .15s}
.footer__col a:hover{color:var(--c-accent)}
.footer__newsletter{margin-top:16px}
.footer__newsletter-form{display:flex;gap:8px}
.footer__newsletter-input{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);background:rgba(255,255,255,.05);color:#fff;font-size:var(--text-sm)}
.footer__newsletter-input::placeholder{color:rgba(255,255,255,.35)}
.footer__newsletter-btn{padding:8px 16px;border-radius:var(--radius-md);background:var(--c-accent);color:var(--c-brand);font-weight:700;font-size:var(--text-sm)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 16px 0;max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;font-size:var(--text-xs);color:rgba(255,255,255,.4)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);padding:12px 20px;background:var(--c-brand);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);font-size:var(--text-sm);font-weight:600;display:flex;align-items:center;gap:8px;z-index:999;opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast__icon{color:var(--c-cart-green)}
.toast__undo{background:none;border:none;color:var(--c-accent);font-weight:700;font-size:var(--text-sm);cursor:pointer;padding:0 0 0 8px;text-decoration:underline}
@media(max-width:768px){.toast{bottom:80px}}

/* ---------- Page Utilities ---------- */
.page-wrap{max-width:var(--container);margin:0 auto;padding:24px 16px}
.page-title{font-size:var(--text-3xl);font-weight:800;margin:24px 0 8px}
.page-subtitle{font-size:var(--text-base);color:var(--c-text-dim);margin-bottom:32px;max-width:560px}
.page-desc{font-size:var(--text-base);color:var(--c-text-dim);margin-bottom:24px;max-width:600px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:background .2s,transform .1s}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--c-accent);color:var(--c-brand)}
.btn--primary:hover{background:var(--c-accent-hover)}
.btn--secondary{background:var(--c-brand);color:var(--c-text-light);border:1px solid var(--c-border)}
.btn--secondary:hover{border-color:var(--c-accent);color:#fff}
.btn--green{background:var(--c-cart-green);color:#fff}
.btn--green:hover{background:var(--c-cart-hover)}
.btn--outline{border:1px solid var(--c-border);background:var(--c-bg-white)}
.btn--outline:hover{border-color:var(--c-accent)}
.btn--sm{padding:8px 16px;font-size:12px}
.btn--full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-link{background:none;border:none;color:var(--c-accent);cursor:pointer;font-size:var(--text-sm);padding:4px 8px}
.btn-link:hover{text-decoration:underline}
.btn-link--danger{color:#dc2626}

/* ---------- Mobile Menu ---------- */
.mobile-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.mobile-menu-backdrop--visible{opacity:1;visibility:visible}

.mobile-menu{
  position:fixed;top:0;left:0;bottom:0;width:min(320px,85vw);
  background:var(--c-brand);color:#fff;
  z-index:200;overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu--open{transform:translateX(0)}

.mobile-menu__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.mobile-menu__close{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:rgba(255,255,255,.7);
  transition:background .15s,color .15s;
}
.mobile-menu__close:hover{background:rgba(255,255,255,.1);color:#fff}
.mobile-menu__close svg{width:22px;height:22px}

.mobile-menu__search{padding:16px 20px 8px;position:relative;flex-shrink:0}
.mobile-menu__search-input{
  width:100%;padding:10px 40px 10px 14px;
  border:2px solid rgba(255,255,255,.15);border-radius:var(--radius-full);
  background:rgba(255,255,255,.08);color:#fff;font-size:var(--text-sm);
  transition:border-color .2s,background .2s;
}
.mobile-menu__search-input::placeholder{color:rgba(255,255,255,.45)}
.mobile-menu__search-input:focus{outline:none;border-color:var(--c-accent);background:rgba(255,255,255,.12)}
.mobile-menu__search-btn{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--c-accent);display:flex;align-items:center;justify-content:center;margin-top:4px;
}
.mobile-menu__search-btn svg{width:15px;height:15px;stroke:var(--c-brand);stroke-width:2.5}

.mobile-menu__section{padding:12px 20px}
.mobile-menu__section-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-bottom:8px}
.mobile-menu__link{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 -12px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:rgba(255,255,255,.8);transition:background .15s,color .15s}
.mobile-menu__link:hover,.mobile-menu__link:focus{background:rgba(255,255,255,.08);color:#fff}
.mobile-menu__link-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}
.mobile-menu__link--action{font-weight:600}
.mobile-menu__link--action svg{width:20px;height:20px;flex-shrink:0;opacity:.7}
.mobile-menu__divider{height:1px;background:rgba(255,255,255,.08);margin:4px 20px}
.mobile-menu__cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--c-danger);color:#fff;font-size:11px;font-weight:700;margin-left:auto;line-height:1}
.mobile-menu__cart-badge:empty{display:none}

@media(min-width:769px){.mobile-menu,.mobile-menu-backdrop{display:none}}

/* ---------- Responsive (Header) ---------- */
@media(max-width:768px){
  .header__search{display:none}
  .header__actions{display:none}
  .header__inner{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
  .header__menu-btn{display:flex;align-items:center;justify-content:center;margin-left:auto}
  .catnav{display:none}
}

/* ---------- Bottom Navigation (Mobile) ---------- */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--c-bg-white);border-top:1px solid var(--c-border);z-index:100;padding:6px 0 env(safe-area-inset-bottom,0)}
.bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:8px 4px;font-size:10px;font-weight:600;color:var(--c-text-dim);text-decoration:none;transition:color .15s;position:relative;min-height:44px;justify-content:center}
.bottom-nav__item--active{color:var(--c-accent-dark)}
.bottom-nav__item svg{width:22px;height:22px}
.bottom-nav__badge{position:absolute;top:2px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--c-accent);color:var(--c-brand);font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
@media(max-width:768px){
  .bottom-nav{display:flex}
  body{padding-bottom:64px}
  .footer{padding-bottom:64px}
  .header__menu-btn{display:none}
}

/* ---------- Mobile Search Bar ---------- */
.mobile-search-bar{display:none;padding:8px 16px;background:var(--c-bg)}
.mobile-search-bar__form{display:flex;gap:8px}
.mobile-search-bar__input{flex:1;padding:10px 14px;border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-bg-white);font-size:var(--text-base)}
.mobile-search-bar__input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,212,170,.15)}
.mobile-search-bar__btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--c-accent);border:none;cursor:pointer}
.mobile-search-bar__btn svg{width:18px;height:18px;stroke:var(--c-brand);stroke-width:2;fill:none}
@media(max-width:768px){.mobile-search-bar{display:block}}

/* ---------- Touch Targets (44x44px min) ---------- */
@media(max-width:768px){
  .btn,.hero__btn{min-height:44px;min-width:44px}
  .header__action{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
  .p-card__cart-btn{min-height:44px}
  .pagination__btn{min-height:44px;min-width:44px}
  .mobile-menu__link{min-height:44px;display:flex;align-items:center}
}

/* ---------- Skeleton Loading ---------- */
.skeleton-card{background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:16px;overflow:hidden}
.skeleton{background:linear-gradient(90deg,var(--c-bg) 25%,var(--c-border-light) 50%,var(--c-bg) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}
.skeleton--img{width:100%;aspect-ratio:1;margin-bottom:12px}
.skeleton--title{height:16px;width:80%;margin-bottom:8px}
.skeleton--text{height:12px;width:60%;margin-bottom:12px}
.skeleton--btn{height:36px;width:100%;border-radius:var(--radius-md)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Cart Badge Pulse ---------- */
.header__cart-badge.pulse,.bottom-nav__badge.pulse{animation:badgePulse .4s ease}
@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ---------- Add-to-Cart Button Feedback ---------- */
.p-card__add-btn--added{background:var(--c-info);transform:scale(.97)}