/* Basic Reset & Body Styling */
img {
    max-width: 100%;
}

.video-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;   /* 320x240 */
  position: relative;
}
.video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;    /* shows entire video without distortion */
}

body {
    margin: 0; /* Ensures no default body margin */
    padding: 0; /* Ensures no default body padding */
    font-family: Arial, sans-serif;
    background-color: #000000; /* White background for the whole page */
    color: #000000;
    line-height: 1.6;
}

/* Header Styling */
.site-header {
    background-color: #000000; /* Dark background for header */
    color: #fff;
    text-align: center;
}
#top-banner-container {
  min-height: 150px;
}

/* moves home button to right on cell phones. Target the first <a> tag (which contains homecell.jpg) directly after the button */
.mobile-search-form a:nth-of-type(1) { /* Or just .mobile-search-form a:first-of-type */
    margin-left: 10px; /* Adjust this value (e.g., 10px, 20px) to get your desired spacing */
}

/* Main Layout Container (Flexbox for side-by-side) */
.main-layout-container {
    display: flex; /* Enable Flexbox for its children */
    flex-direction: column; /* Default to column stacking on small screens */
    padding: 0; /* ALL PADDING REMOVED HERE for edge-to-edge layout */
    gap: 0; /* Space between left menu and product area */
}

/* Left Menu Styling */
.left-menu {
    background-color: #eee; /* Light background for menu */
    padding: 0px; /* Keep internal padding for menu list items */
    border: 1px solid #000000;
    flex-shrink: 0; /* Prevent menu from shrinking too much */
    width: 100%; /* Full width on mobile */
    box-sizing: border-box; /* Include padding/border in width */
}

.left-menu h2 {
    margin-top: 0;
    color: #000060;
}

.left-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.left-menu li a {
    display: block;
    padding: 2px 0;
    color: #000;
    text-decoration: none;
    border-bottom: 1px dashed #ccc;
}

.left-menu li a:hover {
    background-color: #ddd;
}

.left-menu a:link,
.left-menu a:visited {
  color: black;
  text-decoration: none; /* optional: removes underline */
  font-weight: bold;     /* optional: makes it stand out */
  font-size: 1em;
}

.left-menu a:hover {
  color: #666;            /* optional: subtle hover effect */
  text-decoration: underline; /* optional: hover feedback */
}

.left-menu table {
    border-collapse: collapse;
    width: 100%;
}

.left-menu td {
    padding: 1px 0;  /* Reduce vertical padding */
    margin: 0;
    line-height: 1.2; /* Tighter line spacing if needed */
}

/* Product Content Area */
.product-content {
    background-color: #ebebeb; /* Slightly off-white for product area */
    padding: 0px; /* Keep internal padding for the content inside */
    border: 0px solid #ccc;
    flex-grow: 1; /* Allow product area to take up available space */
}

.product-image {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
    margin-bottom: 20px;
}

/* --- Responsive Design with Media Queries --- */

/* For Tablets and Laptops (e.g., screens wider than 768px) */
@media (min-width: 768px) {
  #top-banner-container {
    /* Height for laptop banners (150px) */
    min-height: 150px;
  }
    #top-strip {
        min-height: 220px; 
    }
	
	/* Main layout container fixes */
.main-layout-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  align-items: flex-start; /* Align items to the top */
}

    .left-menu {
        width: 200px; /* Fixed width for menu on larger screens */
        min-width: 200px; /* Ensure it doesn't shrink below this */
    }
}

/* For very large screens (e.g., desktops, wider than 1024px) */
@media (min-width: 1024px) {
    .main-layout-container {
        /* REMOVED: max-width: 1200px; and margin: 0 auto; */
        /* This allows the main content area to stretch full width on large screens */
    }
}

/* Hide mobile menu by default */
#mobile-menu-toggle, #mobile-menu {
  display: none;
}

