@charset "utf-8";
/* CSS Document */

/* ===== COUPONS (scoped) ===== */
#dbc-coupons.dbc, #dbc-coupons.dbc * { box-sizing: border-box; }

#dbc-coupons.dbc {
  --dbc-accent: #F1455F;
  --dbc-cta: #FF8080;
  --dbc-cta-text: #101017;
  --dbc-link: #1a4b9a;
  --dbc-border: #e6e6e6;
  --dbc-soft: #e7f0ff;
  --dbc-soft-border: #bcd0ff;
  --dbc-radius: 12px;
  --dbc-gap: 14px;

  display: grid;
  gap: var(--dbc-gap);
  margin: 0;
  padding: 0;
}

/* Section headings */
#dbc-coupons.dbc .dbc__heading {
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 700;
  margin: 18px 0 6px;
  padding: 10px 12px;
  background: var(--dbc-accent);
  color: #fff;
  border-radius: 10px;
}

/* Coupon/offer cards */
#dbc-coupons.dbc .dbc-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--dbc-border);
  border-radius: var(--dbc-radius);
  background: #fff;
}
@media (min-width: 520px) {
  #dbc-coupons.dbc .dbc-card { grid-template-columns: 110px 1fr; align-items: start; }
}
#dbc-coupons.dbc .dbc-card__cta { display: flex; align-items: flex-start; justify-content: center; }

/* Local buttons (not Bootstrap .btn) */
#dbc-coupons.dbc .dbc-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 10px;
  min-height: 44px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}
#dbc-coupons.dbc .dbc-btn--code  { background: var(--dbc-cta);  color: var(--dbc-cta-text); }
#dbc-coupons.dbc .dbc-btn--offer { background: var(--dbc-soft); color: var(--dbc-link); border-color: var(--dbc-soft-border); }
#dbc-coupons.dbc .dbc-btn:hover,
#dbc-coupons.dbc .dbc-btn:focus { filter: brightness(0.96); }

#dbc-coupons.dbc .dbc-card__body  { min-width: 0; }
#dbc-coupons.dbc .dbc-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#dbc-coupons.dbc .dbc-chip        { border: 1px solid var(--dbc-border); border-radius: 999px; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
#dbc-coupons.dbc .dbc-card__text  { margin: 4px 0 8px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
#dbc-coupons.dbc .dbc-card__meta  { font-size: 12px; color: #666; margin-bottom: 8px; }
#dbc-coupons.dbc .dbc-card__links .dbc-more { font-size: 14px; text-decoration: underline; color: var(--dbc-link); }

@media (max-width: 359px) {
  #dbc-coupons.dbc .dbc-card { padding: 10px; }
  #dbc-coupons.dbc .dbc-btn  { padding: 10px; }
}

/* ===== Modal ===== */
#dbcCouponModal.dbc-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; z-index: 9999; }
#dbcCouponModal.dbc-modal.is-open { display: grid; place-items: center; }
#dbcCouponModal .dbc-modal__dialog { background:#fff; width:min(92vw,520px); border-radius:12px; padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,.2); position: relative; }
#dbcCouponModal .dbc-modal__title { margin: 0 0 10px; font-size: 18px; }
#dbcCouponModal .dbc-modal__close { position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; }
#dbcCouponModal .dbc-code-row { display:flex; gap:8px; align-items:center; margin:8px 0 14px; }
#dbcCouponModal .dbc-code { font-size:18px; padding:6px 10px; background:#f6f7fb; border-radius:8px; }
#dbcCouponModal .dbc-copy { padding:8px 10px; border-radius:8px; border:1px solid var(--dbc-border, #e6e6e6); background:#fff; cursor:pointer; }
#dbcCouponModal .dbc-shop { display:inline-block; margin-top:4px; padding:10px 12px; border-radius:10px; background: var(--dbc-cta, #FF8080); color:#101017; font-weight:700; text-decoration:none; }
#dbcCouponModal .dbc-tip { font-size:12px; color:#666; margin-top:8px; }
#dbcCouponModal[hidden] { display: none !important; }
#dbcCouponModal.is-open { display: grid !important; }

/* ===== PRODUCTS (independent of #dbc-coupons) ===== */
#dbc-products, .dbc-products { container-type: inline-size; }
#dbc-products *, .dbc-products * { box-sizing: border-box; }

