@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   PETS PASH - shared look for every inner page that has no design of its own
   (cart, search, special, compare, brands, information, contact, sitemap, wishlist, order / address / profile
   / returns / reward pages, forgotten password, success, 404 ...).
   Loaded by common/header.twig only when the body has the class ps18-inner (see common/header.php for the
   list of routes that keep their own design). Everything is scoped to body.ps18-inner.
═══════════════════════════════════════════════════════════════ */

body.ps18-inner {
  --pi-green: #0f5a2a;
  --pi-green-dark: #0b4220;
  --pi-ink: #0d1f16;
  --pi-text: #2a343d;
  --pi-muted: #6f7a76;
  --pi-line: #e4e0d9;
  --pi-cream: #fdf6ee;
  --pi-mint: #dcecd4;
  --pi-red: #d93636;
  font-family: var(--pp-font, "Poppins", "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--pi-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ═══ PAGE BACKDROP + BREADCRUMB ═══ */
body.ps18-inner main {
  display: block;
  background: linear-gradient(180deg, #fbf1e2 0, #fdf6ee 150px, #fff 330px) no-repeat;
  padding-bottom: 56px;
}
body.ps18-inner main > div > .container,
body.ps18-inner main > .container { padding-top: 6px; }
body.ps18-inner .breadcrumb {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 14px 0 6px;
  margin: 0 0 6px;
  font-size: 14px;
  align-items: center;
}
body.ps18-inner .breadcrumb > li.breadcrumb-item { display: inline-flex; align-items: center; color: var(--pi-text); padding: 0; text-shadow: none; }
body.ps18-inner .breadcrumb > li.breadcrumb-item::after { display: none; } /* stock arrow-shaped crumbs */
body.ps18-inner .breadcrumb > li.breadcrumb-item:first-child a i { display: none; } /* "Home" is an icon in the language file */
body.ps18-inner .breadcrumb > li.breadcrumb-item:first-child a::after { content: "Home"; }
body.ps18-inner .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
body.ps18-inner .breadcrumb-item + .breadcrumb-item::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 9px;
  color: #55606a;
  padding: 0 12px;
  float: none;
}
body.ps18-inner .breadcrumb-item a { color: var(--pi-text) !important; text-decoration: none; }
body.ps18-inner .breadcrumb-item a:hover { color: var(--pi-green) !important; }
body.ps18-inner .breadcrumb-item.active { color: var(--pi-ink); font-weight: 500; }

/* ═══ HEADINGS ═══ */
body.ps18-inner h1, body.ps18-inner h2, body.ps18-inner h3, body.ps18-inner h4, body.ps18-inner h5, body.ps18-inner h6,
body.ps18-inner legend {
  font-family: var(--pp-font, "Poppins", "Segoe UI", sans-serif);
  color: var(--pi-ink);
  letter-spacing: -.1px;
}
body.ps18-inner #content h1, body.ps18-inner .container > h1 {
  font-size: 32px; line-height: 1.2; font-weight: 700; margin: 8px 0 22px; position: relative; padding-bottom: 14px;
}
body.ps18-inner #content h1::after, body.ps18-inner .container > h1::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--pi-green);
}
body.ps18-inner #content h2 { font-size: 24px; line-height: 1.3; font-weight: 600; margin: 24px 0 14px; }
body.ps18-inner #content h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 20px 0 12px; }
body.ps18-inner #content h4 { font-size: 17px; font-weight: 600; }
body.ps18-inner legend { font-size: 20px; font-weight: 600; padding: 0 0 10px; margin: 8px 0 18px; border-bottom: 1px solid var(--pi-line); }
body.ps18-inner a { color: var(--pi-green); }
body.ps18-inner #content a:not(.btn):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.pp-card a):hover { color: var(--pi-green-dark); }
body.ps18-inner hr { border-color: var(--pi-line); opacity: 1; }

/* ═══ CONTENT CARD ═══ */
body.ps18-inner #content {
  background: #fff;
  border: 1px solid #ece8e2;
  border-radius: 16px;
  padding: 26px 30px 30px;
  box-shadow: 0 10px 34px rgba(120, 70, 20, .06);
  min-width: 0;
  margin-left: 12px; /* cancels the Bootstrap column gutter so the card lines up with the breadcrumb and header */
}
body.ps18-inner #content:last-child { margin-right: 12px; }
body.ps18-inner #content > :last-child { margin-bottom: 0; }
body.ps18-inner #content p { line-height: 1.75; }
body.ps18-inner #information-information #content { max-width: 1040px; margin-left: auto; margin-right: auto; }
body.ps18-inner #information-information #content img { max-width: 100%; height: auto; border-radius: 10px; }
body.ps18-inner .row > #column-left, body.ps18-inner .row > #column-right { min-width: 0; }

