/* Main Styles */
body { background: #F7F8FA; font-family: Arial, sans-serif; margin: 0; padding: 0; }

/* Container */
.container {
  background: transparent;
  border: none;

  max-width: 1200px;               /* Increased to fit two cards with padding */
  margin: 36px auto;
  /* Set the container background to the utensil pattern */
/* fallback colour matches the utensil pattern */
background-repeat: repeat;
background-size: 256px;
  border-radius: 14px;
/* Reduce horizontal padding to widen the item cards while keeping the container width the same */
  padding: 28px 136px;
box-sizing: border-box;
 width:100%; }

/* Logo Area */
.logo-holder {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.logo-text {
  font-size: 2.1em;
  font-weight: 700;
  color: #333;
  letter-spacing: 2px;
  text-align: center;
}

/* Item Grid */
.item-grid {border-radius: 12px;
  padding: 16px;                   /* small padding for cards */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* always 2 columns */
  gap: 16px;                       /* minimal gap */
  margin-bottom: 32px;
  box-sizing: border-box;
}

/* Item Cards */
.item-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 18px 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
  transition: box-shadow 0.25s, border 0.2s;
}
.item-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }

/* Item Title & Price */
.item-title {
  color: #333333;
  font-weight: bold;
  font-size: 1.09em;
  margin: 12px 0 4px 0;
}
.item-price {
  color: #333333;
  font-weight: 600;
  margin-bottom: 7px;
}

/* Buttons */
.add-btn {
  background: #0055cc;
  color: #C6B89F;
  border: none;
  padding: 8px 22px;
  border-radius: 7px;
  font-weight: bold;
  font-size: 1em;
  margin-top: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, transform 0.15s;
}
.add-btn:hover,
.add-btn:focus {
  background: #0041a8;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px #25595923;
  outline: none;
}

/* Cart Section */

/* Centered light-grey cart panel */
.cart-section {
  background: #F1F5F9;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px;
  margin: 32px auto 56px auto;
  text-align: center;
  padding: 20px 18px;
}
.cart-section h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 1.25em;
  color: #000;
  font-weight: 700;
}

/* Misc */
img {
  max-width: 100%;
  height: auto;
}
button {
  white-space: nowrap;
}
/* Cart Section Customizations */

/* Centered light-grey cart panel */
.cart-section {
  background: #F1F5F9;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px;
  margin: 32px auto 56px auto;
  text-align: center;
  padding: 20px 18px;
}
.cart-section .add-btn {
  display: inline-block;
  margin: 1rem auto 0;
  padding: 8px 44px;
}


/* === THEME OVERRIDE: container background set by assistant === */
body, .container, .app-container, .main, main, .page, .content, .wrapper, .shell {
    background: #f9f9f9 !important;
    background-color: #f9f9f9 !important;
}
/* Subtle separation so elements don't feel flat on very light bg */
.card, .panel, .tile, .section, .widget {
    border: 1px solid rgba(0,0,0,0.06);
}