/* Base: 2 columns */
#dbc-products .dbc-grid, .dbc-products .dbc-grid {
  display: grid;
  gap: var(--dbc-gap, 14px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* 4 across at 900px container, 5 across at 1200px */
@container (min-width: 900px)  { .dbc-products .dbc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1200px) { .dbc-products .dbc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Fallback for browsers without container queries */
@media (min-width: 900px)  { #dbc-products .dbc-grid, .dbc-products .dbc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #dbc-products .dbc-grid, .dbc-products .dbc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Equal-height product cards */
#dbc-products .dbc-pcard, .dbc-products .dbc-pcard {
  border: 1px solid var(--dbc-border, #e6e6e6);
  border-radius: var(--dbc-radius, 12px);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#dbc-products .dbc-pcard__imagewrap, .dbc-products .dbc-pcard__imagewrap {
  display: block;
  aspect-ratio: 4 / 3;   /* change to 1/1 for squares */
  background: #f8f8f8;
  overflow: hidden;
}
#dbc-products .dbc-pcard__image, .dbc-products .dbc-pcard__image {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

#dbc-products .dbc-pcard__body, .dbc-products .dbc-pcard__body {
  padding: 10px 12px 12px;
  display: grid;
  grid-template-rows: auto auto 1fr; /* title | price | desc grows */
  gap: 6px;
  min-height: 0;
}

#dbc-products .dbc-pcard__title, .dbc-products .dbc-pcard__title {
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  color: inherit;            /* override Bootstrap link blue */
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* keep heights aligned */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.25 * 2);
  font-size: 20px;
}

#dbc-products .dbc-pcard__price, .dbc-products .dbc-pcard__price {
  display: flex; gap: 8px; align-items: baseline;
}
#dbc-products .dbc-price-main, .dbc-products .dbc-price-main { font-weight: 400; }
#dbc-products .dbc-price-sale, .dbc-products .dbc-price-sale { color: #c62828; font-weight: 400; }

#dbc-products .dbc-pcard__desc, .dbc-products .dbc-pcard__desc {
  font-size: 14px; color: #333; line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.4 * 2);
}
/* Fix product text cutting on narrow screens */
#dbc-products .dbc-pcard__body,
.dbc-products .dbc-pcard__body {
  min-width: 0;                  /* allow content to shrink instead of overflow */
}

#dbc-products .dbc-pcard__price,
.dbc-products .dbc-pcard__price {
  display: flex;
  flex-wrap: wrap;               /* let price pieces move to the next line */
  column-gap: 8px;
  row-gap: 2px;
}

#dbc-products .dbc-price-main,
.dbc-products .dbc-price-main,
#dbc-products .dbc-price-sale,
.dbc-products .dbc-price-sale {
  white-space: nowrap;           /* keep each token intact; wrap happens between them */
}

/* (Optional) make titles/price slightly smaller on very small phones */
@media (max-width: 380px) {
  #dbc-products .dbc-pcard__title,
  .dbc-products .dbc-pcard__title { font-size: 16px; }

  #dbc-products .dbc-pcard__price,
  .dbc-products .dbc-pcard__price { font-size: 15px; }
}

/* Let titles/desc wrap instead of clipping */
#dbc-products .dbc-pcard__title,
.dbc-products .dbc-pcard__title,
#dbc-products .dbc-pcard__desc,
.dbc-products .dbc-pcard__desc {
  overflow-wrap: anywhere;   /* break long tokens (e.g., model names) */
  word-break: normal;        /* avoid ugly mid-letter breaks unless needed */
  hyphens: auto;             /* requires <html lang="en"> (or your lang) */
}

