/* Pets-Dream.nl — osCommerce catalog recovery stylesheet */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap");

:root {
  --pd-primary: #00b8d9;
  --pd-primary-dark: #0093ae;
  --pd-accent: #ffbe00;
  --pd-text: #14142b;
  --pd-text-muted: #6e7191;
  --pd-bg: #ffffff;
  --pd-bg-soft: #f7f7fc;
  --pd-border: #d9dbe9;
  --pd-radius: 10px;
  --pd-font-body: "Source Sans 3", system-ui, sans-serif;
  --pd-font-title: "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--pd-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pd-text);
  background: var(--pd-bg-soft);
}

a {
  color: var(--pd-primary-dark);
  text-decoration: none;
}

a:hover {
  color: var(--pd-primary);
  text-decoration: underline;
}

table { border-collapse: collapse; }

/* hide wayback / legacy scripts noise */
script[id="wayback-polyfill"] + meta ~ * { /* noop */ }

/* --- header --- */
tr.header td {
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-dark));
  padding: 24px 20px;
  text-align: center;
}

tr.header td::before {
  content: "Pets Dream";
  display: block;
  font-family: var(--pd-font-title);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

tr.headerNavigation {
  background: #14142b;
}

tr.headerNavigation td {
  padding: 10px 20px !important;
}

tr.headerNavigation a.headerNavigation {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tr.headerNavigation a.headerNavigation:hover {
  color: var(--pd-accent);
  text-decoration: none;
}

/* --- layout tables → flex --- */
body > table[width="100%"]:nth-of-type(2),
body > table[width="100%"]:nth-of-type(3) {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  width: 100% !important;
}

body > table[width="100%"]:nth-of-type(3) {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px 20px 48px;
  background: transparent;
}

body > table[width="100%"]:nth-of-type(3) > tbody,
body > table[width="100%"]:nth-of-type(3) > tbody > tr {
  display: contents;
}

body > table[width="100%"]:nth-of-type(3) td[width="125"],
body > table[width="100%"]:nth-of-type(3) td[valign="top"]:first-child {
  display: block;
  width: 260px !important;
  flex: 0 0 260px;
}

body > table[width="100%"]:nth-of-type(3) td[valign="top"]:last-child,
body > table[width="100%"]:nth-of-type(3) td:not([width="125"]) {
  flex: 1 1 0;
  min-width: 0;
}

/* --- sidebar boxes --- */
.infoBoxHeading {
  background: var(--pd-primary) !important;
  color: #fff !important;
  font-family: var(--pd-font-title);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px !important;
  border-radius: var(--pd-radius) var(--pd-radius) 0 0;
}

.infoBox {
  background: var(--pd-bg);
  border: 1px solid var(--pd-border);
  border-radius: 0 0 var(--pd-radius) var(--pd-radius);
  margin-bottom: 20px;
  overflow: hidden;
}

.infoBoxContents {
  padding: 12px 14px !important;
}

.boxText {
  font-size: 14px;
  line-height: 1.8;
}

.boxText a {
  display: inline-block;
  padding: 2px 0;
  font-weight: 500;
}

.boxText a:hover {
  text-decoration: none;
  color: var(--pd-primary);
}

/* search form */
form[name="quick_find"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

form[name="quick_find"] input[type="text"] {
  width: 100% !important;
  padding: 10px 12px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  font-family: inherit;
  font-size: 14px;
}

form[name="quick_find"] input[type="image"],
form[name="quick_find"] button {
  padding: 10px 16px;
  background: var(--pd-primary);
  color: #fff;
  border: 0;
  border-radius: var(--pd-radius);
  cursor: pointer;
  font-weight: 600;
}

/* --- main content --- */
.mainContent,
.contentText,
.pageHeading,
h1, h2, h3 {
  font-family: var(--pd-font-title);
  color: var(--pd-text);
}

.pageHeading {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--pd-accent);
}

.productListing-heading,
td.smallText strong {
  font-family: var(--pd-font-title);
}

.productListing-data,
.productListing-odd,
.productListing-even {
  background: var(--pd-bg);
  border-bottom: 1px solid var(--pd-border);
}

.productListing-data:hover,
.productListing-odd:hover,
.productListing-even:hover {
  background: #eefbfd;
}

/* --- footer --- */
tr.footer,
.footer {
  background: #14142b;
  color: rgba(255, 255, 255, 0.75);
}

tr.footer td,
.footer td {
  padding: 24px 20px !important;
  text-align: center;
  font-size: 13px;
}

tr.footer a,
.footer a {
  color: rgba(255, 255, 255, 0.9);
}

/* --- Magento shop supplement --- */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  background: var(--pd-bg);
  box-shadow: 0 4px 24px rgba(20, 20, 43, 0.06);
}

.page {
  padding: 0 20px 40px;
}

.header-container,
.footer-container {
  background: #14142b;
  color: #fff;
}

.header .logo {
  padding: 20px;
}

.header .logo strong {
  font-family: var(--pd-font-title);
  font-size: 1.75rem;
  color: var(--pd-primary);
}

.nav-container {
  background: var(--pd-primary);
}

#nav li.level0 > a {
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
}

#nav li.level0 > a:hover {
  background: rgba(255, 255, 255, 0.15);
}

.products-grid li.item {
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 12px;
  background: var(--pd-bg);
  transition: box-shadow 0.2s;
}

.products-grid li.item:hover {
  box-shadow: 0 8px 24px rgba(20, 20, 43, 0.08);
}

.products-grid .product-name a {
  font-family: var(--pd-font-title);
  font-weight: 600;
  color: var(--pd-text);
}

.price-box .price {
  color: var(--pd-primary-dark);
  font-weight: 700;
}

.btn-cart,
button.button {
  background: var(--pd-primary) !important;
  border-color: var(--pd-primary) !important;
  border-radius: 999px !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  body > table[width="100%"]:nth-of-type(3) {
    flex-direction: column;
  }

  body > table[width="100%"]:nth-of-type(3) td[width="125"],
  body > table[width="100%"]:nth-of-type(3) td[valign="top"]:first-child {
    width: 100% !important;
    flex: 1 1 100%;
  }
}