/* Show button on mobile only */
@media (max-width: 899px), (orientation: portrait) {
  #mobile-menu-toggle {
    display: block;
    position: fixed;
    top: 50px;
    left: 0px;
    z-index: 1000;
    background-color: #000;
    color: #fff;
    padding: 0px 0px;
    border: none;
    font-size: 28px;
    cursor: pointer;
    border-radius: 4px;
  }

  #mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    left: -300px;
    width: 200px;
    height: 100%;
    background-color: #eee;
    overflow-y: auto;
    z-index: 999;
    padding: 20px;
    transition: left 0.3s ease;
    border-right: 2px solid #000;
  }

  #mobile-menu.show {
    left: 0;
  }

  #mobile-menu a {
    display: block;
    margin: 10px 0;
    color: #000;
    text-decoration: none;
    font-weight: bold;
  }

  #mobile-menu a:hover {
    color: #666;
  }
}

#mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  z-index: 900;
  display: none;
}

/* Show the overlay only when menu is active */
#mobile-overlay.show {
  display: block;
}

/* Ensure the product content area scales properly */
.product-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* Prevent tables/images/videos from stretching beyond screen */
.product-content table,
.product-content img,
.product-content video {
  max-width: 100%;
  box-sizing: border-box;
}

  .paypal-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  section[aria-labelledby="about"] {
    width:90%;
    margin-inline: auto;
    padding-inline: 1rem;
	text-align: center;
  }
  /* Optional: center just the heading for readability */
  #about { text-align: center; }

	/* headers and cat page controls */
#catpagesheader {
  color: #000;
  text-align: center;
  font-size: 2em;
}

/* Subcategory Grid Wrapper */
.subcategory-grid-wrapper {
  background-color: #ebebeb;
  max-width: 95%;
  margin: 0 auto;
}

/* Subcategory Grid Layout */
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  box-sizing: border-box;
}

.subcategory-grid a {
  background-color: #fff;
  text-align: center;
  padding: 0.5em;
  text-decoration: none;
  color: #000;
  border: 3px solid #000;
}

.subcategory-grid img {
   width: 95%;                    /* fill ~90% of the cell’s width */
  max-width: 400px;
  height: auto;
  border: 0;
}

.subcategory-grid h2 {
  margin: 0.5em 0;
  font-size: 1.2em;
  color: #000;
}

/* 4-column layout on 900px+ screens */
@media (min-width: 900px) {
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
  gap: 0;
  box-sizing: border-box;
}
}


/* Fixed image height for landscape view on 900px+ screens */
/*@media screen and (min-width: 900px) and (orientation: landscape) {
  .subcategory-grid img {
    height: 300px;
    object-fit: cover;
  }
}*/

.tight-image-wrapper {
  display: inline-block;      /* Shrinks to image size */
  max-width: 100%;            /* Allows responsiveness */
  margin: 0;                  /* Remove default spacing */
  padding: 0;
  line-height: 0;             /* Kill vertical whitespace caused by line height */
}

.tight-image-wrapper img {
  width: 80%;                 /* Or 100% if full width desired */
  height: auto;               /* Maintain aspect ratio */
  display: block;             /* Remove extra space below image */
  margin: 0 auto;             /* Center the image if needed */
}

.sister-site-promo {
 margin-top: 2rem; /* or px if you prefer, like 32px */
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

.sister-site-promo a {
  color: #00ccff; /* or your preferred link color */
  text-decoration: none;
  font-weight: bold;
}

.sister-site-promo a:hover {
  text-decoration: underline;
}

.sister-site-banner {
  width: 300px;
  margin-top: 0.5rem;
}







/* cart pages*/
/* Image: 300px wide on phones, 500px on tablets/desktops */
#paypalreq {
  width: 250px;
  height: auto;     /* keep aspect ratio */
  max-width: 100%;  /* prevent overflow in very narrow containers */
}

/* Laptops & up */
input[name="addToCart"] {
  width: 172px;
  height: auto;     /* keep aspect ratio */
  max-width: 100%;  /* avoid overflow in narrow containers */
}

@media (min-width: 768px) {
  #paypalreq {
    width: 500px;
  }
}

/* Single-cell info table */
.carttable { 
  width: 100%;
  border-collapse: collapse;
}
/* Apply only when the regular (desktop/tablet-landscape) menu is in use */
@media (min-width: 900px) and (orientation: landscape) {
  .carttable {
    min-height: 600px;
  }
}

.carttable td {
text-align: center;
vertical-align: top;
}




/*  product pages */
/* Centered UL with inside bullets */
.centered-list {
  text-align: center;
  list-style-position: inside;
}