/* Price row can wrap to a second line (you likely already added this) */
#dbc-products .dbc-pcard__price,
.dbc-products .dbc-pcard__price {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

/* Tighten typography at 4-up and 5-up so cards don't overflow */
@container (min-width: 900px) and (max-width: 1199px) {
  .dbc-products .dbc-pcard__title { font-size: 15.5px; }
  .dbc-products .dbc-pcard__price { font-size: 15px; }
  .dbc-products .dbc-pcard__desc  { font-size: 12.5px; }
}

@container (min-width: 1200px) {
  /* 5 across */
  .dbc-products .dbc-pcard__title { font-size: 14.5px; }
  .dbc-products .dbc-pcard__price { font-size: 14px; }
  .dbc-products .dbc-pcard__desc  { font-size: 12px;  -webkit-line-clamp: 2; }
}

/* ===== Desktop wrapping fix for product price row ===== */
#dbc-products .dbc-pcard__price,
.dbc-products .dbc-pcard__price {
  display: flex;
  flex-wrap: wrap;      /* allow price pieces to move to a 2nd line */
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;         /* let the flex child shrink inside the grid cell */
}

/* Allow line breaks inside the spans (override the earlier nowrap) */
#dbc-products .dbc-price-main,
#dbc-products .dbc-price-sale,
.dbc-products .dbc-price-main,
.dbc-products .dbc-price-sale {
  white-space: normal !important;  /* break between $ and “Sale” if needed */
  min-width: 0;
}

/* Keep titles/desc flexible on tight cards */
#dbc-products .dbc-pcard__title,
#dbc-products .dbc-pcard__desc,
.dbc-products .dbc-pcard__title,
.dbc-products .dbc-pcard__desc {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* ===== DEALS section rendered outside #dbc-coupons ===== */
#dbc-deals, .dbc-deals { }
#dbc-deals *, .dbc-deals * { box-sizing: border-box; }

#dbc-deals .dbc__heading, .dbc-deals .dbc__heading {
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 700;
  margin: 18px 0 6px;
  padding: 10px 12px;
  background: var(--dbc-accent, #F1455F);
  color: #fff;
  border-radius: 10px;
}

#dbc-deals .dbc-card, .dbc-deals .dbc-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--dbc-border, #e6e6e6);
  border-radius: var(--dbc-radius, 12px);
  background: #fff;
  margin-bottom: var(--dbc-gap, 14px);
}
@media (min-width: 520px) {
  #dbc-deals .dbc-card, .dbc-deals .dbc-card { grid-template-columns: 110px 1fr; align-items: start; }
}
#dbc-deals .dbc-card__cta { display: flex; align-items: flex-start; justify-content: center; }
#dbc-deals .dbc-btn       { display:inline-block; width:100%; text-align:center; padding:12px 10px; min-height:44px; border-radius:10px; font-weight:700; text-decoration:none; border:1px solid transparent; }
#dbc-deals .dbc-btn--offer{ background: var(--dbc-soft, #e7f0ff); color: var(--dbc-link, #1a4b9a); border-color: var(--dbc-soft-border, #bcd0ff); }
#dbc-deals .dbc-card__chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
#dbc-deals .dbc-chip { border:1px solid var(--dbc-border, #e6e6e6); border-radius:999px; padding:3px 8px; font-size:12px; white-space:nowrap; }
#dbc-deals .dbc-card__text { margin:4px 0 8px; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }
#dbc-deals .dbc-card__links .dbc-more { font-size:14px; text-decoration:underline; color: var(--dbc-link, #1a4b9a); }

/* ===== CATEGORY PAGE (dbc-themed) ===== */
/* ===== CATEGORY PAGE (dbc-themed) ===== */
#dbc-category.dbc, #dbc-category.dbc * { box-sizing: border-box; }

/* container */
#dbc-category.dbc {
  /* set concrete defaults here, not self-references */
  --dbc-accent: #F1455F;
  --dbc-border: #e6e6e6;
  --dbc-soft: #e7f0ff;
  --dbc-soft-border: #bcd0ff;
  --dbc-link: #1a4b9a;
  --dbc-radius: 12px;
  --dbc-gap: 14px;

  display: grid;
  gap: var(--dbc-gap);
}

/* section heading */
#dbc-category.dbc .dbc__heading {
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 700;
  margin: 18px 0 6px;
  padding: 10px 12px;
  background: var(--dbc-accent, #F1455F); /* add fallback too */
  color: #fff;
  border-radius: 10px;
}

