/* Oudai Public — Primor-style */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html { background: #fff; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-y: auto;
}
body.drawer-open { overflow: hidden; }
img,video,canvas,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;min-height:44px}
a{touch-action:manipulation}
@media(min-width:768px){
  body { padding-bottom: 0; }
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.public-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* === PRODUCT GRID (mobile-first) === */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width:480px){
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media(min-width:768px){
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media(min-width:1024px){
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media(min-width:1280px){
  .product-grid { grid-template-columns: repeat(5, 1fr); }
}

/* === PRODUCT CARD (Primor-style) === */
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.product-card-image {
  position: relative;
  background: #fafafa;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s;
  padding: 16px;
}
.product-card:hover .product-card-image img {
  transform: scale(1.04);
}
.product-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.product-card-badge.featured { background: #dc2626; color: #fff; }
.product-card-badge.new { background: #171717; color: #fff; }
.product-card-badge.bestseller { background: #2563eb; color: #fff; }

.product-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.product-card-brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #a3a3a3;
}
.product-card-name {
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-name:hover { color: #dc2626; }
.product-card-price {
  font-size: 16px;
  font-weight: 700;
  color: #dc2626;
  margin-top: auto;
  padding-top: 4px;
}
.product-card-old-price {
  font-size: 12px;
  color: #a3a3a3;
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 400;
}

.product-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.product-card-actions form { display: contents; }
.product-card-actions .btn-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e5e5e5;
  color: #171717;
  text-decoration: none;
  transition: all .15s;
}
.product-card-actions .btn-view:hover { background: #f5f5f5; }
.product-card-actions .btn-cart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: #dc2626;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.product-card-actions .btn-cart:hover { background: #b91c1c; }
.product-card-actions .btn-cart:disabled { background: #e5e5e5; color: #525252; cursor: not-allowed; }

/* === SECTION HEADER === */
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #171717;
}
.section-link {
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

/* === TRUST STRIP === */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e5e5;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #525252;
  font-size: 13px;
  font-weight: 500;
}

/* === MOBILE BOTTOM NAV (app-style) === */
.public-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
@media(min-width:768px){
  .public-bottom-nav { display: none; }
}
.public-bottom-nav a, .public-bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: #a3a3a3;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: color .15s;
  min-width: 56px;
  min-height: 44px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.public-bottom-nav a.active, .public-bottom-nav button.active { color: #dc2626; }
.public-bottom-nav a svg, .public-bottom-nav button svg { width: 22px; height: 22px; display: block; }
.public-bottom-nav .cart-badge-wrap { position: relative; display: inline-flex; }
.public-bottom-nav .cart-badge-wrap .badge {
  position: absolute;
  top: -4px; right: -6px;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px; height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

/* === MOBILE DRAWER === */
.public-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  pointer-events: none;
}
.public-drawer-overlay.open { display: block; pointer-events: auto; }
.public-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 2001;
  transform: translateY(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.public-drawer.open { transform: translateY(0); }
.public-drawer-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.public-drawer-handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d4d4d4;
}
.public-drawer-header {
  padding: 4px 16px 12px;
  border-bottom: 1px solid #e5e5e5;
}
.public-drawer-header strong { font-size: 16px; color: #171717; }
.public-drawer-nav { padding: 8px; }
.public-drawer-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #171717;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}
.public-drawer-nav a:hover { background: #f5f5f5; }
.public-drawer-nav hr { margin: 8px 14px; border: none; border-top: 1px solid #e5e5e5; }

/* === RESPONSIVE HELPERS === */
@media(min-width:768px){
  .mobile-only { display: none !important; }
}
@media(max-width:767px){
  .desktop-only { display: none !important; }
}

/* === LAYOUT HELPERS === */
.public-content { flex: 1; }

/* Scroll safety layer */
html,body{
  height:auto;
  min-height:100%;
  max-width:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body.drawer-open{overflow:hidden !important}
.public-shell,
.public-content{max-width:100%;min-width:0}
.public-drawer{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.public-drawer-overlay:not(.open){pointer-events:none}