/* === THEME ENHANCEMENT: shadows + thinner container border === */
.card, .panel, .tile, .section, .widget {
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.container, .app-container, .main, main, .page, .content, .wrapper, .shell {
    border-width: 0.5px !important;
    border-color: rgba(0,0,0,0.25) !important;
}



/* === MOBILE RESPONSIVE FIXES (added by assistant) === */
.container, .app-container, .content, .page, .wrapper, .shell {
  width: 100%;
  box-sizing: border-box;
}
img, video, canvas {
  max-width: 100%;
  height: auto;
}
/* Ensure any wide containers still shrink on mobile */
@media (max-width: 480px) {
  .grid, .cards, .menu-grid, .bigwidecards, .items-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .row, .columns {
    display: block;
  }
  .checkout-sidebar, .cart-summary, .cart, .order-summary {
    position: static !important;
    width: 100% !important;
  }
  button, .btn, .add-btn, .checkout-btn {
    width: 100%;
  }
  input, select, textarea {
    width: 100%;
    max-width: 100%;
  }
  body { background: #F7F8FA; font-family: Arial, sans-serif; margin: 0; padding: 0; }
}


/* === MOBILE BORDER/SHADOW VARIANT: border_only === */
.container, .app-container, .main, main, .page, .content, .wrapper, .shell {
  border: 0.5px solid rgba(0,0,0,0.1);
  box-shadow: none;
}



/* === MOBILE COMPACT CARD OVERRIDES (added by assistant) === */
@media (max-width: 640px) {
  /* Card container: trim padding & margins ~15–20% */
  .item-card {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Images: ensure consistent aspect ratio and reduce visual height */
  .item-card .item-image,
  .item-image {
    overflow: hidden;
    border-radius: 10px;
  }
  .item-card .item-image img,
  .item-image img {
    width: 100%;
    height: auto;
    max-height: 160px; /* ~20% reduction for tall images */
    object-fit: cover;
    display: block;
  }

  /* Titles & text: slight size trim for tighter layout */
  .item-title {
    font-size: 1rem !important;   /* was likely ~1.125rem */
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  .item-desc {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }
  .item-price {
    font-size: 1rem !important;
  }

  /* Buttons: keep touch-friendly, but reduce vertical padding a touch */
  .add-btn, .btn.add, button.add-btn {
    padding: 10px 12px !important;
  }

  /* Keep the existing grid; do NOT force single column changes here */
  /* If you want two columns on some devices, we can add an alternate build */
}


/* === DETAIL PAGE / CARD LINK STYLES (assistant) === */
.item-link { text-decoration: none; color: inherit; display: block; }
.item-link:focus-visible { outline: 2px solid rgba(0,0,0,0.25); outline-offset: 2px; }


/* === DETAIL PAGE NAV (assistant) === */
.detail-nav { margin-top: 12px; display:flex; justify-content: space-between; gap: 12px; }
.detail-nav .btn { flex: 1; text-align: center; }
@media (min-width: 720px) {
  .detail-nav .btn { flex: 0 0 auto; }
}


/* === INLINE VIEW DETAILS LINK (assistant) === */
.view-details-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.95rem;
  text-decoration: underline;
  color: #0a66c2;
}
.view-details-link:active { opacity: 0.85; }


/* === IMAGE/TITLE DETAIL LINKS (assistant) === */
.item-img-link { display:block; }
.item-img-link img { display:block; }
.item-title-link { text-decoration: underline; color: inherit; }
.item-title-link:active { opacity: 0.9; }
.item-img-link:hover, .item-title-link:hover { text-decoration: none; }



/* === THEME VARIABLES (assistant) === */
:root{
  --bg:#f9f9f9;
  --surface:#ffffff;
  --panel:#f2f4f7;  /* neutral panel background */
  --border:rgba(0,0,0,0.08);
  --text:#111111;
  --muted:#666666;
  --accent:#0a66c2; /* brand-swappable */
}

/* Apply only to the order panel for now; safe, non-breaking */

/* Centered light-grey cart panel */
.cart-section {
  background: #F1F5F9;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px;
  margin: 32px auto 56px auto;
  text-align: center;
  padding: 20px 18px;
}


/* === CLEAR CART BUTTON (assistant) === */
.clear-cart-btn{
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, #ffffff);
  color: var(--text, #111);
  border-radius: 10px;
  margin-right: 8px;
}
@media (max-width: 640px){
  .clear-cart-btn, .cart-section .add-btn{ width: 49%; }
}

/* Final overrides to ensure wrapper greys are gone */
.item-grid, .container { background: transparent !important; box-shadow: none !important; border: none !important; }


/* ===== Mobile Touch & iOS Text Size Stability ===== */
html { -webkit-text-size-adjust: 100%; }

/* Tone down hover transitions on touch devices */
@media (hover: none) {
  .item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
  .add-btn:hover, .clear-cart-btn:hover, .checkout-btn:hover { 
    transform: none; 
    box-shadow: none; 
  }
}


/* === Template style switchers === */
.template-corporate .item-card { border-color: #E5E7EB; }
.template-birthday .item-card { border-color: #E5E7EB; }
.template-custom .item-card { border-color: #E5E7EB; }
/* Add more theme-specific rules later without touching HTML */


/* Responsive overrides added: force full width under 480px to avoid layout breakage on small screens */
@media (max-width:480px) {
  /* Container */
.container,
  /* Cart Section */

/* Centered light-grey cart panel */
.cart-section,
  /* Cart Section Customizations */

/* Centered light-grey cart panel */
.cart-section,
  /* Apply only to the order panel for now; safe,
  non-breaking */

/* Centered light-grey cart panel */
.cart-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Login form styles added for login and change-password pages */
.login-page{display:flex;align-items:center;justify-content:center;padding:40px 16px;min-height:70vh;}
.login-card{max-width:420px;width:100%;background:#fff;padding:28px;border-radius:12px;box-shadow:0 6px 18px rgba(10,20,40,0.08);font-family:inherit;}
.logo-wrap{text-align:center;margin-bottom:8px;}
.logo-img{max-height:64px;width:auto;margin:0 auto;display:block;}
.login-title{text-align:center;margin:6px 0 18px;font-size:22px;}
.login-card label{display:block;margin:10px 0 6px;font-weight:600;color:#374151;}
.login-card input[type="email"], .login-card input[type="password"]{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;}
.hint{font-size:12px;color:#6b7280;margin-top:4px;}
.row.between{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.checkbox{display:flex;align-items:center;gap:8px;}
.link{font-size:13px;color:#0ea5e9;text-decoration:none;}
.primary-btn{display:block;width:100%;padding:10px 14px;background:#0055cc;color:#fff;border:none;border-radius:10px;margin-top:16px;font-weight:700;cursor:pointer;}
.note{font-size:12px;color:#6b7280;margin-top:12px;text-align:center;}
@media (max-width:420px){ .login-card{padding:18px;border-radius:10px;} .login-title{font-size:18px;} }