/* ===== STORES GRID ===== */
.dbc-brand-grid{
  display: grid;
  gap: var(--dbc-gap, 14px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.dbc-brand-card{
  position: relative;
  background:#fff;
  border:1px solid var(--dbc-border);
  border-radius: var(--dbc-radius, 12px);
  padding:14px 16px;
  box-shadow: var(--card-shadow, 0 1px 2px rgba(0,0,0,.04));
}

.dbc-brand-card .dbc-brand-card__link{
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  color: inherit;
}

.dbc-brand-card .dbc-brand-card__meta{ margin-top:8px; }

.dbc-badge{
  position:absolute; top:10px; right:12px;
  display:inline-block; min-width:28px; padding:2px 8px;
  border-radius:999px; font-size:.85rem; line-height:1.6; text-align:center;
  background: var(--dbc-soft); color: var(--dbc-link);
  border:1px solid var(--dbc-soft-border);
}

/* ===== CATEGORY TREE ===== */
.dbc-tree, .dbc-tree ul{ list-style:none; margin:0; padding:0; }
.dbc-tree > ul{ margin-top:4px; }
.dbc-tree ul ul{ margin-left:18px; }

.dbc-tree li{ margin:4px 0; }
.dbc-tree a{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:inherit; line-height:1.35;
  padding:4px 6px; border-radius:8px;
}
.dbc-tree a:hover{ background:#fff; box-shadow: inset 0 0 0 1px var(--dbc-border); }

.dbc-tree .expandable > a{ cursor:pointer; user-select:none; }
.dbc-tree .expand-sign{
  font-weight:700; width:18px; height:18px; display:inline-grid; place-items:center;
  border-radius:4px; background:var(--dbc-soft); color:var(--dbc-link);
  border:1px solid var(--dbc-soft-border);
}

/* optional small label style for “View offers” links next to brands */
.dbc-more{ font-size:14px; color: var(--dbc-link); text-decoration: underline; }








/* Sticky footer styles
-------------------------------------------------- */

/* Design tokens */
:root{
  --brand:#e11b22;        /* site red */
  --brand-dark:#b10f17;
  --accent:#1d4ed8;       /* link blue */
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;           /* subtle page background */
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow:0 4px 14px rgba(15,23,42,.06);
}
 
html, body{
  background-color: var(--bg);
  position: relative;
  min-height: 100%;
  height:100%;
}

h1{ font-size:22px; color:#000; padding:5px 0; }
h2{ font-size:22px; color:#000; padding:15px 0 5px; font-weight:bold; }

hr.line-under{
  margin-left:0; height:2px; background-color:maroon; width:166px;
}

.dailyfooter{
  position:fixed; bottom:0; width:100%; height:40px;
  background-color:#ccc; text-align:center;
}
.dailyfooter .footer-links{ display:inline-block; }
.dailyfooter .footer-links a{ display:inline-block; margin:0 10px; }
.dailyfooter .hamburger-menu{ display:none; }

/* Custom page CSS
-------------------------------------------------- */
body > .container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
}
.dailyfooter > .container{ padding-right:15px; padding-left:15px; }

.tab ul{
  list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#f1f1f1;
}
.tab li{ float:left; }
.tab li a{ display:block; text-align:center; padding:5px; text-decoration:underline; }
.tab li a:hover{ background-color:#111; color:#fff; }

.advertisement{
  width:100%; position:relative; overflow:hidden; background-color:#f1f1f1;
  margin-top:70px; padding:10px; text-align:center;
}

.column{ float:left; padding:10px; }
.left{ width:75%; }
.right{ width:25%; }

/* Gallery */
.gallery-container{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.gallery-item{ flex:0 1 calc(20% - 10px); text-align:center; margin-bottom:10px; }
.gallery-item img{ max-width:100%; height:auto; border-radius:10px; }
.gallery-item a{ display:block; margin-top:5px; color:#06f; text-decoration:none; font-size:14px; }
.gallery-item p{ margin-top:5px; font-size:14px; color:#667; }

/* Clear floats */
.row:after{ content:""; display:table; clear:both; }

/* Generic table */
table.customTable{
  width:100%;
  background-color:#fff;
  border:2px solid #F0F0F0;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  color:#000;
  border-collapse:separate;
  border-spacing:0 15px;
  font-size:inherit;
}
table.customTable td, table.customTable th{
  border:1px solid #E0E0E0; padding:8px; text-align:center; vertical-align:middle; background-color:#fff;
}
table.customTable tr:nth-child(even) td{ background:#F9F9F9; }
table.customTable tr:nth-child(odd) td{ background:#fff; }
table.customTable th{
  background-color:#F0F0F0; font-weight:bold; border-bottom:2px solid #E0E0E0;
}

.couponcode{ display:none; }

/* Table utility */
.table-wrapper .shopResponsive{ overflow-y:scroll; }
.tableresponsive{ width:100%; }

/* Base shopResponsive (kept for search/category pages; product view overrides later) */
.shopResponsive{
  border-collapse:collapse;
  width:100%;
  max-width:100%;
}
.shopResponsive td, .shopResponsive th{
  border:1px solid #ddd;
  padding:4px;
  text-align:center;
  vertical-align:top;
  word-wrap:break-word;
  position:relative;
  white-space:normal;
  overflow-wrap:break-word;
  height:auto;
}
.shopResponsive td.data{
  min-height:350px; max-height:430px; overflow:hidden;
  white-space:normal; word-break:break-word;
}


/* Product tiles inside listing/search tables */
.shopResponsive td.data{
  padding: 10px;
  vertical-align: top;
}

/* The whole clickable block */
.shopResponsive td.data .prod-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 290px;                 /* card height (tune) */
  text-align: center;
  overflow: hidden;
}

/* Fixed image box */
.shopResponsive td.data .prod-img{
  height: 150px;                  /* tune to your thumbnails */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopResponsive td.data .prod-img img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Clamp title to 2 lines with ellipsis */
.shopResponsive td.data .prod-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* show 2 lines (set to 3 if you want) */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: calc(2 * 1.2em);    /* reserve space so heights match */
  padding: 0 6px;
}

/* Price sits at the bottom of the card */
.shopResponsive td.data .prod-price{
  margin: 8px 0 0;
  font-size: 18px;
}

/* Optional: ensure the category/brand link above/below doesn’t collide */
.shopResponsive td.data a[href*="/store/"]{
  display: inline-block;
  margin-top: 8px;
}


.shopResponsive td.data a{ font-size:20px; display:inline-block; line-height:19px; }
.shopResponsive td.data .bottom{
  position:absolute; bottom:10px; left:25%; transform:translateX(-15%);
  overflow-wrap:break-word; line-height:20px; font-size:18px;
  overflow:hidden; text-overflow:ellipsis;
}
.shopResponsive th{ background-color:#f2f2f2; color:#666; font-weight:bold; text-transform:uppercase; }
.shopResponsive tr:nth-child(even){ background-color:#f9f9f9; }
.shopResponsive tr:hover{ background-color:#ddd; }

/* Tag pills */
a.tagbox{
  display:inline-block; padding:6px 12px; border:1px solid #ccc; border-radius:4px;
  font-size:14px; text-decoration:none; color:#333; margin-right:5px; margin-bottom:5px;
}
a.tagbox:hover{ background-color:#f5f5f5; }

.appendage{ min-height:500px; overflow:auto; }

/* Second nav */
nav.second {
  background:#333; display:flex; justify-content:space-between; align-items:center; padding:10px;
  width:100%; margin:0 auto;
}

/* Only the direct child UL of the nav (the menu), not other ULs on the page */
nav.second > ul { 
  margin:0 auto; padding:0; list-style:none; display:flex; align-items:center; 
}

nav.second > ul > li { position:relative; }
nav.second > ul > li > a { display:block; color:#fff; font-size:18px; padding:10px; text-decoration:none; }
nav.second > ul > li:hover > ul { display:block; }
nav.second > ul > li > ul { display:none; position:absolute; top:100%; left:0; background:#333; min-width:200px; z-index:1; }
nav.second > ul > li > ul > li { width:100%; }
nav.second > ul > li > ul > li > a { padding:10px; }

/* Coupon grid on some pages */
.couponcontainer{ display:flex; flex-wrap:wrap; }
.couponcolumn{ flex:1 0 33.33%; padding:10px; text-align:center; }

/* Social icon */
.fb-like{
  width:30px; height:30px;
  background-image:url('/images/Facebook_Logo_Primary.png');
  background-size:cover; background-repeat:no-repeat; background-position:center;
}

/* Responsive footer & layout bits */
@media screen and (max-width:768px){
  .dailyfooter{ position:fixed; height:40px; text-align:center; font-size:14px; line-height:1.2; }
  .dailyfooter a{ display:block; margin:5px 0; }
  .dailyfooter .footer-links{ display:none; }
  .dailyfooter .footer-links.show-links{ display:block; }
  .dailyfooter .hamburger-menu{ display:inline-block; margin-top:5px; font-size:20px; background:none; border:none; cursor:pointer; }

  .fb-like{ width:15px; height:15px; }
  .couponcolumn{ flex:1 0 100%; }
  .gallery-container{ flex-direction:column; align-items:center; }
  .gallery-item{ flex:0 1 100%; margin-bottom:20px; }
  .column{ width:100%; }

  .tableresponsive{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Mobile table pattern */
  .shopResponsive, .shopResponsive thead, .shopResponsive tbody, .shopResponsive th, .shopResponsive td, .shopResponsive tr{ display:block; }
  .shopResponsive thead tr{ position:absolute; top:-9999px; left:-9999px; }
  table{ width:100%; border-collapse:collapse; }
  .shopResponsive th, .shopResponsive td{
    border:1px solid #ddd; padding:4px; height:auto; text-align:center; vertical-align:top; white-space:normal; overflow-wrap:break-word;
  }
  .shopResponsive td.header{ height:55px; }  /* fixed typo */
  .shopResponsive td.data{ height:365px; }
  .shopResponsive td.data a{ font-size:20px; display:inline-block; line-height:19px; }
  .shopResponsive th.navbar{ height:400px; text-align:center; }
  .shopResponsive td.data .bottom{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%); overflow-wrap:break-word; line-height:17px; margin-bottom:5px; font-size:20px;
  }
  .shopResponsive td:before{ position:absolute; top:-8px; left:0; width:100%; border-bottom:1px solid #ddd; content:''; }
  .shopResponsive td:last-child:before{ border:none; }

  nav.second{ flex-direction:column; }
  nav.second ul{ width:100%; flex-direction:column; }
}

/* Firefox-specific tweaks for mobile nav */
@-moz-document url-prefix(){
  nav.second{ flex-direction:column !important; }
  nav.second ul{ width:100%; flex-direction:column !important; }
  nav.second ul li{ width:100%; }
  nav.second ul li a{ padding:10px 0; border-bottom:1px solid #fff; }
  nav.second ul ul{ position:static; display:none; width:100%; background-color:#444; }
  .sections{ font-size:20px; }
  .sections ul{ list-style-position:inside; padding:15px; text-align:left; }
  .sections li{ display:block; }
}

/* =========================
   Global e-commerce polish
   ========================= */

/* Card look for content sections */
.sections{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin:18px 0;
  text-align:left;
  font-size:18px;
  word-wrap:break-word;
}
.sections h1{
  font-size:clamp(22px,2.4vw,24px);
  font-weight:400;
  line-height:1.2;
  color:#000;
  margin:4px 0 14px;
}
.sections h2{
  font-size:clamp(18px,1.6vw,22px);
  font-weight:400;
  color:#000;
  margin:0 0 8px;
}
.sections h3{
  font-size:clamp(16px,1.6vw,20px);
  font-weight:400;
  margin:6px 0 10px;
}
.sections a{ color:var(--accent); text-decoration:none; }
.sections a:hover{ text-decoration:underline; }
.sections p,.sections li{ color:#111827; }
hr{ border:0; border-top:1px solid var(--border); margin:14px 0; }

.sections ul{
  list-style-type: disc !important;   /* some resets set 'none' */
  list-style-position: outside;
  margin: 0 0 0 1.25rem;               /* indent bullets */
  padding-left: .75rem;
}
.sections li{
  display: list-item !important;       /* undo any 'display:block' from resets */
  margin: 4px 0;
  color: #111827;                      /* keep your body text tone */
}

/* Make section headings read like real section titles */
.sections h3{
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;                    /* stronger than 400 */
  margin: 8px 0 12px;
}

/* Product layout: keep table, nicer spacing (overrides base) */
.shopResponsive{ width:100%; border-collapse:separate; border-spacing:0; max-width:100%; }
.shopResponsive td, .shopResponsive th{ padding:10px 14px; vertical-align:top; }

/* Desktop column balance for product view */
@media (min-width:900px){
  .shopResponsive td:first-child{ width:44%; }
  .shopResponsive td:last-child{ width:56%; }
}

/* Product image card */
.imgcontainer{
  height:auto; width:100%; max-width:460px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}
.imgre{ width:100%; height:auto; display:block; }

/* Price polish */
.price-line{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; font-size:1.05rem; }
.sections del{ color:var(--muted); }
.sections font[color="red"]{ color:#b91c1c !important; font-weight:700; }
.badge-save{
  display:inline-block; background:#fee2e2; color:#b91c1c;
  padding:4px 8px; border-radius:999px; font-weight:700; font-size:.85rem;
}

/* Modern pill buttons */
.getoffer, .getcoupon, .order-btn{
  background:var(--brand) !important;
  border:1px solid var(--brand) !important;
  color:#fff !important;
  text-shadow:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  font-weight:700 !important;
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:8px;
}
.getoffer:hover, .getcoupon:hover, .order-btn:hover{
  background:var(--brand-dark) !important;
  border-color:var(--brand-dark) !important;
  text-decoration:none !important;
  color:#fff !important;
}

/* Coupon rows (inline-flex blocks) → mini cards */
.sections > div[style*="justify-content: space-between"]{
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  margin:10px 0;
}

/* Related product links (detail page lists only) */
.sections > a[href*="/products/"]:not(.getoffer):not(.getcoupon):not(.order-btn){
  display:block;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  margin:8px 0;
}
.sections > a[href*="/products/"]:not(.getoffer):not(.getcoupon):not(.order-btn):hover{
  border-color:var(--accent);
  background:#f8fafc;
  text-decoration:none;
}

/* Right-rail/side cards */
aside, .latest-savings, .sidebar-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* Small screens */
@media (max-width:640px){
  .sections{ padding:14px; }
  .imgcontainer{ max-width:100%; }
}

/* Pro tip callout */
.sections .pro-tip{
  background: #f8fafc;                 /* very light contrast */
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent); /* slim colored bar */
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  color: #0f172a;
}
.sections .pro-tip::before{
  content: "Pro tip";
  display: block;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: uppercase;
}


    .section{margin:28px 0}
    .section h2{margin:0 0 12px 0;font-size:22px}
    .grid{display:grid;gap:16px}
    .grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
   .sections .card{border:1px solid #e5e5e5;border-radius:12px;padding:14px}
    .card img{width:100%;height:140px;object-fit:cover;border-radius:8px;background:#fafafa}
    .meta{font-size:12px;color:#666}
    .links a{display:inline-block;margin:6px 10px 0 0}
    .pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #ddd;text-decoration:none}
    .list a{display:block;margin:6px 0}
    .code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f5f5f5; padding:2px 6px; border-radius:6px;}


.suggestions{
  position:relative; max-width:800px;
}
.suggestions[hidden]{ display:none; }
.suggestions .menu{
  position:absolute; left:0; right:0; z-index:1050;
  margin-top:6px; border:1px solid #e5e5e5; border-radius:10px; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08); overflow:hidden;
}
.suggestions .item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:#111;
}
.suggestions .item:hover, .suggestions .item[aria-selected="true"]{ background:#f6f6f6; }
.suggestions .badge{ font-size:12px; color:#666; margin-left:auto; }
.suggestions .footer{
  padding:8px 12px; font-size:14px; color:#555; border-top:1px solid #eee; background:#fafafa;
}
.suggestions mark { background:#fffbcc; padding:0 2px; border-radius:2px; }

#home-search .hero { max-width: 1000px; margin: 0 auto; padding: 1rem; }

/* Dark panel */
#home-search .hero-search{
  max-width: 1000px;
  margin: 1.25rem auto 1.75rem;
  background: #0f172a;                 /* dark navy */
  padding: .85rem;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Form layout */
#home-search .hero-search__form{
  display: flex;
  gap: .5rem;
}

#home-search #searchBox{
  flex: 1;
  height: 56px;
  font-size: 1.05rem;

  background: #fff;                    /* white input on dark panel */
  border: 2px solid #2563eb;
  border-radius: 12px;
  padding: 0 1rem;
  outline: none;
}

#home-search #searchBox:focus{
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

#home-search .hero-search__btn{
  height: 56px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 640px){
  #home-search .hero-search__form{ flex-direction: column; }
  #home-search .hero-search__btn{ width: 100%; }
}
/* ===== Trending stores (sharp list) ===== */
/* TRENDING: fix bullets + width + layout */
#home-trending{
  /* let the parent .sections control the width */
  max-width: none;          /* remove the 760px cap */
  width: 100%;
  margin-inline: 0;         /* align with siblings */
}

/* underline under H2 stays */
#home-trending .line-under{ width:11rem; height:3px; margin:.25rem 0 1rem; }

/* layout */
#home-trending .list{
  list-style: none;         /* kill native bullets */
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem,1fr)); /* fill row nicely */
  column-gap: 2rem;
  row-gap: .25rem;
}

/* also guard against UA markers in some browsers */
#home-trending .list li::marker{ content:""; }

#home-trending .list li{
  position: relative;
  padding: .55rem .25rem .55rem 1.25rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  line-height: 1.3;
}

/* single accent dot only */
#home-trending .list li::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  translate: 0 -50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #b30000);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #b30000) 20%, transparent);
}

#home-trending .list a{
  color: var(--link, #1546b0);
  text-decoration: none; font-weight: 500;
}
#home-trending .list a:hover{ text-decoration: underline; color: var(--text, #0f172a); }

/* mobile: single column */
@media (max-width: 720px){
  #home-trending .list{ grid-template-columns: 1fr; }
}

/* category grid */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:12px;
}

.brand-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border, #e5e7eb);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:var(--card-shadow, 0 1px 2px rgba(0,0,0,.04));
}

.brand-card__link{
  font-weight:600;
  line-height:1.3;
}

.brand-card__meta{
  margin-top:8px;
}

.badge{
  position:absolute;
  top:10px;
  right:12px;
  display:inline-block;
  min-width:28px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.85rem;
  line-height:1.6;
  text-align:center;
  background:var(--primary-50, #eef2ff);
  color:var(--primary-700, #4338ca);
  border:1px solid var(--primary-100, #e0e7ff);
}














/* demo page styles */
.dropdownexample {
    width: 700px;
    height: 10px;
    font-size: 15px;
    font-weight: bold;
    margin: 20px auto;
    padding: 15px;
    border-radius: 3px;
}

/* main menu styles */
.dropdownmenu {
    text-align: center;
    width: 100%;
}

.dropdownmenu > span {
    display: inline-block;
    margin: 0 auto;
}

#dropdownnav {
    display: inline;
    text-align: left;
    position: relative;
    list-style-type: none;
}

#dropdownnav > li {
    float: left;
    padding: 0;
    position: relative;
}

#dropdownnav > li > a {
    border: 1px solid transparent;
    color: #000;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 10px;
    position: relative;
    text-decoration: none;
}

#dropdownnav > li > a:hover {
    background-color: #e4ecf4;
    border-color: #999;
}

#dropdownnav > li.selected > a {
    background-color: #fff;
    border-color: #999 #999 #fff;
    z-index: 2;
}

#dropdownnav li div {
    position: relative;
}

#dropdownnav li div div {
    background-color: #fff;
    border: 1px solid #999;
    padding: 12px 0;
    display: none;
    font-size: 0.75em;
    margin: 0;
    position: absolute;
    top: -1px;
    z-index: 1;
    width: 190px;
}

#dropdownnav li div div.wrp2 {
    width: 380px;
}

#dropdownnav .sep {
    left: 190px;
    border-left: 1px solid #e3e3e3;
    bottom: 0;
    height: auto;
    margin: 15px 0;
    position: absolute;
    top: 0;
    width: 1px;
}

#dropdownnav li div ul {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    width: 170px;
    float: left;
    list-style-type: none;
}

#dropdownnav li div ul li {
    margin: 0;
    padding: 0;
}

#dropdownnav li div ul li h3 {
    border-bottom: 1px solid #e3e3e3;
    color: #4f4f4f;
    font-weight: bold;
    margin: 0 5px 4px;
    font-size: 12px;
    padding: 3px 0;
}

#dropdownnav li ul ul {
    padding: 0 0 8px;
}

#dropdownnav li ul ul li {
    margin: 0;
    padding: 0;
}

#dropdownnav li ul ul li a {
    color: #0060a6;
    display: block;
    margin-bottom: 1px;
    padding: 3px 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

#dropdownnav li ul ul li a:hover {
    background-color: #0060a6;
    color: #fff;
}