/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #000;
  background: #fff;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

a { color: #00e; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #f00; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-weight: bold; margin-bottom: 0.5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }

p { margin-bottom: 1em; }

ul, ol { padding-left: 1.5em; }

hr { border: none; border-top: 1px solid #000; margin: 1em 0; }

/* Preloader (opacity handled by layout inline style) */
.preloader * { opacity: 0; }
.transition-preloader * { transition: none !important; }


/* Announcement */
.announcement-message {
  display: none;
  border-bottom: 1px solid #000;
  padding: 0.5em 1em;
  text-align: center;
  font-size: 0.9rem;
  max-width: none;
}
.announcement-message.visible { display: block; }
.announcement-message__close-button {
  background: none; border: none; cursor: pointer; font-size: 0.8rem; margin-left: 1em;
}
.announcement-message__close-icon { width: 10px; height: 10px; vertical-align: middle; }
.announcement-message__scroll-wrapper { overflow: hidden; }
.announcement-message__scroll-content { display: flex; }
.announcement-message__text { white-space: nowrap; padding-right: 2em; }

/* Header */
.header {
  max-width: none;
  background: #fff;
}
.header-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid #000;
}
.header-table td {
  border: 1px solid #000;
  padding: 0.5em 0.75em;
  vertical-align: middle;
}
.header-logo-cell { width: 1px; white-space: nowrap; }
.header-nav-cell { width: 100%; }
td.header-icons-cell { width: 1px; white-space: nowrap; padding: 0.7em 0.2em 0.4em 0.6em; }

.header-logo a {
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.header-logo a:visited { color: #000; }
.header-logo img { display: inline; max-height: 66px; width: auto; }

/* Nav */
.header-navigation { }
.header-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
}
.header-page-link { position: relative; }
.header-page-link > a,
.nav-page { font-size: 1rem; }

.header-nav { position: relative; }
.nav-heading {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  color: #00e;
  text-decoration: underline;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.nav-heading:hover { color: #f00; }
.nav-arrow { width: 10px; height: 10px; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #000;
  z-index: 100;
  min-width: 150px;
  padding: 0.5em 0;
}
.nav-dropdown[aria-hidden="true"] { display: none; }
.dropdown-list { list-style: none; padding: 0; margin: 0; }
.dropdown-list li a { display: block; padding: 0.25em 0.75em; }

/* Header icons (cart, menu, search) */
.header-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.header-icons a,
.header-icons button {
  background: none;
  border: none;
  cursor: pointer;
  color: #00e;
  font-family: inherit;
  font-size: 1rem;
  padding: 0;
  text-decoration: underline;
}
.header-icons a:hover,
.header-icons button:hover { color: #f00; }
.header-icons svg { width: 18px; height: 18px; display: none; }

/* Cart count */
.cart-count { font-size: 0.85rem; }
.cart-value::before { content: "("; }
.cart-value::after { content: ")"; }

#nav_cart {
  display: inline-block;
  position: relative;
  height: 2em;
  text-decoration: none;
}
#nav_cart:hover { text-decoration: none; }
#cart_image {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
#cart_count {
  position: absolute;
  top: 22%;
  left: 64%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.2rem;
  font-family: "Hiragino Sans";
  pointer-events: none;
}

/* Show the open_menu button on small screens; hide on large */
.open_menu button { display: none; }

/* Welcome image (suppress for minimal look) */
.welcome-image { display: none; }

/* Home featured video */
.home-featured-video-section { margin: 1em 0; }

/* Main content */
main {
  max-width: none;
  padding: 0;
}
.content-wrapper {
  max-width: 800px;
  margin: 1em auto;
  padding: 1em;
}

/* Page title */
.page-title { font-size: 1.5rem; margin-bottom: 0.75em; }

/* Custom pages */
.custom-page { margin: 1em 0; }
.custom-page--content p { margin-bottom: 1em; }
.links-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 4px; margin-bottom: 1.5em; }
.links-grid img { display: block; }

/* Background */
body {
  background-color: #ffaa99;
}
.content-wrapper {
  background: #fff;
}

/* Home tagline & featured message */
.home-tagline, .featured-message { margin: 0.5em 0 1em; }

/* Home page - two-column layout */
.content-wrapper--home {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.home-layout {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: calc(100vh - 3em); /* approx header height */
}

.home-photo-col {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid #000;
}

.home-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  max-width: none;
}

.home-content-col {
  padding: 2em;
  background: #fff;
  overflow-y: auto;
}

.home-content-header {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #000;
}

.home-store-name {
  font-size: 2.5rem;
  margin-bottom: 0.2em;
  line-height: 1.1;
}

.home-shop-link {
  display: inline-block;
  margin-top: 0.75em;
  font-size: 1rem;
}

.home-photo-badge {
  position: absolute;
  top: 1em;
  left: 2em;
  width: 138px;
  height: auto;
  max-width: none;
  transform: rotate(12deg);
  pointer-events: none;
}

.product-list--home {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-list--home .product-list-thumb {
  width: calc(50% - 0.5em);
  min-width: 120px;
}

@media (min-width: 1200px) {
  .product-list--home .product-list-thumb {
    width: calc(33.333% - 0.667em);
  }
}

@media (max-width: 680px) {
  .home-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .home-photo-col {
    position: relative;
    height: 70vw;
    max-height: 75vh;
    border-right: none;
    border-bottom: 1px solid #000;
  }
  .home-photo {
    object-position: center top;
    margin-top: -36px;
    height: calc(100% + 36px);
  }

  .home-photo-badge {
    width: 108px;
  }

  .home-content-col {
    padding: 1.25em;
  }
  .home-store-name { font-size: 1.75rem; }
  .product-list--home .product-list-thumb {
    width: calc(50% - 0.5em);
  }
}

/* Featured categories */
.featured-categories { margin-bottom: 1.5em; }
.featured-categories-header { margin-bottom: 0.5em; }

/* Product list grid */
.product-list-container { margin-top: 1em; margin-bottom: 0; }
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-list--center { justify-content: flex-start; }

.product-list-thumb {
  width: calc(33.333% - 1em);
  min-width: 140px;
  flex-shrink: 0;
}

.product-list-link { text-decoration: none; color: #000; }
.product-list-link:visited { color: #000; }
.product-list-link:hover .product-list-thumb-name { text-decoration: underline; color: #00e; }

.product-list-image-container { margin-bottom: 0.25em; border: 1px solid #ccc; }
.product-list-image { width: 100%; height: auto; }

.product-list-thumb-name { font-weight: bold; }
.product-list-thumb-price { color: #000; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.now-pill { display: inline-flex; align-items: center; background: #cc0000;
  color: #fff; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; text-transform: uppercase; flex-shrink: 0;
  font-size: 0.8rem;
  font-family: "Hiragino Sans";
  font-weight: 800;
  border-radius: 50%;
}
.product-list-thumb-status { font-size: 0.85rem; font-style: italic; }
.status-primary { }
.status-secondary { }

/* Category list on products page */
.category-list { margin-bottom: 1em; }
.category-list ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1em; }

/* Pagination */
.pagination {
  margin: 1.5em 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.pagination svg { width: 8px; height: 14px; vertical-align: middle; }
.page-link { display: inline-flex; align-items: center; gap: 0.25em; }
.page-link.disabled { color: #999; pointer-events: none; text-decoration: none; }
.page-numbers { display: flex; gap: 0.25em; }

/* Buttons */
.button {
  display: inline-block;
  padding: 0.3em 0.75em;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
.button:visited { color: #000; }
.button:hover { background: #000; color: #fff; }
.button--checkout { font-weight: bold; }
.button--secondary { }
.button--minimal { border: none; background: none; text-decoration: underline; color: #00e; padding: 0; }
.button--minimal:hover { color: #f00; background: none; }
.button--centered { display: block; width: fit-content; margin: 0.5em auto; }
.all-products-button { display: block; width: fit-content; margin: 1em auto; }

/* Messages */
.message-banner { padding: 0.5em; border: 1px solid #ccc; margin: 0.5em 0; }
.message-banner--no-bg { background: none; border: none; }
.message-banner--centered { text-align: center; }
.message-banner--empty-cart { }
.message-banner--cart { }

.errors { border: 1px solid #f00; padding: 0.5em; margin-bottom: 1em; color: #f00; }

/* Product page */
.product-breadcrumb { margin-bottom: 0.75em; font-size: 0.9rem; }

.product-container {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
  margin: 1em 0;
}

.product-images {
  flex: 1 1 280px;
  max-width: 480px;
}

.product-image { width: 100%; height: auto; border: 1px solid #ccc; }

.zoom-image-container { display: block; }

/* Thumbnails */
.product-thumbnails-buttons-container { margin-top: 0.5em; }
.product-thumbnails--list { list-style: none; padding: 0; display: flex; gap: 0.5em; flex-wrap: wrap; }
.product-thumbnails--item { }
.product-thumbnails--change-slide { background: none; border: 1px solid #ccc; padding: 0; cursor: pointer; }
.product-thumbnails--change-slide img { width: 60px; height: auto; display: block; }
.thumb-scroller { display: none; }

.mobile-buttons-indicator { display: none; }
.overlay-image-counter { font-size: 0.85rem; text-align: center; margin-top: 0.25em; }

.product-detail { flex: 1 1 200px; }
.product-detail__header { margin-bottom: 0.75em; }
.product-detail__title { font-size: 1.5rem; margin-bottom: 0.25em; }
.product-detail__pricing { font-size: 1.1rem; margin-bottom: 0.25em; }
.product-detail__status { font-style: italic; font-size: 0.9rem; }
.product-detail__price-suffix { font-size: 0.9rem; }
.product-detail__description { margin-top: 1em; }

/* Product form */
.product-form { margin: 1em 0; }
.product-selects { margin-bottom: 0.75em; }
.select { position: relative; display: inline-block; margin-bottom: 0.5em; }
.select select {
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #000;
  padding: 0.25em 1.5em 0.25em 0.5em;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 150px;
}
.select svg {
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.product-option-groups { display: flex; flex-direction: column; gap: 0.25em; }

.add-to-cart-button { font-size: 1rem; margin-top: 0.25em; }
#instant-checkout-button { margin-top: 1em; }
.inventory-status-message { font-size: 0.9rem; margin-top: 0.25em; font-style: italic; }
.reset-selection-button-container { margin-top: 0.5em; }

.price-suffix { font-size: 0.85rem; }

/* Related products */
.related-products-container { margin: 2em 0; border-top: 1px solid #000; padding-top: 1em; }
.related-products-header { margin-bottom: 0.5em; }
.related-products-title { font-size: 1.1rem; }
.related-product-list { }

/* Cart page */
.cart-empty { text-align: center; margin: 2em 0; }
.cart-form { margin: 1em 0; }
.cart-columns { display: flex; gap: 2em; flex-wrap: wrap; }
.cart-details { flex: 1 1 300px; }
.cart-items { list-style: none; padding: 0; margin: 0; }
.cart-item {
  display: flex;
  gap: 0.75em;
  align-items: flex-start;
  padding: 0.75em 0;
  border-bottom: 1px solid #ccc;
}
.cart-item-image-holder { flex-shrink: 0; width: 60px; }
.cart-item-image-holder img { width: 60px; height: auto; border: 1px solid #ccc; }
.cart-item-detail { flex: 1; }
.cart-item-detail .product-name { font-weight: bold; }
.cart-item-detail a { text-decoration: none; color: #000; }
.cart-item-detail a:hover .product-name { text-decoration: underline; }
.cart-item-unit-price { font-size: 0.9rem; color: #333; }
.option-name { font-size: 0.9rem; }
.cart-qty { flex-shrink: 0; }
.qty-holder { display: flex; align-items: center; gap: 0.25em; margin-bottom: 0.25em; }
.qty-button { background: none; border: 1px solid #000; cursor: pointer; width: 22px; height: 22px; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.qty-button svg { width: 10px; height: 10px; }
.product-quantity {
  width: 36px;
  text-align: center;
  border: 1px solid #000;
  font-family: inherit;
  font-size: 1rem;
  padding: 0;
}
.cart-remove-item { display: block; font-size: 0.8rem; }
.cart-item-price { flex-shrink: 0; text-align: right; }

.cart-footer-container { flex: 0 0 200px; }
.cart-footer { border-top: 1px solid #000; padding-top: 0.75em; }
.cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 0.75em; font-weight: bold; }
.cart-submit { margin-bottom: 0.5em; }
.cart-footer-secondary { margin-top: 0.5em; }

/* Footer */
.footer {
  margin-top: auto;
  font-size: 0.9rem;
  max-width: none;
  background: #fff;
}
.footer-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid #000;
}
.footer-table td {
  border: 1px solid #000;
  padding: 0.5em 0.75em;
  vertical-align: top;
}
.footer-nav-cell { width: 100%; }
.footer-images-cell { width: 1px; vertical-align: middle; }
.footer__custom_text { margin-bottom: 0.5em; }
.footer__images { display: flex; flex-wrap: wrap; gap: 0.25em; align-items: center; justify-content: flex-end; }
.footer__images img { height: 30px; width: auto; max-width: none; display: inline; }
.footer__pages {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
}
.footer__credit { margin-top: 0.75em; font-size: 0.8rem; }
.footer__credit .credit { }

/* Social icons: show as text links */
.social-icons {
  list-style: none;
  padding: 0;
  margin: 0.5em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75em;
}
.social-icons a { font-size: 0.85rem; }
.social-icons svg { display: none; }

/* Navigation modal */
#navigation-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 1000;
  padding: 1em;
  overflow-y: auto;
}
#navigation-modal[aria-hidden="false"] { display: block; }
.navigation-modal-header { margin-bottom: 1em; }
.close-navigation {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  color: #00e;
  text-decoration: underline;
}
.close-navigation:hover { color: #f00; }
.close-navigation svg { display: none; }
.overlay-page-list { list-style: none; padding: 0; }
.overlay-page-list li { margin-bottom: 0.5em; font-size: 1.25rem; }

/* Search modal */
#search-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 1000;
  padding: 1em;
}
#search-modal[aria-hidden="false"] { display: block; }
.search-modal__content { max-width: 800px; margin: 2em auto; }
.search-modal__wrapper { }
.search-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  color: #00e;
  text-decoration: underline;
  margin-bottom: 1em;
  display: block;
}
.search-modal__close svg { display: none; }
.search-modal__form { display: flex; gap: 0.5em; align-items: flex-end; flex-wrap: wrap; }
.search-modal__label { display: block; margin-bottom: 0.25em; }
.search-modal__input {
  border: 1px solid #000;
  padding: 0.25em 0.5em;
  font-family: inherit;
  font-size: 1rem;
  flex: 1;
}
.search-modal__submit {
  background: #fff;
  border: 1px solid #000;
  padding: 0.25em 0.75em;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.search-modal__submit:hover { background: #000; color: #fff; }
.search-modal__submit-icon { display: none; }

/* Lazy loading */
.lazyload, .blur-up { opacity: 1; }

/* Contact page (generic form styling) */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #000;
  padding: 0.25em 0.5em;
  background: #fff;
  width: 100%;
  max-width: 400px;
}
textarea { min-height: 100px; resize: vertical; }
label { display: block; margin-bottom: 0.25em; font-weight: bold; }
fieldset { border: 1px solid #000; padding: 0.75em; margin-bottom: 1em; }
legend { font-weight: bold; padding: 0 0.25em; }

/* Maintenance page */
.maintenance { text-align: center; padding: 3em 1em; }

/* Video embed */
.video-embed-container { margin: 1em 0; }
.video-embed-container .mejs__container { aspect-ratio: 16/9; width: 100%; }

/* Misc */
.icon-button { background: none; border: none; cursor: pointer; }
.nav-button { background: none; border: none; cursor: pointer; }


/* Responsive: collapse product grid on small screens */
@media (max-width: 500px) {
  .product-list-thumb { width: calc(50% - 0.75em); }
  .product-container { flex-direction: column; }
  .cart-columns { flex-direction: column; }
  .cart-footer-container { flex: none; width: 100%; }
  .open_menu button { display: block; }
}