/* Outer product table */
.product-table-outer {
  width: 100%;
  border: 2px solid #000;
  background-color: #000;
  border-collapse: collapse;
}

.product-table-outer td {
  text-align: center;
  background-color: #000;
  border: 2px solid #000;
}

.product-table-outer h1 {
  color: #fff;
  margin: 0;
}

/* Inner product table */
.product-table-inner {
  font-family: "Times New Roman", Times, serif;  /* font face */
 font-size: 20px;      /* ≈ <font size="4"> */
 font-weight: 500;
  color: #000;
  width: 100%;
  border: 2px solid #000;
  background-color: #fff;
  border-collapse: collapse;
  margin-top: 10px;
}

.product-table-inner td {
  text-align: center;
  background-color: #fff;
  border: 2px solid #000;
  padding: 10px;
}

/* Center the furniture selection table */
.product-table-inner,
.product-table-outer {
  margin-left: auto;
  margin-right: auto;
}

img#but1,
img[name="but1"] {
  display: block;
  object-fit: contain;  /* no distortion; may letterbox if aspect doesn’t match */
}

.furn-sel-table { padding: 0; border: 1px solid #000; height: 420px;}
.furn-sel-table td {
  text-align: center;
  border: 1px solid #000;
  padding: 0;
}  

/* buttons for furniture selector */
.furn-sel-but { height: 20px; border: 0; }          /* phones */
@media (min-width: 768px) { .furn-sel-but { height: 40px; } }  /* tablets & up */

/* preview for furniture selector */
.furn-sel-pre { height: 80px; border: 0; }          /* phones */
@media (min-width: 768px) { .furn-sel-pre { height: 150px; } }  /* tablets & up */

/* buttons for but1 */
.lilbut1 { height: 40px; border: 0; }          /* phones */
@media (min-width: 768px) { .lilbut1 { height: 80px; }

 }  /* tablets & up */

/* 1) Cell (<=767px) */
@media (max-width: 767px) {
  img#but1, img[name="but1"] { height: 300px; }
.furn-sel-table { padding: 0; border: 1px solid #000; height: auto;}
}

/* 2) Tablet — Portrait (768–1023px & portrait) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  img#but1, img[name="but1"] { height: 500px; }
.furn-sel-table { padding: 0; border: 1px solid #000; height: 410px; width: 450px;}
}

/* 3) Tablet — Landscape (768–1023px & landscape) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  img#but1, img[name="but1"] { height: 400px; }
.furn-sel-table { padding: 0; border: 1px solid #000; height: 410px; width: 450px;}
}

/* 4) Laptop/Desktop (>=1024px) */
@media (min-width: 1024px) {
  img#but1, img[name="but1"] { height: 500px; }
.furn-sel-table { padding: 0; border: 1px solid #000; height: 410px; width: 450px;}
}


/* Single-cell info table */
.table-info { 
  width: 100%;
  border-collapse: collapse;
}

.table-info td {
  /* top/bottom 12px, left/right ~0.5in */
  padding: 50px 50px; /* 0.5in ≈ 48px */
}

/* Narrow screens: reduce side padding */
@media (max-width: 480px) {
  .table-info td {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Center the large preview image (but1) */
img#but1,
img[name="but1"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Center the furniture selection table */
table.furn-sel-table {
  margin-left: auto;
  margin-right: auto;
  display: table; /* ensures auto margins take effect across browsers */
}

/* Make sure the cells inside those inner tables are centered */
.furn-sel-table table td {
  text-align: center;
  vertical-align: top;
}

/* Center the inner selector tables and force them onto their own line */
.sel-options-table {
  display: table;           /* block-level table => starts on a new line */
  margin: 0 auto 10px;      /* centered, with a little spacing below */
  width: auto;              /* shrink to content width */
  border-collapse: separate;
}

.sel-options-table td {
  text-align: center;
  vertical-align: top;
}


/* Selector headings inside the product table */
.product-table-inner h3.sel-heading,
.furn-sel-table h3.sel-heading {
  font-family: inherit;   /* uses the table’s Times New Roman if set */
  font-weight: 700;       /* bold, like your old <b> */
  font-size: 22px;        /* tune as desired (24px if you want bigger) */
  line-height: 1.2;
  margin: 8px 0 10px;     /* tight spacing so it fits nicely in a cell */
  text-align: center;
}