/* ═══ SIDE MENUS (account list etc.) ═══ */
body.ps18-inner #column-left, body.ps18-inner #column-right { flex: 0 0 auto; width: 262px; }
body.ps18-inner .list-group {
  background: #fff; border: 1px solid #e7eae8; border-radius: 14px; padding: 10px; gap: 2px;
  box-shadow: 0 10px 34px rgba(120, 70, 20, .05);
}
body.ps18-inner .list-group-item {
  border: 0 !important; border-radius: 8px !important; padding: 9px 14px; font-size: 14.5px; color: var(--pi-text) !important; background: transparent !important;
  transition: background .15s, color .15s;
}
body.ps18-inner .list-group-item:hover:not(.active) { background: #eef7f0 !important; color: var(--pi-green) !important; }
body.ps18-inner .list-group-item.active { background: var(--pi-green) !important; color: #fff !important; font-weight: 500; }

/* ═══ FORMS ═══ */
body.ps18-inner .form-control, body.ps18-inner .form-select, body.ps18-inner textarea {
  border: 1px solid #dfe3e1; border-radius: 8px; min-height: 46px; padding: 9px 14px; font-size: 14.5px; color: var(--pi-ink); background-color: #fff; box-shadow: none;
}
body.ps18-inner textarea.form-control { min-height: 120px; }
body.ps18-inner .form-control:focus, body.ps18-inner .form-select:focus {
  border-color: var(--pi-green); box-shadow: 0 0 0 3px rgba(15, 90, 42, .12);
}
body.ps18-inner .form-control::placeholder { color: #8b9590; }
body.ps18-inner .form-control.is-invalid, body.ps18-inner .form-select.is-invalid { border-color: var(--pi-red); background-image: none; }
body.ps18-inner .invalid-feedback { color: var(--pi-red); font-size: 13px; }
body.ps18-inner .col-form-label, body.ps18-inner label { font-weight: 500; color: var(--pi-ink); }
body.ps18-inner .form-check-label { font-weight: 400; }
body.ps18-inner .required .col-form-label::before, body.ps18-inner .required > label::before { color: var(--pi-red); }
body.ps18-inner .form-check-input:checked { background-color: var(--pi-green); border-color: var(--pi-green); }
body.ps18-inner .form-check-input:focus { border-color: var(--pi-green); box-shadow: 0 0 0 3px rgba(15, 90, 42, .15); }
body.ps18-inner .form-switch .form-check-input:checked { background-color: var(--pi-green); }
body.ps18-inner .input-group-text { background: var(--pi-cream); border-color: #dfe3e1; }
body.ps18-inner .text-danger { color: var(--pi-red) !important; }
body.ps18-inner .form-text { color: var(--pi-muted); }

/* ═══ BUTTONS ═══ */
body.ps18-inner .btn { border-radius: 10px; font-family: inherit; font-weight: 500; font-size: 14.5px; padding: 9px 20px; transition: filter .15s, box-shadow .15s, background .15s, border-color .15s; }
body.ps18-inner .btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
body.ps18-inner .btn-lg { padding: 12px 28px; font-size: 16px; }
body.ps18-inner .btn-primary { box-shadow: 0 6px 14px rgba(15, 90, 42, .2); }
body.ps18-inner .btn-primary:hover { filter: brightness(1.1); }
body.ps18-inner .btn-light, body.ps18-inner .btn-default, body.ps18-inner .btn-secondary {
  background: #fff !important; border: 1px solid #d9dcda !important; color: var(--pi-ink) !important;
}
body.ps18-inner .btn-light:hover, body.ps18-inner .btn-default:hover, body.ps18-inner .btn-secondary:hover { border-color: var(--pi-green) !important; color: var(--pi-green) !important; }
body.ps18-inner .btn-info, body.ps18-inner .btn-success, body.ps18-inner .btn-outline-primary {
  background: #e3f5e8 !important; border: 1px solid #cfe9d6 !important; color: var(--pi-green) !important; box-shadow: none;
}
body.ps18-inner .btn-info:hover, body.ps18-inner .btn-success:hover, body.ps18-inner .btn-outline-primary:hover { background: var(--pi-green) !important; color: #fff !important; }
body.ps18-inner .btn-danger { background: #fde8ea !important; border: 1px solid #f7cfd3 !important; color: #c42a37 !important; box-shadow: none; }
body.ps18-inner .btn-danger:hover { background: #c42a37 !important; color: #fff !important; }
body.ps18-inner .btn-warning { background: #fdeedd !important; border: 1px solid #f5dcbc !important; color: #b86a1d !important; }
body.ps18-inner .btn-link { color: var(--pi-green); }
body.ps18-inner .btn-close:focus { box-shadow: 0 0 0 3px rgba(15, 90, 42, .15); }
body.ps18-inner .buttons, body.ps18-inner .text-end:has(> .btn) { margin-top: 18px; }

/* ═══ TABLES ═══ */
body.ps18-inner .table-responsive { border: 1px solid #ece8e2; border-radius: 12px; }
body.ps18-inner .table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--pi-text); border-color: #f1efeb; font-size: 14px; }
body.ps18-inner .table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: #f1efeb; vertical-align: middle; }
body.ps18-inner .table-bordered > :not(caption) > * { border-width: 0 0 1px; }
body.ps18-inner .table-bordered > :not(caption) > * > * { border-width: 0; }
body.ps18-inner .table thead td, body.ps18-inner .table thead th, body.ps18-inner .table th {
  background: #f4f4f2; color: #515b64; font-size: 13px; font-weight: 500; border-bottom: 0;
}
body.ps18-inner .table thead th:first-child, body.ps18-inner .table thead td:first-child { border-radius: 8px 0 0 8px; }
body.ps18-inner .table thead th:last-child, body.ps18-inner .table thead td:last-child { border-radius: 0 8px 8px 0; }
body.ps18-inner .table tbody tr:hover > * { background-color: #fdf9f6; }
body.ps18-inner .table tfoot td, body.ps18-inner .table tfoot th { background: transparent; font-weight: 500; color: var(--pi-ink); }
body.ps18-inner .table img.img-thumbnail { border: 1px solid #f0e6d6; border-radius: 8px; padding: 2px; background: #fff7ec; }
body.ps18-inner .table a:not(.btn) { color: var(--pi-ink); font-weight: 500; }
body.ps18-inner .table a:not(.btn):hover { color: var(--pi-green); }

/* ═══ ALERTS / BADGES / TABS / PAGINATION ═══ */
body.ps18-inner .alert { border: 0; border-radius: 10px; font-size: 14px; padding: 12px 16px; }
body.ps18-inner .alert-success { background: #e6f4ea; color: #14532d; }
body.ps18-inner .alert-danger { background: #fdeaea; color: #8a1c1c; }
body.ps18-inner .alert-warning { background: #fdf3e0; color: #7a5413; }
body.ps18-inner .alert-info { background: #e8f1f7; color: #1d4a68; }
body.ps18-inner .badge.bg-primary, body.ps18-inner .bg-primary { background-color: var(--pi-green) !important; }
body.ps18-inner .nav-tabs { border-bottom: 1px solid var(--pi-line); gap: 4px; }
body.ps18-inner .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; color: var(--pi-text); font-weight: 500; padding: 10px 16px; border-radius: 0; }
body.ps18-inner .nav-tabs .nav-link:hover { color: var(--pi-green); }
body.ps18-inner .nav-tabs .nav-link.active { color: var(--pi-green); border-bottom-color: var(--pi-green); background: transparent; }
body.ps18-inner .page-link { color: var(--pi-green); border-color: #e4e0d9; border-radius: 8px !important; margin: 0 2px; }
body.ps18-inner .page-link:hover { background: #eef7f0; }
body.ps18-inner .page-item.active .page-link { background: var(--pi-green); border-color: var(--pi-green); color: #fff; }
body.ps18-inner .accordion-item { border: 1px solid #ece8e2; border-radius: 12px !important; overflow: hidden; margin-bottom: 10px; }
body.ps18-inner .accordion-button { font-weight: 500; color: var(--pi-ink); background: #fff; }
body.ps18-inner .accordion-button:not(.collapsed) { background: var(--pi-cream); color: var(--pi-green); box-shadow: none; }
body.ps18-inner .accordion-button:focus { box-shadow: 0 0 0 3px rgba(15, 90, 42, .12); }
body.ps18-inner .card, body.ps18-inner .well { border: 1px solid #ece8e2; border-radius: 14px; }
body.ps18-inner .border.rounded, body.ps18-inner .border.rounded-3 { border-color: #ece8e2 !important; border-radius: 14px !important; background: #fffdfb; }
body.ps18-inner .dropdown-menu { border: 1px solid #ece8e2; border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 42, 24, .14); }
body.ps18-inner .dropdown-item:hover { background: #eef7f0; color: var(--pi-green); }

/* ═══ PRODUCT LISTINGS ON INNER PAGES (search / special / brands / compare / wishlist) ═══ */
/* the product-card grid used by search / special / brand pages (same card as the category page) */
body.ps18-inner #product-list {
  --bs-gutter-x: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
body.ps18-inner #product-list > * { width: 100% !important; max-width: none; flex: none; padding: 0; margin: 0 !important; }
body.ps18-inner #product-list.product-list { grid-template-columns: 1fr; }
body.ps18-inner #product-list.product-list .pp-card { flex-direction: row; align-items: center; gap: 20px; padding: 14px 18px; }
body.ps18-inner #product-list.product-list .pp-card-img { width: 150px; height: 120px; flex-shrink: 0; margin: 0; }
body.ps18-inner #product-list.product-list .pp-card-body { align-self: stretch; justify-content: center; }
body.ps18-inner #product-list.product-list .pp-card-actions { margin: 0; width: 230px; flex-shrink: 0; }
body.ps18-inner #product-list.product-list .pp-name { min-height: 0; font-size: 15px; }
body.ps18-inner #display-control { align-items: center; row-gap: 10px; margin-bottom: 18px; }
body.ps18-inner #display-control .btn-group .btn { background: #fff !important; border: 1px solid #d9dcda !important; color: var(--pi-text) !important; padding: 9px 14px; }
body.ps18-inner #display-control .btn-group .btn.active { background: var(--pi-green) !important; border-color: var(--pi-green) !important; color: #fff !important; }
body.ps18-inner #display-control .input-group-text { font-size: 13px; color: var(--pi-muted); }
@media (max-width: 575px) {
  body.ps18-inner #product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.ps18-inner #product-list.product-list .pp-card { flex-direction: column; align-items: stretch; }
  body.ps18-inner #product-list.product-list .pp-card-actions { width: auto; }
}
body.ps18-inner #content .price-new, body.ps18-inner #content .price { color: var(--pi-ink); font-weight: 700; }
body.ps18-inner #content .price-old { color: #8c979d; }
body.ps18-inner .rating .fa-star, body.ps18-inner .fa-star.text-warning { color: #f5a623; }
body.ps18-inner .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ═══ SPECIAL PAGES ═══ */
/* success / 404 / maintenance-like pages: a single centred message */
body.ps18-inner #common-success #content, body.ps18-inner #error-not-found #content { text-align: center; padding: 56px 30px 52px; }
body.ps18-inner #common-success #content h1, body.ps18-inner #error-not-found #content h1 { padding-bottom: 14px; }
body.ps18-inner #common-success #content h1::after, body.ps18-inner #error-not-found #content h1::after { left: 50%; margin-left: -28px; }
body.ps18-inner #common-success #content::before, body.ps18-inner #error-not-found #content::before {
  content: "\f1b0"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900;
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%;
  background: #dcebd3; color: var(--pi-green); font-size: 34px;
}
body.ps18-inner #error-not-found #content::before { content: "\f128"; background: #fdeedd; color: #d98944; }
body.ps18-inner #common-success #content .text-end, body.ps18-inner #error-not-found #content .text-end { text-align: center !important; }

/* cart page */
body.ps18-inner #checkout-cart #content { padding-bottom: 26px; }
body.ps18-inner #checkout-cart .table-responsive { border-radius: 12px; }
body.ps18-inner #checkout-cart .input-group .form-control { min-height: 40px; }
body.ps18-inner #checkout-cart .input-group .btn { border-radius: 0 8px 8px 0; }
body.ps18-inner #checkout-cart .input-group > .form-control:not(:last-child) { border-radius: 8px 0 0 8px; }

/* contact: map / location block */
body.ps18-inner #information-contact .border { padding: 18px 20px; }
body.ps18-inner #information-contact .row .col { min-width: 0; }

/* sitemap */
body.ps18-inner #information-sitemap ul { padding-left: 18px; }
body.ps18-inner #information-sitemap li { margin: 4px 0; }

/* ═══ QUICK-VIEW POPUP + MISC SHARED BITS ═══ */
body.ps18v2 #ps18-qv-modal .modal-content { border-radius: 16px; overflow: hidden; border: 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 991px) {
  body.ps18-inner #column-left, body.ps18-inner #column-right { width: 100%; }
  body.ps18-inner #content { padding: 20px 18px 24px; border-radius: 14px; }
  body.ps18-inner #content h1 { font-size: 26px; }
}
@media (max-width: 575px) {
  body.ps18-inner #content { padding: 18px 14px 20px; }
  body.ps18-inner .table > :not(caption) > * > * { padding: 10px; }
}

/* old price next to a special price */
body.ps18-inner .price-old, body.ps18-inner s, body.ps18-inner del { font-weight: 400; color: #8c979d; margin-left: 6px; }
body.ps18-inner .price-new { color: var(--pi-ink); font-weight: 700; }