/* CSS RESET */

* {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none;
}

  *:before, *:after {
    box-sizing: border-box;
  }

html {
  margin: 0 !important;
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
}

ol, ul {
  list-style: none;
}

a img {
  border: none;
}

a:active {
  outline: none;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  margin: 0;
  border: 0;
  padding: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea, button, select {
  border-radius: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #eee;
  -webkit-transition-delay: 99999s;
}

script {
  display: none !important;
}


/* FONT FACES */

@font-face {
  font-family: 'pacific';
  src: url('../fonts/pacific.woff') format('woff'), url('../fonts/pacific.svg#pacific') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* GLOBAL STYLES */

body {
  background-color: #f3f3f3;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: lighter;
  color: #888;
}

.master-wrapper-page {
  position: relative;
}

.master-wrapper-page:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/images/uploaded/Home%20page%20background%20image.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: .06;
}

.master-wrapper-page > * {
  position: relative;
  z-index: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

a {
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea, select {
  font-family: 'Roboto', sans-serif;
  height: 45px;
  border: none;
  background-color: #eee;
  padding: 0 15px;
  vertical-align: middle;
  font-size: 14px;
}

textarea {
  max-width: 100%;
  min-height: 150px;
  padding: 15px;
}

select {
  min-width: 50px;
  height: 45px;
  border: 1px solid #eee;
  background: #fff url('../img/arrow.svg') right 12px center no-repeat;
  padding: 0 25px 0 15px;
  line-height: 43px;
  color: #888;
  transition: 0.3s ease;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

  select::-ms-expand {
    display: none; /* hide the default arrow in ie10 and ie11 */
  }

  select:hover {
    background-image: url('../img/arrow-hover.svg');
    color: #222;
  }

  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  textarea:focus, select:focus {
    border-color: #d1d1d1;
  }

input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + *,
input[type="radio"] + * {
  vertical-align: middle;
}

input[type="button"],
input[type="submit"],
button {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}

label, label + * {
  vertical-align: middle;
}

.master-wrapper-content {
  position: relative;
  padding: 0 10px;
}

.master-column-wrapper:after {
  content: "";
  display: block;
  clear: both;
}

.center-1 {
  margin: 0 0 10px;
}

.center-2, .side-2 {
  margin: 0 0 50px;
}

.one-column-blocks-wrapper {
  margin: 0 0 50px;
}

.page {
  min-height: 200px;
  text-align: center;
}

.page-title {
  border-bottom: 1px dashed #e6e6e6;
}

.product-grid .title {
  text-align: center;
  color: #aaa;
}

.page-title h1 {
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  font-weight: lighter;
  text-transform: uppercase;
  color: #aaa;
}

.page:after,
.page-title:after,
.page-body:after {
  content: "";
  display: block;
  clear: both;
}

.link-rss {
  display: none;
  position: relative;
  width: 24px;
  height: 24px;
  font-size: 0 !important;
}

  .link-rss:before {
    content: "\e92a";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 24px;
    font-family: 'pacific';
    font-size: 20px;
    line-height: 24px;
    color: #aaa;
    transition: 0.3s ease;
  }

  .link-rss:hover:before {
    color: #c09e6c;
  }

.category-description ul,
.manufacturer-description ul,
.full-description ul,
.topic-html-content ul,
.topic-page ul,
.post-body ul,
.custom-tab ul {
  margin: 12px 0;
  list-style: none;
  text-align: left;
}

.category-description ol,
.manufacturer-description ol,
.full-description ol,
.topic-html-content ol,
.topic-page ol,
.post-body ol,
.custom-tab ol {
  margin: 12px 0;
  list-style: none;
  text-align: left;
  counter-reset: section;
}

.category-description li,
.manufacturer-description li,
.full-description li,
.topic-html-content li,
.topic-page li,
.post-body li,
.custom-tab li {
  position: relative;
  padding: 3px 0 3px 35px;
}

.category-description ul li:before,
.manufacturer-description ul li:before,
.full-description ul li:before,
.topic-html-content ul li:before,
.topic-page ul li:before,
.post-body ul li:before,
.custom-tab ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 11px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c09e6c;
}

.category-description ol > li:before,
.manufacturer-description ol > li:before,
.full-description ol > li:before,
.topic-html-content ol > li:before,
.topic-page ol > li:before,
.post-body ol > li:before,
.custom-tab ol > li:before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  top: 3px;
  left: 0;
  width: 27px;
  height: 26px;
  background: url('../img/ol-back.png') no-repeat;
  text-align: center;
  font-weight: bold;
  color: #c09e6c;
}

.category-description p,
.manufacturer-description p,
.vendor-description p,
.full-description p,
.topic-html-content p,
.topic-page p,
.custom-tab p {
  margin: 10px 0;
  line-height: 22px;
}


/* ANIMATIONS */

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*fix for blinking images on hover*/
body:after {
  display: none;
  content: url('../img/arrow-hover.svg');
}


/* GLOBAL FORMS */

.fieldset, .section {
  position: relative;
  margin: 0 0 20px;
}

  .fieldset .title,
  .section .title {
    margin: 0 0 10px;
  }

    .fieldset .title strong,
    .section .title strong {
    }

.form-fields {
  position: relative;
}

.inputs {
  position: relative;
  max-width: 500px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 0;
  white-space: nowrap; /*fix for 'required' elements*/
}

  .inputs:after {
    content: "";
    display: block;
    clear: both;
  }

  .inputs label {
    display: block;
    width: 100%;
    height: 18px;
    margin: 0 0 7px;
    text-align: left;
    font-size: 14px; /*reset zeroing*/
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .inputs .required {
    position: absolute;
    top: 25px;
    right: 0;
    width: 9px;
    height: 9px;
    margin: 0;
    font-size: 0;
  }

    .inputs .required:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 9px 9px 0;
      border-color: transparent #dd464d transparent transparent;
    }

  .inputs input[type="text"],
  .inputs input[type="password"],
  .inputs input[type="email"],
  .inputs input[type="tel"],
  .inputs select, .inputs textarea {
    width: 100%;
    border: none;
    background-color: #eee;
    vertical-align: middle;
  }

  .inputs .option-list {
    margin: -5px 0;
    text-align: left;
    font-size: 0;
    white-space: normal;
  }

    .inputs .option-list li {
      display: inline-block;
      margin: 5px 10px 5px 0;
    }

    .inputs .option-list input[type="checkbox"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

      .inputs .option-list input[type="checkbox"] ~ label {
        display: inline-block;
        position: relative;
        height: auto;
        margin: 0;
        padding: 0 10px 0 21px;
        font-size: 14px;
        line-height: 30px;
        color: #444;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

        .inputs .option-list input[type="checkbox"] ~ label:before {
          content: "";
          position: absolute;
          top: 6px;
          left: 0;
          width: 16px;
          height: 16px;
          border: 1px solid #ccc;
          border-radius: 50%;
        }

      .inputs .option-list input[type="checkbox"]:checked ~ label:before {
        border-color: #c09e6c;
      }

      .inputs .option-list input[type="checkbox"]:checked ~ label:after {
        content: "\e909";
        position: absolute;
        top: 5px;
        left: 2px;
        width: 15px;
        height: 15px;
        text-align: center;
        font-size: 13px;
        line-height: 16px;
        font-family: 'pacific';
        color: #c09e6c;
      }

    .inputs .option-list input[type="radio"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

      .inputs .option-list input[type="radio"] ~ label {
        display: block;
        height: auto;
        margin: 0;
        background-color: #eee;
        padding: 9px 15px;
        font-size: 14px;
        font-weight: normal;
        color: #444;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .inputs .option-list input[type="radio"]:checked ~ label {
        background-color: #c09e6c;
        font-weight: bold;
        color: #fff;
      }
/*.inputs .option-list ~ .required {
    width: auto;
    height: auto;
    font-size: 14px;
}
.inputs .option-list ~ .required:before {
    display: none;
}*/

.required {
  font-size: 14px;
  color: #dd464d;
}

.message-error,
.field-validation-error,
.username-not-available-status,
.poll-vote-error, .password-error {
  display: block;
  font-size: 13px;
  line-height: 25px;
  font-weight: normal;
  color: #dd464d;
}

.message-error,
.external-auth-errors {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
}

.field-validation-error {
  text-align: left;
}

.field-validation-valid,
.username-available-status {
  display: block;
  font-size: 13px;
  color: #393;
}

.external-auth-errors {
  color: #dd464d;
}

.captcha-box {
  display: flex;
  justify-content: center;
  clear: both;
  margin: 20px 0 0;
}

  .captcha-box iframe {
    margin: 0;
  }

  .captcha-box input {
    height: auto;
  }


/* GLOBAL TABLES */

.table-wrapper {
  border: 1px solid #eee;
  overflow-x: auto;
  background-color: #fff;
}

.cart, .data-table,
.forums-table-section table {
  margin: 0 0 0px;
}

  .cart th, .data-table th,
  .forums-table-section th {
    padding: 15px;
    text-align: center;
    font-size: 14px;
    color: #aaa;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cart td, .data-table td,
  .forums-table-section td {
    min-width: 50px;
    border-top: 1px solid #eee;
    background-color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .cart tr > *:first-child,
  .data-table tr > *:first-child,
  .forums-table-section tr > *:first-child {
    border-left: 20px solid #fff;
    padding-left: 0;
  }

  .cart tr > *:last-child,
  .data-table tr > *:last-child,
  .forums-table-section tr > *:last-child {
    border-right: 20px solid #fff;
    padding-right: 0;
  }

  .cart a, .data-table a,
  .forums-table-section a {
    font-weight: bold;
  }

  .cart .product,
  .cart .subtotal,
  .data-table .product,
  .data-table .info,
  .data-table .name,
  .forum-table .forum-details,
  .forum-table .topic-details {
    text-align: left;
  }

  .cart .remove-from-cart,
  .cart .add-to-cart,
  .data-table .select-boxes,
  .data-table .order {
    text-align: center;
  }

  .cart td {
    padding: 10px
  }

  .cart .td-title {
    display: none;
  }

  .cart .checkbox-label {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .cart td.remove-from-cart,
  .cart td.add-to-cart {
    position: relative;
    font-size: 0;
  }

  .cart input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .cart .checkbox-label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  .cart input[type="checkbox"]:checked ~ label:before {
    border-color: #c09e6c;
  }

  .cart input[type="checkbox"]:checked ~ label:after {
    content: "\e909";
    position: absolute;
    top: -1px;
    left: 2px;
    width: 15px;
    height: 15px;
    text-align: center;
    font-size: 13px;
    line-height: 16px;
    font-family: 'pacific';
    color: #c09e6c;
  }

  .cart .remove-from-cart button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    border: none;
    background: none;
    color: #888;
  }

    .cart .remove-from-cart button:after {
      content: "\e941";
      font-family: 'pacific';
      font-size: 20px;
      line-height: 40px;
      transition: 0.3s ease;
    }

    .cart .remove-from-cart button:hover {
      color: #444;
    }

  .cart .product-picture {
    font-size: 0;
  }

    .cart .product-picture a,
    .data-table .picture a {
      display: block;
      width: 100px;
      height: auto;
      margin: auto;
      /* border: 1px solid #eee; */
    }

  .cart .product a {
    font-size: 16px;
    font-weight: normal;
    transition: 0.3s ease;
  }

    .cart .product a:hover {
      color: #c09e6c;
    }

  .cart .attributes,
  .data-table .attributes {
    margin: 10px 0;
    font-size: 12px;
    line-height: 20px;
    color: #aaa;
  }

  .cart .edit-item a {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.8px;
    font-weight: bold;
    color: #c09e6c;
    text-transform: uppercase;
    transition: 0.3s ease;
  }

  .cart .message-error {
    margin-bottom: 0;
    text-align: left;
  }

  .cart .unit-price {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
  }

  .cart .qty-input,
  .cart .qty-dropdown {
    width: 45px;
    height: 45px;
    background-color: #eee;
    padding: 0 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #666;
  }

  .cart .qty-dropdown {
    width: 65px;
    padding: 0 20px 0 15px;
  }

  .cart .subtotal span {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #c09e6c;
    white-space: nowrap;
  }

  .cart .subtotal .discount,
  .cart .subtotal .discount + div {
    margin: 5px 0;
    font-size: 12px;
    color: #aaa;
    white-space: nowrap; /*remove this if you have no space enough for discounted products price*/
  }


/* FOOTABLE BACKUP */

.footable-first-column {
  text-align: center;
}

td.footable-first-column {
  position: relative;
  background: transparent !important; /*Firefox relative cell bug fix*/
}

.footable-first-column .item-count {
  font-size: 13px !important;
}

.footable.breakpoint > tbody > tr > td > span.footable-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  overflow: hidden;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
}

.footable-toggle {
  background-image: url('../img/table-plus.png');
}

.footable-detail-show .footable-toggle {
  background-image: url('../img/table-minus.png');
}

.footable-toggle:before {
  display: none !important;
}

.footable-row-detail {
  text-align: left;
}

.footable-row-detail-cell {
  text-align: left !important;
}

.footable-row-detail-row {
  display: table-row;
  margin: 0 0 10px;
}

.footable-row-detail-name {
  display: table-cell;
  padding: 10px;
}

.footable-row-detail-value {
  display: table-cell;
  padding: 10px;
}


/* NOTIFICATIONS & POPUPS */

.bar-notification {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 1080;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background-color: rgb(29 49 233 / 90%);
  color: #fff;
  opacity: .95;
}

.bar-notification.warning {
  background-color: #FFF3CD !important;
  border: 1px solid #E8C76A !important;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.08));
  color: var(--pacific-text-dark, #444);
  opacity: 1;
}

.bar-notification.error {
  background-color: #FDECEA;
  border: 1px solid #F1948A;
  border-left: 4px solid #C0392B;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.08));
  color: #7B241C;
  opacity: 1;
}

.bar-notification.success {
  background-color: #EAF7EE;
  border: 1px solid #A3D9B1;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.08));
  color: #1E8449;
  opacity: 1;
}

  .bar-notification:before {
    display: none;
    content: none;
  }

  .bar-notification.warning:before,
  .bar-notification.error:before,
  .bar-notification.success:before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .bar-notification.warning:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D99A00' d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M12 9v4'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23fff'/%3E%3C/svg%3E");
  }

  .bar-notification.error:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B241C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
  }

  .bar-notification.success:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2327AE60' stroke='%231E8449' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m8 12.5 2.5 2.5L16 9'/%3E%3C/svg%3E");
  }

  .bar-notification .content {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
  }

    .bar-notification .content a {
      text-decoration: underline;
    }

  .bar-notification .close {
    margin-left: auto;
    padding-left: 16px;
    font-size: 0;
    color: inherit;
    opacity: .7;
    cursor: pointer;
  }

    .bar-notification .close:hover {
      opacity: 1;
    }

    .bar-notification .close:after {
      content: "\e90a";
      font-family: 'pacific';
      font-size: 20px;
      line-height: 1;
    }

.noscript {
  background-color: #ff9;
  padding: 10px;
  text-align: center;
}

.ajax-loading-block-window {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  background: url('../img/loading.gif') center no-repeat;
}

.ui-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1750;
  width: 600px !important;
  max-width: 90%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

  .ui-dialog:before {
    content: "";
    position: absolute;
    top: -50vh;
    right: -50vw;
    bottom: -50vh;
    left: -50vw;
    z-index: -1;
    background-color: rgba(102,102,102,.9);
    opacity: 0.95;
  }

.ui-dialog-titlebar {
  border-bottom: 1px solid #eee;
  background-color: #fff;
  padding: 25px 40px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

  .ui-dialog-titlebar button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    border: none;
    overflow: hidden;
    background-color: transparent;
    font-size: 0;
    color: #888;
    cursor: pointer;
  }

    .ui-dialog-titlebar button:after {
      content: "\e90a";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 40px;
      text-align: center;
      font-family: 'pacific';
      font-size: 20px;
      line-height: 40px;
      transition: 0.3s ease;
    }

    .ui-dialog-titlebar button:hover {
      color: #444;
    }

.ui-dialog-content {
  height: auto !important;
  overflow: auto;
  background-color: #fff;
  padding: 30px 40px 40px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}

  .ui-dialog-content .page {
    min-height: 0;
  }

  .ui-dialog-content .page-title {
    margin: 0 0 15px;
    border: none;
    padding: 0;
  }

    .ui-dialog-content .page-title h1 {
      font-size: 14px;
      font-weight: normal;
      text-transform: none;
      color: #444;
    }

  .ui-dialog-content .page-body {
    border: none !important;
    padding: 0 !important;
    text-align: center;
  }

  .ui-dialog-content .tooltip {
    margin: 0 0 15px;
    text-align: left;
    font-size: 14px;
    line-height: 25px;
  }

  .ui-dialog-content button {
    display: block;
    margin: 25px auto 0;
    border: none;
    background-color: #c09e6c;
    padding: 15px 35px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
  }

.eu-cookie-bar-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 320px;
  height: 180px;
  margin: -90px 0 0 -160px;
  border: 1px solid #bbb;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px #fff;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

  .eu-cookie-bar-notification .text {
    margin-bottom: 20px;
    line-height: 20px;
  }

  .eu-cookie-bar-notification button {
    min-width: 60px;
    margin: 10px 0;
    border: 1px solid #bbb;
    background-color: #eee;
    padding: 5px;
    font-size: 14px;
    color: #333;
  }

    .eu-cookie-bar-notification button:hover {
      border-color: #aaa;
      background-color: #ddd;
    }

  .eu-cookie-bar-notification a {
    display: block;
    text-decoration: underline;
  }

.scroll-back-button {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1030;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background-color: #c09e6c;
  border-radius: 16px !important;
  transition: 0.5s ease;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

  .scroll-back-button.nav-up {
    opacity: 1;
    pointer-events: auto;
  }

  .scroll-back-button:before {
    content: "\e904";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 18px;
    height: 18px;
    margin: auto;
    text-align: center;
    font-family: 'pacific';
    font-size: 18px;
    color: #fff;
    transition: 0.5s ease;
    opacity: 1;
  }

  .scroll-back-button:hover:before {
    transform: translateY(5px);
  }

  .scroll-back-button:after {
    content: "";
    opacity: 1;
    position: absolute;
    top: 16px;
    left: 16px;
    width: 18px;
    height: 1px;
    background-color: #fff;
    transition: 0.5s ease;
    transform: translateX(35px);
  }

  .scroll-back-button:hover:after {
    transform: translateX(0);
  }


/* HEADER */

.admin-header-links {
  height: 35px;
  background-color: #f3f3f3;
  text-align: center;
}

  .admin-header-links a {
    display: inline-block;
    margin: 0 10px;
    line-height: 34px;
  }

    .admin-header-links a:only-child {
      display: block;
    }

  .admin-header-links .impersonate {
    display: inline-block;
  }

    .admin-header-links .impersonate span {
      display: none;
    }

/* ================================================================
   HOMEPAGE HERO SLIDER (NivoSlider) - rounded card framing for the
   uploaded banner image: soft shadow, inset circular arrows, brand
   dot pagination. Vendor plugin CSS loads inline in the body (after
   this stylesheet), so overrides use !important to win regardless
   of load order; JS also sets the arrow's "top" as inline style,
   which needs !important to beat.
   ================================================================ */
.slider-wrapper {
  margin: 0 auto 30px !important;
  /* Vendor anywhereSliders.css adds padding-top:20px via
     ".home-page-categories-wrapper ~ .slider-wrapper" for a "secondary
     slider" layout - not wanted here, it left a gap above the image. */
  padding-top: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  background-color: #FAF3EA !important;
  box-shadow: var(--pacific-shadow-hover, 0 4px 12px rgba(23,76,75,.15)) !important;
}

  /* second homepage slider sits below the product carousel and needs room
     above it. Targets the wrapper, not #anywhereSlider3 itself - the wrapper
     is overflow:hidden, so a margin on the slider would open a gap inside
     the card instead of above it. */
  .slider-wrapper:has(#anywhereSlider3) {
    margin-top: 80px !important;
  }

  .slider-wrapper .nivoSlider,
  .slider-wrapper .nivoSlider img {
    border-radius: 16px;
  }

  /* AnywhereSliders (the actual widget used on the homepage) sizes its
     slide <img> at width:100% with auto height, so images narrower/wider
     than the slider's own box leave the cream .slider-wrapper background
     showing on the sides. Fill the slide completely instead, cropping
     via object-fit like a normal hero banner.
     The slide's height used to come from the image's own in-flow height;
     making the image position:absolute takes it out of flow, so the
     slider collapses to 0 height unless something else sets it - hence
     the explicit aspect-ratio + height:100% cascade below. */
  .anywhere-slider {
    aspect-ratio: 21 / 7;
    margin: 0 !important;
    padding: 0 !important;
  }

  .anywhere-slider .slick-list,
  .anywhere-slider .slick-track,
  .anywhere-slider .slick-slide,
  .anywhere-slider .picture-slide,
  .anywhere-slider .html-slide {
    height: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
  }

  .anywhere-slider .picture-slide,
  .anywhere-slider .html-slide {
    position: relative;
    overflow: hidden;
  }

  .anywhere-slider .picture-slide img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover;
  }

  .slider-wrapper .nivo-directionNav a {
    display: block !important;
    top: 0 !important;
    width: 44px !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none;
    position: absolute;
    border-radius: 0;
    background-color: rgba(0,0,0,.25) !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: background-color .2s ease;
  }

    .slider-wrapper .nivo-directionNav a:hover {
      background-color: rgba(0,0,0,.4) !important;
    }

    .slider-wrapper .nivo-directionNav a:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-style: solid;
      border-color: #fff;
      border-width: 0 2px 2px 0;
    }

  .slider-wrapper a.nivo-prevNav {
    left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
  }

    .slider-wrapper a.nivo-prevNav:before {
      transform: translate(-30%, -50%) rotate(135deg);
    }

  .slider-wrapper a.nivo-nextNav {
    right: 0 !important;
    border-radius: 8px 0 0 8px !important;
  }

    .slider-wrapper a.nivo-nextNav:before {
      transform: translate(-70%, -50%) rotate(-45deg);
    }

  .slider-wrapper .nivo-controlNav a {
    border-radius: 50%;
  }

  .slider-wrapper .nivo-controlNav a.active {
    background-color: var(--pacific-gold, #174C4B) !important;
  }

@media all and (max-width: 1000px) {
  .slider-wrapper .nivo-directionNav {
    display: block !important;
  }

  .slider-wrapper .nivo-directionNav a {
    width: 34px !important;
    height: 34px !important;
  }
}

@media all and (min-width: 1001px) {
  .slider-wrapper .nivo-directionNav {
    display: block !important;
  }
}

/* ================================================================
   PRODUCT CAROUSELS (Slick) - shared arrow button, same pale
   circular chevron style everywhere a .slick-arrow shows up
   (category products, sale-of-the-day, jcarousel, anywhere-slider).
   ================================================================ */
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background-color: rgba(250,248,245,.9) !important;
  background-image: none !important;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.12)) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

  .slick-prev.slick-arrow:hover,
  .slick-next.slick-arrow:hover {
    background-color: #fff !important;
  }

  .slick-prev.slick-arrow:before,
  .slick-next.slick-arrow:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: none !important;
    border-style: solid !important;
    border-color: var(--pacific-text-dark, #444) !important;
    border-width: 0 2px 2px 0 !important;
    opacity: 1 !important;
  }

.slick-prev.slick-arrow {
  left: 10px !important;
  right: auto !important;
}

  .slick-prev.slick-arrow:before {
    transform: translate(-50%, -50%) rotate(135deg) !important;
  }

.slick-next.slick-arrow {
  right: 10px !important;
  left: auto !important;
}

  .slick-next.slick-arrow:before {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

.header {
  margin: 0 0 10px;
  text-align: center;
}

  .header:after {
    content: "";
    display: block;
    clear: both;
  }

.header-logo {
  text-align: center;
  font-size: 0;
}

  .header-logo a {
    display: inline-block;
    max-width: 100%;
  }

    .header-logo a img {
      max-width: 100%;
    }

.store-search-box {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #e3e3e3;
  background-color: #fff;
}

  .store-search-box form {
    position: relative;
    width: 100%;
    padding: 0 40px 0 0;
  }

    .store-search-box form:before {
      content: "\e92b";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      width: 40px;
      height: 40px;
      background-color: #fff;
      text-align: center;
      font-family: 'pacific';
      font-size: 18px;
      line-height: 40px;
    }

    .store-search-box form:after {
      content: "";
      display: block;
      clear: both;
    }

  .store-search-box input.search-box-text {
    width: 100% !important;
    height: 40px;
    border: none;
    background-color: #fff;
    padding: 0 0 0 15px;
    font-size: 14px;
    color: #888;
  }

  .store-search-box .search-box-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    font-size: 0;
  }

.ui-helper-hidden-accessible {
  display: none;
}

.ui-autocomplete {
  position: absolute;
  z-index: 1070;
  width: 100% !important;
  max-width: 100%;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  overflow: hidden;
  background-color: #fff;
}

  .ui-autocomplete li + li {
    border-top: 1px solid #eee;
  }

  .ui-autocomplete a {
    display: block;
    padding: 5px;
    text-align: left;
    font-size: 14px;
    color: #888;
  }

  .ui-autocomplete img {
    max-width: 50px;
    margin-right: 14px;
    vertical-align: middle;
  }

  .ui-autocomplete span {
    vertical-align: middle;
  }

  .ui-autocomplete img + span {
    display: inline-block;
    width: calc(100% - 64px);
  }

  .ui-autocomplete .ui-state-active {
    background-color: #f6f6f6;
    color: #222;
  }

.language-list {
  max-width: 100%;
  padding: 0 5px;
  font-size: 0;
}

  .language-list li {
    display: inline-block;
  }

  .language-list a {
    display: block;
    position: relative;
    width: 30px;
    height: 38px;
  }

  .language-list img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

.mini-shopping-cart .items {
  border-bottom: 1px solid #e3e3e3;
}

.mini-shopping-cart .item {
  position: relative;
  border-top: 1px dashed #e3e3e3;
  overflow: hidden;
  padding: 13px 40px 13px 13px;
}

.kivvi-flyout-cart-remove-form {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: 0;
  transform: translateY(-50%);
}

.kivvi-flyout-cart-remove-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid #174C4B;
  border-radius: 50%;
  background-color: #fff;
  color: #174C4B;
  font-weight: bold;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.kivvi-flyout-cart-remove-button:hover {
  border-color: #174C4B;
  color: #174C4B;
}

  .mini-shopping-cart .item:first-child {
    border: none;
  }

.mini-shopping-cart .picture {
  float: left;
  width: 105px;
}

  .mini-shopping-cart .picture a {
    display: block;
    font-size: 0;
    line-height: 0;
  }

.mini-shopping-cart .product {
  margin: 0 0 0 127px;
  font-size: 13px;
  line-height: 18px;
}

.mini-shopping-cart .name {
  margin: 0 0 5px;
}

  .mini-shopping-cart .name a {
    display: block;
    height: 36px;
    overflow: hidden;
    transition: 0.3s ease;
  }

    .mini-shopping-cart .name a:hover {
      color: #c09e6c;
    }

.mini-shopping-cart .attributes {
  margin: 0 0 10px;
}

.mini-shopping-cart .price {
  font-size: 0;
  line-height: 0;
}

  .mini-shopping-cart .price span {
    display: inline-block;
    color: #222;
    font-size: 13px;
    line-height: 18px;
    font-weight: bold;
  }

.mini-shopping-cart .totals {
  border: none;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #888;
}

  .mini-shopping-cart .totals strong {
    float: right;
    color: #222;
  }

.mini-shopping-cart .buttons {
  margin: 0;
  overflow: hidden;
}

  .mini-shopping-cart .buttons button {
    display: block;
    position: relative;
    float: left;
    width: 50%;
    border: none;
    overflow: hidden;
    background-color: #c09e6c;
    padding: 20px 35px 20px 22px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s ease;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
  }

    .mini-shopping-cart .buttons button:before {
      content: "\e93b";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      width: 20px;
      height: 20px;
      margin: auto;
      text-align: center;
      font-family: 'pacific';
      font-size: 8px;
      line-height: 20px;
      transition: 0.3s ease;
      color: #000;
      opacity: 0.3;
    }

    .mini-shopping-cart .buttons button.checkout-button:before {
      content: "\e93a";
      color: #fff;
      opacity: 1;
    }

    .mini-shopping-cart .buttons button:only-child {
      width: 100%;
    }

    .mini-shopping-cart .buttons button + button {
      border-left: 1px solid #fff;
    }

    .mini-shopping-cart .buttons button:hover {
      background-color: #ae864b;
    }

.mini-shopping-cart .count {
  position: relative;
  height: 50px;
  border-bottom: 1px dashed #e3e3e3;
  overflow: hidden;
  padding: 0 13px 0 45px;
  font-size: 13px;
  line-height: 50px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .mini-shopping-cart .count a {
    font-weight: bold;
    transition: 0.3s ease;
  }

    .mini-shopping-cart .count a:hover {
      color: #c09e6c;
    }

  .mini-shopping-cart .count:before {
    content: "\e905";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 45px;
    text-align: center;
    font-family: 'pacific';
    font-size: 21px;
    line-height: 45px;
  }


/* HOME PAGE */

.home-page .title {
  margin: 0 0 20px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 15px 0;
  text-align: center;
  color: #aaa;
}

  .home-page .title strong {
    font-size: 30px;
    line-height: 30px;
    font-weight: lighter;
    text-transform: uppercase;
  }

.home-page-slider {
  margin: 0 0 10px;
}

.home-page-categories-wrapper {
  margin: 0 -10px 40px;
}

.home-page .page-body > div:last-child {
  margin-bottom: 25px !important;
}


/* FOOTER */

.footer-upper {
  background-color: #fff;
}

.footer-blocks-wrapper.center {
  background-color: #c09e6c;
}

.footer-block-center {
  padding: 25px 10px;
  text-align: center;
}

.footer-middle {
  margin: 0 0 15px;
  overflow: hidden;
}

.newsletter {
  max-width: 300px;
  margin: 0 auto 30px;
}

  .newsletter .title {
    display: block;
    margin: 0 0 25px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
  }

.newsletter-email {
  display: block;
  overflow: hidden;
}

  .newsletter-email .newsletter-subscribe-text {
    width: 100%;
    height: 42px;
    margin: 0 0 10px;
    border: none;
    background-color: #fff;
    text-align: center;
    font-weight: lighter;
    color: #aaa;
  }

.newsletter-subscribe-text::-webkit-input-placeholder {
  color: #aaa;
}

.newsletter-subscribe-text::-moz-placeholder {
  color: #aaa;
}

.newsletter-subscribe-text:-ms-input-placeholder {
  color: #aaa;
}

.newsletter-subscribe-text:-moz-placeholder {
  color: #aaa;
}

.newsletter-email .newsletter-subscribe-button {
  position: relative;
  width: 100%;
  height: 40px;
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}

.newsletter-subscribe-button:before {
  content: "\e91f";
  margin: 0 4px 0 0;
  font-family: 'pacific';
  vertical-align: middle;
  font-size: 17px;
  line-height: 40px;
  font-weight: normal;
}

.newsletter-subscribe-button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #fff;
  opacity: 0.3;
}

.newsletter-subscribe-button span {
  vertical-align: middle;
}

.newsletter-email .options {
  clear: both;
  padding: 5px 0 0;
}

  .newsletter-email .options span {
    display: inline-block;
    position: relative;
    margin: 0 10px;
  }

  .newsletter-email .options input {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
  }

  .newsletter-email .options label {
    display: block;
    padding: 5px 0 5px 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
  }

    .newsletter-email .options label:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background-color: #fff;
    }

  .newsletter-email .options input:checked ~ label:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 7px;
    height: 7px;
    margin: auto;
    border-radius: 50%;
    background-color: #c09e6c;
  }

.newsletter .captcha-box {
  margin: 10px 0 -5px;
}

.newsletter-validation,
.newsletter-result {
  line-height: 28px;
  color: #fff;
}

  .newsletter-validation .please-wait {
    display: none !important;
  }

.social-sharing {
  font-size: 0;
}

  .social-sharing li {
    display: inline-block;
    margin: 5px;
    vertical-align: middle;
  }

  .social-sharing a {
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
  }

    .social-sharing a:before {
      content: "";
      width: 45px;
      font-family: 'pacific';
      font-size: 18px;
      line-height: 45px;
      color: #222;
    }

  .social-sharing .facebook:before {
    content: "\e910";
  }

  .social-sharing .twitter:before {
    content: "\e95b";
    font-size: 17px;
  }

  .social-sharing .pinterest:before {
    content: "\e923";
    font-size: 20px;
  }

  .social-sharing .vimeo:before {
    content: "\e934";
  }

  .social-sharing .youtube:before {
    content: "\e937";
    font-size: 20px;
  }

  .social-sharing .instagram:before {
    content: "\e915";
  }

  .social-sharing .rss:before {
    content: "\e92a";
    font-size: 15px;
  }

.footer-blocks-wrapper.left {
  padding: 30px 20px 0;
}

.footer-blocks-wrapper.right {
  padding: 0 20px 30px;
}

.footer-block .title {
  position: relative;
  overflow: hidden;
  padding: 11px 30px 11px 0;
  font-size: 16px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
  cursor: pointer;
}

  .footer-block .title:before {
    content: "\e904";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    width: 18px;
    height: 18px;
    margin: auto;
    text-align: center;
    font-family: 'pacific';
    font-size: 18px;
    color: #aaa;
    transition: 0.5s ease;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .footer-block .title.open:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

.footer-collapse {
  display: none;
  margin: 0 0 15px;
  padding: 15px 0;
}

.footer-block li span,
.footer-block li a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
}

.footer-block.contact span {
  position: relative;
  padding-left: 25px;
}

  .footer-block.contact span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 20px;
    margin: auto;
    text-align: center;
    font-family: 'pacific';
    font-size: 15px;
    line-height: 20px;
    color: #c09e6c;
  }

.footer-block.contact .phone span:before {
  content: "\e922";
  font-size: 20px;
}

.footer-block.contact .work-time span:before {
  content: "\e928";
}

.footer-block.contact .e-mail span:before {
  content: "\e91f";
}

.footer-block.contact .address-city span:before {
  content: "\e918";
  font-size: 18px;
}

.footer-block.contact .address-street span:before {
  content: "\e91c";
  font-size: 17px;
}

.footer-lower {
  border-top: 1px solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20px 10px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

  .footer-lower > div {
    display: block;
  }

.footer-powered-by a,
.footer-designed-by a {
  color: #c09e6c;
}

.theme-selector {
  margin: 10px 0 0 !important;
}

  .theme-selector select {
    width: 170px;
  }


/* LEFT/RIGHT COLUMN */

.blocks-wrapper {
  border: 1px solid #eee;
  border-bottom: none;
  overflow: hidden;
}

.block {
  text-align: left;
}

  .block .title {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 16px 40px;
    cursor: pointer;
  }

  .block .blocks-tab-header {
    display: none;
  }

  .block .title:before,
  .block .title:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: 'pacific';
    color: #aaa;
  }

  .block .title:before {
    left: 14px;
    height: 48px;
    line-height: 48px;
  }

.block-category-navigation .title:before,
.blog-category-navigation .title:before {
  content: "\e907";
  font-size: 14px;
}

.block-manufacturer-navigation .title:before {
  content: "\e91b";
  font-size: 15px;
}

.block-vendor-navigation .title:before {
  content: "\e91e";
  font-size: 15px;
}

.block-recently-viewed-products .title:before {
  content: "\e928";
  font-size: 15px;
}

.block-popular-tags .title:before {
  content: "\e931";
  font-size: 16px;
}

.block-poll .title:before {
  content: "\e925";
  font-size: 13px;
}

.block .title:after {
  content: "\e904";
  right: 15px;
  width: 13px;
  height: 13px;
  text-align: center;
  font-size: 13px;
  transition: 0.5s ease;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.block .title.open:after {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.block .title strong {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

.block .listbox {
  display: none;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
}

  .block .listbox:after {
    content: "";
    display: block;
    clear: both;
  }

.block .list a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
}

.block .list .product-picture {
  display: none;
}

.block .list > li > a {
  color: #444;
}

.block .sublist {
  padding: 0 12px;
}

  .block .sublist a {
    font-size: 13px;
  }

  .block .sublist .active a {
    color: #444;
  }

.block .view-all {
  margin: 10px 0 20px;
}

  .block .view-all a {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #c09e6c;
  }

.block .tags {
  margin: 0 -10px;
}

  .block .tags ul {
    font-size: 0;
  }

  .block .tags li,
  .product-tags-all-page li {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    overflow: hidden;
    font-size: 14px !important; /*setting base size*/
  }

    .block .tags li a,
    .product-tags-all-page li a {
      float: left;
      line-height: 35px;
    }

.block-poll .poll-display-text {
  display: block;
  margin: 10px 0;
  font-size: 14px;
  text-transform: uppercase;
  color: #222;
}

.block-poll li {
  position: relative;
}

  .block-poll li label {
    display: block;
    position: relative;
    padding: 5px 0 5px 23px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
  }

  .block-poll li input[type='radio'] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
  }

  .block-poll li label:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
  }

  .block-poll li input:checked ~ label:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background-color: #c09e6c;
  }

.block .poll-results li {
  padding: 5px 0;
  font-size: 14px;
}

.block-poll .buttons {
  margin: 10px 0 20px;
}

.block-poll button[type='button'] {
  display: block;
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  color: #c09e6c;
}

.block-poll .poll-total-votes {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: #c09e6c;
}

.side-navigation-tabs {
  display: none;
}

.home-page-polls {
  margin: 0 0 50px;
  padding: 0 0 10px; /*equalize bottom spacing*/
  text-align: center;
}

  .home-page-polls .poll {
    position: relative;
    margin: 0 0 20px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 20px 20px 65px;
  }

  .home-page-polls .poll-display-text {
    display: block;
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
  }

  .home-page-polls .buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
    padding: 13px;
    text-align: center;
  }

  .home-page-polls .poll-options,
  .home-page-polls .poll-results {
    margin: 0 0 30px;
    font-size: 0;
  }

    .home-page-polls .poll-options li,
    .home-page-polls .poll-results li {
      display: inline-block;
      position: relative;
    }

    .home-page-polls .poll-results li {
      margin: 0 5px 5px;
      border: 1px solid #eee;
      padding: 10px 19px;
      font-size: 14px;
      color: #444;
    }

    .home-page-polls .poll-options label {
      display: block;
      margin: 0 5px 5px;
      border: 1px solid #eee;
      padding: 10px 19px;
      font-size: 14px;
      color: #444;
      cursor: pointer;
      transition: 0.3s ease;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

      .home-page-polls .poll-options label:hover {
        border-color: #d1d1d1;
        color: #222;
      }

    .home-page-polls .poll-options input[type='radio'] {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      margin: auto;
      opacity: 0;
    }

  .home-page-polls input[type='radio']:checked ~ label {
    border-color: #c09e6c;
    background-color: #c09e6c;
    color: #fff !important;
  }

  .home-page-polls .buttons button[type='button'] {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #eee;
    padding: 10px 19px;
    line-height: 18px;
    color: #c09e6c;
  }


/* CATEGORY PAGE */

.breadcrumb {
  text-align: center;
}

  .breadcrumb ul {
    font-size: 0;
  }

  .breadcrumb li {
    display: inline-block;
    margin: 0 7.5px;
    vertical-align: middle;
  }

  .breadcrumb a,
  .breadcrumb strong,
  .breadcrumb .delimiter {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px; /*reset zeroing*/
    line-height: 32px;
    transition: 0.3s ease;
    color: #444;
  }

  .breadcrumb strong {
    display: block;
    font-weight: normal;
    color: #aaa;
  }

  .breadcrumb .delimiter {
    display: inline-block;
    width: 13px;
    margin: 0 0 0 15px;
    font-size: 0;
  }

    .breadcrumb .delimiter:before {
      content: "\e901";
      vertical-align: middle;
      font-family: 'pacific';
      font-size: 6px;
      line-height: 32px;
    }

  .breadcrumb a:hover,
  .breadcrumb a:hover span {
    color: #c09e6c;
  }

.category-description,
.manufacturer-description,
.vendor-description {
  margin: 0 0 20px;
  text-align: justify;
  font-size: 15px;
  line-height: 30px;
}

.contact-vendor {
  display: none; /*hidden*/
  margin: 0 0 40px;
}

.contact-vendor-button {
  display: inline-block;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 9.5px 19px;
  font-size: 14px;
  line-height: 19px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #c09e6c;
}

  .contact-vendor-button:hover {
    border-color: #c09e6c;
    background-color: #c09e6c;
    color: #fff;
  }

.product-filters {
  display: block;
}

  .product-filters .title:before {
    content: "\e911";
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-family: 'pacific';
    font-size: 18px;
    color: rgba(0,0,0,.5);
  }

  .product-filters .name {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #444
  }

  .product-filters .filter-title {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    color: #444
  }

  .product-filters .item {
    display: block;
    padding: 10px 0;
    font-size: 14px;
  }

  .product-filters .product-spec-group {
    padding: 10px 0 0 0;
  }

  .product-filters .item label {
    display: block;
    position: relative;
    padding: 6px 0 6px 25px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
  }

    .product-filters .item label:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

  .product-filters .item input {
    position: absolute;
    margin: 8px 2px;
    opacity: 0;
  }

    .product-filters .item input:checked + label {
      color: #444;
    }

      .product-filters .item input:checked + label::after {
        content: "\e909";
        position: absolute;
        top: 5px;
        left: 2px;
        width: 15px;
        height: 15px;
        text-align: center;
        font-family: 'pacific';
        font-size: 13px;
        line-height: 16px;
        color: #c09e6c;
      }

  .product-filters .item .attribute-square {
    position: absolute;
    top: -1px;
    bottom: 0;
    left: -5px;
    z-index: 0;
    width: 26px;
    height: 26px;
    margin: auto;
    border-radius: 50%;
    font-size: 0;
  }

  .product-filters .color-item input:checked + label .attribute-square {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccc;
  }

  .product-filters .color-item label {
    padding-left: 32px !important;
  }

  .product-filters .ui-slider {
    position: relative;
    width: auto;
    height: 5px;
    margin: 0 6px 15px;
  }

    .product-filters .ui-slider:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 0px;
      margin: auto;
      border-top: 1px dashed #ccc;
    }

  .product-filters .ui-slider-range {
    position: absolute;
    z-index: 1;
    height: 5px;
    background-color: #c09e6c;
  }

  .product-filters .ui-slider-handle {
    position: absolute;
    top: -4px;
    z-index: 1;
    width: 13px;
    height: 13px;
    margin-left: -6px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
  }

    .product-filters .ui-slider-handle:after {
      content: "";
      position: absolute;
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      margin: auto;
      border-radius: 50%;
    }

  .product-filters .selected-price-range {
    overflow: hidden;
    margin: 0 0 13px;
    font-size: 13px;
  }

  .product-filters .from {
    float: left;
  }

  .product-filters .to {
    float: right;
  }

  .product-filters .filter-content {
    padding: 0px 0px 10px 0px;
  }

.category-page-two-columns .sub-category-grid {
  margin: 0 0 40px;
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
}

.category-page-two-columns .sub-category-item {
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 5px 10px;
}

  .category-page-two-columns .sub-category-item .picture {
    display: table;
    z-index: 1;
    float: left;
    width: 60px;
    height: 60px;
    overflow: hidden;
  }

    .category-page-two-columns .sub-category-item .picture a {
      display: table-cell;
      position: relative;
      vertical-align: middle;
    }

    .category-page-two-columns .sub-category-item .picture img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }

  .category-page-two-columns .sub-category-item .title {
    display: table;
    float: right;
    width: calc(100% - 60px);
    height: 60px;
    margin: 0;
    border: none;
  }

    .category-page-two-columns .sub-category-item .title > div {
      display: table-row;
    }

    .category-page-two-columns .sub-category-item .title a {
      display: table-cell;
      padding: 0 10px;
      text-align: left;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      transition: 0.3s ease;
      color: #444;
    }

  .category-page-two-columns .sub-category-item:hover .title a {
    color: #c09e6c;
  }

.category-page-one-column .sub-category-grid {
  margin: 0 0 50px;
}

  .category-page-one-column .sub-category-grid .item-box {
    float: left;
    width: calc(50% - 6px);
    margin: 0 0 10px 10px;
    background-color: #fff;
  }

    .category-page-one-column .sub-category-grid .item-box:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }

.category-page-one-column .sub-category-item .picture a {
  display: block;
  position: relative;
  overflow: hidden;
}

  .category-page-one-column .sub-category-item .picture a:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .category-page-one-column .sub-category-item .picture a img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    margin: auto;
  }

.category-page-one-column .sub-category-item .title {
  margin: 0;
  border: none;
}

  .category-page-one-column .sub-category-item .title a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.manufacturer-grid,
.vendor-grid {
  overflow: hidden;
}

  .manufacturer-grid .item-box,
  .vendor-grid .item-box {
    position: relative;
    float: left;
    width: calc(50% - 6px);
    margin: 0 0 10px 10px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 0 0 33px;
  }

    .manufacturer-grid .item-box:nth-child(2n+1),
    .vendor-grid .item-box:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }

    .manufacturer-grid .item-box .picture,
    .vendor-grid .item-box .picture {
      display: block;
      position: relative;
    }

      .manufacturer-grid .item-box .picture a,
      .vendor-grid .item-box .picture a {
        content: "";
        display: block;
        padding-top: 100%;
      }

      .manufacturer-grid .item-box .picture img,
      .vendor-grid .item-box .picture img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: 100%;
        margin: auto;
      }

  .manufacturer-grid .manufacturer-item .title,
  .vendor-grid .vendor-item .title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #eee;
  }

    .manufacturer-grid .manufacturer-item .title a,
    .vendor-grid .vendor-item .title a {
      display: block;
      height: 33px;
      overflow: hidden;
      padding: 8px 0;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #444;
    }

.product-sorting,
.product-page-size {
  position: relative;
}

  .product-sorting:after,
  .product-page-size:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 55px;
    height: 55px;
    font-family: 'pacific';
    text-align: center;
    font-size: 18px;
    line-height: 55px;
    color: #000;
    opacity: 0.5;
  }

  .product-sorting:after {
    content: "\e92e";
    font-size: 15px;
  }

  .product-page-size:after {
    content: "\e916";
  }

  .product-sorting select,
  .product-page-size select {
    z-index: 2;
  }

    .product-sorting select:hover ~ :after,
    .product-page-size select:hover ~ :after {
      opacity: 1;
    }

.product-selectors .product-viewmode {
  display: none;
  float: right;
}

.product-selectors .product-viewmode {
  font-size: 0;
}

  .product-selectors .product-viewmode span {
    vertical-align: middle;
  }

  .product-selectors .product-viewmode a {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 0 0 5px;
    vertical-align: middle;
    font-size: 0;
  }

    .product-selectors .product-viewmode a:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      text-align: center;
      font-family: 'pacific';
      font-size: 19px;
      line-height: 40px;
      color: #000;
      opacity: 0.5;
    }

    .product-selectors .product-viewmode a.grid:before {
      content: "\e913";
    }

    .product-selectors .product-viewmode a.list:before {
      content: "\e917";
    }

.category-boxes-layout-1 .category-grid {
  background-color: #fff;
}

.category-boxes-layout-1 .category-item {
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 5px 10px;
  transition: 0.3s ease;
}

.category-boxes-layout-1 .item-box:first-child .category-item {
  border-top: 1px solid #eee;
}

.category-boxes-layout-1 .category-item:hover {
  background-color: #c09e6c;
}

.category-boxes-layout-1 .category-item .picture {
  float: left;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

  .category-boxes-layout-1 .category-item .picture a {
    display: block;
    position: relative;
    height: 100%;
  }

  .category-boxes-layout-1 .category-item .picture img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

.category-boxes-layout-1 .category-item .title {
  display: table;
  float: right;
  width: calc(100% - 60px);
  height: 60px;
  margin: 0;
  border: none;
}

  .category-boxes-layout-1 .category-item .title > div {
    display: table-row;
  }

  .category-boxes-layout-1 .category-item .title a {
    display: table-cell;
    padding: 0 10px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #444;
  }

.category-boxes-layout-1 .category-item:hover .title a {
  color: #fff;
}

.sub-categories-list {
  display: none;
}

.category-boxes-layout-2 .category-grid {
  margin: 0 10px;
}

.category-boxes-layout-2 .item-box {
  float: left;
  width: calc(50% - 6px);
  margin: 0 0 10px 10px;
  background-color: #fff;
}

  .category-boxes-layout-2 .item-box:nth-child(2n+1) {
    clear: both;
    margin-left: 0;
  }

  .category-boxes-layout-2 .item-box .picture a {
    display: block;
    position: relative;
  }

    .category-boxes-layout-2 .item-box .picture a:before {
      content: "";
      display: block;
      padding-top: 100%;
    }

    .category-boxes-layout-2 .item-box .picture a img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: 100%;
      margin: auto;
    }

.category-boxes-layout-2 .category-item .title {
  margin: 0;
  border: none;
  padding: 0;
}

  .category-boxes-layout-2 .category-item .title a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.item-grid:after {
  content: "";
  display: block;
  clear: both;
}

.product-grid .item-box {
  position: relative;
  float: left;
  width: calc(50% - 5px);
  margin: 0 0 10px 10px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
}

  .product-grid .item-box:nth-child(2n+1) {
    clear: both;
    margin-left: 0;
  }

.item-box.banner-box {
  background-color: transparent;
  border: none;
}

.item-box .product-item .picture {
  z-index: 1;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

  .item-box .product-item .picture a {
    display: block;
    position: relative;
  }

    .item-box .product-item .picture a:before {
      content: "";
      display: block;
      padding-top: 100%;
    }

  .item-box .product-item .picture img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    margin: auto;
    transition: transform 0.4s ease, filter 0.4s ease;
  }

  /* :hover on .product-item, not .picture - .item-box-overlay
     (position:absolute; inset:0; z-index:1) sits on top of .picture and
     eats the pointer, so .picture:hover never fires. Hovering the
     overlay still counts as hovering .product-item, its ancestor. */
  .item-box .product-item:hover .picture img {
    transform: scale(1.1);
    filter: brightness(1.08) saturate(1.1);
  }

.product-grid .item-box .details {
  padding: 10px 6px;
}

.product-grid .product-title {
  position: relative;
  z-index: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  font-weight: lighter;
}

.item-box .product-title a {
  display: block;
}

.item-box .sku {
  display: none; /*remove if you want to show sku*/
}

.item-box .details-top {
  position: relative;
  z-index: 1;
  margin: 0 0 5px;
}

.item-box .product-rating-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  transition: 0.5s ease;
  opacity: 0;
}

.item-box .rating {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 11px;
  margin: auto;
  background: url('../img/rating1.svg') left repeat-x;
}

  .item-box .rating div {
    height: 11px;
    background: url('../img/rating2.svg') left repeat-x;
  }

.item-box .description {
  display: none;
}

  .item-box .description a {
    display: block;
    overflow: hidden;
  }

.item-box .prices {
  margin: 0 0 5px;
  overflow: hidden;
  font-size: 0;
}

.item-box .price {
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s ease;
  color: #222;
}

  .item-box .price.actual-price {
    margin: 0 12px 0 0;
    color: #c09e6c;
  }

.item-box .old-price {
  font-size: 12px;
  color: #888;
  text-decoration: line-through;
}

.item-box .tax-shipping-info,
.item-box .base-price-pangv {
  display: block;
  font-size: 12px;
}

  .item-box .tax-shipping-info a,
  .item-box .base-price-pangv a {
    /*text-decoration: underline;
    transition: 0.3s ease;*/
  }

    .item-box .tax-shipping-info a:hover,
    .item-box .base-price-pangv a:hover {
      color: #c09e6c;
    }

.item-box .add-info {
  display: none;
}

.item-box .attribute-squares-wrapper {
  display: none;
}

.swiper-pagination-bullet-active {
  background-color: #c09e6c;
}

.bestsellers-wrapper {
  padding-bottom: 10px; /*item-box margin replacement*/
}

.product-grid-bestsellers .item-grid {
  border: 1px solid #eee;
  border-width: 1px 0 0 1px;
  background-color: #fff;
}

.product-grid-bestsellers .item-box {
  border: 1px solid #eee;
  border-width: 0 1px 1px 0;
}

.product-grid-bestsellers .product-item {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px;
}

  .product-grid-bestsellers .product-item .picture {
    display: table-cell;
    vertical-align: middle;
    width: 104px;
    border: none;
  }

  .product-grid-bestsellers .product-item .details {
    display: table-cell;
    /*vertical-align: top;*/
    vertical-align: middle;
    padding-left: 15px;
    text-align: left;
  }

.product-grid-bestsellers .item-box .details-top {
  margin-top: 5px;
}

.product-grid-bestsellers .product-title {
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  font-weight: lighter;
}

.product-grid-bestsellers .product-rating-box {
  display: none;
}

.product-grid-bestsellers .item-box .price {
  font-size: 14px;
}

.product-grid-bestsellers .item-box .old-price {
  font-size: 12px;
}

.product-grid-bestsellers .base-price-pangv {
  display: none;
}

.product-grid-bestsellers .add-info {
  display: block;
}

.product-grid-bestsellers .item-box-overlay {
  display: none;
}

.product-grid-bestsellers .buttons {
  text-align: left;
  font-size: 0;
  white-space: nowrap;
}

  .product-grid-bestsellers .buttons button {
    width: 36px;
    height: 36px;
    margin: 0 5px 0 0;
    border: 1px solid #eee;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
  }

.product-grid-bestsellers button.product-box-add-to-cart-button {
  background-image: url('../img/product-cart-dark.svg');
}

.product-grid-bestsellers button.add-to-compare-list-button {
  background-image: url('../img/product-compare-dark.svg');
}

.product-grid-bestsellers button.add-to-wishlist-button {
  background-image: url('../img/product-wishlist-dark.svg');
}

.product-list .item-box {
  position: relative;
  float: left;
  width: calc(50% - 5px);
  margin: 0 0 10px 10px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
}

  .product-list .item-box:nth-child(2n+1) {
    clear: both;
    margin-left: 0;
  }

  .product-list .item-box .details {
    padding: 6px;
  }

.product-list .product-title {
  position: relative;
  z-index: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  font-weight: lighter;
}

.product-grid, .product-list,
.bestsellers-wrapper {
  margin: 0 0 50px;
}

.center-2 .product-grid,
.center-2 .product-list {
  margin: 0 0 20px;
}

.product-grid .title {
  border-bottom: 1px dashed #e6e6e6;
  margin: 0 0 20px;
  padding: 15px 0;
  text-align: center;
  color: #aaa;
}

  .product-grid .title strong {
    font-size: 30px;
    line-height: 30px;
    font-weight: lighter;
    text-transform: uppercase;
  }

.kivvi-carousel-block .title strong {
  color: var(--pacific-gold, #174C4B);
  font-weight: 700;
}

/* jCarouselMainWrapper (SevenSpikes JCarousel widget) section titles -
   e.g. "Related products" / "You may also like" on product/home pages. */
.nop-jcarousel .carousel-title strong {
  color: var(--pacific-gold, #174C4B) !important;
  font-weight: 700 !important;
}

.featured-product-grid {
  margin: 0 0 30px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 0 0 20px;
}

  .featured-product-grid .title {
    margin: 0 0 20px;
    border-bottom: 1px dashed #e6e6e6;
    padding: 15px 0;
  }

    .featured-product-grid .title strong {
      text-align: center;
      font-size: 26px;
      line-height: 26px;
      font-weight: lighter;
      text-transform: uppercase;
      color: #aaa;
    }

  .featured-product-grid .item-box {
    margin: 0 0 10px;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .featured-product-grid .product-item {
    display: table;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
  }

  .featured-product-grid .item-box .picture {
    display: table-cell;
    width: 145px;
    border-right: 1px solid #eee;
    vertical-align: middle;
  }

  .featured-product-grid .item-box .details {
    display: table-cell;
    width: calc(100% - 145px);
    padding: 19px 10px;
    text-align: left;
    vertical-align: middle;
  }

  .featured-product-grid .details-top {
    margin: 0 0 10px;
    padding: 25px 0 0;
  }

  .featured-product-grid .product-title {
    position: relative;
    z-index: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    font-weight: lighter;
  }

  .featured-product-grid .product-rating-box {
    bottom: auto;
    height: 25px;
    opacity: 1;
  }

  .featured-product-grid .rating {
    right: auto;
    margin: 0;
  }

.pager {
  position: relative;
  text-align: center;
}

  .pager:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #e6e6e6;
  }

  .pager ul {
    display: block;
    position: relative;
    z-index: 2;
    font-size: 0;
  }

  .pager li {
    display: inline-block;
    border: 1px solid #eee;
    border-width: 1px 0 1px 0;
    background-color: #fff;
    vertical-align: middle;
  }

    .pager li:first-child {
      border-left: 1px solid #eee;
    }

    .pager li:last-child {
      border-right: 1px solid #eee;
    }

    .pager li.first-page,
    .pager li.previous-page,
    .pager li.next-page,
    .pager li.last-page {
      width: 12%;
      max-width: 42px;
    }

    .pager li.previous-page,
    .pager li.next-page {
      width: 13%;
      max-width: 46.5px;
    }

    .pager li.previous-page {
      padding: 0 1% 0 0;
    }

      .pager li.previous-page a {
        border-right: 1px solid #eee;
      }

    .pager li.next-page {
      padding: 0 0 0 1%;
    }

      .pager li.next-page a {
        border-left: 1px solid #eee;
      }

    .pager li.individual-page,
    .pager li.current-page {
      width: 10%;
      max-width: 35px;
    }

      .pager li.current-page span {
        font-weight: bold;
        color: #c09e6c;
      }

    .pager li a,
    .pager li span {
      display: block;
      height: 55px;
      text-align: center;
      font-size: 16px; /*reset zeroing*/
      line-height: 55px;
      cursor: pointer;
    }

    .pager li.previous-page a,
    .pager li.next-page a,
    .pager li.first-page a,
    .pager li.last-page a {
      position: relative;
      font-size: 0;
    }

      .pager li.previous-page a:before,
      .pager li.next-page a:before,
      .pager li.first-page a:before,
      .pager li.last-page a:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 16px;
        height: 16px;
        margin: auto;
        text-align: center;
        font-family: 'pacific';
        font-size: 8px;
        line-height: 16px;
        color: #000;
        opacity: 0.4;
      }

      .pager li.previous-page a:before {
        content: "\e902";
      }

      .pager li.next-page a:before {
        content: "\e901";
      }

      .pager li.first-page a:before {
        content: "\e920";
      }

      .pager li.last-page a:before {
        content: "\e921";
      }

    .pager li.total-summary {
      display: none;
    }

      .pager li.total-summary:only-child {
        display: inline-block;
        padding: 20px;
        font-size: 13px;
        font-weight: bold;
        color: #666;
      }


/* PRODUCT PAGE */

.product-essential {
  margin: 0 0 20px;
}

  .product-essential:after {
    content: "";
    display: block;
    clear: both;
  }

.gallery-wrapper {
  position: relative;
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
}

.gallery .picture {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  text-align: center;
  font-size: 0;
}

  .gallery .picture a {
    display: block;
    position: relative;
    max-width: 100%; /*Ie fix*/
  }

.product-page-layout-two
.gallery .picture a img {
  width: 100%;
}

.gallery .picture-thumbs {
  margin: 10px 10px 0;
  overflow: hidden;
  font-size: 0;
}

.gallery .thumb-item {
  position: relative;
  float: left;
  width: calc(33.3333% - 6.6666px);
  margin: 0 0 10px 10px;
  border: 1px solid #eee;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}

  .gallery .thumb-item:nth-child(3n+1) {
    margin-left: 0;
  }

.video-gallery .video-thumbs {
  margin: 10px 10px 0;
  font-size: 0;
}

.video-gallery .thumb-item {
  float: none;
  width: 100% !important;
  height: 315px;
  margin-left: 0 !important;
}

.video-gallery .product-image-holder {
  width: 100%;
  height: 315px;
}

.product-social-buttons {
  text-align: center;
  font-size: 0;
}

.product-social-sharing li {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

.product-social-sharing a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
}

  .product-social-sharing a:before {
    content: "";
    width: 30px;
    font-family: 'pacific';
    font-size: 15px;
    line-height: 30px;
    color: #fff;
  }

  .product-social-sharing a.facebook {
    background-color: #4a65a2;
  }

  .product-social-sharing a.twitter {
    background-color: #3abafd;
  }

  .product-social-sharing a.pinterest {
    background-color: #bd2d45;
  }

  .product-social-sharing a.google {
    background-color: #e94949;
  }

  .product-social-sharing a.facebook:before {
    content: "\e910";
  }

  .product-social-sharing a.twitter:before {
    content: "\e95b";
    font-size: 14px;
  }

  .product-social-sharing a.pinterest:before {
    content: "\e923";
    font-size: 17px;
  }

  .product-social-sharing a.google:before {
    content: "\e912";
    font-size: 12px;
  }

.overview-wrapper {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
}

.overview {
  position: relative;
  padding: 20px;
  text-align: left;
}

.discontinued-product {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #dd464d;
}

.product-details-page .product-name {
  margin: 20px -10px 0;
  border-bottom: 1px dashed #e6e6e6;
  padding: 10px;
  text-align: center;
}

  .product-details-page .product-name h1 {
    font-size: 30px;
    font-weight: lighter;
    text-transform: uppercase;
    color: #aaa;
  }

.product-details-page .breadcrumb {
  margin: 10px 0;
  text-align: left;
}

.overview .short-description {
  margin: 0 0 20px;
  border-bottom: 1px solid #eee;
  padding: 0 0 20px;
  text-align: justify;
  font-size: 13px;
  line-height: 25px;
}

.product-reviews-overview {
  margin: 0 0 20px;
  border-bottom: 1px solid #eee;
  padding: 0 0 20px;
  font-size: 0;
}

.product-review-box {
  margin: 0 0 15px;
}

  .product-review-box .rating {
    width: 90px;
    height: 15px;
    background: url('../img/rating1-mobile.svg') left repeat-x;
  }

    .product-review-box .rating div {
      height: 15px;
      background: url('../img/rating2-mobile.svg') left repeat-x;
    }

.product-review-links,
.product-no-reviews {
  font-size: 13px;
  font-weight: normal;
  color: #c09e6c;
}

  .product-review-links a,
  .product-no-reviews a {
    transition: 0.3s ease;
  }

    .product-review-links a:hover,
    .product-no-reviews a:hover {
      text-decoration: underline;
    }

.product-review-links {
  display: inline-block;
}

  .product-review-links + div {
    display: inline-flex;
  }

    .product-review-links + div:before {
      content: "|";
      margin: 0 5px;
      color: #bababa;
    }

.overview-info-wrapper {
  margin: 0 0 15px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 0 0 15px;
  font-size: 13px;
}

  .overview-info-wrapper .value {
    color: #444;
  }

    .overview-info-wrapper .value a {
      font-weight: normal;
      color: #c09e6c;
    }

  .overview-info-wrapper > div {
    margin: 10px 0;
  }

.overview .additional-details div,
.variant-overview .additional-details div {
  margin: 10px 0;
}

.overview .availability,
.variant-overview .availability {
  margin: 0 0 15px;
  border-bottom: 1px solid #eee;
  padding: 0 0 15px;
}

  .overview .availability label,
  .variant-overview .availability label {
    display: none;
  }

.overview .stock,
.variant-overview .stock {
  position: relative;
  height: 40px;
  padding: 0 0 0 47px;
}

  .overview .stock:before,
  .variant-overview .stock:before {
    content: "\e92f";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background-color: #c09e6c;
    text-align: center;
    font-family: 'pacific';
    font-size: 20px;
    line-height: 38px;
    color: rgba(0,0,0,.3);
  }

.overview .out-of-stock .stock:before,
.variant-overview .out-of-stock .stock:before {
  content: "\e930";
}

.overview .stock-block,
.variant-overview .stock-block {
  position: relative;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

  .overview .stock-block .value,
  .variant-overview .stock-block .value {
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-weight: normal;
    color: #444;
  }

.back-in-stock-subscription {
  font-size: 0;
}

  .back-in-stock-subscription button {
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: 13px;
    line-height: 20px;
    color: #c09e6c;
  }

.overview .delivery,
.variant-overview .delivery {
  margin: 0 0 15px;
  border-bottom: 1px solid #eee;
  padding: 0 0 15px;
}

  .overview .delivery label,
  .variant-overview .delivery label {
    display: none;
  }

.free-shipping {
  display: inline-block;
  position: relative;
  height: 40px;
  padding: 10px 0 10px 47px;
  vertical-align: middle;
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
  color: #444;
}

  .free-shipping:before {
    content: "\e92d";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background-color: #c09e6c;
    padding: 0 5px 0 0;
    text-align: center;
    font-family: 'pacific';
    font-size: 19px;
    line-height: 40px;
    color: rgba(0,0,0,.3);
  }

.overview .delivery-date,
.variant-overview .delivery-date {
  display: inline-block;
  position: relative;
  height: 40px;
  padding: 0 0 0 47px;
  vertical-align: middle;
}

  .overview .delivery-date:before,
  .variant-overview .delivery-date:before {
    content: "\e90e";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background-color: #c09e6c;
    text-align: center;
    font-family: 'pacific';
    font-size: 19px;
    line-height: 40px;
    color: rgba(0,0,0,.3);
  }

  .overview .delivery-date span,
  .variant-overview .delivery-date span {
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-weight: normal;
    color: #444;
  }

.product-estimate-shipping {
  margin: 20px 0;
  border-bottom: 1px solid #eee;
  padding: 0 0 20px;
}

  .product-estimate-shipping a {
    display: inline-block;
  }

  .product-estimate-shipping i {
    display: inline-block;
    transform: rotate(45deg);
    margin: 0 0 3px 10px;
    border: solid black;
    border-width: 0 1px 1px 0;
    padding: 3px 3px;
  }

  .product-estimate-shipping .shipping-loading {
    display: none !important;
  }

  .product-estimate-shipping .shipping-title {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #444;
  }

  .product-estimate-shipping .shipping-price {
    margin: 0 0 0 5px;
  }

  .product-estimate-shipping .shipping-date {
    margin: 10px 0 0;
  }

.overview-buttons {
  margin: 0 0 15px;
}

.overview-buttons,
.download-sample {
  text-align: center;
}

  .overview-buttons div {
    display: inline-block;
    vertical-align: middle;
  }

.overview .add-to-wishlist-button,
.variant-overview .add-to-wishlist-button,
.overview .add-to-compare-list-button,
.overview .email-a-friend-button,
.download-sample-button {
  width: 45px;
  height: 45px;
  margin: 3px;
  border: none;
  background-color: #eee;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  font-size: 0;
  transition: 0.3s ease;
}

.overview .add-to-wishlist-button,
.variant-overview .add-to-wishlist-button {
  background-image: url('../img/product-wishlist-grey.svg');
}

.overview .add-to-compare-list-button {
  background-image: url('../img/product-compare-grey.svg');
}

.overview .email-a-friend-button {
  background-image: url('../img/email-a-friend.svg');
}

.download-sample-button {
  display: block;
  background-image: url('../img/download-sample.svg');
}

.attribute,
.rental-attributes {
  margin: 0 0 15px;
  border-bottom: 1px solid #eee;
  padding: 0 0 15px;
}

.attribute-title,
.attribute-label {
  margin: 0 0 5px;
  font-size: 14px;
  text-transform: uppercase;
}

.attributes select,
.attributes .datepicker {
  width: 100%;
  border: none;
  background-color: #eee;
  background-position: right 17.5px center;
  padding: 0 30px 0 15px;
  color: #444;
}

.attributes option.disabled {
  color: #ccc;
}

.attributes .qty-box-parent {
  position: relative;
  padding-right: 50px;
}

.attributes .qty-box {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0 auto 1px;
}

  .attributes .qty-box label {
    display: none !important;
  }

  .attributes .qty-box input {
    width: 45px;
    height: 100%;
    padding: 0;
    text-align: center;
  }

.attributes li.disabled {
  pointer-events: none;
  opacity: 0.5;
}

  .attributes li.disabled label {
    text-decoration: line-through;
  }

.attributes .option-list.radio-list {
  font-size: 0;
}

  .attributes .option-list.radio-list li {
    display: inline-block;
    margin: 5px 10px 5px 0;
  }

.attributes .option-list input[type="radio"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

  .attributes .option-list input[type="radio"]:checked ~ label {
    background-color: #c09e6c;
    color: #fff;
  }

.attributes .option-list.radio-list label {
  display: block;
  background-color: #eee;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: normal;
  color: #444;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.attributes .option-list.checkbox-list {
  font-size: 0;
}

  .attributes .option-list.checkbox-list li {
    display: block;
  }

.attributes .option-list input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.attributes .option-list.checkbox-list label {
  display: inline-block;
  position: relative;
  padding: 0 0 0 21px;
  font-size: 14px;
  line-height: 30px;
  color: #444;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

  .attributes .option-list.checkbox-list label:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
  }

.attributes .option-list input[type="checkbox"]:checked ~ label:before {
  border-color: #c09e6c;
}

.attributes .option-list input[type="checkbox"]:checked ~ label:after {
  content: "\e909";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-family: 'pacific';
  font-size: 13px;
  line-height: 16px;
  color: #c09e6c;
}

.rental-attributes .attribute-item {
  margin: 0 0 10px;
}

.attributes .datepicker {
  width: 280px;
  height: 45px;
  background-image: url('../img/date.svg');
  background-position: right 12px center;
  background-repeat: no-repeat;
  text-align: left;
}

.ui-datepicker {
  width: 280px;
  box-shadow: 0 0 20px rgba(2,2,4,.2);
  background-color: #fff;
  padding: 5px;
  text-align: center;
}

.ui-datepicker-header {
  position: relative;
  height: 32px;
  margin: 0 0 5px;
  background-color: #fff;
  color: #c09e6c;
}

  .ui-datepicker-header a {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    background-color: #eee;
    transition: 0.3s ease;
    font-size: 0;
  }

    .ui-datepicker-header a:hover {
      background-color: #c09e6c;
    }

    .ui-datepicker-header a.ui-datepicker-prev {
      left: 0;
    }

      .ui-datepicker-header a.ui-datepicker-prev:before {
        content: "\e902";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        font-family: 'pacific';
        font-size: 8px;
        line-height: 32px;
        transition: 0.3s ease;
        color: #aaa;
      }

    .ui-datepicker-header a.ui-datepicker-next {
      right: 0;
    }

      .ui-datepicker-header a.ui-datepicker-next:before {
        content: "\e901";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        font-family: 'pacific';
        font-size: 8px;
        line-height: 32px;
        transition: 0.3s ease;
        color: #aaa;
      }

    .ui-datepicker-header a:hover:before {
      color: #fff;
    }

.ui-datepicker-title {
  position: relative;
  z-index: 0;
  font-size: 14px;
  line-height: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

.ui-datepicker-calendar th {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.ui-datepicker-calendasr th,
.ui-datepicker-calendar td {
  width: 14.285%;
}

  .ui-datepicker-calendar th span,
  .ui-datepicker-calendar td a {
    display: block;
    min-height: 38px;
    line-height: 38px;
    color: #444;
  }

.ui-datepicker-calendar a.ui-state-highlight {
  background: #c09e6c url('../img/calendar-back.png') no-repeat center;
  font-weight: bold;
  color: #fff;
}

.ui-datepicker-calendar a.ui-state-active {
  background-color: #eee;
  font-weight: bold;
}

.attribute-squares {
  font-size: 0;
}

  .attribute-squares li {
    display: inline-block;
    position: relative;
    margin: 5px;
    text-align: center;
    line-height: normal !important;
  }

  .attribute-squares label {
    display: block;
    margin: 0 !important;
  }

  .attribute-squares input {
    position: relative;
    z-index: -1;
    margin: -20px -6px 0;
  }

  .attribute-squares span {
    display: block;
  }

.attribute-square {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

.attributes .qq-upload-button {
  margin: 5px 0;
  background-color: #c09e6c;
  padding: 10px 0;
  font-weight: bold;
  color: #fff;
}

span[title~="White"] .attribute-square {
  box-shadow: inset 0 0 0 1px #ddd;
}

.selected-value span[title~="White"] > span {
  box-shadow: none;
}

.selected-value .attribute-square:before {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.selected-value .attribute-square:after {
  content: "\e909";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 15px;
  margin: auto;
  text-align: center;
  font-family: 'pacific';
  font-size: 14px;
  color: #000;
  opacity: 0.5;
}

.attribute-squares li.disabled {
  position: relative;
  opacity: 1;
}

  .attribute-squares li.disabled:after {
    content: "\e90a";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ddd;
    background-color: #fff;
    text-align: center;
    font-family: 'pacific';
    font-size: 18px;
    line-height: 35px;
    color: #dd464d;
  }

.image-squares .tooltip-container {
  display: none;
  position: absolute;
  bottom: 48px;
  left: -82px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  background-color: #fff;
  padding: 10px;
}

  .image-squares .tooltip-container:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px 10px 0;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.06));
  }

.image-squares li:hover .tooltip-container {
  display: block;
}

.giftcard {
  clear: both;
  margin: 0 0 20px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 0 0 20px;
}

  .giftcard div {
    margin: 0 0 20px;
  }

    .giftcard div:last-child {
      margin: 0;
    }

  .giftcard label {
    display: block;
    margin: 0 0 5px;
    font-size: 14px;
  }

  .giftcard input,
  .giftcard textarea {
    width: 100%;
    height: 45px;
    border: none;
    background-color: #eee;
    padding: 0 30px 0 15px;
    color: #444;
  }

  .giftcard textarea {
    height: 150px;
    margin: 0;
    padding: 15px;
  }

.overview .prices,
.variant-overview .prices {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  text-align: left;
}

.overview .rental-price,
.variant-overview .rental-price {
  display: block;
  margin: 0 0 5px;
}

.overview .product-price,
.variant-overview .product-price {
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  color: #c09e6c;
}

.overview .old-product-price,
.variant-overview .old-product-price,
.overview .non-discounted-price,
.variant-overview .non-discounted-price {
  display: inline-block;
  margin: 0 0 0 18px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: line-through;
}

  .overview .product-price label,
  .variant-overview .product-price label,
  .overview .old-product-price label,
  .variant-overview .old-product-price label,
  .overview .non-discounted-price label,
  .variant-overview .non-discounted-price label {
    display: none;
  }

.overview .tax-shipping-info,
.overview .base-price-pangv,
.variant-overview .tax-shipping-info,
.variant-overview .base-price-pangv {
  display: block;
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: normal;
}

  .overview .tax-shipping-info a,
  .variant-overview .tax-shipping-info a {
    text-decoration: underline;
  }

.tier-prices {
  margin: 0 0 20px;
}

  .tier-prices .title {
    margin: 0 0 18px;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
  }

  .tier-prices .table-wrapper {
    border: none;
    background-color: transparent;
  }

  .tier-prices .prices-table {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    font-size: 13px;
    color: #444;
  }

  .tier-prices .prices-row {
    float: left;
    width: 50%;
  }

    .tier-prices .prices-row > div {
      padding: 15px;
      text-align: center;
    }

  .tier-prices .field-header {
    font-weight: bold;
    text-transform: uppercase;
  }

  .tier-prices .item-quantity,
  .tier-prices .item-price {
    border-top: 1px solid #eee
  }

  .tier-prices .item-price {
    font-weight: bold;
    color: #c09e6c;
  }

.customer-entered-price {
  margin: 0 0 20px;
  overflow: hidden;
}

  .customer-entered-price > div {
    display: inline-block;
  }

  .customer-entered-price .price-input {
    margin: 0 0 15px;
  }

  .customer-entered-price .enter-price-label {
    margin: 0 10px 0 0;
    font-size: 14px;
  }

  .customer-entered-price .enter-price-input {
    width: 70px;
    height: 45px;
    border: none;
    background-color: #eee;
    text-align: center;
    font-weight: bold;
    color: #444;
  }

.overview .add-to-cart,
.variant-overview .add-to-cart {
  margin: 0 0 20px;
}

.overview .min-qty-notification,
.variant-overview .min-qty-notification {
  margin: 0 0 10px;
}

.overview .add-to-cart-panel,
.variant-overview .add-to-cart-panel {
  position: relative;
  overflow: hidden;
}

.overview .qty-label,
.variant-overview .qty-label {
  display: none !important;
}

.add-to-cart-qty-wrapper {
  position: relative;
  float: left;
  width: 70px;
  padding: 0 30px 0 0;
}

  .add-to-cart-qty-wrapper .qty-input {
    width: 40px;
    height: 50px;
    border: none;
    background-color: #c09e6c;
    padding: 10px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s ease;
    color: #fff;
  }

.add-to-cart-panel:hover .qty-input {
  background-color: #ae864b;
}

.add-to-cart-qty-wrapper .plus,
.add-to-cart-qty-wrapper .minus {
  display: block;
  position: absolute;
  right: 0;
  width: 30px;
  height: 25px;
  background-color: #c09e6c;
  font-size: 0;
  transition: 0.3s ease;
  cursor: pointer;
}

.add-to-cart-qty-wrapper .plus {
  top: 0;
}

  .add-to-cart-qty-wrapper .plus:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 11px;
    width: 8px;
    height: 2px;
    background-color: rgba(0,0,0,.3);
  }

  .add-to-cart-qty-wrapper .plus:after {
    content: "";
    position: absolute;
    top: 12px;
    left: 14px;
    width: 2px;
    height: 8px;
    background-color: rgba(0,0,0,.3);
  }

.add-to-cart-qty-wrapper .minus {
  bottom: 0;
}

  .add-to-cart-qty-wrapper .minus:before {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 11px;
    width: 8px;
    height: 2px;
    background-color: rgba(0,0,0,.3);
  }

.add-to-cart-panel:hover .add-to-cart-qty-wrapper .plus,
.add-to-cart-panel:hover .add-to-cart-qty-wrapper .minus {
  background-color: #ae864b;
}

.add-to-cart-panel .qty-dropdown {
  float: left;
  width: 70px;
  height: 50px;
  border: none;
  background-color: #c09e6c;
  background-image: url('../img/arrow-semi-transparent.svg');
  text-align: center;
  text-align-last: center;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s ease;
  color: #fff;
}

.add-to-cart-panel:hover .qty-dropdown {
  background-color: #ae864b;
}

.overview .add-to-cart-button,
.variant-overview .add-to-cart-button {
  display: block;
  float: left;
  width: calc(100% - 71px);
  height: 50px;
  margin: 0 0 0 1px;
  border: none;
  background-color: #c09e6c;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

.overview .add-to-cart-panel:hover .add-to-cart-button,
.variant-overview .add-to-cart-panel:hover .add-to-cart-button {
  background-color: #ae864b;
}

.overview .add-to-cart-button span,
.variant-overview .add-to-cart-button span {
  position: relative;
  padding: 0 0 0 20px;
}

  .overview .add-to-cart-button span:before,
  .variant-overview .add-to-cart-button span:before {
    content: "\e905";
    position: absolute;
    top: -3px;
    left: -7px;
    font-family: 'pacific';
    font-size: 20px;
    font-weight: normal;
  }

.overview .pre-order-availability-date,
.variant-overview .pre-order-availability-date {
  margin: 15px 0 0;
  font-size: 14px;
  font-style: italic;
}

.product-share-button {
  display: inline-block;
  overflow: hidden;
}

.full-description {
  clear: both;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 20px;
}

.product-collateral {
  clear: both;
  margin: 0 0 20px;
}

  .product-collateral > div {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .product-collateral .title {
    margin: 0 0 15px;
    font-size: 14px;
    text-transform: uppercase;
    color: #444;
  }

.product-specs-box {
  text-align: left;
}

  .product-specs-box thead {
    display: none;
  }

  .product-specs-box .title strong {
    position: relative;
    padding: 0 0 0 25px;
  }

    .product-specs-box .title strong:before {
      content: "\e907";
      position: absolute;
      top: 3px;
      left: 0;
      margin: auto;
      font-family: 'pacific';
      font-size: 11px;
      font-weight: normal;
      color: #aaa;
    }

  .product-specs-box .table-wrapper {
    margin-bottom: -21px;
    border: none;
  }

  .product-specs-box .data-table {
    margin: 0;
  }

    .product-specs-box .data-table td {
      border-left: none;
      border-right: none;
      border-bottom: 1px solid #eee;
      border-color: #eee;
      padding: 17px 20px;
      text-align: left;
      font-size: 13px;
      color: #888;
    }

    .product-specs-box .data-table .spec-value {
      color: #444;
    }

      .product-specs-box .data-table .spec-value a {
        color: #c09e6c;
      }

  .product-specs-box .attribute-squares {
    display: inline-block;
    vertical-align: middle;
  }

  .product-specs-box .attribute-square {
    width: 20px !important;
    height: 20px !important;
    cursor: default;
  }

  .product-specs-box .spec-group-name {
    display: none !important;
  }

.product-tags-box {
  text-align: left;
}

  .product-tags-box .title {
    display: inline;
    margin: 0 25px 0 0;
  }

    .product-tags-box .title strong {
      position: relative;
      padding: 0 0 0 25px;
    }

      .product-tags-box .title strong:before {
        content: "\e931";
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        font-family: 'pacific';
        font-size: 16px;
        font-weight: normal;
        color: #aaa;
      }

.product-tags-list {
  display: inline;
}

  .product-tags-list ul {
    display: inline;
    font-size: 0;
  }

  .product-tags-list li {
    display: inline-block;
    margin: 2.5px;
  }

    .product-tags-list li.separator {
      display: none;
    }

  .product-tags-list a {
    display: inline-block;
    background-color: #eee;
    padding: 8px 13px;
    font-size: 12px; /*reset zeroing*/
    transition: 0.3s ease;
  }

    .product-tags-list a:hover {
      background-color: #c09e6c;
      color: #fff;
    }

.product-collateral >
div.product-variant-list {
  border: none;
  background-color: transparent;
  padding: 0;
}

.product-variant-line {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 10px;
}

  .product-variant-line:after {
    content: "";
    display: block;
    clear: both;
  }

.variant-picture {
  position: relative;
  width: 300px;
  max-width: 100%;
  margin: 0 auto 15px;
  border: 1px solid #eee;
  overflow: hidden;
}

  .variant-picture:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .variant-picture img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

.variant-overview {
  width: 100%;
  text-align: left;
}

  .variant-overview .variant-name {
    margin: 0 0 15px;
    border-bottom: 1px solid #eee;
    padding: 0 0 15px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

  .variant-overview .variant-description {
    margin: 0 0 15px;
    border-bottom: 1px solid #eee;
    padding: 0 0 15px;
    text-align: justify;
    font-size: 13px;
    line-height: 25px;
  }

  .variant-overview .attributes select {
    max-width: 400px;
  }

.variant-overview-buttons-wrapper {
  overflow: hidden;
}

.variant-overview-buttons {
  float: left;
  width: 55px;
}

.variant-overview .add-to-wishlist-button {
  width: 50px;
  height: 50px;
  margin: 0;
}

.variant-overview .add-to-cart {
  float: left;
  width: calc(100% - 55px);
  max-width: 345px;
}

.ui-tabs .ui-tabs-nav {
  margin: 0 0 -1px;
}

  .ui-tabs .ui-tabs-nav li + li {
    margin-top: 5px;
  }

  .ui-tabs .ui-tabs-nav a {
    display: block;
    position: relative;
    border: 1px solid transparent;
    background-color: #e9e9e9;
    padding: 18px 22px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s ease;
  }

.ui-tabs .ui-state-active a,
.ui-tabs .ui-state-hover a {
  border: 1px solid #eee;
  background-color: #fff;
  color: #222;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-tab.ui-state-default a {
  background-color: #fff;
  color: var(--pacific-gold, #174C4B);
}

.ui-tabs .ui-tabs-panel {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 25px 20px;
  animation: fadein 0.3s;
}

.ui-tabs p:first-child {
  margin-top: 0;
}

.ui-tabs p:last-child {
  margin-bottom: 0;
}

.ui-tabs .ui-tabs-hide {
  display: none;
}


/* ESTIMATE SHIPPING */

.estimate-shipping-popup {
  position: relative;
  max-width: 800px;
  margin: auto;
  background-color: #fff;
  padding: 25px;
  transform: scale(0.8);
  transition: all 0.2s ease;
  opacity: 0;
}

  .estimate-shipping-popup strong {
    visibility: hidden;
  }

.mfp-ready .estimate-shipping-popup {
  transform: scale(1);
  opacity: 1;
}

.mfp-removing .estimate-shipping-popup {
  transform: scale(0.8);
  opacity: 0;
}

.estimate-shipping-popup-zoom-in.mfp-bg {
  background-color: rgba(102,102,102,.9);
  opacity: 0.95;
}

.estimate-shipping-popup-zoom-in.mfp-ready {
  z-index: 1750;
}

.estimate-shipping-popup-zoom-in.mfp-removing {
  transition: all 0.3s ease;
  opacity: 0;
}

.estimate-shipping-row {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  position: relative;
}

.estimate-shipping-row-item {
  flex: 0 1 100%;
}

.mfp-container .shipping-address {
  max-width: none;
  margin: 10px 0 0;
}

.mfp-container .address-item + div {
  padding: 0 0 0 15px;
}

.mfp-container .address-item .required {
  top: 0;
}

.mfp-container .shipping-options {
  position: relative; /*preloader referrence*/
  margin: 10px 0 25px;
}

.mfp-container .shipping-header-item {
  align-self: flex-end;
  border: none !important;
  padding: 12px 5px !important;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mfp-container .shipping-options-body {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #eee;
  border-collapse: collapse;
}

.mfp-container .shipping-option {
  display: table-row;
  font-size: 13px;
  cursor: pointer;
}

  .mfp-container .shipping-option.active {
    font-weight: bold;
    color: #333;
  }

  .mfp-container .shipping-option > div {
    display: table-cell;
    border-top: 1px solid #eee;
    padding: 13px 11px;
  }

.mfp-container .shipping-item {
  border-right: 1px solid #eee;
  overflow: hidden;
  padding: 8px 0;
  overflow-wrap: break-word;
}

.estimate-shipping-row-item-radio {
  flex: 0 0 30px;
  width: 24px;
}

.estimate-shipping-radio {
  display: none;
}

  .estimate-shipping-radio + label {
    display: inline-block;
    position: relative;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border: 1px solid #333;
    border-radius: 50%;
    background-color: #fff;
    font-size: 0;
  }

  .estimate-shipping-radio:checked + label:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #333;
  }

.apply-shipping-button-container {
  text-align: center;
}

.mfp-container .apply-shipping-button {
  margin: 5px 0;
  border: none;
  background-color: #c09e6c;
  padding: 15px 45px;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s ease;
  text-transform: uppercase;
  color: #fff;
}

  .mfp-container .apply-shipping-button:hover {
    background-color: #ae864b;
  }

.mfp-container .no-shipping-options {
  padding: 30px 15px;
  text-align: center;
}

.mfp-container .message-failure {
  margin: 10px 0 -5px;
}

@media all and (max-width: 600px) {

  .estimate-shipping-popup {
    padding: 25px 3%;
  }

  .mfp-container .shipping-address {
    flex-flow: column;
  }

  .mfp-container .address-item {
    width: 100%;
  }

    .mfp-container .address-item + div {
      margin-top: 15px;
      padding: 0;
    }
}


/* PRODUCT REVIEWS */

.product-reviews .title {
  margin: -20px -20px 20px;
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

.write-review {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eee;
}

  .write-review .fieldset {
    max-width: 500px;
    margin: 0 auto 20px;
  }

  .write-review .form-fields {
    margin: 0 0 20px;
  }

  .write-review .review-rating {
    position: relative;
    overflow: hidden;
    text-align: center;
  }

.review-rating + .review-rating {
  margin-top: 10px;
}

.write-review .review-rating ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100px;
  margin: auto;
}

.write-review .review-rating label {
  display: block;
  float: left;
  width: calc(50% - 50px);
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
}

.review-rating ul {
  vertical-align: middle;
  font-size: 0;
}

.write-review .review-rating li {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 15px;
  color: #909090;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

  .write-review .review-rating li.first,
  .write-review .review-rating li.last {
    display: none;
  }

  .write-review .review-rating li.rating-options {
    margin: 0 5px;
    font-size: 0;
  }

.write-review .rating-options .vote-star {
  display: inline-block;
  width: 18px;
  height: 15px;
  margin: 0;
  background: url('../img/write-review-rating2.svg') no-repeat center;
  font-size: 0;
  cursor: pointer;
}

.write-review .rating-options input[type='radio'] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

  .write-review .rating-options input[type='radio']:checked ~ label {
    background-image: url('../img/write-review-rating1.svg');
  }

  .write-review .rating-options input[type='radio']:checked + label {
    background-image: url('../img/write-review-rating2.svg');
  }

.write-review .captcha-box {
  margin: 15px 0 0;
}

.write-review .buttons {
  max-width: 500px;
  margin: 0 auto 10px;
}

.write-review .button-1 {
  display: block;
  width: 100%;
  border: none;
  background-color: #c09e6c;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

  .write-review .button-1:before {
    content: "\e929";
    display: inline-block;
    margin: 0 7px 0 0;
    vertical-align: text-bottom;
    font-family: 'pacific';
    font-size: 18px;
    line-height: 18px;
    font-weight: normal;
  }

  .write-review .button-1:hover {
    background-color: #ae864b;
  }

.write-review .message-error {
  margin: 0 0 20px;
}

.product-review-list {
  margin: 0 0 -1px;
  border: 1px solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20px;
}

.product-review-item {
  margin: 25px 0 55px;
}

  .product-review-item:last-child {
    margin-bottom: 25px;
  }

  .product-review-item .review-item-head {
    margin: 0 0 15px;
    overflow: hidden;
  }

  .product-review-item .product-review-box {
    margin: 0 0 15px;
    font-size: 0;
  }

    .product-review-item .product-review-box.additional {
      display: none;
    }

    .product-review-item .product-review-box .rating {
      width: 70px;
      height: 11px;
      margin: auto;
      background: url('../img/rating1.svg') left repeat-x;
    }

      .product-review-item .product-review-box .rating div {
        height: 11px;
        background: url('../img/rating2.svg') left repeat-x;
      }

  .product-review-item .review-title {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #444;
  }

  .product-review-item .review-info {
    margin: 0 0 10px;
  }

    .product-review-item .review-info label {
      display: none;
    }

    .product-review-item .review-info .user {
      display: inline-block;
      position: relative;
      padding: 0 0 0 20px;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      transition: 0.3s ease;
      color: #c09e6c;
    }

      .product-review-item .review-info .user:before {
        content: "\e91e";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        font-family: 'pacific';
        font-size: 16px;
        font-weight: normal;
        color: #888;
      }

    .product-review-item .review-info a.user:hover {
      color: #ae864b;
    }

    .product-review-item .review-info .date {
      position: relative;
      padding: 0 0 0 22px;
      font-size: 14px;
      color: #444;
    }

    .product-review-item .review-info .user + .date {
      margin: 0 0 0 30px;
    }

    .product-review-item .review-info .date:before {
      content: "\e90e";
      position: absolute;
      top: 1px;
      bottom: 0;
      left: 0;
      margin: auto;
      font-family: 'pacific';
      font-size: 16px;
      font-weight: normal;
      color: #888;
    }

  .product-review-item .review-text {
    margin: 0 0 20px;
    text-align: justify;
    font-size: 13px;
    line-height: 25px;
    font-weight: normal;
  }

  .product-review-item .review-avatar {
    display: none;
    font-size: 0;
    line-height: normal;
  }

    .product-review-item .review-avatar a {
      display: block;
    }

.product-review-helpfulness {
  font-size: 0;
}

  .product-review-helpfulness .question,
  .product-review-helpfulness .vote-stats {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    line-height: 20px;
    color: #aaa;
  }

  .product-review-helpfulness .question {
    margin: 0 7px 0 0;
  }

  .product-review-helpfulness .result {
    display: block;
    margin: 10px 0 0;
    font-size: 12px; /*reset zeroing*/
  }

  .product-review-helpfulness .vote-options {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
  }

    .product-review-helpfulness .vote-options .vote {
      display: inline-block;
      position: relative;
      width: 20px;
      height: 20px;
      margin: 0 2.5px;
      border: 1px solid #eee;
      vertical-align: middle;
      transition: 0.3s ease;
      cursor: pointer;
    }

      .product-review-helpfulness .vote-options .vote:hover {
        border-color: #c09e6c;
        background-color: #c09e6c;
      }

      .product-review-helpfulness .vote-options .vote:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 8px;
        height: 2px;
        background-color: #c09e6c;
        margin: auto;
        transition: 0.3s ease;
      }

      .product-review-helpfulness .vote-options .vote:first-child:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        height: 8px;
        margin: auto;
        background-color: #c09e6c;
        transition: 0.3s ease;
      }

      .product-review-helpfulness .vote-options .vote:hover:before,
      .product-review-helpfulness .vote-options .vote:first-child:hover:after {
        background-color: #fff;
      }

  .product-review-helpfulness .vote-stats {
    margin: 0 0 0 7px;
  }

.product-review-item .reply {
  margin: 20px 0 0;
  border: 1px dashed #e6e6e6;
  padding: 20px;
  font-size: 13px;
  line-height: 25px;
}

.product-review-item .reply-header {
  margin: 0 0 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}


/* WISHLIST & COMPARE LIST */

.wishlist-content {
  min-height: 300px;
}

  .wishlist-content .message-error {
    margin: 0 0 10px;
  }

.wishlist-info {
  max-width: 480px;
  margin: auto;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 12px;
}

.wishlist-content .tax-shipping-info {
  margin: 20px 0 0;
  text-align: center;
  color: #aaa;
}

.wishlist-content .buttons {
  margin: 0 0 30px;
  font-size: 0;
}

.wishlist-content .button-2 {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 14px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #888;
}

  .wishlist-content .button-2:hover {
    border-color: #c09e6c;
    background-color: #c09e6c;
    color: #fff;
  }

  .wishlist-content .button-2:before {
    margin: 0 10px 0 0;
    vertical-align: text-bottom;
    font-family: 'pacific';
    line-height: 16px;
    font-weight: normal;
    color: #000;
    opacity: 0.6;
  }

.wishlist-content .wishlist-add-to-cart-button:before {
  content: "\e905";
  font-size: 17px;
}

.wishlist-content .update-wishlist-button:before {
  content: "\e93f";
  font-size: 16px;
}

.wishlist-content .email-a-friend-wishlist-button:before {
  content: "\e914";
  font-size: 12px;
}

.wishlist-content .wishlist-add-to-cart-button {
  border-color: #c09e6c;
  background-color: #c09e6c;
  color: #fff;
}

.wishlist-content .button-2.wishlist-add-to-cart-button:hover {
  border-color: #ae864b;
  background-color: #ae864b;
}

.wishlist-page .share-info {
  text-align: center;
  font-size: 14px;
}

.wishlist-page .share-label {
  display: block;
  position: relative;
  padding: 0 0 35px;
}

  .wishlist-page .share-label:before {
    content: "\e940";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    font-family: 'pacific';
    font-size: 18px;
    color: #ccc;
  }

.wishlist-page .share-info a {
  display: block;
  margin: 0 0 5px;
  overflow: hidden;
  font-weight: bold;
  color: #c09e6c;
}

.wishlist-page .no-data,
.compare-products-page .no-data,
.shopping-cart-page .no-data {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

.compare-products-page {
  position: relative;
  overflow: hidden;
}

  .compare-products-page .clear-list {
    display: inline-block;
    position: relative;
    margin: 0 0 20px;
    padding: 5px 0 5px 18px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #c09e6c;
  }

    .compare-products-page .clear-list:before {
      content: "\e941";
      position: absolute;
      top: 2px;
      left: 0;
      font-family: 'pacific';
      font-size: 17px;
      font-weight: normal;
      color: #888;
    }

.compare-products-table {
  display: none;
}

.compare-products-page img {
  max-width: 100%;
}

.compare-products-page .remove-button {
  width: 100%;
  border: none;
  background-color: #eee;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #888;
}

  .compare-products-page .remove-button:hover {
    background-color: #c09e6c;
    color: #fff;
  }

  .compare-products-page .remove-button span {
    position: relative;
    padding: 0 0 0 17px;
  }

    .compare-products-page .remove-button span:before {
      content: "\e941";
      position: absolute;
      top: -3px;
      left: 0;
      font-family: 'pacific';
      font-size: 17px;
      font-weight: normal;
    }

.compare-products-table .full-description {
  display: none;
}

.compare-products-page .product-picture a {
  display: block;
  position: relative;
}

  .compare-products-page .product-picture a:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .compare-products-page .product-picture a img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

.compare-products-page .product-name a {
  display: block;
  font-size: 14px;
  font-weight: normal;
  transition: 0.3s ease;
  color: #444;
}

  .compare-products-page .product-name a:hover {
    color: #c09e6c;
  }

.compare-products-page .product-price {
  font-size: 14px;
  font-weight: bold;
  color: #444;
}

.compare-products-page .specification a {
  font-weight: bold;
  color: #c09e6c;
}

.compare-products-page .attribute-squares {
  display: inline-block;
  vertical-align: middle;
}

.compare-products-page .attribute-square {
  width: 20px;
  height: 20px;
  cursor: default;
}

.compare-products-mobile .product-picture {
  display: table;
  width: 100%;
}

  .compare-products-mobile .product-picture > ul {
    display: table-row;
  }

  .compare-products-mobile .product-picture li {
    display: table-cell;
  }

.compare-products-mobile .compare-section > .title {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

.compare-products-mobile .compare-section {
  margin: 0 0 10px;
  border: 1px solid #eee;
}

  .compare-products-mobile .compare-section.product a,
  .compare-products-mobile .description .item,
  .compare-products-mobile .price .item,
  .compare-products-mobile .specification .item,
  .compare-products-mobile .full-description .item {
    display: block;
    border-top: 1px solid #eee;
    background-color: #fff;
    padding: 7px;
    text-align: center;
  }


/* TOPICS */

.topic-block {
  margin: 20px;
}

.topic-page a {
  font-weight: bold;
  color: #c09e6c;
}

.topic-password form,
.topic-page .page-body,
.not-found-page .page-body,
.registration-result-page .page-body {
  max-width: 900px;
  margin: auto;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
  line-height: 26px;
}

.home-page-welcome-message {
  margin: 0 0 50px;
  text-align: center;
}

/* Welcome message with a configured background image: two-column card
   (rounded image block left, text right) instead of the old faint
   full-bleed background-image-behind-text look. The image moves to a
   ::before pseudo so it gets its own rounded box. The old design's
   per-breakpoint padding/background-position overrides in 1500.css and
   1800.css (padding-left: calc(38-40% - 5px) to clear a background-image
   that no longer exists here) were removed - they were shoving the
   ::before image flush against the card's top/left edge on wide screens.
   !important kept here as a guard against any breakpoint file re-adding
   a conflicting declaration in the future. */
.home-page-welcome-message.with-image-background {
  display: flex !important;
  align-items: stretch !important;
  gap: 32px;
  margin: 100px 0 30px !important;
  background-color: #FAF3EA !important;
  background-image: none !important;
  border-radius: 16px;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.08));
  padding: 24px !important;
  text-align: center;
}

  .home-page-welcome-message.with-image-background:before {
    content: "" !important;
    display: block !important;
    flex: 0 0 38% !important;
    max-width: 420px;
    min-height: 260px;
    border-radius: 12px !important;
    background-image: url(/images/thumbs/0001047_WEB-1-325X392.jpeg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .home-page-welcome-message.with-image-background > * {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 0;
  }

  /* Match mockup: taller/roomier card, no divider rule under the
     heading, dark neutral copy instead of the inherited brand-amber
     rich-text color, and paragraphs kept to a readable line length
     instead of stretching the full column width. */
  .home-page-welcome-message.with-image-background:before {
    min-height: 340px;
  }

  .home-page-welcome-message.with-image-background hr {
    display: none !important;
  }

  .home-page-welcome-message.with-image-background h1,
  .home-page-welcome-message.with-image-background h2,
  .home-page-welcome-message.with-image-background h3 {
    margin: 0 0 20px !important;
    border-bottom: none !important;
    padding: 0 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px;
    color: #202827 !important;
  }

  .home-page-welcome-message.with-image-background p,
  .home-page-welcome-message.with-image-background > * > strong:first-child {
    max-width: 560px;
    margin: 0 auto 16px !important;
    color: #4a5250 !important;
    font-size: 15px;
    line-height: 1.8;
  }

  .home-page-welcome-message.with-image-background > * > strong:first-child {
    display: block;
    font-size: 17px;
  }

@media all and (max-width: 767px) {
  .home-page-welcome-message.with-image-background {
    flex-direction: column !important;
  }

    .home-page-welcome-message.with-image-background:before {
      flex-basis: 220px !important;
      max-width: 100%;
      min-height: 220px;
    }
}

/* the per-breakpoint margin tiers that used to sit here (0 0 30px above
   1261px, 0 -30px 30px above 1801px) were removed - the base rule now sets
   one margin for every width, so re-adding a tier would silently undo it */

.home-page .topic-block {
  margin: 0;
  color: #aaa;
  padding-right: 300px;
  padding-left: 200px;
}

.home-page .topic-block-title h2 {
  margin: 0 0 20px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 15px 0;
  font-size: 30px;
  font-weight: lighter;
  text-transform: uppercase;
}

.home-page .topic-block-body {
  /*text-align: justify;*/
  font-size: 14px;
  line-height: 26px;
}

.popup-window .topic-page {
  padding: 15px;
}

.topic-password {
  text-align: center;
}

.enter-password-title {
  margin: 0 0 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bold;
  color: #444;
}

.enter-password-form {
  display: inline-block;
  overflow: hidden;
}

  .enter-password-form #password {
    float: left;
    width: 200px;
    height: 45px;
  }

  .enter-password-form .button-1 {
    float: left;
    width: auto;
    height: 45px;
    border: none;
    background-color: #c09e6c;
    padding: 0 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
  }

.password-error {
  margin: 0 0 10px;
}

.not-found-page p {
  margin: 30px 0;
}

.not-found-page strong {
  color: #666;
}


/* CONTACT & EMAIL A FRIEND */

.contact-page .page-body,
.email-a-friend-page .page-body,
.apply-vendor-page .page-body {
  max-width: 900px;
  margin: auto;
  border: 1px solid #eee;
  background-color: #fff;
  font-size: 14px;
  line-height: 26px;
}

.contact-page .topic-block,
.email-a-friend-page .topic-block,
.apply-vendor-page .topic-block {
  margin: 0;
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.contact-page .topic-block-title h2,
.email-a-friend-page .topic-block-title h2,
.apply-vendor-page .topic-block-title h2 {
  margin: 0 0 10px;
  font-size: 16px;
  text-transform: uppercase;
  color: #444;
}

.contact-page .fieldset,
.email-a-friend-page .fieldset,
.apply-vendor-page .fieldset {
  margin: 0;
}

.contact-page .form-fields,
.email-a-friend-page .form-fields,
.apply-vendor-page .form-fields {
  max-width: 750px;
  margin: auto;
  padding: 20px;
}

.contact-page .inputs,
.email-a-friend-page .inputs,
.apply-vendor-page .inputs {
  max-width: none;
}

  .contact-page .inputs label,
  .email-a-friend-page .inputs label,
  .apply-vendor-page .inputs label {
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

.contact-page .buttons,
.email-a-friend-page .buttons,
.apply-vendor-page .buttons {
  border-top: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.contact-page .button-1,
.email-a-friend-page .button-1,
.apply-vendor-page .button-1 {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

  .contact-page .button-1:hover,
  .email-a-friend-page .button-1:hover,
  .apply-vendor-page .button-1:hover {
    background-color: #ae864b;
  }

.contact-page .message-error,
.email-a-friend-page .message-error,
.apply-vendor-page .message-error {
  margin: 0 0 10px;
}

.contact-page .result,
.email-a-friend-page .result,
.apply-vendor-page .result {
  padding: 20px;
  text-align: center;
}

.email-a-friend-page .title {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

  .email-a-friend-page .title h2 {
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    color: #c09e6c;
  }

.apply-vendor-page input[name="uploadedFile"] {
  float: left;
}

.apply-vendor-page .terms-of-service {
  margin: 20px 0 0;
}

  .apply-vendor-page .terms-of-service input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .apply-vendor-page .terms-of-service label {
    display: inline-block;
    position: relative;
    padding: 0 0 0 21px;
    font-size: 14px;
    line-height: 30px;
    color: #444;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

    .apply-vendor-page .terms-of-service label:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid #aaa;
      border-radius: 50%;
    }

.apply-vendor-page input:checked ~ label:before {
  border-color: #c09e6c;
}

.apply-vendor-page input:checked ~ label:after {
  content: "\e909";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-family: 'pacific';
  font-size: 13px;
  line-height: 16px;
  color: #c09e6c;
}

.apply-vendor-page .terms-of-service .read {
  font-size: 14px;
  color: #c09e6c;
  cursor: pointer;
}


/* REGISTRATION, LOGIN */

.registration-page .fieldset,
.registration-page .buttons {
  max-width: 900px;
  margin: 0 auto 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .registration-page .fieldset .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.registration-page .inputs > label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.gender {
  display: block;
  text-align: left;
  font-size: 0;
}

  .gender span {
    display: inline-block;
    padding: 0 30px 0 0;
  }

  .gender input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .gender label {
    display: inline-block;
    position: relative;
    height: 45px;
    margin: 0;
    padding: 0 0 0 55px;
    font-size: 14px;
    line-height: 45px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

    .gender label:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 45px;
      height: 45px;
      border: 2px solid #eee;
      border-radius: 50%;
      background: #eee no-repeat center bottom;
    }

  .gender .male label:before {
    background-image: url('../img/male.svg');
  }

  .gender .female label:before {
    background-image: url('../img/female.svg');
  }

  .gender input[type="radio"]:checked ~ label {
    color: #444;
  }

    .gender input[type="radio"]:checked ~ label:before {
      border-color: #c09e6c;
    }

.date-of-birth select {
  width: calc(33.3333% - 6.6666px); /*always single line*/
}

  .date-of-birth select + select {
    margin: 0 0 0 10px;
  }

#check-availability-button {
  display: block;
  position: relative;
  margin: 15px auto 0;
  border: none;
  background-color: transparent;
  padding: 5px 10px 5px 22px;
  font-weight: bold;
  transition: 0.3s ease;
  color: #c09e6c;
}

  #check-availability-button:before {
    content: "\e91e";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    font-family: 'pacific';
    font-size: 17px;
    font-weight: normal;
    color: #444;
  }

  #check-availability-button:hover {
    color: #ae864b;
  }

#username-availabilty {
  display: block;
  margin: 5px 0 0;
  text-align: center;
  font-size: 14px;
}

  #username-availabilty:empty {
    display: none;
  }

.vat-status, .vat-note {
  display: block;
  margin: 10px 0 0;
  text-align: left;
  font-size: 13px; /*reset zeroing*/
  white-space: normal;
  font-weight: normal;
  color: #444;
}

  .vat-status em, .vat-note em {
    font-style: normal;
  }

.check-privacy-policy {
  text-align: center;
  line-height: 32px;
}

.buttons .check-privacy-policy {
  margin: 0 0 20px;
}

.check-privacy-policy input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.check-privacy-policy input ~ label {
  display: inline-block;
  position: relative;
  height: auto;
  margin: 0;
  padding: 0 0 0 21px;
  font-size: 14px;
  line-height: 30px;
  color: #444;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

  .check-privacy-policy input ~ label:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

.check-privacy-policy input:checked ~ label:before {
  border-color: #c09e6c;
}

.check-privacy-policy input:checked ~ label:after {
  content: "\e909";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-family: 'pacific';
  font-size: 13px;
  line-height: 16px;
  color: #c09e6c;
}

.check-privacy-policy .read {
  font-size: 14px;
  font-weight: bold;
  color: #c09e6c;
  cursor: pointer;
  transition: 0.3s ease;
}

  .check-privacy-policy .read:hover {
    color: #ae864b;
  }

.registration-page .buttons {
  text-align: center;
}

.registration-page .button-1,
.registration-result-page .button-1,
.login-page .button-1,
.password-recovery-page .button-1,
.account-page .button-1,
.return-request-page .button-1,
.user-agreement-page .button-1 {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

  .registration-page .button-1:hover,
  .registration-result-page .button-1:hover,
  .login-page .button-1:hover,
  .password-recovery-page .button-1:hover,
  .account-page .button-1:hover,
  .return-request-page .button-1:hover,
  .user-agreement-page .button-1:hover {
    background-color: #ae864b;
  }

.registration-result-page .page-body,
.account-activation-page .page-body {
  text-align: center;
}

.registration-result-page .result,
.account-activation-page .result {
  margin: 0 0 20px;
}

/* ===== Register result (Kivvi mock: tick badge, heading, subtitle, CTA).
   The stock .page-body card above supplies border/padding, so it is reset
   here and .register-result-card draws the card instead. */
.registration-result-page .page-body {
  max-width: none;
  border: none;
  background: none;
  padding: 40px 10px 60px;
}

.register-result-card {
  max-width: 620px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .12);
  padding: 46px 50px 44px;
  text-align: center;
}

.register-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background-color: #DCEBE1;
  color: #174C4B;
}

  .register-result-icon svg {
    width: 46px;
    height: 46px;
  }

  /* the little sparkle strokes either side of the badge in the mock */
  .register-result-icon:before,
  .register-result-icon:after {
    content: "";
    position: absolute;
    top: 22px;
    width: 20px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .register-result-icon:before {
    right: 100%;
    margin-right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' fill='none' stroke='%236cc08b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M17 6L9 9'/%3E%3Cpath d='M17 20H8'/%3E%3Cpath d='M17 34l-8-3'/%3E%3C/svg%3E");
  }

  .register-result-icon:after {
    left: 100%;
    margin-left: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' fill='none' stroke='%236cc08b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6l8 3'/%3E%3Cpath d='M3 20h9'/%3E%3Cpath d='M3 34l8-3'/%3E%3C/svg%3E");
  }

.registration-result-page .result {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 700;
  line-height: 36px;
  color: #123A47;
}

.register-result-subtitle {
  max-width: 460px;
  margin: 0 auto 30px;
  font-size: 15px;
  line-height: 26px;
  color: #6b7a79;
}

.registration-result-page .buttons {
  margin: 0;
  padding: 0;
}

.registration-result-page .register-continue-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  min-width: 300px;
  max-width: none !important;
  height: 54px;
  padding: 0 32px !important;
  border-radius: 14px !important;
  background-color: #174C4B !important;
  letter-spacing: .5px;
  color: #fff;
}

  .registration-result-page .register-continue-button:hover {
    background-color: #0f302f !important;
  }

  .register-result-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: #fff;
  }

    .register-result-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
    }

@media all and (max-width: 767px) {
  .register-result-card {
    padding: 34px 20px 30px;
  }

  .register-result-icon:before,
  .register-result-icon:after {
    display: none;
  }

  .registration-result-page .register-continue-button {
    width: 100% !important;
    min-width: 0;
  }
}

.login-page .login-tabs {
  max-width: 900px;
  margin: 0 auto 40px;
}

  .login-page .login-tabs .login-tabs-header {
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: transparent;
  }

    .login-page .login-tabs .login-tabs-header li {
      display: table-cell;
      vertical-align: bottom;
      overflow: hidden;
    }

      .login-page .login-tabs .login-tabs-header li:after {
        display: none; /*reset ui-tabs style*/
      }

    .login-page .login-tabs .login-tabs-header a {
      display: block;
      margin: 0 2.5px 0 0;
      padding: 20px;
      color: #888;
    }

    .login-page .login-tabs .login-tabs-header strong {
      position: relative;
      padding: 0 0 0 23px;
    }

      .login-page .login-tabs .login-tabs-header strong:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        font-family: 'pacific';
        font-size: 15px;
        font-weight: normal;
        color: #888;
      }

    .login-page .login-tabs .login-tabs-header .login strong:before {
      content: "\e91e";
    }

    .login-page .login-tabs .login-tabs-header .register strong:before {
      content: "\e929";
    }

    .login-page .login-tabs .login-tabs-header li:last-child a {
      margin: 0 0 0 2.5px;
    }

    .login-page .login-tabs .login-tabs-header li.ui-state-active a {
      border-bottom-color: transparent;
      color: #c09e6c;
    }

    .login-page .login-tabs .login-tabs-header li:not(.ui-tabs-active) a {
      /*bottom: -1px;*/
    }

  .login-page .login-tabs .login-tabs-block {
    border: 1px solid #eee;
    padding: 20px;
  }

.login-page .fieldset {
  margin: 0;
}

.login-page .text {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 27px;
}

.login-page .topic-block {
  display: inline-block;
  text-align: left;
  margin: 0;
}

  .login-page .topic-block strong:first-child {
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #444;
  }

  .login-page .topic-block ul li {
    position: relative;
    padding: 3px 0 3px 35px;
  }

    .login-page .topic-block ul li:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 12px;
      width: 8px;
      height: 8px;
      margin: auto;
      border-radius: 50%;
      background-color: #c09e6c;
    }

.login-page .inputs.login-field {
  position: relative;
  background: #eee;
}

  .login-page .inputs.login-field:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 50px;
    height: 50px;
    background-color: #dadada;
    text-align: center;
    font-family: 'pacific';
    font-size: 20px;
    line-height: 50px;
    pointer-events: none;
  }

  .login-page .inputs.login-field.username:before {
    content: "\e91e";
  }

  .login-page .inputs.login-field.email:before {
    content: "\e914";
    font-size: 14px;
  }

  .login-page .inputs.login-field.password:before {
    content: "\e942";
    font-size: 22px;
  }

  .login-page .inputs.login-field input {
    height: 50px;
    position: relative;
    z-index: 1;
    padding: 0 15px 0 60px;
  }

.login-page .inputs.reversed {
  overflow: hidden;
}

  .login-page .inputs.reversed input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .login-page .inputs.reversed input ~ label {
    display: inline-block;
    position: relative;
    float: left;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 10px 0 21px;
    font-size: 14px;
    line-height: 30px;
    color: #444;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

    .login-page .inputs.reversed input ~ label:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

  .login-page .inputs.reversed input:checked ~ label:before {
    border-color: #c09e6c;
  }

  .login-page .inputs.reversed input:checked ~ label:after {
    content: "\e909";
    position: absolute;
    top: 5px;
    left: 2px;
    width: 15px;
    height: 15px;
    text-align: center;
    font-family: 'pacific';
    font-size: 13px;
    line-height: 16px;
    color: #c09e6c;
  }

  .login-page .inputs.reversed .forgot-password {
    float: right;
  }

    .login-page .inputs.reversed .forgot-password a {
      font-size: 14px;
      line-height: 30px;
      font-weight: bold;
      transition: 0.3s ease;
      color: #c09e6c;
    }

      .login-page .inputs.reversed .forgot-password a:hover {
        color: #ae864b;
      }

.login-page .captcha-box {
  margin-bottom: 20px;
}

.login-page .buttons,
.password-recovery-page .buttons {
  margin: 0 -20px -20px;
  border-top: 1px solid #eee;
  padding: 20px;
  text-align: center;
  font-size: 0;
}

.checkout-as-guest-or-register-block .buttons {
  padding-bottom: 20px;
}

  .checkout-as-guest-or-register-block .buttons .button-1 {
    margin: 0 5px 5px;
  }

.login-page .buttons .checkout-as-guest-button {
  border: 1px solid #eee;
  background-color: #fff;
  transition: 0.3s ease;
  color: #888;
}

  .login-page .buttons .checkout-as-guest-button:hover {
    border-color: #c09e6c;
    background-color: #c09e6c;
    color: #fff;
  }

.login-page .page-body > .topic-block {
  display: block;
  max-width: 900px;
  margin: 0 auto 40px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .login-page .page-body > .topic-block .topic-block-title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

    .login-page .page-body > .topic-block .topic-block-title h2 {
      font-size: 16px;
    }

  .login-page .page-body > .topic-block .topic-block-body {
    text-align: center;
    font-size: 14px;
    line-height: 27px;
  }

/* ===== Login page redesign (Kivvi mock: tabbed teal card over a
   pastel-blob backdrop) - overrides the old gold-brand (#c09e6c)
   underline-tab styling above. theme.custom-1.css (admin-generated
   accent-color file) also targets some of these selectors with plain,
   non-important color rules - !important here beats it regardless of
   load order, same pattern used elsewhere in this file. */
.login-page .page-title {
  display: none !important;
}

.login-page.page,
.login-page .page-body {
  position: relative;
}

.login-page .page-body {
  min-height: 640px;
  margin: 0 -10px;
  padding: 60px 10px;
  overflow: hidden;
}

.login-page .login-tabs {
  position: relative;
  z-index: 1;
  max-width: 740px !important;
  margin: 0 auto !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .12);
}

  .login-page .login-tabs .login-tabs-header {
    display: flex !important;
  }

    .login-page .login-tabs .login-tabs-header li {
      display: block;
      flex: 1 1 50%;
      margin: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      background: none !important;
    }

      .login-page .login-tabs .login-tabs-header li a {
        height: 100%;
      }

    .login-page .login-tabs .login-tabs-header a {
      margin: 0 !important;
      padding: 22px 20px !important;
      border: none !important;
      border-radius: 20px 20px 0 0 !important;
      background-color: #fff !important;
      text-align: center;
      transition: background-color .3s ease;
    }

    .login-page .login-tabs .login-tabs-header strong {
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 !important;
      font-size: 15px;
      font-weight: 700 !important;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--pacific-gold, #174C4B) !important;
    }

      .login-page .login-tabs .login-tabs-header strong:before {
        position: static !important;
        font-size: 17px !important;
        color: inherit !important;
      }

    .login-page .login-tabs .login-tabs-header li.ui-state-active a {
      border-radius: 20px 20px 0 0 !important;
      background-color: #174C4B !important;
    }

    .login-page .login-tabs .login-tabs-header li.ui-state-active a strong,
    .login-page .login-tabs .login-tabs-header li.ui-state-active a strong:before {
      color: #fff !important;
    }

  .login-page .login-tabs .login-tabs-block {
    border: none !important;
    padding: 48px 56px !important;
    background-color: #fff;
  }

.login-page .login-welcome-heading {
  margin: 0 0 32px;
  text-align: center;
}

  .login-page .login-welcome-heading h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #202827;
  }

  .login-page .login-welcome-heading p {
    margin: 0;
    font-size: 15px;
    color: #6b7a79;
  }

.login-page .returning-wrapper .form-fields,
.login-page .returning-wrapper .buttons {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* The field's rounded grey box lives on the input, not on .inputs -
   the asp-validation-for span is a sibling inside .inputs, so a
   background there swallowed the error message inside the box. */
.login-page .inputs.login-field {
  margin: 0 0 16px;
  border-radius: 0 !important;
  background-color: transparent !important;
}

  .login-page .inputs.login-field:before {
    width: 56px !important;
    height: 56px !important;
    background-color: transparent !important;
    font-size: 18px !important;
    color: #8a9391;
  }

  .login-page .inputs.login-field input {
    width: 100%;
    height: 56px !important;
    padding: 0 20px 0 66px !important;
    border: none;
    border-radius: 14px;
    background-color: #F2EFE9;
    font-size: 15px;
    color: #202827;
  }

  .login-page .inputs.login-field .field-validation-error {
    display: block;
    margin: 6px 0 0;
    padding: 0 4px;
    font-size: 13px;
  }

.login-page .inputs.reversed {
  display: flex;
  align-items: center;
  margin: 4px 0 28px;
}

  .login-page .inputs.reversed input[type="checkbox"] {
    position: static !important;
    z-index: auto !important;
    opacity: 1 !important;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    accent-color: #174C4B;
  }

  .login-page .inputs.reversed input ~ label {
    float: none;
    padding: 0 !important;
    font-size: 14px;
    color: #4a5250;
  }

    .login-page .inputs.reversed input ~ label:before,
    .login-page .inputs.reversed input:checked ~ label:after {
      content: none !important;
    }

  .login-page .inputs.reversed .forgot-password {
    margin-left: auto;
  }

  .login-page .inputs.reversed .forgot-password a {
    color: #174C4B !important;
  }

    .login-page .inputs.reversed .forgot-password a:hover {
      color: #0f302f !important;
    }

.login-page .buttons {
  display: flex !important;
  justify-content: center;
  margin: 0 auto !important;
  border-top: none !important;
  padding: 0 !important;
}

.login-page .login-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 460px !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  background-color: #174C4B !important;
  letter-spacing: .5px;
}

  .login-page .login-button:hover {
    background-color: #0f302f !important;
  }

/* "New customer" tab - the register button was hidden by a display:none rule;
   it links to the registration page via registerUrl in the view */
.login-page .new-wrapper .text {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 26px;
  color: #4a5250;
}

.login-page .register-button,
.login-page .checkout-as-guest-button {
  display: block;
  width: 100%;
  max-width: 460px !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  letter-spacing: .5px;
}

.login-page .register-button {
  background-color: #174C4B !important;
  color: #fff !important;
}

  .login-page .register-button:hover {
    background-color: #0f302f !important;
  }

.login-page .checkout-as-guest-button {
  margin-bottom: 12px !important;
}

  .login-page .login-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
  }

    .login-page .login-button-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
    }

.external-authentication {
  display: block;
  max-width: 900px;
  margin: 0 auto 40px;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

  .external-authentication .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

  .external-authentication .buttons {
    margin: 0;
    border: none;
    padding: 0 0 5px !important;
  }

/* ===== Password recovery redesign (Kivvi mock: centred white card with
   an envelope badge over the site's doodle backdrop). The page-body no
   longer draws the card - .password-recovery-card does. */
.password-recovery-page .page-title {
  display: none !important;
}

.password-recovery-page .page-body {
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  background-color: transparent !important;
  padding: 60px 10px !important;
}

.password-recovery-card {
  max-width: 630px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .12);
  padding: 48px 56px;
  text-align: center;
}

.password-recovery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background-color: #DCEBE1;
}

  .password-recovery-icon svg {
    width: 48px;
    height: 48px;
  }

.password-recovery-title {
  margin: 0 0 14px !important;
  border: none !important;
  padding: 0 !important;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #123A47;
}

.password-recovery-page .tooltip {
  max-width: 480px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  color: #6b7a79;
}

.password-recovery-page .fieldset,
.password-recovery-page .form-fields {
  margin: 0;
  border: none;
  padding: 0;
}

.password-recovery-page .inputs.recovery-field {
  position: relative;
  margin: 0 0 20px;
  text-align: left;
}

  .password-recovery-page .inputs.recovery-field label {
    display: block;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: #202827;
  }

  .password-recovery-page .inputs.recovery-field:before {
    content: "\e914";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-right: 1px solid #e4e0d8;
    text-align: center;
    font-family: 'pacific';
    font-size: 16px;
    line-height: 56px;
    color: #8a9391;
    pointer-events: none;
  }

  .password-recovery-page .inputs.recovery-field input {
    width: 100%;
    height: 56px;
    padding: 0 20px 0 72px;
    border: none;
    border-radius: 14px;
    background-color: #F2EFE9;
    font-size: 15px;
    color: #202827;
  }

  .password-recovery-page .inputs.recovery-field .required {
    display: none;
  }

  .password-recovery-page .inputs.recovery-field .field-validation-error {
    display: block;
    margin: 6px 0 0;
    padding: 0 4px;
    font-size: 13px;
  }

.password-recovery-page .buttons {
  margin: 0 !important;
  border-top: none !important;
  padding: 0 !important;
}

.password-recovery-page .password-recovery-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background-color: #174C4B !important;
  letter-spacing: .5px;
}

  .password-recovery-page .password-recovery-button:hover {
    background-color: #0f302f !important;
  }

  .password-recovery-button-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: #fff;
  }

    .password-recovery-button-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
    }

/* ===== Register redesign (Kivvi mock: single centred card, five fields).
   The stock .registration-page .fieldset/.buttons rules above draw a card
   per fieldset - here one .register-card owns the framing instead. */
.registration-page .page-body {
  padding: 0 10px 60px;
}

.register-card {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .12);
  padding: 44px 56px 40px;
  text-align: center;
}

.register-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #DCEBE1;
}

  .register-icon svg {
    width: 48px;
    height: 48px;
  }

.register-heading {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  color: #202827;
}

.register-subtitle {
  max-width: 460px;
  margin: 0 auto 30px;
  font-size: 15px;
  line-height: 26px;
  color: #6b7a79;
}

.registration-page .register-card .fieldset {
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.registration-page .inputs.register-field {
  position: relative;
  /* base .inputs caps at 500px, which left the fields narrower than the
     full-width submit button sitting below them */
  max-width: none;
  margin: 0 0 18px;
  text-align: left;
  white-space: normal;
}

  .registration-page .inputs.register-field > label {
    display: inline-block;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: #202827;
  }

  /* base .inputs .required is an absolutely positioned red triangle pinned
     to the field's top-right corner - the mock wants a plain asterisk
     sitting next to the label instead */
  .registration-page .inputs.register-field .required {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 3px;
    font-size: 15px;
    line-height: 1;
    color: #e0393e;
  }

    .registration-page .inputs.register-field .required:before {
      content: none;
    }

  .register-field-control {
    position: relative;
  }

    /* icon well on the left of every control, with a hairline divider.
       Inline SVG rather than the 'pacific' icon font - the font has no
       house/building/handset glyphs matching the mock. */
    .register-field-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 56px;
      height: 56px;
      border-right: 1px solid #e4e0d8;
      color: #8a9391;
      pointer-events: none;
    }

      .register-field-icon svg {
        width: 22px;
        height: 22px;
      }

  .registration-page .register-field input,
  .registration-page .register-field select {
    width: 100%;
    height: 56px;
    padding: 0 20px 0 72px;
    border: none;
    border-radius: 14px;
    background-color: #F2EFE9;
    font-size: 15px;
    color: #202827;
  }

  .registration-page .register-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px 18px;
    cursor: pointer;
  }

  /* Select2 skin for the City field - the widget replaces the native select,
     so the field look (56px, cream, rounded, icon well on the left) has to be
     re-applied to .select2-selection. */
  .registration-page .register-field.city .select2-container {
    width: 100% !important;
  }

    .registration-page .register-field.city .select2-selection--single {
      display: flex;
      align-items: center;
      height: 56px;
      border: none;
      border-radius: 14px;
      background-color: #F2EFE9;
      padding: 0 46px 0 72px;
      outline: none;
    }

      .registration-page .register-field.city .select2-selection--single .select2-selection__rendered {
        padding: 0;
        font-size: 15px;
        line-height: 1.4;
        color: #202827;
      }

      .registration-page .register-field.city .select2-selection--single .select2-selection__placeholder {
        color: #8a9391;
      }

      /* replace the stock arrow with the same chevron the native select used */
      .registration-page .register-field.city .select2-selection--single .select2-selection__arrow {
        top: 0;
        right: 18px;
        width: 18px;
        height: 56px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
      }

        .registration-page .register-field.city .select2-selection--single .select2-selection__arrow b {
          display: none;
        }

  .registration-page .register-field.city .select2-dropdown {
    border: none;
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 10px 26px rgba(23, 76, 75, .16);
    overflow: hidden;
  }

  .registration-page .register-field.city .select2-search--dropdown {
    padding: 10px;
  }

    .registration-page .register-field.city .select2-search--dropdown .select2-search__field {
      height: 42px;
      border: 1px solid #e4e0d8;
      border-radius: 10px;
      padding: 0 12px;
      font-size: 14px;
      outline: none;
    }

  .registration-page .register-field.city .select2-results__option {
    padding: 10px 16px;
    font-size: 14px;
    color: #202827;
  }

    .registration-page .register-field.city .select2-results__option--highlighted[aria-selected] {
      background-color: #174C4B;
      color: #fff;
    }

    .registration-page .register-field.city .select2-results__option[aria-selected="true"] {
      background-color: #F2EFE9;
      color: #202827;
    }

  .register-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 2;
    width: 44px;
    height: 56px;
    border: none;
    background: none;
    color: #8a9391;
    cursor: pointer;
  }

    .register-password-toggle svg {
      width: 20px;
      height: 20px;
    }

    /* the slash is only drawn while the password is masked */
    .register-password-toggle.is-visible .register-password-toggle-slash {
      display: none;
    }

  .registration-page .register-field .field-validation-error {
    display: block;
    margin: 6px 0 0;
    padding: 0 4px;
    font-size: 13px;
  }

  /* the password rule message is HTML (a lead line plus a <ul> of rules) */
  .registration-page .register-field .password-rule-error p {
    margin: 0;
    line-height: 20px;
  }

  .registration-page .register-field .password-rule-error ul {
    margin: 2px 0 0;
    padding: 0 0 0 18px;
    list-style: disc;
  }

    .registration-page .register-field .password-rule-error li {
      margin: 0;
      line-height: 20px;
    }

.registration-page .register-card .buttons {
  max-width: none !important;
  margin: 26px 0 0 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.registration-page .register-next-step-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background-color: #174C4B !important;
  letter-spacing: .5px;
}

  .registration-page .register-next-step-button:hover {
    background-color: #0f302f !important;
  }

  .register-button-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: #fff;
  }

    .register-button-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
    }

.register-login-link {
  margin: 22px 0 0;
  font-size: 15px;
  color: #6b7a79;
}

  .register-login-link a {
    font-weight: 700;
    color: #174C4B;
  }

    .register-login-link a:hover {
      color: #0f302f;
    }

/* ===== Search page redesign (Kivvi mock: one compact horizontal bar -
   keyword column, category column, then the button). .search-input above
   draws its own border/background; the card takes that over. */
.search-page .search-input {
  margin: 0 0 40px;
  border: none;
  background: none;
}

.search-card {
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(23, 76, 75, .10);
  padding: 22px 26px;
  text-align: left;
}

  /* form > .fieldset (basic + advanced columns) + .buttons, laid out in one row */
  .search-card form {
    display: flex;
    align-items: flex-start;
    gap: 26px;
  }

  .search-page .search-card .fieldset {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border: none;
    padding: 0;
  }

  .search-page .search-card .form-fields {
    display: flex;
    align-items: flex-start;
    gap: 26px;
  }

/* columns sit side by side now, so the stacked layout's divider and the big
   watermark magnifier behind the first label both go */
.search-page .basic-search,
.search-page .advanced-search {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border: none;
  padding: 0;
}

  /* the keyword label matches .inputs.search-field > label exactly - it used to
     add its own padding-bottom on top of that rule's margin, which pushed the
     keyword input 8px below the category select */
  .search-page .basic-search .inputs:first-child label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #202827;
  }

    .search-page .basic-search .inputs:first-child label:before {
      content: none;
    }

.search-page .inputs.search-field {
  max-width: none;
  margin: 0 0 12px;
  text-align: left;
  white-space: normal;
}

  /* scoped through .search-card to outrank ".advanced-search .inputs
     label:first-child" further down this file, which is the same specificity
     but later in source order and was greying out the Category label only */
  .search-page .search-card .inputs.search-field > label {
    display: block;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #202827;
  }

.search-field-control {
  position: relative;
}

  .search-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 52px;
    height: 52px;
    color: #8a9391;
    pointer-events: none;
  }

    .search-field-icon svg {
      width: 20px;
      height: 20px;
    }

  .search-page .search-field-control input[type="text"],
  .search-page .search-field-control select {
    width: 100%;
    height: 52px;
    padding: 0 20px 0 52px;
    border: none;
    border-radius: 12px;
    background-color: #F2EFE9;
    font-size: 15px;
    color: #202827;
  }

  .search-page .search-field-control.no-icon input[type="text"],
  .search-page .search-field-control.no-icon select {
    padding-left: 20px;
  }

  .search-page .search-field-control select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px 18px;
    cursor: pointer;
  }

/* square teal checkboxes, replacing the theme's round radio-style ones */
.search-page .search-input .inputs.reversed {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  text-align: left;
}

  .search-page .search-input .inputs.reversed:last-child {
    margin-bottom: 0;
  }

  .search-page .search-input .inputs.reversed input[type="checkbox"] {
    position: static;
    z-index: auto;
    opacity: 1;
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    accent-color: #174C4B;
    cursor: pointer;
  }

  .search-page .search-input .inputs.reversed input ~ label {
    padding: 0;
    font-size: 15px;
    color: #202827;
    cursor: pointer;
  }

    .search-page .search-input .inputs.reversed input ~ label:before,
    .search-page .search-input .inputs.reversed input:checked ~ label:before,
    .search-page .search-input .inputs.reversed input:checked ~ label:after {
      content: none;
    }

/* button lines up with the inputs: label line-height (20px) + its margin (8px) */
.search-page .search-input .buttons {
  flex: 0 0 auto;
  margin: 28px 0 0;
  padding: 0;
  text-align: center;
}

.search-page .search-input .search-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 168px;
  max-width: none;
  height: 52px;
  margin: 0;
  padding: 0 26px;
  border-radius: 12px;
  background-color: #174C4B;
  letter-spacing: .5px;
}

  .search-page .search-input .search-button:hover {
    background-color: #0f302f;
  }

  .search-button-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    color: #fff;
  }

    .search-button-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
    }

/* stack the three columns once the row can no longer hold them */
@media all and (max-width: 1000px) {
  .search-card form,
  .search-page .search-card .form-fields {
    display: block;
  }

  .search-page .basic-search {
    margin: 0 0 16px;
  }

  .search-page .search-input .buttons {
    margin: 18px 0 0;
  }

  .search-page .search-input .search-button {
    width: 100%;
  }
}

.password-recovery-page .result {
  margin: 0 0 15px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}


/* ACCOUNT PAGES */

.account-page .edit-address,
.account-page .edit-address + .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .account-page .edit-address .inputs > label {
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

  .account-page .edit-address + .buttons {
    text-align: center;
  }

.account-page .description {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.account-page .no-data {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.account-page .message-error {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
}

.html-account-page .side-2 {
  margin: 0 0 20px;
}

.html-account-page .block {
  border: 1px solid #eee;
  background-color: #fff;
}

  .html-account-page .block .title {
    border: none;
    background-color: #c09e6c;
  }

    .html-account-page .block .title:after,
    .html-account-page .block .title strong {
      color: #fff;
    }

  .html-account-page .block .listbox {
    border-top: 1px solid #eee;
    border-bottom: none;
  }

.customer-info-page .fieldset,
.customer-info-page .buttons,
.multi-factor-auth .fieldset,
.multi-factor-auth > .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .customer-info-page .fieldset .title,
  .multi-factor-auth .fieldset .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.customer-info-page .buttons,
.multi-factor-auth .buttons {
  text-align: center;
}

.customer-info-page .inputs > label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.add-more-external-records {
  text-align: center;
  font-size: 14px;
  line-height: 27px;
}

  .add-more-external-records a {
    font-weight: bold;
    color: #c09e6c;
    transition: 0.3s ease;
  }

    .add-more-external-records a:hover {
      color: #ae864b;
    }

.account-page .button-2 {
  position: relative;
  border: none;
  background-color: transparent;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #c09e6c;
}

  .account-page .button-2:hover {
    color: #ae864b;
  }

.account-page .data-table td {
  padding-top: 20px;
  padding-bottom: 20px;
}

.account-page .data-table a {
  transition: 0.3s ease;
}

  .account-page .data-table a:hover {
    color: #c09e6c;
  }

.account-page .data-table .download a {
  position: relative;
  padding: 0 0 0 22px;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #c09e6c;
}

  .account-page .data-table .download a:hover {
    color: #ae864b;
  }

  .account-page .data-table .download a:before {
    content: "\e903";
    display: block;
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-bottom: 1px solid rgba(0,0,0,.5);
    text-align: center;
    font-family: 'pacific';
    font-size: 9px;
    line-height: 12px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
    transition: 0.3s ease;
  }

  .account-page .data-table .download a:hover:before {
    opacity: 0.5;
  }

.email-to-revalidate,
.email-to-revalidate-note {
  display: inline-block;
  margin: 10px 5px;
  vertical-align: top;
  font-size: 13px; /*reset zeroing*/
  white-space: normal;
}

.address-list-page .address-item,
.order-list-page .order-item,
.return-request-list-page .request-item {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
}

  .address-list-page .address-item .title,
  .order-list-page .order-item .title,
  .return-request-list-page .request-item .title {
    margin: 0 0 10px;
    border-bottom: 1px solid #eee;
    padding: 10px;
  }

  .order-list-page .order-item .title,
  .return-request-list-page .request-item .title {
    margin: 0 0 20px;
    padding: 20px;
  }

    .address-list-page .address-item .title strong,
    .order-list-page .order-item .title strong,
    .return-request-list-page .request-item .title strong {
      display: block;
      font-size: 16px;
      text-transform: uppercase;
      color: #444;
    }

  .address-list-page .address-item .title strong {
    position: relative;
    padding: 50px 0 0;
  }

    .address-list-page .address-item .title strong:before {
      content: "\e943";
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      font-family: 'pacific';
      font-size: 32px;
      line-height: 32px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

  .address-list-page .address-item .info,
  .order-list-page .order-item .info,
  .return-request-list-page .request-item .details {
    margin: 0 0 10px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
  }

    .address-list-page .address-item .info li,
    .order-list-page .order-item .info li,
    .return-request-list-page .request-item .details li {
      padding: 2.5px 0;
    }

  .order-list-page .order-item .info,
  .return-request-list-page .request-item .details {
    margin: 0 0 20px;
  }

  .address-list-page .address-item .buttons,
  .order-list-page .order-item .buttons {
    border-top: 1px solid #eee;
    padding: 10px;
  }

.address-list-page .button-2,
.order-list-page .button-2 {
  margin: 0 7px;
  padding: 7px 10px 7px 30px;
}

  .address-list-page .button-2:before,
  .order-list-page .button-2:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    text-align: center;
    font-family: 'pacific';
    line-height: 30px;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
    transition: 0.3s ease;
  }

  .address-list-page .button-2:hover:before,
  .order-list-page .button-2:hover:before {
    opacity: 0.5;
  }

.button-2.edit-address-button:before {
  content: "\e929";
}

.button-2.delete-address-button:before {
  content: "\e941";
}

.button-2.order-details-button:before {
  content: "\e929";
  font-size: 16px;
}

.button-2.return-items-button:before {
  content: "\e93f";
  font-size: 16px;
}

.address-list-page .add-button button {
  position: relative;
  max-width: none;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 70px 30px 30px;
  font-size: 16px;
  color: #444;
}

  .address-list-page .add-button button:before {
    content: "\e94a";
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    font-family: 'pacific';
    font-size: 32px;
    line-height: 32px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
    transition: 0.3s ease;
  }

  .address-list-page .add-button button:hover:before {
    opacity: 0.5;
  }

  .address-list-page .add-button button:hover {
    background-color: #fff;
    color: #c09e6c;
  }

.recurring-payments .title {
  position: relative;
  margin: 0;
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
  padding: 60px 20px 20px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  color: #444;
}

  .recurring-payments .title:before {
    content: "\e939";
    position: absolute;
    top: 15px;
    right: 0;
    left: 0;
    font-family: 'pacific';
    font-size: 32px;
    line-height: 32px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
  }

.recurring-payments .initial-order a {
  color: #c09e6c;
  transition: 0.3s ease;
}

  .recurring-payments .initial-order a:hover {
    color: #ae864b;
  }

.return-request-list-page a {
  font-weight: bold;
  color: #c09e6c;
  transition: 0.3s ease;
}

  .return-request-list-page a:hover {
    color: #ae864b;
  }

.return-request-list-page .comments {
  margin: 15px 0 0;
}

  .return-request-list-page .comments label {
    text-transform: uppercase;
    font-weight: bold;
    color: #444;
  }

.downloadable-products-page .data-table .date {
  white-space: nowrap;
}

.downloadable-products-page .data-table label {
  display: none;
}

.user-agreement-page .terms-of-agreement {
  margin: 0 0 20px;
  padding: 20px 0;
  text-align: center;
}

.user-agreement-page .buttons {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.user-agreement-button[disabled] {
  opacity: 0.3;
}

.account-page .subscription-list .select-boxes label {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.account-page .subscription-list .select-boxes input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.account-page .subscription-list .select-boxes label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.account-page .subscription-list .select-boxes input:checked ~ label:before {
  border-color: #c09e6c;
}

.account-page .subscription-list .select-boxes input:checked ~ label:after {
  content: "\e909";
  position: absolute;
  top: -1px;
  left: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-family: 'pacific';
  font-size: 13px;
  line-height: 16px;
  color: #c09e6c;
}

.account-page .subscription-list .data-table {
  margin: 0;
}

  .account-page .subscription-list .data-table th,
  .account-page .subscription-list .data-table td {
    padding: 20px;
  }

  .account-page .subscription-list .data-table .product,
  .account-page .subscription-list .data-table .info {
    padding-left: 0;
  }

.subscription-list .buttons {
  margin: 20px 0;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.reward-points-overview {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.reward-points-history .title {
  position: relative;
  margin: 0;
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
  padding: 60px 20px 20px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  color: #444;
}

  .reward-points-history .title:before {
    content: "\e947";
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    font-family: 'pacific';
    font-size: 32px;
    line-height: 32px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
  }

.reward-points-history .data-table label {
  display: none;
}

.reward-points-history .data-table td.message {
  font-weight: normal;
}

.reward-points-history .data-table td.points,
.reward-points-history .data-table td.points-balance {
  font-weight: bold;
}

.reward-points-history .pager {
  margin: 40px 0;
}

.change-password-page .fieldset {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

.change-password-page .inputs > label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.change-password-page .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.change-password-page .result {
  margin: 0 0 10px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.avatar-page .message-error {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
}

.avatar-page .fieldset {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.avatar-page .image {
  margin: 0 0 20px;
  line-height: 0;
}

  .avatar-page .image img {
    border: 1px solid #eee;
  }

.avatar-page input[type="file"] {
  overflow: hidden;
}

.avatar-page .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 0;
}

.avatar-page button {
  max-width: 200px;
  margin: 5px;
}

.avatar-page .button-2 {
  width: 100%;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

  .avatar-page .button-2:hover {
    border-color: #c09e6c;
    background-color: #c09e6c;
    color: #fff !important;
  }

.avatar-page .info {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.my-product-reviews-list-page .review-product-info {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 25px;
}

  .my-product-reviews-list-page .review-product-info a {
    font-weight: bold;
    color: #c09e6c;
    transition: 0.3s ease;
  }

    .my-product-reviews-list-page .review-product-info a:hover {
      color: #ae864b;
    }

.vendorinfo-page .fieldset {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.vendorinfo-page .inputs > label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.vendorinfo-page .vendor-picture {
  margin: 10px 0 0;
  text-align: center;
}

  .vendorinfo-page .vendor-picture img {
    display: block;
    margin: 0 auto 20px;
  }

.vendorinfo-page .remove-picture-button {
  background-color: #c09e6c;
  padding: 10px 15px;
  color: #fff;
}

  .vendorinfo-page .remove-picture-button:hover {
    background-color: #ae864b;
    color: #fff;
  }

.vendorinfo-page .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 0;
}

.gdpr-tools-page .text {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.gdpr-tools-page .buttons {
  text-align: center;
}

.check-gift-card-balance-page .form-fields {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

.check-gift-card-balance-page .inputs > label {
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

.check-gift-card-balance-page .buttons {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.check-gift-card-balance-page .result {
  margin: 0 0 10px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.multi-factor-auth .option-list {
  text-align: center;
}

.multi-factor-auth .option-item {
  margin: 5px 0 0;
}

.multi-factor-auth .checkout-page {
  padding-bottom: 5px !important;
}

.multi-factor-auth .payment-method {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.multi-factor-auth li:only-child {
  width: auto !important;
}

.multi-factor-auth li .buttons {
  position: relative; /*z-index fix*/
}

  .multi-factor-auth li .buttons button {
    background: none !important;
    padding: 0 !important;
    color: #000 !important;
    text-decoration: underline;
  }

.configure-provider .instruction:not(ul),
.configure-provider .card-body {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 3%;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.configure-provider .table-wrapper {
  margin: -21px 0 20px;
  padding: 3%;
  text-align: left;
  font-size: 14px;
  line-height: 25px;
}

.configure-provider .qr-code,
.configure-provider .manual-code {
  vertical-align: top;
}


/* SHOPPING CART */

.order-progress {
  margin: -10px -10px 20px;
  background-color: #eee;
  padding: 20px 0;
  text-align: center;
}

  .order-progress ul {
    display: table;
    width: 100%;
  }

  .order-progress li {
    display: table-cell;
  }

  .order-progress a {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    border-left: 1px solid #eee;
    background-color: #f7f7f7;
    font-size: 0; /*reset zeroing*/
  }

  .order-progress li a:before {
    content: "\e93c";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    font-family: 'pacific';
    font-size: 15px;
    line-height: 50px;
    font-weight: normal;
    color: #c09e6c;
  }

  .order-progress li a span {
    display: none;
  }

  .order-progress li.active-step a {
    cursor: pointer;
  }

  .order-progress li.current-step a {
    background-color: #c09e6c;
  }

  .order-progress li.inactive-step a {
    cursor: default;
  }

  .order-progress li.current-step a:before {
    color: #000;
    opacity: 0.5;
  }

  .order-progress li.inactive-step a:before {
    color: #000;
    opacity: 0.3;
  }

  .order-progress li.current-step.cart-step a:before,
  .order-progress li.inactive-step.cart-step a:before {
    content: "\e905";
    font-size: 22px;
  }

  .order-progress li.current-step.address-step a:before,
  .order-progress li.inactive-step.address-step a:before {
    content: "\e943";
    font-size: 24px;
  }

  .order-progress li.current-step.shipping-step a:before,
  .order-progress li.inactive-step.shipping-step a:before {
    content: "\e94b";
    font-size: 22px;
  }

  .order-progress li.current-step.payment-step a:before,
  .order-progress li.inactive-step.payment-step a:before {
    content: "\e94c";
    margin: 5px 0 0;
    font-size: 24px;
    line-height: 45px;
  }

  .order-progress li.current-step.confirm-step a:before,
  .order-progress li.inactive-step.confirm-step a:before {
    content: "\e94d";
    font-size: 22px;
  }

  .order-progress li.current-step.complete-step a:before,
  .order-progress li.inactive-step.complete-step a:before {
    content: "\e94e";
    font-size: 22px;
  }

.cart-content > .tax-shipping-info {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

  .cart-content > .tax-shipping-info a {
    font-weight: bold;
    color: #c09e6c;
    transition: 0.3s ease;
  }

    .cart-content > .tax-shipping-info a:hover {
      color: #ae864b;
    }

.remove-discount-button,
.remove-gift-card-button {
  float: right;
  width: 25px;
  height: 25px;
  margin: 0;
  border: none;
  background: url('../img/close.png') center no-repeat;
  cursor: pointer;
}

.shopping-cart-page .message-error {
  margin: 0 0 20px;
  font-size: 13px;
}

.cart-options {
  margin: 0 0 30px;
  text-align: center;
}

.common-buttons {
  display: none;
  margin: 0 0 20px;
  font-size: 0;
}

  .common-buttons button {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 0 3px;
    border: none;
    background-color: #e9e9e9;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #c09e6c;
  }

    .common-buttons button:hover {
      color: #ae864b;
    }

    .common-buttons button:before {
      content: "";
      width: 30px;
      margin: 0 7px 0 0;
      text-align: center;
      vertical-align: middle;
      font-family: 'pacific';
      font-size: 15px;
      line-height: 30px;
      font-weight: normal;
      color: #000;
      opacity: 0.6;
      transition: 0.3s ease;
    }

    .common-buttons button:hover:before {
      opacity: 0.6;
    }

  .common-buttons .update-cart-button:before {
    content: "\e93f";
  }

  .common-buttons .continue-shopping-button:before {
    content: "\e905";
    font-size: 18px;
  }

.checkout-attributes {
  max-width: 480px;
  margin: 0 auto -1px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .checkout-attributes dl {
    text-align: left;
  }

  .checkout-attributes dt {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

  .checkout-attributes dd {
    margin: 0 0 20px;
  }

    .checkout-attributes dd:last-child {
      margin: 0;
    }

  .checkout-attributes li {
    line-height: 24px;
  }

  .checkout-attributes select,
  .checkout-attributes .datepicker {
    min-width: 200px;
    max-width: 432px;
    border: none;
    background-color: #eee;
    background-position: right 17.5px center;
    padding: 0 30px 0 15px;
    color: #444;
  }

  .checkout-attributes input[type='text'],
  .checkout-attributes textarea {
    width: 100%;
  }

  .checkout-attributes .date-picker-wrapper select {
    width: calc(33.3333% - 6.6666px); /*always single line*/
  }

    .checkout-attributes .date-picker-wrapper select + select {
      margin: 0 0 0 10px;
    }

  .checkout-attributes .selected-value .attribute-square:before {
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  .checkout-attributes .selected-value .attribute-square:after {
    content: "\e909";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    text-align: center;
    font-family: 'pacific';
    font-size: 10px;
    line-height: 10px;
    color: #000;
    opacity: 0.5;
  }

  .checkout-attributes .option-list {
    font-size: 0;
  }

    .checkout-attributes .option-list li {
      display: inline-block;
      margin: 5px 10px 5px 0;
    }

    .checkout-attributes .option-list input[type="radio"],
    .checkout-attributes .option-list input[type="checkbox"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

      .checkout-attributes .option-list input[type="radio"] ~ label {
        display: block;
        background-color: #eee;
        padding: 9px 15px;
        font-size: 14px;
        font-weight: normal;
        color: #444;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .checkout-attributes .option-list input[type="radio"]:checked ~ label {
        background-color: #c09e6c;
        color: #fff;
      }

      .checkout-attributes .option-list input[type="checkbox"] ~ label {
        display: inline-block;
        position: relative;
        padding: 0 0 0 21px;
        font-size: 14px;
        line-height: 30px;
        color: #444;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

        .checkout-attributes .option-list input[type="checkbox"] ~ label:before {
          content: "";
          position: absolute;
          top: 6px;
          left: 0;
          width: 16px;
          height: 16px;
          border: 1px solid #e3e3e3;
          border-radius: 50%;
        }

      .checkout-attributes .option-list input[type="checkbox"]:checked ~ label:before {
        border-color: #c09e6c;
      }

      .checkout-attributes .option-list input[type="checkbox"]:checked ~ label:after {
        content: "\e909";
        position: absolute;
        top: 5px;
        left: 2px;
        width: 15px;
        height: 15px;
        text-align: center;
        font-family: 'pacific';
        font-size: 13px;
        line-height: 16px;
        color: #c09e6c;
      }

.selected-checkout-attributes {
  max-width: 480px;
  margin: 0 auto -1px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
  line-height: 25px;
}

.totals {
  max-width: 480px;
  margin: auto;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

.total-info {
  margin: 0 0 0px;
}

.cart-total td {
  width: 50%;
  font-size: 14px;
}

.cart-total-left {
  padding-left: 12px;
  text-align: left;
}

.cart-total-right {
  padding-right: 12px;
  text-align: right;
}

.cart-total td label,
.cart-total td span {
  display: block;
  padding: 8px;
}

.cart-total-right span {
  font-weight: bold;
  color: #666;
}

.cart-total .order-total td {
  padding-top: 10px;
  vertical-align: top;
}

.cart-total .order-total label,
.cart-total .order-total span {
  border-top: 1px solid #eee;
  padding: 10px 8px;
  font-weight: bold;
  color: #444;
}

.order-total .cart-total-left label,
.order-total .cart-total-left span {
  font-size: 16px;
}

.order-total .cart-total-right span {
  font-size: 20px;
}

.cart-total .earn-reward-points span {
  font-weight: normal;
}

.cart-total .giftcard-summary span {
  display: inline-block;
  white-space: nowrap;
}

.cart-total .giftcard-summary button {
  position: absolute;
  margin-top: 3px;
}

.terms-of-service {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}

  .terms-of-service:last-child {
    margin-bottom: 0;
  }

  .terms-of-service input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

    .terms-of-service input[type="checkbox"] ~ label {
      display: inline;
      position: relative;
      padding-left: 22px;
      font-size: 14px;
      color: #444;
      cursor: pointer;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

      .terms-of-service input[type="checkbox"] ~ label:before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        border: 1px solid #ccc;
        border-radius: 50%;
        vertical-align: middle;
      }

    .terms-of-service input[type="checkbox"]:checked ~ label:before {
      border-color: #c09e6c;
    }

    .terms-of-service input[type="checkbox"]:checked ~ label:after {
      content: "\e909";
      position: absolute;
      top: -1px;
      left: 2px;
      width: 15px;
      height: 15px;
      text-align: center;
      font-family: 'pacific';
      font-size: 13px;
      line-height: 16px;
      color: #c09e6c;
    }

  .terms-of-service label {
    cursor: pointer;
  }

  .terms-of-service a {
    font-weight: bold;
    color: #c09e6c;
    cursor: pointer;
    text-decoration: underline;
    transition: 0.3s ease;
  }

    .terms-of-service a:hover {
      color: #ae864b;
    }

.checkout-buttons {
  text-align: center
}

.checkout-button {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  transition: 0.3s ease;
  color: #fff;
}

  .checkout-button:hover {
    background-color: #ae864b;
  }

.cart-collaterals {
  margin: 0px;
}

  .cart-collaterals .title {
    position: relative;
    border-bottom: none;
    padding: 20px 60px;
    text-align: left;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
    cursor: pointer;
  }

    .cart-collaterals .title:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 15px;
      margin: auto;
      width: 25px;
      height: 25px;
      text-align: center;
      font-family: 'pacific';
      font-size: 20px;
      line-height: 25px;
      font-weight: normal;
      color: #000;
      opacity: 0.4;
    }

    .cart-collaterals .title:after {
      content: "\e904";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 12px;
      margin: auto;
      width: 18px;
      height: 18px;
      text-align: center;
      font-family: 'pacific';
      font-size: 14px;
      font-weight: normal;
      color: #aaa;
      transition: 0.5s ease;
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .cart-collaterals .title.open:after {
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
    }

  .cart-collaterals .coupon-box-wrapper .title:before {
    content: "\e94f";
    font-size: 22px;
  }

  .cart-collaterals .giftcard-box-wrapper .title:before {
    content: "\e950";
  }

  .cart-collaterals .shipping-wrapper > .title:before {
    content: "\e94b";
  }

  .cart-collaterals .coupon-box-wrapper,
  .cart-collaterals .giftcard-box-wrapper {
    margin: 0 0 20px;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .cart-collaterals .coupon-box,
  .cart-collaterals .giftcard-box {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 15px 15px 95px;
  }

    .cart-collaterals .coupon-box:after,
    .cart-collaterals .giftcard-box:after {
      content: "";
      position: absolute;
      bottom: 80px;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #eee;
    }

    .cart-collaterals .coupon-box > .title,
    .cart-collaterals .giftcard-box > .title {
      display: none;
    }

  .cart-collaterals .deals .hint,
  .cart-collaterals .shipping .hint {
    margin: 0 0 7px;
    text-align: left;
    font-size: 14px;
    line-height: 27px;
    font-weight: normal;
  }

  .cart-collaterals .coupon-code input {
    width: 100%;
    height: 50px;
  }

  .cart-collaterals .coupon-code button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    min-width: 200px;
    max-width: calc(100% - 20px);
    margin: auto;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fff url('../img/plus.svg') no-repeat left 15px center;
    padding: 15px 35px 15px 45px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-overflow: ellipsis;
    color: #c09e6c;
    opacity: 0;
    transition: 0.3s ease;
  }

  .cart-collaterals .active .coupon-code button {
    opacity: 1;
  }

  .cart-collaterals .coupon-code button:hover {
    border-color: #c09e6c;
    background-color: #c09e6c;
    background-image: url('../img/plus-hover.svg');
    color: #fff;
  }

  .cart-collaterals .message-failure {
    margin: 10px 0;
    font-size: 14px;
    color: #dd464d;
  }

    .cart-collaterals .message-failure:before {
      content: "\e93d";
      width: 18px;
      margin: 0;
      display: inline-block;
      border: 1px solid #dd464d;
      border-radius: 50%;
      text-align: center;
      font-family: 'pacific';
      font-size: 12px;
      line-height: 17px;
      font-weight: bold;
    }

  .cart-collaterals .message-success {
    margin: 10px 0;
    font-size: 14px;
    color: #47a267;
  }

    .cart-collaterals .message-success:before {
      content: "\e909";
      margin: 0;
      font-family: 'pacific';
      font-size: 12px;
    }

  .cart-collaterals .current-code {
    margin: 5px 0 0;
    background-color: #f6f6f6;
    padding: 5px;
    text-align: left;
    font-size: 13px;
    line-height: 25px;
    font-weight: normal;
  }

  .cart-collaterals .shipping-wrapper {
    position: relative;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .cart-collaterals .estimate-shipping-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
  }
/*.cart-collaterals .estimate-shipping-button {
    background-image:  url('../img/time-icon.svg');
}
.cart-collaterals .estimate-shipping-button:hover {
    background-image: url('../img/time-icon-hover.svg');
}
.cart-collaterals .shipping label {
    font-size: 13px;
    font-weight: bold;
    color: #666;
}
.cart-collaterals .shipping .inputs select,
.cart-collaterals .shipping .inputs input[type='text'] {
    height: 50px;
}
.cart-collaterals .shipping-wrapper {
    border: 1px solid #eee;
    background-color: #fff;
}
.cart-collaterals .estimate-shipping > .title {
    display: none;
}
.cart-collaterals .shipping {
    display: none;
    border-top: 1px solid #eee;
    padding: 15px;
}
.cart-collaterals .shipping-options {
    position: relative;
    margin: 0 -15px -15px;
    padding: 0 15px 95px;
}
.cart-collaterals .estimate-shipping-result {
	margin: 15px -15px -15px;
    border-top: 1px solid #eee;
    padding: 15px;
    font-size: 14px;
    line-height: 25px;
}
.cart-collaterals .estimate-shipping-result:empty {
	display: none;
}
.cart-collaterals .shipping-results li {
    padding: 2.5px 0;
}
.cart-collaterals .shipping-results strong {
    color: #666;
}*/


/* CHECKOUT PAGES */

.checkout-page .section {
  margin: 0 0 30px;
}

.ship-to-same-address,
.pickup-in-store {
  text-align: center;
}

  .ship-to-same-address .selector input[type="checkbox"],
  .pickup-in-store .selector input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .ship-to-same-address .selector input ~ label,
  .pickup-in-store .selector input ~ label {
    display: inline-block;
    position: relative;
    padding: 0 0 0 21px;
    font-size: 14px;
    line-height: 30px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

    .ship-to-same-address .selector input ~ label:before,
    .pickup-in-store .selector input ~ label:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

  .ship-to-same-address .selector input:checked ~ label:before,
  .pickup-in-store .selector input:checked ~ label:before {
    border-color: #c09e6c;
  }

  .ship-to-same-address .selector input:checked ~ label:after,
  .pickup-in-store .selector input:checked ~ label:after {
    content: "\e909";
    position: absolute;
    top: 5px;
    left: 2px;
    width: 15px;
    height: 15px;
    text-align: center;
    font-family: 'pacific';
    font-size: 13px;
    line-height: 16px;
    color: #c09e6c;
  }

.checkout-page .min-amount-warning {
  display: block;
  margin: 0 0 20px;
  text-align: center;
  font-size: 13px;
  line-height: 25px;
  color: #dd464d;
}

.checkout-page .address-list-page {
  display: none;
}

.checkout-page .address-grid {
  overflow: hidden;
}

.checkout-page .address-item {
  margin: 0 0 20px;
  background-color: #fff;
}

.checkout-page .address-box {
  border: 1px solid #eee;
  padding: 20px;
}

.checkout-page .address-item li {
  padding: 2.5px 0;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
  font-weight: normal;
}

.checkout-page .address-item .name {
  display: block;
  position: relative;
  margin: -20px -20px 10px;
  border-bottom: 1px solid #eee;
  padding: 50px 20px 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

  .checkout-page .address-item .name:before {
    content: "\e943";
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    font-family: 'pacific';
    font-size: 32px;
    line-height: 32px;
    font-weight: normal;
    color: #000;
    opacity: 0.3;
  }

.checkout-page .select-button {
  border: 1px solid #eee;
  border-top: none;
  padding: 20px;
  text-align: center;
}

  .checkout-page .select-button button {
    border: none;
    background-color: #c09e6c;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .checkout-page .select-button button:hover {
      background-color: #ae864b;
    }

.select-billing-address .title,
.select-shipping-address .title {
  margin: 0 0 20px;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444;
}

.section.new-billing-address,
.section.new-shipping-address {
  margin: 0;
  border: 1px solid #eee;
  background-color: #fff;
}

  .section.new-billing-address .title,
  .section.new-shipping-address .title {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 70px 30px 30px;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    color: #444;
  }

    .section.new-billing-address .title:before,
    .section.new-shipping-address .title:before {
      content: "\e94a";
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      font-family: 'pacific';
      font-size: 32px;
      line-height: 32px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

.checkout-page .edit-address {
  padding: 20px;
}

  .checkout-page .edit-address .inputs > label {
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

.checkout-page .billing-addresses + .buttons,
.checkout-page .shipping-addresses ~ .buttons {
  margin: 0 0 100px;
  border: 1px solid #eee;
  border-top: none;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

  .checkout-page .billing-addresses + .buttons button,
  .checkout-page .shipping-addresses ~ .buttons button {
    width: 100%;
    max-width: 300px;
    border: none;
    background-color: #c09e6c;
    padding: 17px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .checkout-page .billing-addresses + .buttons button:hover,
    .checkout-page .shipping-addresses ~ .buttons button:hover {
      background-color: #ae864b;
    }

.checkout-page .section.order-summary > .title {
  margin: 0 0 20px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 15px 0;
  text-align: center;
}

  .checkout-page .section.order-summary > .title strong {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    font-weight: lighter;
    text-transform: uppercase;
    color: #aaa;
  }

.checkout-page .section.order-summary .cart-info {
  position: static !important;
}

.checkout-page .section.order-summary .total-info {
  margin: 0;
}

.checkout-page .pickup-in-store .description {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 25px;
}

.checkout-page .pickup-points {
  margin: 0;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .checkout-page .pickup-points .title {
    margin: 0 0 30px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.checkout-page .select-pickup-point {
  text-align: center;
}

  .checkout-page .select-pickup-point label {
    display: block;
    margin: 0 0 10px;
  }

.checkout-page .select-address select {
  max-width: 100%;
  background-color: #eee;
}

.checkout-page .pickup-points-map {
  max-width: 900px;
  height: 300px;
  margin: 30px auto 0;
}

.checkout-page .single-pickup-point {
  margin: 15px 0 -15px;
  font-size: 14px;
  line-height: 25px;
}

.checkout-page .shipping-method,
.checkout-page .payment-method {
  margin: 0 0 100px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 15px;
  text-align: center;
}

  .checkout-page .shipping-method ul,
  .checkout-page .payment-method ul {
    font-size: 0;
  }

  .checkout-page .shipping-method li,
  .checkout-page .payment-method li {
    position: relative;
    margin: 0 0 20px;
    background-color: #eee;
    padding: 20px;
    text-align: center;
  }

  .checkout-page .shipping-method input[type="radio"],
  .checkout-page .payment-method input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .checkout-page .shipping-method input + label,
  .checkout-page .payment-method input + label {
    display: block;
    padding: 50px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
    cursor: pointer;
  }

    .checkout-page .shipping-method input + label:before {
      content: "\e94b";
      position: absolute;
      top: 25px;
      left: 0;
      right: 0;
      font-family: 'pacific';
      font-size: 27px;
      line-height: 32px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

    .checkout-page .shipping-method input + label:after,
    .checkout-page .payment-method input + label:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

  .checkout-page .shipping-method input:checked + label:after,
  .checkout-page .payment-method input:checked + label:after {
    border: 2px solid #c09e6c;
  }

  .checkout-page .shipping-method .method-description,
  .checkout-page .payment-method .payment-description {
    margin: 5px 0 0;
    font-size: 14px;
    line-height: 25px;
  }

  .checkout-page .shipping-method .buttons,
  .checkout-page .payment-method .buttons,
  .checkout-page .payment-info .buttons {
    margin: 0 -15px -15px;
    border-top: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }

.checkout-page .payment-info .buttons {
  margin: 0 -20px -20px;
}

  .checkout-page .shipping-method .buttons button,
  .checkout-page .payment-method .buttons button,
  .checkout-page .payment-info .buttons button {
    width: 100%;
    max-width: 300px;
    border: none;
    background-color: #c09e6c;
    padding: 17px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .checkout-page .shipping-method .buttons button:hover,
    .checkout-page .payment-method .buttons button:hover,
    .checkout-page .payment-info .buttons button:hover {
      background-color: #ae864b;
    }

.checkout-page .shipping-method ul.hidden + .buttons {
  margin-top: -16px;
  border-color: #fff;
}
/*when pickup in store is active*/

.checkout-page .payment-method .payment-logo {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
}

  .checkout-page .payment-method .payment-logo label {
    display: block;
  }

.use-reward-points {
  margin: 0 0 25px;
}

  .use-reward-points input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

    .use-reward-points input[type="checkbox"] ~ label {
      display: inline-block;
      position: relative;
      padding: 0 0 0 21px;
      font-size: 14px;
      line-height: 30px;
      font-weight: normal;
      cursor: pointer;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

      .use-reward-points input[type="checkbox"] ~ label:before {
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        border-radius: 50%;
      }

    .use-reward-points input[type="checkbox"]:checked ~ label:before {
      border-color: #c09e6c;
    }

    .use-reward-points input[type="checkbox"]:checked ~ label:after {
      content: "\e909";
      position: absolute;
      top: 5px;
      left: 2px;
      width: 15px;
      height: 15px;
      border: none;
      text-align: center;
      font-family: 'pacific';
      font-size: 13px;
      line-height: 16px;
      color: #c09e6c;
    }

.payment-info {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

  .payment-info .info {
    max-width: 900px;
    margin: 0 auto 30px;
  }

    .payment-info .info table,
    .payment-info .info tbody,
    .payment-info .info tr,
    .payment-info .info td {
      display: block;
    }

    .payment-info .info tr {
      max-width: 500px;
      margin: 0 auto 20px;
      text-align: left;
    }

      .payment-info .info tr:only-child {
        max-width: none;
        margin: 0;
        text-align: center;
      }

    .payment-info .info td > label {
      display: block;
      margin: 0 0 7px;
      font-size: 13px;
      line-height: normal;
      font-weight: bold;
      color: #666;
    }

    .payment-info .info td select {
      width: calc(50% - 10px);
      height: 50px;
      margin: 0 3.5px 0 0;
      background-color: #eee;
    }

      .payment-info .info td select:only-child {
        width: 100%;
        margin: 0;
      }

      .payment-info .info td select ~ select {
        margin: 0 0 0 3.5px;
      }

    .payment-info .info td input[type='text'] {
      width: 100% !important;
      height: 50px;
    }

.section.confirm-order {
  margin: 0 0 20px;
  text-align: center;
}

.confirm-order .terms-of-service {
  display: inline-block;
}

.confirm-order .buttons {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

.confirm-order .button-1 {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

  .confirm-order .button-1:hover {
    background-color: #ae864b;
  }

.checkout-page .shipping-info-wrap .shipping-method,
.checkout-page .billing-info-wrap .payment-method {
  margin: 0;
  border: none;
  padding: 0;
  text-align: left;
}

.checkout-page .billing-info .title,
.checkout-page .shipping-info .title {
  margin: -20px -20px 20px;
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

  .checkout-page .billing-info .title strong,
  .checkout-page .shipping-info .title strong {
    display: block;
    position: relative;
    padding: 50px 0 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #444;
  }

    .checkout-page .billing-info .title strong:before,
    .checkout-page .shipping-info .title strong:before {
      content: "\e943";
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      font-family: 'pacific';
      font-size: 32px;
      line-height: 32px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

.checkout-page .payment-method-info .title,
.checkout-page .shipping-method-info .title {
  font-size: 14px;
  color: #444;
}

.checkout-page .payment-method-info li.payment-method,
.checkout-page .shipping-method-info li.shipping-method {
  text-align: center;
}

.section.order-completed {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

  .section.order-completed .title strong {
    display: inline-block;
    position: relative;
    padding: 70px 0 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #444;
  }

    .section.order-completed .title strong:before {
      content: "\e94e";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 55px;
      height: 55px;
      margin: auto;
      text-align: center;
      font-family: 'pacific';
      font-size: 55px;
      line-height: 55px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

  .section.order-completed .order-number,
  .section.order-completed .details-link {
    margin: 0 0 7px;
  }

    .section.order-completed .order-number strong {
      font-size: 14px;
      line-height: 25px;
      font-weight: normal;
    }

    .section.order-completed .details-link a {
      font-size: 14px;
      line-height: 25px;
      font-weight: bold;
      transition: 0.3s ease;
      color: #c09e6c;
    }

      .section.order-completed .details-link a:hover {
        color: #ae864b;
      }

  .section.order-completed .buttons {
    margin: 20px -20px -20px;
    border-top: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }

  .section.order-completed button {
    width: 100%;
    max-width: 300px;
    border: none;
    background-color: #c09e6c;
    padding: 17px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .section.order-completed button:hover {
      background-color: #ae864b;
    }

.opc .tab-section {
  margin: 0 0 10px;
  border: 1px solid #eee;
  background-color: #fff;
}

.opc .step-title {
  display: block;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}

  .opc .step-title .title {
    display: inline-block;
    position: relative;
    padding: 0 0 0 35px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

    .opc .step-title .title:before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 25px;
      height: 35px;
      margin: -17.5px 0 0;
      text-align: center;
      font-family: 'pacific';
      font-size: 15px;
      line-height: 35px;
      font-weight: normal;
      color: #c09e6c;
    }

#opc-billing.active .step-title .title:before {
  font-size: 24px;
  color: #ccc;
}

#opc-shipping.active .step-title .title:before,
.tab-section.active ~ #opc-shipping .step-title .title:before {
  content: "\e943";
  font-size: 24px;
  color: #ccc;
}

#opc-shipping_method.active .step-title .title:before,
.tab-section.active ~ #opc-shipping_method .step-title .title:before {
  content: "\e94b";
  left: -2px;
  font-size: 20px;
  color: #ccc;
}

#opc-payment_method.active .step-title .title:before,
.tab-section.active ~ #opc-payment_method .step-title .title:before {
  content: "\e94c";
  font-size: 21px;
  color: #ccc;
}

#opc-payment_info.active .step-title .title:before,
.tab-section.active ~ #opc-payment_info .step-title .title:before {
  content: "\e94d";
  left: 2px;
  font-size: 22px;
  color: #ccc;
}

#opc-confirm_order.active .step-title .title:before,
.tab-section.active ~ #opc-confirm_order .step-title .title:before {
  content: "\e94e";
  left: -2px;
  font-size: 24px;
  color: #ccc;
}

.checkout-page .opc .pickup-in-store .description i {
  font-style: normal;
}

.opc #delete-billing-address-button,
.opc #delete-shipping-address-button,
.opc #save-shipping-address-button {
  display: none !important;
}

.opc #save-billing-address-button {
  width: calc(50% - 5px);
  max-width: 300px;
  margin: 0 10px 0 0;
  border: 1px solid #eee;
  background: #fff;
  padding: 16px 17px;
  color: #444;
}

  .opc #save-billing-address-button:hover {
    border-color: #ccc;
  }

.opc #edit-billing-address-button,
.opc #edit-shipping-address-button {
  width: 50px;
  height: 50px;
  border: none;
  padding: 0;
  vertical-align: middle;
  font-size: 0;
  color: #333;
}

  .opc #edit-billing-address-button:before,
  .opc #edit-shipping-address-button:before {
    content: "\e929";
    font-family: 'pacific';
    font-size: 15px;
    font-weight: normal;
    color: #000;
    opacity: 0.5;
  }

.opc .allow .step-title,
.opc .allow .step-title .title {
  cursor: pointer;
}

.opc .step-title .number {
  display: none;
}

.opc .step {
  border-top: 1px solid #eee;
  padding: 20px;
}

.opc .section {
  margin: 0 0 20px;
}

  .opc .section > label {
    display: block;
    margin: 0 0 20px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
  }

.opc input[type="text"],
.opc select {
  width: 100%; 
  height: 50px;
  background-color: #eee;
}

.opc .buttons {
  margin: 20px -20px -20px;
  border-top: 1px solid #eee;
  padding: 20px;
  text-align: center;
  font-size: 0;
}

.opc .back-link {
  display: inline-block;
  width: calc(50% - 5px);
  max-width: 300px;
  margin: 0 10px 0 0;
}

  .opc .back-link small {
    display: none;
  }

  .opc .back-link a {
    display: block;
    border: 1px solid #eee;
    padding: 16px 17px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #444;
  }

    .opc .back-link a:hover {
      border-color: #ccc;
    }

.opc .buttons button {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: normal;
  transition: 0.3s ease;
  color: #fff;
}

.opc .back-link + button {
  width: calc(50% - 10px);
}

.opc .please-wait {
  display: block;
  margin: 10px 0 0;
}

.opc .section.new-billing-address,
.opc .section.new-shipping-address,
.opc .section.pickup-points,
.checkout-page .opc .shipping-method,
.checkout-page .opc .payment-method,
.opc .payment-info {
  border: none;
}

.checkout-page .opc .edit-address,
.opc .section.pickup-points,
.checkout-page .opc .shipping-method,
.checkout-page .opc .payment-method,
.opc .payment-info {
  padding: 0;
}

.opc .select-pickup-points {
  max-width: 500px;
  margin: auto;
}

  .opc .select-pickup-points label {
    display: block;
    margin: 0 0 7px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

.opc .section.select-billing-address,
.opc .section.select-shipping-address {
  text-align: center;
}

.opc .buttons button:hover {
  background-color: #ae864b;
}

.order-summary-content.one-page-checkout {
  overflow: hidden;
}

.opc .checkout-data {
  text-align: center;
}

.opc .section.confirm-order {
}

.opc .terms-of-service {
  display: inline-block;
  text-align: center;
}


/* ORDER DETAILS & RETURN REQUEST */

.order-review-data,
.order-details-area,
.shipment-details-area {
  overflow: hidden;
}

  .order-review-data > div,
  .order-details-area > div,
  .shipment-details-area > div {
    margin: 0 0 20px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 20px;
    text-align: center;
  }

  .order-review-data ul,
  .order-details-area ul,
  .shipment-details-area ul {
    margin: 0 0 15px;
    text-align: center;
  }

  .order-review-data li,
  .order-details-area li,
  .shipment-details-area li {
    padding: 2.5px 0;
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
  }

    .order-review-data li.name,
    .order-details-area li.name,
    .shipment-details-area li.name {
      font-weight: bold;
      color: #444;
    }

.order-details-page .page-title {
  margin: 0 0 20px;
  overflow: hidden;
}

  .order-details-page .page-title h1 {
    margin: 0 0 10px;
  }

  .order-details-page .page-title a {
    display: inline-block;
    margin: 0 7px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 9.5px 19px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #c09e6c;
  }

    .order-details-page .page-title a:hover {
      border-color: #c09e6c;
      background-color: #c09e6c;
      color: #fff;
    }

.order-details-page .order-overview {
  margin: 0 0 20px;
  border: 1px solid #eee;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.order-details-page .order-number {
  font-size: 16px;
  text-transform: uppercase;
  color: #444;
}

.order-details-page .order-total strong {
  color: #444;
}

.order-details-page .tax-shipping-info {
  margin: 0 0 10px;
  border: 1px solid #eee;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

  .order-details-page .tax-shipping-info a {
    font-weight: bold;
    transition: 0.3s ease;
    color: #c09e6c;
  }

    .order-details-page .tax-shipping-info a:hover {
      color: #ae864b;
    }

.order-details-page .billing-info .title,
.order-details-page .shipping-info .title,
.shipment-details-page .shipment-details-area .title {
  margin: -20px -20px 15px;
  border-bottom: 1px solid #eee;
  padding: 20px;
}

  .order-details-page .billing-info .title strong,
  .order-details-page .shipping-info .title strong,
  .shipment-details-page .shipment-details-area .title strong {
    display: block;
    position: relative;
    padding: 50px 0 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #444;
  }

    .order-details-page .billing-info .title strong:before,
    .order-details-page .shipping-info .title strong:before,
    .shipment-details-page .shipment-details-area .title strong:before {
      content: "\e943";
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      font-family: 'pacific';
      font-size: 32px;
      line-height: 32px;
      font-weight: normal;
      color: #000;
      opacity: 0.3;
    }

.shipment-details-page .shipment-details-area
.order-info-wrap .title strong:before {
  content: "\e905";
  font-size: 30px;
}

.order-details-page .payment-method-info .title,
.order-details-page .shipping-method-info .title {
  padding: 2.5px 0;
  font-size: 14px;
  line-height: 25px;
  color: #444;
}

.order-details-page .section.shipments,
.order-details-page .section.products {
  margin: 0 0 60px;
}

.order-details-page .section.options {
  margin: 0;
}

.order-details-page .selected-checkout-attributes {
  text-align: center;
}

.order-details-page .section.shipments .title,
.order-details-page .section.products .title,
.shipment-details-page .section.products .title {
  margin: 0 0 20px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 15px 0;
  text-align: center;
}

  .order-details-page .section.shipments .title strong,
  .order-details-page .section.products .title strong,
  .shipment-details-page .section.products .title strong {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    font-weight: lighter;
    text-transform: uppercase;
    color: #aaa;
  }

.order-details-page .data-table td,
.shipment-details-page .data-table td {
  padding: 20px;
}

.order-details-page .data-table .td-title,
.order-details-page .data-table label {
  display: none;
}

.order-details-page .data-table .product a,
.shipment-details-page .data-table .name a {
  font-style: normal;
}

.order-details-page .data-table .shipment-id,
.order-details-page .data-table .unit-price,
.order-details-page .data-table .total,
.shipment-details-page .data-table .quantity,
.return-request-page .data-table .unit-price {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.order-details-page .data-table td.total {
  color: #c09e6c;
}

.order-details-page .data-table a,
.shipment-details-page .data-table a,
.return-request-page .data-table a {
  transition: 0.3s ease;
}

  .order-details-page .data-table a:hover,
  .shipment-details-page .data-table a:hover,
  .return-request-page .data-table a:hover {
    color: #c09e6c;
  }

.order-details-page .order-details-area {
  margin: 0 0 60px;
}

.order-details-page .actions {
  margin: 20px 0 10px;
  text-align: center;
}

  .order-details-page .actions button {
    width: 100%;
    max-width: 300px;
    border: none;
    background-color: #c09e6c;
    padding: 17px;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .order-details-page .actions button:hover {
      background-color: #ae864b;
    }

.order-details-page .cart-total tr:last-child td {
  font-size: 16px;
  font-weight: bold;
  color: #444;
}

  .order-details-page .cart-total tr:last-child td strong {
    font-size: 20px;
    color: #444;
  }

.shipment-details-page .shipment-details-area {
  margin: 0 0 60px;
}

.order-details-page .data-table .product .download a {
  display: inline-block;
  margin: 5px 0 0;
  color: #c09e6c;
}

  .order-details-page .data-table .product .download a:hover {
    color: #ae864b;
  }

.return-request-page .section {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
}

  .return-request-page .section .title {
    margin: 0;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

  .return-request-page .section .table-wrapper {
    border-width: 1px 0 0;
  }

.return-request-page .data-table {
  margin: 0;
}

  .return-request-page .data-table select {
    min-width: 60px;
    background-color: #eee;
    text-align: center;
    text-align-last: center;
    font-weight: bold;
    color: #444;
  }

.return-request-page .fieldset {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .return-request-page .fieldset .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

  .return-request-page .fieldset label {
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

.return-request-file > div {
  display: inline-block;
  width: 500px;
  height: 45px;
  max-width: 100%;
  vertical-align: middle;
}

.return-request-page .qq-upload-button {
  width: 100%;
  height: 45px;
  border: 1px solid #c09e6c;
  background-color: #c09e6c;
  padding: 13px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}

.return-request-page .qq-upload-list li {
  background-color: transparent !important;
  color: #333 !important;
  font-size: 12px;
}

.return-request-page .buttons {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.return-request-page .result {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 35px;
}


/* SEARCH & SITEMAP */

.search-input {
  margin: 0 0 60px;
  border: 1px solid #eee;
  background-color: #fff;
}

  .search-input input + label {
    display: inline;
    margin: 0 0 0 2px;
  }

  .search-input .fieldset {
    margin: 0;
  }

.basic-search {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

  .basic-search .inputs:first-child label {
    display: block;
    position: relative;
    z-index: 2;
    height: auto;
    padding: 15px 0 30px;
    text-align: center;
    font-weight: bold;
    color: #666;
  }

    .basic-search .inputs:first-child label:before {
      content: "\e92c";
      position: absolute;
      top: 0;
      z-index: 1;
      right: 0;
      left: 0;
      width: 50px;
      height: 50px;
      margin: auto;
      text-align: center;
      font-family: 'pacific';
      font-size: 50px;
      line-height: 50px;
      font-weight: normal;
      color: rgba(0,0,0,.15);
      pointer-events: none;
    }

.search-input .inputs.reversed {
  text-align: left;
}

.search-input .inputs:last-child {
  margin-bottom: 0;
}

.search-input .inputs input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.search-input .inputs input ~ label {
  display: inline-block;
  position: relative;
  height: auto;
  padding: 0 0 0 21px;
  font-size: 14px;
  line-height: 30px;
  font-weight: normal;
  color: #444;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

  .search-input .inputs input ~ label:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

.search-input .inputs input:checked ~ label:before {
  border-color: #c09e6c;
}

.search-input .inputs input:checked ~ label:after {
  content: "\e909";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-family: 'pacific';
  font-size: 13px;
  line-height: 16px;
  color: #c09e6c;
}

.search-input input[type="text"],
.search-input select {
  height: 50px;
}

.advanced-search {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

  .advanced-search .inputs label:first-child {
    font-size: 13px;
    font-weight: bold;
    color: #666;
  }

  .advanced-search .price-range {
    overflow: hidden;
  }

    .advanced-search .price-range input {
      float: left;
      width: calc(50% - 5px);
      margin: 0 10px 0 0;
    }

      .advanced-search .price-range input ~ input {
        margin-right: 0;
      }

.search-input .buttons {
  padding: 20px;
  text-align: center;
}

.search-input .button-1 {
  width: 100%;
  max-width: 300px;
  border: none;
  background-color: #c09e6c;
  padding: 17px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #fff;
}

  .search-input .button-1:hover {
    background-color: #ae864b;
  }

.search-results .no-result {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.search-input .warning,
.search-results .result {
  display: block;
  margin: 10px 0 0;
  font-weight: normal;
  color: #dd464d;
}

.search-results {
  margin: 30px 0 0;
}

.search-page .product-selectors {
  border-width: 1px 0 1px;
}

.sitemap-page .description {
  margin: 0 0 40px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
}

.sitemap-page .entity {
  margin: 0 0 20px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.sitemap-page .entity-title {
  margin: -20px -20px 15px;
  border-bottom: 1px solid #eee;
  padding: 20px;
}

  .sitemap-page .entity-title h2 {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.sitemap-page .entity-body {
  line-height: 24px;
}

.sitemap-page li {
  display: inline-block;
  margin: 2.5px 10px;
}

.sitemap-page a {
  display: block;
  padding: 3px 5px;
  font-size: 15px;
  font-weight: normal;
  transition: 0.3s ease;
  color: #c09e6c;
}

  .sitemap-page a:hover {
    color: #ae864b;
  }

  .sitemap-page a:empty {
    display: none;
  }


/* BLOG & NEWS */

.blog-search-box .title:before {
  content: "\e92b";
  font-size: 18px;
}

.block-blog-archive .title:before {
  content: "\e928";
  font-size: 18px;
}

.block-popular-blogtags .title:before {
  content: "\e931";
  font-size: 16px;
}

.block-blog-archive .year {
  margin: 5px 0 -5px;
}

  .block-blog-archive .year + .year {
    margin-top: 15px;
  }

  .block-blog-archive .year .number {
    font-size: 14px;
    color: #444;
  }

  .block-blog-archive .year .sublist {
    padding: 0;
  }

    .block-blog-archive .year .sublist a {
      padding: 5px 0;
      font-weight: normal;
    }

.blog-page .post,
.news-list-page .news-item {
  position: relative;
  margin: 0 0 10px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px 20px 65px;
}

  .blog-page .post:after,
  .news-list-page .item:after {
    content: "";
    display: block;
    clear: both;
  }

.post-head,
.news-list-page .news-head {
  margin: 0 0 20px;
  overflow: hidden;
}

.post-date,
.news-list-page .news-date,
.news-item-page .news-date {
  display: block;
  position: relative;
  text-align: center;
}

  .post-date .day,
  .news-list-page .news-date .day,
  .news-item-page .news-date .day {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    color: #ddd;
  }

  .post-date .month,
  .news-list-page .news-date .month,
  .news-item-page .news-date .month {
    display: block;
    position: relative;
    z-index: 2;
    min-width: 65px;
    font-size: 11px;
    line-height: 40px;
    letter-spacing: 1px;
    font-weight: lighter;
    text-transform: uppercase;
    color: #222;
  }

.post-title,
.news-list-page .news-title {
  display: block;
  padding: 8px 0px;
  font-size: 17px;
  line-height: 24px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #222;
}

  .post-title:hover,
  .news-list-page .news-title:hover {
    color: #c09e6c
  }

.blog-page .post-body,
.news-list-page .news-body {
  max-height: 130px;
  overflow: hidden;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 25px;
}

  .post-body strong,
  .post-description strong,
  .news-list-page .news-body strong {
    color: #444;
  }

  .post-body a,
  .post-description a,
  .news-list-page .news-body a {
    color: #c09e6c;
    transition: 0.3s ease;
  }

    .post-body a:hover,
    .news-list-page .news-body a:hover {
      color: #ae864b;
    }

.blog-page .tags,
.blogpost-page .tags {
  margin: 0 0 15px;
  overflow: hidden;
  font-size: 14px;
  line-height: 25px;
}

  .blog-page .tags label,
  .blogpost-page .tags label {
    display: inline-block;
    position: relative;
    margin: 0 15px 0 0;
    padding: 0 0 0 25px;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

    .blog-page .tags label:before,
    .blogpost-page .tags label:before {
      content: "\e931";
      position: absolute;
      top: 0;
      left: 0;
      margin: auto;
      font-family: 'pacific';
      font-size: 16px;
      font-weight: normal;
      color: #aaa;
    }

  .blog-page .tags ul,
  .blogpost-page .tags ul {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
  }

  .blog-page .tags li,
  .blogpost-page .tags li {
    display: inline;
    font-size: 14px;
    line-height: 25px;
  }

    .blog-page .tags li.separator,
    .blogpost-page .tags li.separator {
      margin: 0 5px 0 3px;
    }

  .blog-page .tags a:hover,
  .blogpost-page .tags a:hover {
    color: #c09e6c;
  }

.blog-posts .buttons,
.news-list-page .buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid #eee;
  padding: 20px;
}

.blog-posts .read-more,
.news-list-page .read-more {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s ease;
  color: #c09e6c;
}

  .blog-posts .read-more span,
  .news-list-page .read-more span {
    vertical-align: middle;
  }

  .blog-posts .read-more:after,
  .news-list-page .read-more:after {
    content: "\e901";
    margin: 0 -8px 0 8px;
    vertical-align: middle;
    font-family: 'pacific';
    font-size: 7px;
  }

  .blog-posts .read-more:hover,
  .news-list-page .read-more:hover {
    color: #ae864b;
  }

.blog-posts .read-comments {
  display: none;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: 0.3s ease;
}

  .blog-posts .read-comments:before {
    content: "\e90d";
    margin: 0 8px 0 -8px;
    vertical-align: middle;
    font-family: 'pacific';
    font-size: 17px;
    color: #444;
  }

  .blog-posts .read-comments:hover {
    color: #444;
  }

.news-item-page .page-title,
.blogpost-page .page-title {
  margin: 0;
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
}

  .news-item-page .page-title h1,
  .blogpost-page .page-title h1 {
    font-size: 20px;
    font-weight: bold;
    color: #444;
  }

.news-item-page .page-body,
.blogpost-page .page-body {
  margin: 0 0 10px; /*equalize bottom spacing if it's last element*/
  border: 1px solid #eee;
  border-top: none;
  background-color: #fff;
  padding: 0 5%;
}

.news-item-page .news-date,
.blogpost-page .post-date {
}

.news-item-page .news-body,
.blogpost-page .post-body {
  padding: 15px 0 25px;
  text-align: justify;
  font-size: 14px;
  line-height: 25px;
}

.blogpost-page .tags {
  margin: 0 0 25px;
  border-top: 1px solid #eee;
  padding-top: 25px;
}

.new-comment {
  margin: 22px 0 10px;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
}

  .new-comment .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }

    .new-comment .title strong {
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      color: #444;
    }

  .new-comment .notifications {
    margin: 0 0 10px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
  }

  .new-comment .result {
    color: #393;
  }

  .new-comment textarea {
    width: 100%;
  }

  .new-comment .buttons {
    margin: 0 -20px -20px;
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: center;
  }

  .new-comment .button-1 {
    width: 100%;
    max-width: 500px;
    border: none;
    background-color: #c09e6c;
    padding: 12.5px;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #fff;
  }

    .new-comment .button-1:before {
      content: "\e929";
      margin: 0 10px 0 0;
      font-family: 'pacific';
      vertical-align: text-bottom;
      font-size: 18px;
      line-height: 18px;
      font-weight: normal;
    }

    .new-comment .button-1:hover {
      background-color: #ae864b;
    }

.comment-list {
  margin: 22px 0 10px;
  border: 1px solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20px;
}

  .comment-list .title {
    margin: -20px -20px 20px;
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

.blog-comment,
.news-comment {
  margin: 0 0 40px;
}

  .blog-comment:last-child,
  .news-comment:last-child {
    margin: 0;
  }

  .blog-comment:after,
  .news-comment:after {
    content: "";
    display: block;
    clear: both;
  }

.comment-info {
  width: 120px;
  margin: 0 auto 10px;
}

  .comment-info .username {
    display: block;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s ease;
    color: #c09e6c;
  }

  .comment-info a.username:hover {
    color: #ae864b;
  }

  .comment-info .avatar {
    position: relative;
    width: 120px;
    height: 120px;
    overflow: hidden;
  }

    .comment-info .avatar img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      border: 1px solid #eee;
    }

.comment-time {
  display: inline-block;
  position: relative;
  margin: 0 0 10px;
  font-size: 14px;
  padding: 0 0 0 22px;
  color: #444;
}

  .comment-time label {
    display: none;
  }

  .comment-time:before {
    content: "\e90e";
    position: absolute;
    top: 1px;
    bottom: 0;
    left: 0;
    margin: auto;
    font-size: 16px;
    font-family: 'pacific';
    color: #888;
    font-weight: normal;
  }

.comment-title {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  color: #444;
}

.comment-body {
  margin: 0 0 7px;
  text-align: justify;
  font-size: 13px;
  line-height: 25px;
  font-weight: normal;
}

.news-item-page .inputs:first-child label {
  display: block;
}

.news-list-homepage {
  margin: 0 0 50px;
  padding: 0 0 10px; /*equalize bottom spacing*/
}

  .news-list-homepage .news-item {
    position: relative;
    margin: 0 0 10px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 20px 20px 65px;
  }

  .news-list-homepage .news-head {
    margin: 0 0 20px;
    overflow: hidden;
  }

  .news-list-homepage .news-date {
    display: block;
    position: relative;
    text-align: center;
  }

    .news-list-homepage .news-date .day {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      font-size: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #ddd;
    }

    .news-list-homepage .news-date .month {
      display: block;
      position: relative;
      z-index: 2;
      min-width: 65px;
      font-size: 11px;
      line-height: 40px;
      letter-spacing: 1px;
      font-weight: lighter;
      text-transform: uppercase;
      color: #222;
    }

  .news-list-homepage .news-title {
    display: block;
    padding: 8px 0px;
    font-size: 17px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    color: #222;
  }

  .news-list-homepage .news-body {
    max-height: 130px;
    margin: 0 0 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 25px;
  }

  .news-list-homepage .buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid #eee;
    padding: 10px 20px;
  }

    .news-list-homepage .buttons a {
      display: inline-block;
      padding: 10px 0;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      color: #c09e6c;
    }

  .news-list-homepage .view-all a {
    display: block;
    background-color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #222;
  }

  .news-list-homepage .buttons span,
  .news-list-homepage .view-all span {
    vertical-align: middle;
  }

  .news-list-homepage .buttons a:after,
  .news-list-homepage .view-all a:after {
    content: "\e901";
    margin: 0 -8px 0 8px;
    vertical-align: middle;
    font-family: 'pacific';
    font-size: 7px;
  }

  .news-list-homepage .view-all span {
    position: relative;
    top: 1px;
  }

  .news-list-homepage .view-all a:after {
    margin-right: -16px;
  }


/* PROFILE & INBOX */

.profile-info-box {
  text-align: center;
}

  .profile-info-box .avatar {
    margin: 0 0 20px;
  }

    .profile-info-box .avatar img {
      border: 1px solid #eee;
    }

  .profile-info-box .title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
  }

  .profile-info-box .stats {
    font-size: 14px;
    line-height: 26px;
  }

  .profile-info-box .pm-button {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s ease;
    text-transform: uppercase;
    color: #c09e6c;
  }

    .profile-info-box .pm-button:hover {
      color: #ae864b;
    }

    .profile-info-box .pm-button:before {
      content: "\e914";
      margin: 0 10px 0 -5px;
      font-family: 'pacific';
      font-size: 13px;
      font-weight: normal;
      color: #aaa;
    }

.profile-page .topic + .topic {
  margin-top: 40px;
}

.profile-page .topic-title {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: bold;
}

  .profile-page .topic-title a {
    margin-left: 5px;
    text-transform: uppercase;
    color: #c09e6c;
  }

    .profile-page .topic-title a:hover {
      color: #ae864b;
    }

.profile-page .topic-body {
  font-size: 13px;
  line-height: 26px;
}

  .profile-page .topic-body .quote {
    background-color: #f6f6f6;
    padding: 20px;
    font-style: italic;
  }

.profile-page .topic-data {
  margin: 10px 0 0;
}

  .profile-page .topic-data:before {
    content: "\e90f";
    margin-right: 5px;
    vertical-align: middle;
    font-family: 'pacific';
    font-size: 13px;
    font-weight: normal;
    color: #aaa;
  }

.profile-page .topic br + br {
  display: none;
}

.private-messages-page table {
  margin: 0;
}

.private-messages-page th,
.private-messages-page td {
  text-align: left;
}

.private-messages-page td {
  padding: 30px 15px;
}

.private-messages-page .pm-unread {
  transition: 0.3s ease;
  color: #c09e6c;
}

  .private-messages-page .pm-unread:hover {
    color: #ae864b;
  }

.private-messages-page .pager {
  margin: 30px 0;
}

.private-messages-page .pm-button {
  margin: 10px 20px 0;
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s ease;
  text-transform: uppercase;
  color: #c09e6c;
}

  .private-messages-page .pm-button:hover {
    color: #ae864b;
  }

  .private-messages-page .pm-button:before {
    margin-right: 10px;
    font-family: 'pacific';
    font-weight: normal;
    color: #aaa;
  }

.delete-selected-pm-button:before {
  content: "\e941";
  font-size: 16px;
}

.mark-unread-pm-button:before {
  content: "\e914";
  font-size: 12px;
}

.private-message-view-page .page-body {
  border: 1px solid #eee;
  background-color: #fff;
  padding: 30px 5%;
}

.private-message-view-page .view-message {
  font-size: 14px;
  line-height: 25px;
}

.private-message-view-page .message-head {
  margin: 0 0 30px;
  border-bottom: 1px dashed #e6e6e6;
  padding: 0 0 20px;
}

  .private-message-view-page .message-head span {
    font-weight: bold;
    color: #444;
  }

.private-message-view-page .message-body {
  margin: 0 0 30px;
  text-align: justify;
}

.private-message-view-page .pm-button {
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s ease;
  text-transform: uppercase;
  color: #c09e6c;
}

  .private-message-view-page .pm-button:hover {
    color: #ae864b;
  }

  .private-message-view-page .pm-button + button {
    margin-left: 20px;
  }

  .private-message-view-page .pm-button:before {
    margin-right: 10px;
    font-family: 'pacific';
    font-weight: normal;
    color: #aaa;
  }

.private-message-view-page .reply-pm-button:before {
  content: "\e914";
  font-size: 12px;
}

.private-message-view-page .delete-pm-button:before {
  content: "\e941";
  font-size: 16px;
  position: relative;
  bottom: -1px;
}

.private-message-view-page .back-pm-button {
  display: none;
}

.login-page .login-tabs .login-tabs-header li.ui-state-active a {
  color: #fff !important;
}


.login-page .buttons .checkout-as-guest-button {
  border: 1px solid #eee;
  background-color: #174C4B;
  transition: .3s ease;
  color: #fff;
}

#ui-id-1 {
  color: #888 !important;
}

.kivvi-mobile-cart {
  display: none;
}

/* ================================================================
   MOBILE STICKY ADD TO CART (product details page)
   ================================================================ */
@media (max-width: 767px) {
  .product-details-page .overview .add-to-cart-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 10px 15px;
    background: #fff;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.15);
  }

  .product-details-page .overview .add-to-cart-panel .qty-label,
  .product-details-page .overview .add-to-cart-panel .qty-dropdown,
  .product-details-page .overview .add-to-cart-panel .add-to-cart-qty-wrapper {
    margin: 0;
    flex: 0 0 auto;
  }

  .product-details-page .overview .add-to-cart-panel .add-to-cart-button {
    flex: 1 1 auto;
    margin: 0;
  }

  /* keep the fixed bar from covering page content */
  .product-details-page {
    padding-bottom: 80px;
  }

  /* equal-height product boxes */
  .product-grid .item-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .product-grid .item-box {
    float: none;
  }

  /* product box: quantity + add to cart (mobile only) */
  .item-box .kivvi-mobile-cart {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 10px 0 0;
  }

  .item-box .kivvi-mobile-cart .kivvi-add-to-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    height: 32px;
    margin: 0;
    border: none;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background-color: #174C4B;
    border-radius: 3px;
    transition: 0.3s ease;
  }

  .item-box .kivvi-mobile-cart .kivvi-add-to-cart-button:before {
    content: "\e905";
    font-family: 'pacific';
    font-size: 16px;
    line-height: 1;
  }

  .item-box .kivvi-mobile-cart .kivvi-add-to-cart-button:hover {
    background-color: #103A39;
  }
}

/* ================================================================
   KIVVI CUSTOM OVERRIDES (merged from theme.custom-1.css)
   ================================================================ */

/* text color */

.link-rss:hover:before,
.category-description ol > li:before,
.manufacturer-description ol > li:before,
.full-description ol > li:before,
.topic-html-content ol > li:before,
.topic-page ol > li:before,
.post-body ol > li:before,
.custom-tab ol > li:before,
.inputs .option-list input[type="checkbox"]:checked ~ label:after,
.cart input[type="checkbox"]:checked ~ label:after,
.cart .product a:hover,
.cart .edit-item a,
.cart .subtotal span,
.mini-shopping-cart .name a:hover,
.mini-shopping-cart .count a:hover,
.footer-block.contact li span:before,
.footer-powered-by a,
.footer-designed-by a,
.block .view-all a,
.block-poll button[type='button'],
.block-poll .poll-total-votes,
.home-page-polls .buttons button[type='button'],
.breadcrumb a:hover,
.breadcrumb a:hover span,
.contact-vendor-button,
.category-page-two-columns .sub-category-item:hover .title a,
.item-box .price.actual-price,
.item-box .tax-shipping-info a:hover,
.item-box .base-price-pangv a:hover,
.pager li.current-page span,
.product-review-links,
.product-no-reviews,
.overview-info-wrapper .value a,
.back-in-stock-subscription button,
.attributes .option-list input[type="checkbox"]:checked ~ label:after,
.ui-datepicker-header,
.overview .product-price,
.variant-overview .product-price,
.tier-prices .item-price,
.product-specs-box .data-table .spec-value a,
.product-reviews-page h1 a,
.product-review-item .review-info .user,
.wishlist-page .share-info a,
.compare-products-page .clear-list,
.compare-products-page .product-name a:hover,
.compare-products-page .specification a,
.topic-page a,
.email-a-friend-page .title h2,
.apply-vendor-page input:checked ~ label:after,
.apply-vendor-page .terms-of-service .read,
#check-availability-button,
.check-privacy-policy input:checked ~ label:after,
.check-privacy-policy .read,
.login-page .login-tabs .login-tabs-header li.ui-state-active a,
.login-page .inputs.reversed input:checked ~ label:after,
.login-page .inputs.reversed .forgot-password a,
.add-more-external-records a,
.account-page .button-2,
.account-page .data-table a:hover,
.account-page .data-table .download a,
.address-list-page .add-button button:hover,
.recurring-payments .initial-order a,
.return-request-list-page a,
.account-page .subscription-list .select-boxes input:checked ~ label:after,
.my-product-reviews-list-page .review-product-info a,
.order-progress li a:before,
.cart-content > .tax-shipping-info a,
.cart-options .common-buttons button,
.checkout-attributes .option-list input[type="checkbox"]:checked ~ label:after,
.terms-of-service input[type="checkbox"]:checked ~ label:after,
.terms-of-service a,
.cart-collaterals .coupon-code button,
.ship-to-same-address .selector input:checked ~ label:after,
.pickup-in-store .selector input:checked ~ label:after,
.use-reward-points input[type="checkbox"]:checked ~ label:after,
.section.order-completed .details-link a,
.opc .step-title .title:before,
.order-details-page .page-title a,
.order-details-page .tax-shipping-info a,
.order-details-page .data-table td.total,
.order-details-page .data-table a:hover,
.shipment-details-page .data-table a:hover,
.return-request-page .data-table a:hover,
.order-details-page .data-table .product .download a,
.search-input .inputs input:checked ~ label:after,
.sitemap-page a,
.post-title:hover,
.news-list-page .news-title:hover,
.post-body a,
.post-description a,
.news-list-page .news-body a,
.blog-page .tags a:hover,
.blogpost-page .tags a:hover,
.blog-posts .read-more,
.news-list-page .read-more,
.comment-info .username,
.news-list-homepage .buttons a,
.profile-info-box .pm-button,
.profile-page .topic-title a,
.private-messages-page .pm-unread,
.private-messages-page .pm-button,
.private-message-view-page .pm-button,
.productAddedToCartWindowDescription .price,
.productAddedToCartWindowSummary a,
.clearFilterOptionsAll,
.filtersGroupPanel .checkbox-list .checked label:after,
.instant-search-item .detail .price,
.newsletter-subscribe-popup .newspetter-popup-inputs input:checked ~ label:after,
.quickView .links-panel a span,
.ropc .ship-to-same-address input:checked ~ label:after,
.ropc .pickup-in-store input:checked ~ label:after,
.ropc .estimate-shipping button,
.ropc .cart .remove-product:hover:before,
.ropc .attribute-list.option-list input[type="checkbox"]:checked ~ label:after,
.ropc .coupon-code button,
.rich-blog-homepage .view-all a:hover,
.blog-instant-search .k-list-item.k-hover,
.blog-instant-search .k-list-item.k-focus,
.post-relations a:hover,
.post-navigation a:hover,
.blog-search-results .search-term-highlighter,
.sale-of-the-day-offer .actual-price,
.social-feed .subtitle-link,
.product-filters .item input:checked + label::after,
.buttons a.return-to-ticket-button,
.buttons button.reply-and-mark-button,
.price-match-request .details a {
  color: #174C4B;
}
.product-reviews-page h1 a:hover,
.product-review-item .review-info a.user:hover,
#check-availability-button:hover,
.check-privacy-policy .read:hover,
.login-page .inputs.reversed .forgot-password a:hover,
.add-more-external-records a:hover,
.account-page .button-2:hover,
.account-page .data-table .download a:hover,
.recurring-payments .initial-order a:hover,
.return-request-list-page a:hover,
.my-product-reviews-list-page .review-product-info a:hover,
.cart-content > .tax-shipping-info a:hover,
.cart-options .common-buttons button:hover,
.terms-of-service a:hover,
.section.order-completed .details-link a:hover,
.order-details-page .tax-shipping-info a:hover,
.order-details-page .data-table .product .download a:hover,
.sitemap-page a:hover,
.post-body a:hover,
.news-list-page .news-body a:hover,
.blog-posts .read-more:hover,
.news-list-page .read-more:hover,
.comment-info a.username:hover,
.profile-info-box .pm-button:hover,
.profile-page .topic-title a:hover,
.private-messages-page .pm-unread:hover,
.private-messages-page .pm-button:hover,
.private-message-view-page .pm-button:hover,
.price-match-request .details a:hover {
  color: #103A39;
}
/* background color */

.category-description ul li:before,
.manufacturer-description ul li:before,
.full-description ul li:before,
.topic-html-content ul li:before,
.topic-page ul li:before,
.post-body ul li:before,
.custom-tab ul li:before,
.inputs .option-list input[type="radio"]:checked ~ label,
.ui-dialog-content button,
.scroll-back-button,
.mini-shopping-cart .buttons button,
.footer-blocks-wrapper.center,
.newsletter-email .options input:checked ~ label:after,
.block-poll li input:checked ~ label:after,
.home-page-polls input[type='radio']:checked ~ label,
.contact-vendor-button:hover,
.category-boxes-layout-1 .category-item:hover,
.swiper-pagination-bullet-active,
.overview .stock:before,
.variant-overview .stock:before,
.free-shipping:before,
.overview .delivery-date:before,
.variant-overview .delivery-date:before,
.attributes .option-list input[type="radio"]:checked ~ label,
.ui-datepicker-header a:hover,
.ui-datepicker-calendar a.ui-state-highlight,
.attributes .qq-upload-button,
.add-to-cart-qty-wrapper .qty-input,
.add-to-cart-qty-wrapper .plus,
.add-to-cart-qty-wrapper .minus,
.add-to-cart-panel .qty-dropdown,
.overview .add-to-cart-button,
.variant-overview .add-to-cart-button,
.product-tags-list a:hover,
.mfp-container .apply-shipping-button,
.write-review .button-1,
.product-review-helpfulness .vote-options .vote:hover,
.product-review-helpfulness .vote-options .vote:before,
.product-review-helpfulness .vote-options .vote:first-child:after,
.wishlist-content .button-2:hover,
.wishlist-content .wishlist-add-to-cart-button,
.compare-products-page .remove-button:hover,
.enter-password-form .button-1,
.contact-page .button-1,
.email-a-friend-page .button-1,
.apply-vendor-page .button-1,
.registration-page .button-1,
.registration-result-page .button-1,
.login-page .button-1,
.password-recovery-page .button-1,
.account-page .button-1,
.return-request-page .button-1,
.user-agreement-page .button-1,
.login-page .topic-block ul li:before,
.login-page .buttons .checkout-as-guest-button:hover,
.html-account-page .block .title,
.vendorinfo-page .remove-picture-button,
.order-progress li.current-step a,
.checkout-attributes .option-list input[type="radio"]:checked ~ label,
.checkout-button,
.cart-collaterals .coupon-code button:hover,
.checkout-page .select-button button,
.checkout-page .billing-addresses + .buttons button,
.checkout-page .shipping-addresses + .buttons button,
.checkout-page .shipping-method .buttons button,
.checkout-page .payment-method .buttons button,
.checkout-page .payment-info .buttons button,
.confirm-order .button-1,
.section.order-completed input[type='button'],
.opc .buttons button,
.order-details-page .page-title a:hover,
.order-details-page .actions button,
.return-request-page .qq-upload-button,
.search-input .button-1,
.new-comment .button-1,
.productAddedToCartWindowSummary .button-1,
.ui-slider-range,
.nivo-controlNav a.active,
.anywhere-slider .slick-dots .slick-active,
.gallery .slick-dots .slick-active button,
.nop-jcarousel .slick-prev:hover,
.nop-jcarousel .slick-next:hover,
.nop-jcarousel .slick-dots .slick-active button,
.nop-jcarousel .slick-dots button:hover,
.newsletter-subscribe-popup .newsletter-subscribe-button,
.newsletter-subscribe-popup .options input[type='radio']:checked ~ label:after,
.product-grid .quick-view-button a,
.featured-product-grid .quick-view-button a:hover,
.product-grid .hover-variant-two .quick-view-button a:hover,
.product-list .quick-view-button a:hover,
.ropc .choose-address select,
.ropc .attribute-list .option-list input[type="radio"]:checked ~ label,
.ropc .complete-button button,
.blog-search-box form:before,
.sale-of-the-day-offer .slick-prev:hover,
.sale-of-the-day-offer .slick-next:hover,
.sale-of-the-day-offer li.slick-active button,
.spc .mobile-navigation select,
.spc .navigation .tab.active,
.theme-roller .open-button,
.product-filters .ui-slider-range,
.k-pager-numbers .k-state-selected,
.tickets-table-panel .k-pager-numbers span.k-state-selected:hover,
.price-match-button:hover,
.save-price-match-button {
  background-color: #174C4B;
}
.mini-shopping-cart .buttons button:hover,
.add-to-cart-panel:hover .qty-input,
.add-to-cart-panel:hover .add-to-cart-qty-wrapper .plus,
.add-to-cart-panel:hover .add-to-cart-qty-wrapper .minus,
.add-to-cart-panel:hover .qty-dropdown,
.overview .add-to-cart-panel:hover .add-to-cart-button,
.variant-overview .add-to-cart-panel:hover .add-to-cart-button,
.mfp-container .apply-shipping-button:hover,
.write-review .button-1:hover,
.wishlist-content .button-2.wishlist-add-to-cart-button:hover,
.contact-page .button-1:hover,
.email-a-friend-page .button-1:hover,
.apply-vendor-page .button-1:hover,
.registration-page .button-1:hover,
.registration-result-page .button-1:hover,
.login-page .button-1:hover,
.password-recovery-page .button-1:hover,
.account-page .button-1:hover,
.return-request-page .button-1:hover,
.user-agreement-page .button-1:hover,
.vendorinfo-page .remove-picture-button:hover,
.checkout-button:hover,
.checkout-page .select-button button:hover,
.checkout-page .billing-addresses + .buttons button:hover,
.checkout-page .shipping-addresses + .buttons button:hover,
.checkout-page .shipping-method .buttons button:hover,
.checkout-page .payment-method .buttons button:hover,
.checkout-page .payment-info .buttons button:hover,
.confirm-order .button-1:hover,
.section.order-completed button:hover,
.opc .buttons button:hover,
.order-details-page .actions button:hover,
.search-input .button-1:hover,
.new-comment .button-1:hover,
.avatar-page .button-2:hover,
.productAddedToCartWindowSummary .button-1:hover,
.ropc .complete-button button:hover,
.save-price-match-button:hover {
  background-color: #103A39;
}
/* border color */

.inputs .option-list input[type="checkbox"]:checked ~ label:before,
.cart input[type="checkbox"]:checked ~ label:before,
.home-page-polls input[type='radio']:checked ~ label,
.contact-vendor-button:hover,
.attributes .option-list input[type="checkbox"]:checked ~ label:before,
.product-review-helpfulness .vote-options .vote:hover,
.wishlist-content .button-2:hover,
.wishlist-content .wishlist-add-to-cart-button,
.apply-vendor-page input:checked ~ label:before,
.gender input[type="radio"]:checked ~ label:before,
.check-privacy-policy input:checked ~ label:before,
.login-page .inputs.reversed input:checked ~ label:before,
.login-page .buttons .checkout-as-guest-button:hover,
.account-page .subscription-list .select-boxes input:checked ~ label:before,
.avatar-page .button-2:hover,
.checkout-attributes .option-list input[type="checkbox"]:checked ~ label:before,
.terms-of-service input[type="checkbox"]:checked ~ label:before,
.cart-collaterals .coupon-code input[type="submit"]:hover,
.ship-to-same-address .selector input:checked ~ label:before,
.pickup-in-store .selector input:checked ~ label:before,
.checkout-page .shipping-method input:checked + label:after,
.checkout-page .payment-method input:checked + label:after,
.use-reward-points input[type="checkbox"]:checked ~ label:before,
.order-details-page .page-title a:hover,
.return-request-page .qq-upload-button,
.search-input .inputs input:checked ~ label:before,
.product-grid .quick-view-button a,
.product-grid .hover-variant-two .quick-view-button a:hover,
.ropc .ship-to-same-address input:checked ~ label:before,
.ropc .pickup-in-store input:checked ~ label:before,
.ropc .cart .remove-product:hover,
.ropc .attribute-list .option-list input[type="checkbox"]:checked ~ label:before {
  border-color: #174C4B;
}
.wishlist-content .button-2.wishlist-add-to-cart-button:hover {
  border-color: #103A39;
}
/* responsive */

@media all and (max-width: 767px) {
  .rich-blog-homepage .blog-posts:not(.single-post) .view-all a {
    color: #174C4B;
  }
}
@media all and (max-width: 1260px) {
  .html-account-page .block a.active {
    color: #174C4B;
  }
  .header-menu.open .menu-open,
  .menu-header .wishlist-qty,
  .menu-header .inbox-unread,
  .open .mobile-flyout-cart-toggle,
  .product-selectors,
  .product-page-layout-two .gallery .slick-dots .slick-active button,
  .nopAjaxFilters7Spikes.open .close-filters {
    background-color: #174C4B;
  }
  .header-menu.open .menu-open {
    border-color: #174C4B;
  }
}
@media all and (min-width: 768px) {
  .product-list .item-box button.product-box-add-to-cart-button {
    background-color: #174C4B;
  }
  .product-list .item-box button.product-box-add-to-cart-button {
    border-color: #174C4B;
  }
}
@media all and (min-width: 1261px) {
  .header-menu .menu-body > ul > li > a:hover,
  .footer-block li a:hover,
  .block .list a:hover,
  .block .tags li a:hover,
  .block-poll li label:hover,
  .category-page-one-column .sub-category-item:hover .title a,
  .featured-product-grid .product-title a:hover,
  .product-grid .product-item:hover .only-price,
  .product-grid .hover-variant-two .buttons button,
  .product-grid-bestsellers .product-title:hover,
  .pager li.individual-page a:hover,
  .pager li.previous-page a:hover:before,
  .pager li.next-page a:hover:before,
  .pager li.first-page a:hover:before,
  .pager li.last-page a:hover:before,
  .product-list .product-title:hover,
  .side-navigation-tabs-body .list > li > a:hover,
  .side-navigation-tabs-body .tags a:hover,
  .side-navigation-tabs-body .view-all a,
  .side-navigation-tabs-body .poll label:hover,
  .side-navigation-tabs-body .poll button,
  .side-navigation-tabs-body .poll .poll-total-votes,
  .manufacturer-grid .item-box:hover .title a,
  .vendor-grid .item-box:hover .title a,
  .product-page-grids.side-grids .item-box .price.actual-price,
  .html-account-page .block .listbox a:hover,
  .news-list-homepage .news-title:hover,
  .news-list-homepage .view-all a:hover {
    color: #174C4B;
  }
  .side-navigation-tabs-body .view-all a:hover,
  .news-list-homepage .buttons a:hover {
    color: #103A39;
  }
  .header-menu .menu-body > ul > li > a.with-subcategories:before,
  .header-menu .menu-body > ul > li > span.with-subcategories:before,
  .header-menu .sublist li:hover > a,
  .header-flyout-cart,
  .home-page-polls .buttons button:hover,
  .featured-product-grid .item-box button:hover,
  .featured-product-grid .item-box button.product-box-add-to-cart-button,
  .product-selectors .product-viewmode a.selected,
  .product-grid .item-box button,
  .product-grid .hover-variant-two .buttons button:hover,
  .product-grid-bestsellers .buttons button:hover,
  .pager li.current-page span,
  .product-list .item-box button:hover,
  .side-navigation-tabs-body .poll input:checked + label:after,
  .side-navigation-tabs-body .poll button:hover,
  .overview .add-to-wishlist-button:hover,
  .variant-overview .add-to-wishlist-button:hover,
  .overview .add-to-compare-list-button:hover,
  .overview .email-a-friend-button:hover,
  .download-sample-button:hover,
  .product-page-layout-two .overview .add-to-wishlist-button:hover,
  .product-page-layout-two .overview .add-to-compare-list-button:hover,
  .product-page-layout-two .overview .email-a-friend-button:hover,
  .product-page-layout-two .download-sample-button:hover,
  .html-account-page .block .listbox .active a,
  .filtersTitlePanel,
  .filtersPanelNav .filter-block .title,
  .product-grid-bestsellers .quick-view-button a:hover {
    background-color: #174C4B;
  }
  .featured-product-grid .item-box button.product-box-add-to-cart-button:hover,
  .product-list .item-box button.product-box-add-to-cart-button:hover {
    background-color: #103A39;
  }
  .home-page-polls .buttons button:hover,
  .featured-product-grid .item-box button.product-box-add-to-cart-button,
  .product-selectors .product-viewmode a.selected,
  .product-grid .item-box button,
  .product-grid .hover-variant-two .buttons button:hover,
  .product-grid-bestsellers .buttons button:hover,
  .side-navigation-tabs-body .poll button:hover,
  .product-page-layout-two .overview .add-to-wishlist-button:hover,
  .product-page-layout-two .overview .add-to-compare-list-button:hover,
  .product-page-layout-two .overview .email-a-friend-button:hover,
  .product-page-layout-two .download-sample-button:hover,
  .product-grid-bestsellers .quick-view-button a:hover {
    border-color: #174C4B;
  }
  .html-account-page .block .listbox .active a:after {
    border-color: transparent #174C4B;
  }
}
@media all and (min-width: 1801px) {
  .product-grid .item-box button.product-box-add-to-cart-button:hover {
    color: #174C4B;
  }
}
@media (max-width: 1501px){
.home-page .nop-jcarousel.manufacturer-grid,
.home-page .nop-jcarousel.vendor-grid {
    margin-bottom: -20px !important;
}
.home-page .nop-jcarousel.manufacturer-grid .item-box,
.home-page .nop-jcarousel.vendor-grid .item-box {
    margin-bottom: 0;
    background: none;
    border: none;
}
}

@media (max-width: 1501Px)
{.home-page .topic-block {
    margin: 0; 
     padding-right: 30px; 
    padding-left: 20px; 
}
}
  .topic-block-title h2 { 
        text-align: center;
    }
.external-authentication{
display: none;
}

  @media (min-width: 1801px){
  .master-wrapper-content {
         padding: 0 20px; 
    }
}

@media (min-width: 768px) {
    .master-wrapper-content {
         padding: 0 10px; 
    }
}


    .category-boxes-layout-2 .home-page-slider {
        margin: 0 0 70px;
    }

.category-boxes-layout-2 .item-box {
background-color: #f3f3f3;
}
.category-boxes-layout-2 .item-box .picture a img 
 {
    max-width: 70%;
}
    body > div.master-wrapper-page > div.header > div.header-lower > div.header-menu > div.menu-body > ul:nth-child(1) {
    width: 150px;
}

.footer-block .title{
color: #0303F9
}

/* SevenSpikes JCarousel ships its own Pacific stylesheet which sets
   ".center-1 .nop-jcarousel { margin: 0 0 100px !important }" above 1501px.
   That is a vendor plugin, so it is overridden here rather than edited: the
   body prefix lifts this to (0,2,1) and wins outright, instead of relying on
   which stylesheet happens to load last. */
body .center-1 .nop-jcarousel {
  margin: 0 0 20px !important;
}

/* the homepage category grid stays flush; higher specificity than the rule
   above so it is not pulled back to 20px */
.center-1 .category-grid.home-page-category-grid {
  margin-bottom: 0 !important;
}

/* Category-grid JCarousel picture images (e.g. "Shop by Category") -
   rounded corners. Age-badge circles below already win via their own
   higher-specificity !important border-radius:50% rule. */
.nop-jcarousel .category-item .picture img {
  border-radius: 16px !important;
}

.nop-jcarousel .category-item .title-content-wrapper a {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Hover zoom + highlight on the category-grid JCarousel picture (e.g.
   "Shop by Category") - excludes .age-badges, which already has its own
   hover treatment (and an explicit hover-kill rule) further below.
   These cards sit edge-to-edge in the grid (no circle/gap like the
   age-badges), so the zoom is clipped to the card via overflow:hidden
   on .picture and applied to the img itself - scaling .picture (like
   age-badges does) would grow the box past its slot and overlap the
   neighboring card. */
.jCarouselMainWrapper:not(.age-badges) .category-item .picture {
  overflow: hidden;
  border-radius: 16px;
}

.jCarouselMainWrapper:not(.age-badges) .category-item .picture img {
  transition: transform .3s ease, filter .3s ease;
}

.jCarouselMainWrapper:not(.age-badges) .category-item .picture:hover img {
  transform: scale(1.1);
  filter: brightness(1.08) saturate(1.1);
}

/* Everything below is scoped to .age-badges - the Skin value set on the
   "Shop By Age" JCarousel widget instance in Admin. Without this, the
   selectors matched EVERY category-grid JCarousel (e.g. "Shop by
   Category" too), since the vendor markup is otherwise identical between
   instances and the widget's auto-generated wrapper id is not stable
   across page loads (confirmed: it changes on every reload). */

/* Section card - now that this widget renders as a bare sibling via the
   home_page_after_categories zone (moved out of .home-page-categories-wrapper),
   it needs its own card framing to match the welcome-message/categories
   cards elsewhere on the homepage instead of floating with no padding.
   The outer wrapper carries the same 3-tier bleed as
   .home-page-welcome-message.with-image-background (see styles.css ~6350)
   so the .item-grid card inside - same 24px padding as the welcome card -
   lines up at an identical on-screen width at every breakpoint. */
.jCarouselMainWrapper.age-badges {
  margin: 0 -10px 30px;
}

@media all and (min-width: 1261px) and (max-width: 1800px) {
  .jCarouselMainWrapper.age-badges {
    margin: 0 0 30px;
  }
}

@media all and (min-width: 1801px) {
  .jCarouselMainWrapper.age-badges {
    margin: 0 -30px 30px;
  }
}

.jCarouselMainWrapper.age-badges .slick-carousel.item-grid {
  background-color: var(--pacific-bg-white, #fff);
  border-radius: 16px;
  box-shadow: var(--pacific-shadow, 0 2px 8px rgba(0,0,0,.08));
  padding: 24px;
}

.jCarouselMainWrapper.age-badges .carousel-title {
  margin: 0 0 20px !important;
  border-bottom: 1px dashed #e6e6e6 !important;
  padding: 0 0 15px !important;
}

.jCarouselMainWrapper.age-badges .carousel-title strong {
  font-weight: 700;
  color: var(--pacific-gold, #174C4B);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nop-jcarousel.home-page-product-grid .slick-dots {
  display: block !important;
  width: 100% !important;
  float: none !important;
  text-align: center !important;
  margin: 10px auto 0 !important;
}

  .nop-jcarousel.home-page-product-grid .slick-dots li {
    display: inline-block !important;
    float: none !important;
  }

.jCarouselMainWrapper.age-badges .category-item .title {
  font-size: 16px;
  text-transform: uppercase;
}

/* Kill every hover-triggered visual change on the age badges - no zoom,
   no darken overlay, no caption reveal.
   Scoped to .picture (not "*") - forcing opacity:1 on every descendant
   was also forcing the hidden-by-default subcategories dropdown box
   (see below) to render permanently open. */
.jCarouselMainWrapper.age-badges .category-item .picture,
.jCarouselMainWrapper.age-badges .category-item .picture * {
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* The subcategories widget zone (pacific_itembox_subcategories) renders
   a hover-reveal dropdown panel next to the category name link - the
   mockup has no such dropdown, so hide it outright instead of relying
   on its own hover/opacity toggle. */
.jCarouselMainWrapper.age-badges .category-item .title-content-wrapper > *:not(a) {
  display: none !important;
}

  .jCarouselMainWrapper.age-badges .category-item .picture a:before,
  .jCarouselMainWrapper.age-badges .category-item .picture a:after,
  .jCarouselMainWrapper.age-badges .item-box:before,
  .jCarouselMainWrapper.age-badges .item-box:after,
  .jCarouselMainWrapper.age-badges .category-item:before,
  .jCarouselMainWrapper.age-badges .category-item:after {
    content: none !important;
    display: none !important;
  }

  .jCarouselMainWrapper.age-badges .item-box,
  .jCarouselMainWrapper.age-badges .carousel-item {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* slick's own .slick-list has overflow:hidden clipped tight to slide
     content, so the hover zoom's top edge/ring was getting cut off.
     Reserve 15px above via padding, then cancel it back out with a
     matching negative margin so the slide's on-screen position doesn't
     shift - this just grows the slide's own box (and slick-list's clip
     boundary with it) to give the scaled circle room to breathe. */
  .jCarouselMainWrapper.age-badges .carousel-item {
    padding-top: 15px !important;
    margin-top: -15px !important;
  }

/* Age-badge layout: plain circle picture, plain caption below it -
   no overlay caption stacked on the circle. */
.jCarouselMainWrapper.age-badges .category-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-top: 15px !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

  .jCarouselMainWrapper.age-badges .category-item .picture {
    position: relative !important;
    width: 100% !important;
    max-width: 160px !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    float: none !important;
    margin: 0 auto !important;
  }

    .jCarouselMainWrapper.age-badges .category-item .picture a {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
    }

    .jCarouselMainWrapper.age-badges .category-item .picture img {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      margin: 0 !important;
      object-fit: cover !important;
      transition: transform .3s ease, filter .3s ease !important;
    }

/* Re-enable hover zoom + highlight on the age-badge circle only - higher
   specificity (adds :hover) than the "kill every hover" rule above, so it
   wins despite both using !important.
   Scaling .picture itself (the whole clipped circle) rather than the img
   inside it - scaling the img alone left a hairline square crop artifact
   at the circle edge where the browser's overflow:hidden clip and the
   transformed child fought at sub-pixel boundaries. */
.jCarouselMainWrapper.age-badges .category-item .picture {
  transition: transform .3s ease, box-shadow .3s ease !important;
  z-index: 1;
}

.jCarouselMainWrapper.age-badges .category-item .picture:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 0 4px rgba(23, 76, 75, .15) !important;
  z-index: 2;
}

.jCarouselMainWrapper.age-badges .category-item .picture:hover img {
  filter: brightness(1.08) saturate(1.1) !important;
}

  .jCarouselMainWrapper.age-badges .category-item .title,
  .jCarouselMainWrapper.age-badges .category-item .title-content-wrapper {
    display: block !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
  }

    .jCarouselMainWrapper.age-badges .category-item .title a {
      display: block !important;
      padding: 0 !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      text-transform: capitalize !important;
      letter-spacing: .3px;
      text-align: center !important;
      color: var(--pacific-text-dark, #333) !important;
      background: none !important;
    }

.home-page .topic-block, .home-page .title, body{
color:black;
}

 
.spc .opc .section.payment-method .method-list li{
display: Block !important;
}
.spc .opc .section.payment-method .method-list li .method-name{
display: Block !important;
}
.spc .opc .section.payment-method .method-list li .method-name .payment-logo {
    margin: 0 20px !important;
}
 

    .checkout-page .shipping-method input+label:before {
        top: 10px !important;
    }

.category-page .page-body{
    padding-top: 10px;
}
.page-title{
padding: 20px 0;
}

.breadcrumb a,
.breadcrumb strong,
.breadcrumb .delimiter {
  color: #174C4B;
}

.breadcrumb {
  text-align: left;
}

.breadcrumb li:first-child {
  margin-left: 0;
}

.page-title h1 {
  color: #174C4B;
  text-align: left;
  font-weight: bold;
}

/* ==========================================================================
   Kivvi footer redesign
   ========================================================================== */

.footer {
  --footer-heading: #174C4B;
  --footer-text: #4a5b5a;
  --footer-muted: #6b7a79;
  --footer-icon: #2f7d78;
  --footer-accent: #e8734a;
  color: var(--footer-text);
}

.footer-upper {
  width: 100%;
  background-image: url(/images/uploaded/footerforkivvi.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 40px 40px;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1260px;
  margin: 0 auto;
}

.footer-block.brand {
  flex: 1 1 280px;
  max-width: 320px;
}

.footer-block.brand .logo img {
  max-height: 42px;
}

.footer-tagline {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--footer-heading);
}

.footer-about-text {
  margin: 14px 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--footer-muted);
}

.footer-block.brand .social-sharing {
  margin: 0;
  padding: 0;
}

.footer-block.brand .social-sharing li {
  margin: 0 12px 0 0;
}

.footer-block.brand .social-sharing a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  background-color: var(--footer-heading);
  transition: background-color 0.2s ease;
}

.footer-block.brand .social-sharing a:before {
  width: auto;
  line-height: normal;
  color: #fff;
}

.footer-block.brand .social-sharing a:hover {
  background-color: var(--footer-accent);
}

.footer-main .footer-block.information,
.footer-main .footer-block.service,
.footer-main .footer-block.account {
  flex: 1 1 200px;
}

.footer-main .footer-block .title {
  padding: 0 0 14px;
  cursor: default;
}

.footer-main .footer-block .title:before {
  display: none;
}

.footer-main .footer-block .title strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--footer-heading);
}

.footer-icon-list.footer-collapse {
  display: block;
  margin: 0;
  padding: 0;
}

.footer-icon-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.footer-icon-list li a {
  padding: 7px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--footer-text);
  text-decoration: none;
}

.footer-icon-list li a:hover {
  color: var(--footer-accent);
}

.footer-icon-list .footer-ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--footer-icon);
}

.footer-help {
  max-width: 1260px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #eef1f0;
  border-radius: 14px;
  padding: 22px 26px;
}

.footer-help-item {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-help-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--footer-heading);
  box-shadow: 0 2px 6px rgba(23, 76, 75, 0.15);
}

.footer-help-icon .footer-ico {
  width: 19px;
  height: 19px;
}

.footer-help-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-help-text strong {
  font-size: 14px;
  color: var(--footer-heading);
}

.footer-help-text span {
  font-size: 13px;
  color: var(--footer-muted);
}

.footer-lower {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.footer-lower-left {
  font-size: 13px;
  color: var(--footer-muted);
}

.footer-lower-left > div {
  display: inline;
}

.footer-lower-left .footer-disclaimer {
  display: inline;
}

.footer-lower-right {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--footer-muted);
}

.footer-lower-right:before {
  content: "|";
  position: absolute;
  left: 4px;
  color: #ddd;
}

.footer-heart {
  color: #e0574c;
}

@media (max-width: 1024px) {
  .footer-upper {
    padding: 40px 20px 30px;
  }

  .footer-lower {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Kivvi product box redesign (catalog / search / manufacturer grid cards)
   ========================================================================== */

.product-grid .item-grid {
  display: flex;
  flex-wrap: wrap;
}

.product-grid .item-box {
  display: flex;
  float: none;
  border: none;
  border-radius: 20px;
  background-color: #FDF9F1;
  box-shadow: 0 14px 28px -20px rgba(23, 76, 75, 0.35), 0 1px 3px rgba(23, 76, 75, 0.08);
  overflow: hidden;
}

.product-grid .item-box .product-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.product-grid .item-box .product-item .picture {
  position: relative;
  margin: 12px 12px 0;
  border: none;
  border-radius: 14px;
  background-color: #F5EEDD;
  overflow: hidden;
}

.product-grid .item-box .details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 22px 24px;
}

.product-grid .item-box .details-top {
  margin: 0 0 6px;
}

.product-grid .product-title {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #174C4B;
}

.product-grid .item-box .kivvi-price-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 58px;
  flex: 0 0 58px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 2px dashed #E3D6BE;
  box-sizing: border-box;
}

.product-grid .item-box .prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: none;
}

.product-grid .item-box .price {
  font-size: 18px;
}

.product-grid .item-box .price.actual-price {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.product-grid .item-box .old-price {
  font-size: 10px;
}

.product-grid .item-box .prices:has(.availability.out-of-stock) {
  flex: 1 1 auto;
  justify-content: center;
}

.product-grid .item-box .availability.out-of-stock {
  width: 100%;
  text-align: center;
  color: #E8734A;
  font-weight: 700;
  font-size: 13px;
}

.product-grid .item-box .add-info {
  bottom: 58px !important;
}

.product-grid .item-box .buttons.kivvi-cta-row {
  position: relative !important;
  z-index: 5;
  height: auto !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  border-top: none !important;
  background-color: transparent !important;
}

.product-grid .item-box .buttons.kivvi-cta-row button {
  margin-top: 10px !important;
  opacity: 1 !important;
  transform: none !important;
}

.product-grid .item-box button.product-box-add-to-cart-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background-color: #C96F52 !important;
  background-image: none !important;
  background-position: 0 0;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: 0.3s ease;
}

.product-grid .item-box button.product-box-add-to-cart-button .kivvi-cart-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #fff !important;
}

@media (max-width: 767px) {
  .product-grid .item-box button.product-box-add-to-cart-button {
    width: 44px !important;
    padding: 0;
    gap: 0;
  }

  .product-grid .item-box button.product-box-add-to-cart-button span {
    display: none;
  }

  .product-grid .item-box button.product-box-add-to-cart-button .kivvi-cart-icon {
    margin: 0;
  }
}

.product-grid .item-box button.product-box-add-to-cart-button:hover {
  background-color: #B15E42 !important;
  background-image: none !important;
  color: #fff !important;
}

.product-grid .item-box button.add-to-compare-list-button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid #E3D6BE;
  border-radius: 12px;
  background-color: #fff;
  opacity: 1;
  transform: none;
}

.product-grid .item-box button.add-to-compare-list-button:hover {
  border-color: #174C4B;
  background-color: #fff;
}

.product-grid .item-box .kivvi-mobile-cart {
  display: none;
}

.product-grid .item-box .quick-view-button,
.product-grid .item-box button.add-to-wishlist-button {
  display: none !important;
}

/* Force a consistent 4-per-row grid at tablet width and up
   (overrides the theme's default 5/6-per-row jump on wide screens) */
@media (min-width: 768px) {
  .product-grid .item-box,
  .items-five .product-grid .item-box,
  .center-2 .product-grid .item-box {
    width: calc(25% - 7.5px) !important;
  }

  .product-grid .item-box:not(:nth-child(4n+1)) {
    clear: none !important;
    margin-left: 10px !important;
  }

  .product-grid .item-box:nth-child(4n+1) {
    clear: both !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   Kivvi product-details redesign
   ========================================================================== */

.product-details-page {
  --pd-heading: #174C4B;
  --pd-text: #4a5b5a;
  --pd-muted: #6b7a79;
  --pd-cta: #EA5B35;
  --pd-cta-hover: #D6491F;
  --pd-accent: #E8734A;
  --pd-cream: #FDF9F1;
  --pd-cream-2: #F5EEDD;
  --pd-divider: #E3D6BE;
  --pd-card-border: #EDE4D5; /* hairline around the gallery/overview cards */
}

/* breadcrumb — intentionally no product-details-page override here.
   It inherits the site-wide .breadcrumb styling (styles.css ~2389, ~11678)
   so every page's breadcrumb — product, category, checkout — matches. */

/* gallery + overview cards — flat, outlined cards as in the design mockup: a
   hairline in the cream family instead of a drop shadow */
.product-details-page .gallery-wrapper,
.product-details-page .overview-wrapper {
  border: 1px solid var(--pd-card-border);
  border-radius: 20px;
  background-color: var(--pd-cream);
  box-shadow: none;
}
.product-details-page .gallery-wrapper {
  padding: 24px 24px 20px;
}
.product-details-page .picture-gallery {
  width: 100%;
}

.product-details-page .gallery-main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
/* the picture panel is transparent - the cream card shows through - and the
   hairline around it is the frame; no stroke on the picture itself */
.product-details-page .gallery .picture,
.product-details-page .product-image-holder {
  background-color: transparent;
  border: 1px solid var(--pd-card-border);
  border-radius: 16px;
  overflow: hidden;
}
/* square box instead of a fixed 420px height: portrait and landscape shots
   both sit in the same footprint, and the letterbox gap stays small. */
.product-details-page .product-image-holder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 10px;
  /* 480.css puts a square 1px #eee hairline here; the redesign uses the cream
     hairline from the rule above, which follows the panel radius */
  border: 1px solid var(--pd-card-border);
}
/* contain, not cover — portrait product shots (toys, puzzles) were being
   cropped top and bottom. The box keeps the layout footprint; the whole
   picture stays visible inside it. */
.product-details-page .product-image-holder img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border: none;
  border-radius: 12px;
}
/* video holders keep the theme's 315px iframe height — the square box above is
   for pictures only */
.product-details-page .video-gallery .product-image-holder {
  aspect-ratio: auto;
  height: 315px;
  padding: 0;
}

.product-details-page .gallery-nav-btn,
.product-details-page .gallery-zoom-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: var(--pd-heading);
  box-shadow: 0 2px 6px rgba(23, 76, 75, 0.18);
  cursor: pointer;
  padding: 0;
}
.product-details-page .gallery-nav-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
}
.product-details-page .gallery-nav-btn.prev {
  left: 10px;
}
.product-details-page .gallery-nav-btn.next {
  right: 10px;
}
.product-details-page .gallery-zoom-btn {
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
}
.product-details-page .gallery-nav-btn:hover,
.product-details-page .gallery-zoom-btn:hover {
  background-color: var(--pd-heading);
  color: #fff;
}

.product-details-page .thumb-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}
/* flex: 1 1 0 + min-width: 0, not "1 1 auto": with an auto basis the track
   sizes to the full row of thumbs, so it spilled past the gallery card and
   never overflowed — scrollLeft stayed 0 and the strip arrows did nothing. */
.product-details-page .picture-thumbs {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 0;
  min-width: 0;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.product-details-page .picture-thumbs::-webkit-scrollbar {
  display: none;
}
.product-details-page .thumb-strip-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: var(--pd-heading);
  box-shadow: 0 1px 4px rgba(23, 76, 75, 0.2);
  cursor: pointer;
  padding: 0;
}
.product-details-page .thumb-strip-nav:hover {
  background-color: var(--pd-heading);
  color: #fff;
}
/* at either end of the strip — and when every thumb already fits, which is the
   normal case for a product with 4-5 pictures — the arrow is hidden rather than
   dimmed. visibility, not display, so the strip does not shift when it flips. */
.product-details-page .thumb-strip-nav[disabled] {
  visibility: hidden;
  pointer-events: none;
}
.product-details-page .gallery .thumb-item {
  flex: 0 0 calc((100% - 30px) / 4);
  float: none;
  width: calc((100% - 30px) / 4);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 !important;
  border: 2px solid transparent;
  border-radius: 12px;
  background-color: var(--pd-cream-2);
  overflow: hidden;
}
.product-details-page .gallery .thumb-item.active {
  border-color: var(--pd-cta);
}
.product-details-page .gallery .thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- the same gallery, as rendered by the CloudZoom plugin ---------------
   With CloudZoom installed the plugin renders the gallery itself and the
   theme's _ProductDetailsPictures.cshtml never runs, so the rules above reach
   the thumbs (same .thumb-item class) but not the main picture, which uses
   .picture-wrapper > .picture > a.picture-link > img.cloudzoom. The arrows and
   the zoom button are added to that markup by _KivviCloudZoomGallery.cshtml.

   The image is sized with max-width/max-height rather than object-fit on a
   stretched box: CloudZoom derives the lens size and the zoom crop from the
   img element's rect, so the element box has to stay equal to the visible
   picture or the lens no longer matches what the zoom window shows. */
/* the hairline goes on the wrapper, not on .picture: CloudZoom sizes the
   inside-zoom overlay from .picture's box but the picture's own width, so a
   border on .picture made the overlay 2px taller than the image and shifted it
   1px up — the picture visibly jumped on hover. With the border out here, the
   picture box and the image box are identical and the overlay lands exactly. */
.product-details-page .sevenspikes-cloudzoom-gallery {
  /* one number drives the gap between the frame and the picture; the inside-zoom
     overlay below is inset by the same amount so hover changes nothing */
  --pd-gallery-gap: 10px;
}
.product-details-page .sevenspikes-cloudzoom-gallery .picture-wrapper {
  margin: 0; /* CloudZoom.css spaces the wrapper; the cream card already pads */
  padding: var(--pd-gallery-gap);
  border: 1px solid var(--pd-card-border);
  border-radius: 24px;
}
/* CloudZoom.css zeroes the padding of .picture inside .picture-wrapper with a
   3-class selector, hence the 4-class selector here */
.product-details-page .sevenspikes-cloudzoom-gallery .picture-wrapper .picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
}
.product-details-page .sevenspikes-cloudzoom-gallery .picture .picture-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* 480.css gives .gallery .picture a a square 1px #eee hairline, which framed
     the rounded picture with straight corners */
  border: none;
}
/* the radius has to sit on the picture itself: the box around it is transparent,
   so a rounded box with a square photo inside still reads as square corners */
.product-details-page .sevenspikes-cloudzoom-gallery .picture-link img.cloudzoom {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: none;
  border-radius: 12px;
}
.product-details-page .sevenspikes-cloudzoom-gallery .picture-thumbs {
  margin: 0; /* the .thumb-strip wrapper carries the spacing */
}
.product-details-page .sevenspikes-cloudzoom-gallery .thumb-item.cloudzoom-gallery-active {
  border-color: var(--pd-cta);
}
/* the zoom window CloudZoom appends next to the picture (zoomPosition: outside) */
.product-details-page .cloudzoom-zoom {
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 6px 20px rgba(23, 76, 75, 0.18);
}
/* zoomPosition: inside draws over the picture instead. CloudZoom.css pins it to
   the wrapper's padding box (top/left 0, height 100%, both !important), which
   with a padded wrapper is larger than the picture — the image appeared to grow
   on hover. Inset it by the same gap so it lands exactly on the picture. */
.product-details-page .cloudzoom-zoom-inside {
  top: var(--pd-gallery-gap, 0px) !important;
  left: var(--pd-gallery-gap, 0px) !important;
  right: auto !important;
  width: calc(100% - 2 * var(--pd-gallery-gap, 0px)) !important;
  height: calc(100% - 2 * var(--pd-gallery-gap, 0px)) !important;
  margin: 0 !important;
  border-radius: 12px;
  background-color: #fff;
}

/* product name — match the page-title style used on category/checkout (left,
   bold, teal), instead of the stock centered/lighter/gray look */
.product-details-page .product-name {
  margin: 0 0 20px !important;
  border-bottom: 1px dashed #e6e6e6 !important;
  padding: 20px 0 !important;
  text-align: left !important;
}
.product-details-page .product-name h1 {
  color: var(--pd-heading) !important;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 30px !important;
}

/* rating stars recolor (data-URI SVG, no new image asset) */
.product-details-page .product-review-box .rating,
.product-details-page .product-rating-box .rating {
  position: relative;
  width: 100px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cg fill='%23dcdcdc'%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M30 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M50 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M70 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M90 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
}
.product-details-page .product-review-box .rating div,
.product-details-page .product-rating-box .rating div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cg fill='%23E8734A'%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M30 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M50 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M70 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M90 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
}

/* short description bullet list */
.product-details-page .short-description ul {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-details-page .short-description ul li {
  position: relative;
  padding-left: 26px;
  color: var(--pd-text);
  font-size: 14px;
}
.product-details-page .short-description ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--pd-heading);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* price row */
.product-details-page .kivvi-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 16px;
}
.product-details-page .kivvi-price-row .product-price,
.product-details-page .kivvi-price-row .non-discounted-price,
.product-details-page .kivvi-price-row .discounted-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--pd-heading);
}
.product-details-page .kivvi-price-row label {
  display: none;
}
.product-details-page .kivvi-price-row .old-product-price {
  font-size: 16px;
  color: var(--pd-muted);
  text-decoration: line-through;
}
.product-details-page .kivvi-price-row .discount-percent-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 14px;
  background-color: rgba(232, 115, 74, 0.12);
  color: var(--pd-accent);
  font-size: 13px;
  font-weight: 700;
}

/* stock + sku row */
.product-details-page .stock-sku-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 14px;
}
.product-details-page .availability {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.product-details-page .availability .label {
  display: none;
}
.product-details-page .availability.in-stock .value {
  color: var(--pd-heading);
  font-weight: 700;
  font-size: 13px;
}
.product-details-page .availability-icon {
  flex: none;
  color: var(--pd-heading);
}
.product-details-page .overview .stock,
.product-details-page .overview .stock-block {
  height: auto;
  padding: 0;
  top: 0;
  transform: none;
}
.product-details-page .overview .stock:before {
  content: none;
}
.product-details-page .overview-info-wrapper {
  display: flex;
  gap: 16px;
}
.product-details-page .overview-info-wrapper .sku {
  margin: 0;
  font-size: 13px;
  color: var(--pd-muted);
}
.product-details-page .overview-info-wrapper .sku .label {
  color: var(--pd-muted);
}
.product-details-page .overview-info-wrapper .sku .value {
  color: var(--pd-text);
  font-weight: 600;
}

/* gift banner (static, all products) */
.product-gift-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 16px;
  border: 1px dashed var(--pd-divider, #E3D6BE);
  border-radius: 12px;
  background-color: var(--pd-cream-2, #F5EEDD);
  color: var(--pd-heading, #174C4B);
  font-size: 13.5px;
  font-weight: 600;
}
.product-gift-banner-ico {
  flex: none;
  width: 18px;
  height: 18px;
}

/* qty stepper — full reset of the legacy absolutely-positioned +/- spinner */
.product-details-page .add-to-cart-qty-wrapper {
  position: relative;
  float: none;
  display: inline-flex;
  align-items: stretch;
  width: auto;
  padding: 0;
  border: 1px solid var(--pd-divider);
  border-radius: 14px;
  overflow: hidden;
  background-color: #fff;
}
.product-details-page .add-to-cart-qty-wrapper .plus,
.product-details-page .add-to-cart-qty-wrapper .minus {
  display: flex;
  position: static;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  top: auto;
  right: auto;
  bottom: auto;
  background-color: transparent !important;
  color: var(--pd-heading);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.product-details-page .add-to-cart-qty-wrapper .plus:before,
.product-details-page .add-to-cart-qty-wrapper .plus:after,
.product-details-page .add-to-cart-qty-wrapper .minus:before,
.product-details-page .add-to-cart-qty-wrapper .minus:after {
  content: none;
}
.product-details-page .add-to-cart-panel:hover .add-to-cart-qty-wrapper .plus,
.product-details-page .add-to-cart-panel:hover .add-to-cart-qty-wrapper .minus,
.product-details-page .add-to-cart-panel:hover .qty-input {
  background-color: transparent !important;
}
.product-details-page .add-to-cart-qty-wrapper .qty-input {
  width: 40px;
  height: 40px;
  border: none;
  border-left: 1px solid var(--pd-divider);
  border-right: 1px solid var(--pd-divider);
  padding: 0;
  background-color: #fff !important;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: var(--pd-text);
}

/* wishlist/compare/email/download row — not in the redesign, and its old
   float:right/float:left split (768.css) is what was squeezing the reassurance
   row into a narrow column */
.product-details-page .overview-buttons {
  display: none;
}
.product-details-page .overview-buttons-wrapper .add-to-cart {
  float: none;
  width: 100%;
}

/* add to cart button */
.product-details-page .add-to-cart-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  overflow: visible;
}
.product-details-page .add-to-cart-panel .qty-label {
  display: block !important;
  flex: none;
  margin: 0;
  color: var(--pd-text);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
.product-details-page .add-to-cart-panel .add-to-cart-qty-wrapper {
  flex: 0 0 auto;
}
.product-details-page .add-to-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  height: 44px;
  padding: 0 26px;
  border: none;
  border-radius: 14px;
  background-color: var(--pd-cta) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.product-details-page .add-to-cart-button:hover {
  background-color: var(--pd-cta-hover) !important;
}
.product-details-page .add-to-cart-button .kivvi-cart-icon {
  flex: none;
  width: 17px;
  height: 17px;
}
.product-details-page .add-to-cart-button span {
  position: static;
  padding: 0;
}
.product-details-page .add-to-cart-button span:before {
  content: none;
}

/* reassurance row (under add to cart) */
.product-reassurance-row {
  clear: both;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #E3D6BE;
}
.product-reassurance-item {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-reassurance-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #FDF9F1;
  color: #174C4B;
}
.product-reassurance-ico {
  width: 16px;
  height: 16px;
}
.product-reassurance-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.product-reassurance-text strong {
  font-size: 12.5px;
  color: #174C4B;
}
.product-reassurance-text span {
  font-size: 11.5px;
  color: #6b7a79;
}

/* bottom trust strip */
.product-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0 0;
  padding: 24px;
  border-radius: 14px;
  background-color: #eef1f0;
}
.product-trust-item {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.product-trust-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fff;
  color: #174C4B;
  box-shadow: 0 2px 6px rgba(23, 76, 75, 0.15);
}
.product-trust-ico {
  width: 19px;
  height: 19px;
}
.product-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-trust-text strong {
  font-size: 14px;
  color: #174C4B;
}
.product-trust-text span {
  font-size: 13px;
  color: #6b7a79;
}

/* "you may also like" carousel + "also purchased"/"more from this category" grids — same title style */
.kivvi-carousel-block .title strong,
.also-purchased-products-grid .title strong,
.category-products-grid .title strong {
  color: #174C4B;
  font-size: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  text-transform: none;
}
.kivvi-carousel-wrapper {
  position: relative;
  padding: 0 44px;
}
.kivvi-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kivvi-carousel::-webkit-scrollbar {
  display: none;
}
.kivvi-carousel.item-grid .item-box,
.kivvi-carousel .item-box {
  width: 62% !important;
  flex: 0 0 62% !important;
  margin-left: 0 !important;
  clear: none !important;
  scroll-snap-align: start;
}
.kivvi-carousel .item-box .picture img,
.kivvi-carousel .item-box .picture-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kivvi-carousel-nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: #174C4B;
  box-shadow: 0 2px 8px rgba(23, 76, 75, 0.18);
  cursor: pointer;
  z-index: 2;
}
.kivvi-carousel-nav.prev {
  left: 0;
}
.kivvi-carousel-nav.next {
  right: 0;
}

@media (max-width: 767px) {
  .product-details-page .gallery-nav-btn,
  .product-details-page .gallery-zoom-btn {
    width: 30px;
    height: 30px;
  }
  .product-trust-strip {
    padding: 18px;
  }
  .product-reassurance-row {
    gap: 10px;
  }
}

/* category page title — match the checkout page title (left-aligned, bold),
   overriding both the base centered .page-title h1 and the two-columns-only
   left-align variant in 768.css so one-column category layouts get it too */
.category-page .page-title h1 {
  text-align: left !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Product-details category-navigation sidebar (moved to the left)
   ========================================================================== */

.product-category-sidebar {
  margin: 0 0 20px;
}
.product-category-sidebar .block-category-navigation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background-color: white;
}

.block-recently-viewed-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background-color: white;
}
/* ===== Popular tags card (Kivvi mock: pale-green header band, then a
   two-column grid of pastel pill chips). Overrides .block .tags rules
   further up, which laid the tags out as inline text links. */
.block-popular-tags {
  margin-top: 20px;
  padding: 0;
  border: none;
  background: none;
}

/* .block .listbox adds padding:10px 20px and a bottom border, which inset the
   header band instead of letting it run flush to the card edges */
.block .listbox.popular-tags-card {
  border: none;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 6px 20px rgba(23, 76, 75, .10);
  padding: 0;
  overflow: hidden;
}

.popular-tags-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: #DCEBE1;
}

  .popular-tags-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding-right: 12px;
    border-right: 1px solid rgba(23, 76, 75, .25);
    color: #174C4B;
  }

    .popular-tags-header-icon svg {
      width: 20px;
      height: 20px;
    }

  .popular-tags-header-title {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 700;
    color: #123A47;
  }

  .popular-tags-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: #174C4B;
  }

    .popular-tags-view-all svg {
      width: 13px;
      height: 13px;
    }

    .popular-tags-view-all:hover {
      color: #0f302f;
    }

.popular-tags-card .tags {
  padding: 14px;
}

  .popular-tags-card .tags ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
  }

  .popular-tags-card .tags li.popular-tag-item {
    display: block;
    margin: 0;
    overflow: visible;
    font-size: 14px !important;
  }

    .popular-tags-card .tags li.popular-tag-item a {
      display: flex;
      float: none;
      align-items: center;
      gap: 8px;
      height: 100%;
      padding: 8px 12px;
      border-radius: 999px;
      line-height: 18px;
      font-size: 13px;
      font-weight: 600;
      color: #202827;
    }

  .popular-tag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

    .popular-tag-icon svg {
      width: 16px;
      height: 16px;
    }

  .popular-tag-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* chip colour variants, cycled by position in the component view */
.popular-tag-item-1 a { background-color: #E4F1E8; }
.popular-tag-item-1 .popular-tag-icon { background-color: #C9E4D3; color: #2f6b4f; }

.popular-tag-item-2 a { background-color: #FCEDE2; }
.popular-tag-item-2 .popular-tag-icon { background-color: #F8DCC6; color: #b4652c; }

.popular-tag-item-3 a { background-color: #EFEAFB; }
.popular-tag-item-3 .popular-tag-icon { background-color: #DED4F5; color: #6146a8; }

.popular-tag-item-4 a { background-color: #E4EFFA; }
.popular-tag-item-4 .popular-tag-icon { background-color: #CDE0F5; color: #2f6094; }

.popular-tag-item-5 a { background-color: #FCF4DC; }
.popular-tag-item-5 .popular-tag-icon { background-color: #F7E7B8; color: #9a7716; }

.popular-tag-item-6 a { background-color: #FBE7EE; }
.popular-tag-item-6 .popular-tag-icon { background-color: #F6D2DF; color: #a8446a; }

.popular-tag-item-7 a { background-color: #E2EEF7; }
.popular-tag-item-7 .popular-tag-icon { background-color: #CBDFEF; color: #2f6094; }

.popular-tag-item-8 a { background-color: #EDF5E3; }
.popular-tag-item-8 .popular-tag-icon { background-color: #D9EAC5; color: #55772b; }

@media all and (max-width: 480px) {
  .popular-tags-card .tags ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== All product tags page (Kivvi mock: chips flowing left to right, each
   with a tinted icon badge). Overrides the grey inline-block links defined
   by .product-tags-list further up. */
.product-tags-all-page .page-title h1 {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  color: #174C4B;
}

.product-tags-all-page .product-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  list-style: none;
}

  .product-tags-all-page .product-tags-list li.product-tag-chip {
    display: block;
    margin: 0;
    overflow: visible;
    font-size: 14px !important;
  }

    .product-tags-all-page .product-tags-list li.product-tag-chip a {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 100%;
      padding: 10px 18px 10px 10px;
      border: 1px solid transparent;
      border-radius: 14px;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(23, 76, 75, .06);
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #202827;
      transition: box-shadow .25s ease, transform .25s ease;
    }

      .product-tags-all-page .product-tags-list li.product-tag-chip a:hover {
        box-shadow: 0 6px 16px rgba(23, 76, 75, .14);
        transform: translateY(-1px);
      }

  .product-tag-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

    .product-tag-chip-icon svg {
      width: 19px;
      height: 19px;
    }

/* chip colour variants, cycled by position in the view */
.product-tag-chip-1 a { background-color: #FDECEF; border-color: #F8D6DD; }
.product-tag-chip-1 .product-tag-chip-icon { background-color: #F8D6DD; color: #b8425c; }

.product-tag-chip-2 a { background-color: #FEF6E0; border-color: #F9E7B5; }
.product-tag-chip-2 .product-tag-chip-icon { background-color: #F9E7B5; color: #9a7716; }

.product-tag-chip-3 a { background-color: #E8F5EC; border-color: #CDE8D6; }
.product-tag-chip-3 .product-tag-chip-icon { background-color: #CDE8D6; color: #2f6b4f; }

.product-tag-chip-4 a { background-color: #E7F1FC; border-color: #CCE1F7; }
.product-tag-chip-4 .product-tag-chip-icon { background-color: #CCE1F7; color: #2f6094; }

.product-tag-chip-5 a { background-color: #F0EBFC; border-color: #DED2F6; }
.product-tag-chip-5 .product-tag-chip-icon { background-color: #DED2F6; color: #6146a8; }

.product-tag-chip-6 a { background-color: #FDEFE4; border-color: #F8DAC3; }
.product-tag-chip-6 .product-tag-chip-icon { background-color: #F8DAC3; color: #b4652c; }

.product-tag-chip-7 a { background-color: #FDECEC; border-color: #F7D3D3; }
.product-tag-chip-7 .product-tag-chip-icon { background-color: #F7D3D3; color: #b33f3f; }

.product-tag-chip-8 a { background-color: #E4F4F3; border-color: #C7E7E5; }
.product-tag-chip-8 .product-tag-chip-icon { background-color: #C7E7E5; color: #24706c; }

.product-tag-chip-9 a { background-color: #EFEAFB; border-color: #DBD1F4; }
.product-tag-chip-9 .product-tag-chip-icon { background-color: #DBD1F4; color: #5b45a3; }

.product-tag-chip-10 a { background-color: #E9F0FE; border-color: #D0DEFA; }
.product-tag-chip-10 .product-tag-chip-icon { background-color: #D0DEFA; color: #37559b; }

.category-nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: -12px -12px 0;
  border: 1px solid #ececec;
  border-radius: 16px 16px 0 0;
  background-color: #174C4B;
}
.category-nav-header-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
}
.category-nav-header-text strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.category-nav-header-text span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #6b7a79;
}

.product-category-sidebar #CategoryNavigationList.listbox {
  background: none;
  border: none;
  padding: 0;
}
.product-category-sidebar #CategoryNavigationList .list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-category-sidebar #CategoryNavigationList .list li {
  margin: 0;
}
.product-category-sidebar #CategoryNavigationList .list > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-category-sidebar #CategoryNavigationList .list > li > a:hover {
  border-color: #174C4B;
  box-shadow: 0 2px 8px rgba(23, 76, 75, 0.1);
}
.product-category-sidebar #CategoryNavigationList .list > li.active > a,
.product-category-sidebar #CategoryNavigationList .list > li.last > a {
  border-color: #174C4B;
  background-color: #F5F9F8;
}
.cat-nav-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #EAF2F0;
  color: #174C4B;
}
.cat-nav-label {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 600;
  color: #333;
}
.cat-nav-count {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: #174C4B;
}
.cat-nav-chevron {
  flex: none;
  display: flex;
  color: #999;
}
@media (min-width: 1260px) {
  .product-category-sidebar {
    float: none;
    flex: 0 0 21%;
    width: auto;
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1801px) {
  .product-category-sidebar {
    flex: 0 0 16%;
  }
}
@media (min-width: 1260px) {
    .product-category-sidebar {
        margin-top: 10px !important;
    }
    .block-recently-viewed-products {
        margin-top: 10px !important;
    }
}

.product-details-page .product-social-buttons {
  display: none;
}

/* ==========================================================================
   QuickTabs (SevenSpikes NopQuickTabs) redesign — scoped to #quickTabs.productTabs
   so it doesn't touch the login page's own .ui-tabs usage elsewhere on the site.
   ========================================================================== */

#quickTabs.productTabs {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(23, 76, 75, 0.06);
}
#quickTabs.productTabs .ui-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 8px 8px 0;
  background-color: #F7F5F0;
  border-bottom: 1px solid #eee;
}
#quickTabs.productTabs .ui-tabs-nav li {
  margin: 0 !important;
  flex: 1 1 0;
  list-style: none;
}
#quickTabs.productTabs .ui-tabs-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 22px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: #6b7a79;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
#quickTabs.productTabs .ui-tabs-nav a:before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
#quickTabs.productTabs #Description-tab a:before,
#quickTabs.productTabs #Overview-tab a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M13 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M13 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
}
#quickTabs.productTabs #Specification-tab a:before,
#quickTabs.productTabs #Specifications-tab a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4' cy='6' r='1.5'/%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='4' cy='18' r='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4' cy='6' r='1.5'/%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='4' cy='18' r='1.5'/%3E%3C/svg%3E");
}
#quickTabs.productTabs #Reviews-tab a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
}
#quickTabs.productTabs #ContactUs-tab a:before,
#quickTabs.productTabs #Contact-tab a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.5-.4c1.2.4 2.5.6 3.8.6a1.5 1.5 0 011.5 1.5V21a1.5 1.5 0 01-1.5 1.5C10.8 22.5 1.5 13.2 1.5 3.5A1.5 1.5 0 013 2h3.7a1.5 1.5 0 011.5 1.5c0 1.3.2 2.6.6 3.8a1.5 1.5 0 01-.4 1.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.5-.4c1.2.4 2.5.6 3.8.6a1.5 1.5 0 011.5 1.5V21a1.5 1.5 0 01-1.5 1.5C10.8 22.5 1.5 13.2 1.5 3.5A1.5 1.5 0 013 2h3.7a1.5 1.5 0 011.5 1.5c0 1.3.2 2.6.6 3.8a1.5 1.5 0 01-.4 1.5z'/%3E%3C/svg%3E");
}

/* Positional fallback (1st=document, 2nd=star, 3rd=phone) — matches the
   mockup's tab order regardless of the plugin's actual tab-id strings,
   in case those don't match the #Description-tab/#Reviews-tab/etc guesses above */
#quickTabs.productTabs .ui-tabs-nav li:nth-child(1) a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M13 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M13 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
}
#quickTabs.productTabs .ui-tabs-nav li:nth-child(2) a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
}
#quickTabs.productTabs .ui-tabs-nav li:nth-child(3) a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.5-.4c1.2.4 2.5.6 3.8.6a1.5 1.5 0 011.5 1.5V21a1.5 1.5 0 01-1.5 1.5C10.8 22.5 1.5 13.2 1.5 3.5A1.5 1.5 0 013 2h3.7a1.5 1.5 0 011.5 1.5c0 1.3.2 2.6.6 3.8a1.5 1.5 0 01-.4 1.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 006.6 6.6l2.2-2.2a1.5 1.5 0 011.5-.4c1.2.4 2.5.6 3.8.6a1.5 1.5 0 011.5 1.5V21a1.5 1.5 0 01-1.5 1.5C10.8 22.5 1.5 13.2 1.5 3.5A1.5 1.5 0 013 2h3.7a1.5 1.5 0 011.5 1.5c0 1.3.2 2.6.6 3.8a1.5 1.5 0 01-.4 1.5z'/%3E%3C/svg%3E");
}
#quickTabs.productTabs .ui-state-active a,
#quickTabs.productTabs .ui-state-hover a,
#quickTabs.productTabs .ui-tabs-active a,
#quickTabs.productTabs li.active a,
#quickTabs.productTabs li.selected a,
#quickTabs.productTabs li.current a,
#quickTabs.productTabs .ui-tabs-nav a.active,
#quickTabs.productTabs .ui-tabs-nav a.selected,
#quickTabs.productTabs .ui-tabs-nav a.current {
  background-color: #fff !important;
  color: #174C4B !important;
  border-bottom-color: #174C4B !important;
}
#quickTabs.productTabs .ui-tabs-panel {
  background-color: #fff;
  border: none;
  padding: 30px;
  animation: fadein 0.3s;
}

/* tab-content typography — headings, paragraphs, checkmark lists (reuses the
   same checkmark-bullet look as .short-description) */
#quickTabs.productTabs .ui-tabs-panel h1,
#quickTabs.productTabs .ui-tabs-panel h2,
#quickTabs.productTabs .ui-tabs-panel h3,
#quickTabs.productTabs .ui-tabs-panel h4 {
  color: #174C4B;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  margin: 0 0 14px;
}
#quickTabs.productTabs .ui-tabs-panel p {
  color: #4a5b5a;
  line-height: 1.7;
  margin: 0 0 16px;
}
#quickTabs.productTabs .ui-tabs-panel .full-description ul,
#quickTabs.productTabs .ui-tabs-panel .custom-tab ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 20px;
}
#quickTabs.productTabs .ui-tabs-panel .full-description ul li,
#quickTabs.productTabs .ui-tabs-panel .custom-tab ul li {
  position: relative;
  padding-left: 26px;
  color: #4a5b5a;
  font-size: 14px;
}
#quickTabs.productTabs .ui-tabs-panel .full-description ul li:before,
#quickTabs.productTabs .ui-tabs-panel .custom-tab ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #174C4B;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Optional callout-card utility classes for hand-authored Tab/Description
   HTML (rich-text editor) — wrap a section as:
   <div class="qt-callout"><span class="qt-callout-icon">...</span>
     <div><strong class="qt-callout-title">Key Features</strong>
     <div class="qt-callout-body">...</div></div></div>
   to get the bordered "Key Features" / "Why Parents Love It" card look. */
.qt-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
  padding: 20px;
  border-radius: 16px;
  background-color: #F5F9F8;
}
.qt-callout-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  color: #174C4B;
}
.qt-callout-title {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  color: #174C4B;
}
.qt-callout-body {
  font-size: 14px;
  color: #4a5b5a;
  line-height: 1.6;
}

/* ==========================================================================
   Reviews tab (SevenSpikes NopQuickTabs ProductReviewsTab) redesign.
   CSS-only — that plugin's view is third-party, not forked here; the markup
   already has stable class names (.product-review-item, .review-info,
   .write-review, .rating-options, etc.) that this styles against.
   ========================================================================== */

#quickTabs .product-reviews {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* existing review cards */
#quickTabs .product-review-item {
  margin: 0 !important;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 16px;
  background-color: #fff;
}
#quickTabs .review-item-head .product-review-box .rating {
  position: relative;
  width: 100px;
  height: 20px;
  margin: 0 0 10px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cg fill='%23dcdcdc'%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M30 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M50 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M70 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M90 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
}
#quickTabs .review-item-head .product-review-box .rating div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  font-size: 0;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cg fill='%23E8734A'%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M30 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M50 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M70 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3Cpath d='M90 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
}
#quickTabs .review-item-head .product-review-box.additional {
  display: none;
}
#quickTabs .review-title strong {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  color: #202827;
}
#quickTabs .review-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 4px;
  font-size: 13px;
  color: #6b7a79;
}
#quickTabs .review-info label {
  display: none;
}
#quickTabs .review-info .user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #174C4B;
}
#quickTabs .review-info .user:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #EAF2F0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}
#quickTabs .review-content {
  padding-top: 10px;
  border-top: 1px dashed #eee;
}
#quickTabs .review-text {
  display: flex;
  gap: 12px;
}
#quickTabs .review-avatar {
  flex: none;
}
#quickTabs .review-avatar .avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
#quickTabs .review-text-body {
  color: #4a5b5a;
  font-size: 14px;
  line-height: 1.6;
}

/* "was this review helpful?" */
#quickTabs .product-review-helpfulness {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: #6b7a79;
}
#quickTabs .product-review-helpfulness .vote-options {
  display: flex;
  align-items: center;
  gap: 8px;
}
#quickTabs .product-review-helpfulness .vote-no {
  position: relative;
  margin-left: 10px;
}
#quickTabs .product-review-helpfulness .vote-no:before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background-color: #e0e0e0;
}
#quickTabs .product-review-helpfulness .vote {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0;
  margin: 0;
  border: 1px solid #ececec !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  cursor: pointer;
  color: #4a5b5a;
  font-size: 0;
  outline: none;
}
#quickTabs .product-review-helpfulness .vote:hover,
#quickTabs .product-review-helpfulness .vote:focus,
#quickTabs .product-review-helpfulness .vote:active {
  background-color: #F5F9F8 !important;
  border-color: #174C4B !important;
  color: #174C4B;
  box-shadow: none !important;
}
#quickTabs .product-review-helpfulness .vote:before {
  content: "" !important;
  position: static !important;
  width: 15px;
  height: 15px;
  margin: 0 !important;
  flex: none;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#quickTabs .product-review-helpfulness .vote:hover:before,
#quickTabs .product-review-helpfulness .vote:first-child:hover:after {
  background-color: currentColor !important;
}
#quickTabs .product-review-helpfulness .vote:first-child:after {
  content: none !important;
}
#quickTabs .product-review-helpfulness .vote-yes:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10H4a1 1 0 01-1-1v-8a1 1 0 011-1h3z'/%3E%3Cpath d='M7 11l4-8a2 2 0 012 2v5h5.5a2 2 0 011.9 2.6l-2 6A2 2 0 0116.5 21H9a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10H4a1 1 0 01-1-1v-8a1 1 0 011-1h3z'/%3E%3Cpath d='M7 11l4-8a2 2 0 012 2v5h5.5a2 2 0 011.9 2.6l-2 6A2 2 0 0116.5 21H9a2 2 0 01-2-2z'/%3E%3C/svg%3E");
}
#quickTabs .product-review-helpfulness .vote-no:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10H4a1 1 0 01-1-1v-8a1 1 0 011-1h3z'/%3E%3Cpath d='M7 11l4-8a2 2 0 012 2v5h5.5a2 2 0 011.9 2.6l-2 6A2 2 0 0116.5 21H9a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10H4a1 1 0 01-1-1v-8a1 1 0 011-1h3z'/%3E%3Cpath d='M7 11l4-8a2 2 0 012 2v5h5.5a2 2 0 011.9 2.6l-2 6A2 2 0 0116.5 21H9a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
#quickTabs .product-review-helpfulness .question {
  font-weight: 600;
  color: #202827;
}
#quickTabs .product-review-helpfulness .vote-stats {
  color: #6b7a79;
}

/* write-a-review form */
#quickTabs .product-review-list,
#quickTabs .write-review {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#quickTabs .write-review {
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 16px;
  background-color: #fff;
}
#quickTabs .write-review .fieldset {
  max-width: 600px !important;
  margin: 0 auto !important;
}
#quickTabs .write-review .buttons {
  max-width: 600px;
  margin: 0 auto;
}
#quickTabs .write-review .inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  margin: 0 0 18px;
}
#quickTabs .write-review .inputs label {
  order: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 13.5px;
  font-weight: 700;
  color: #202827;
}
#quickTabs .write-review .inputs input.review-title,
#quickTabs .write-review .inputs textarea.review-text {
  order: 2;
  flex-basis: 100%;
}
#quickTabs .write-review .inputs span[data-valmsg-for] {
  order: 3;
  flex-basis: 100%;
}
#quickTabs .write-review .inputs .required {
  order: 1;
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin-left: 3px !important;
  font-size: 13.5px !important;
  color: #dd464d !important;
}
#quickTabs .write-review .inputs .required:before {
  content: none !important;
  border: none !important;
}
#quickTabs .write-review input.review-title,
#quickTabs .write-review textarea.review-text {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 12px 14px 12px 40px;
  font-size: 14px;
  font-family: inherit;
  color: #202827;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 14px 14px;
  background-size: 16px 16px;
}
#quickTabs .write-review input.review-title {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
#quickTabs .write-review textarea.review-text {
  min-height: 120px;
  resize: vertical;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}
#quickTabs .write-review input.review-title:focus,
#quickTabs .write-review textarea.review-text:focus {
  outline: none;
  border-color: #174C4B;
}

/* star-picker rating widget */
#quickTabs .review-rating {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  text-align: left !important;
}
#quickTabs .review-rating > label {
  display: block;
  flex: none;
  margin: 0 !important;
  font-size: 13.5px;
  font-weight: 700;
  color: #202827;
}
#quickTabs .review-rating > label:before,
#quickTabs .review-rating > label:after {
  content: none !important;
  background: none !important;
}
#quickTabs .review-rating ul {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex;
  flex: 0 0 auto !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin: 0 0 0 8px !important;
  padding: 0;
  list-style: none;
  overflow: visible !important;
  height: auto !important;
}
#quickTabs .review-rating li.label {
  display: none;
}
#quickTabs .review-rating li.rating-options {
  display: flex !important;
  flex-direction: row-reverse;
  gap: 10px;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}
#quickTabs .review-rating li.rating-options input[type="radio"],
#quickTabs .review-rating li.label {
  display: none !important;
}
#quickTabs .review-rating li.rating-options label.vote-star {
  display: block !important;
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  overflow: visible !important;
  font-size: 0;
  cursor: pointer;
}
#quickTabs .review-rating li.rating-options input:checked ~ label.vote-star,
#quickTabs .review-rating li.rating-options input:checked + label.vote-star {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
}
#quickTabs .review-rating li.rating-options label.vote-star:after {
  content: none !important;
  display: none !important;
}
#quickTabs .review-rating li.rating-options label.vote-star:before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  background-color: #174C4B;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
}
#quickTabs .review-rating li.rating-options input:hover ~ label.vote-star:before,
#quickTabs .review-rating li.rating-options input:checked ~ label.vote-star:before {
  background-color: #E8734A;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6.1.6-4.5 4.1 1.3 6-5.5-3.1-5.5 3.1 1.3-6L3.3 9.2l6.1-.6z'/%3E%3C/svg%3E");
}
#quickTabs .write-review .buttons {
  margin-top: 6px;
}
#quickTabs button.write-product-review-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background-color: #174C4B !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
}
#quickTabs button.write-product-review-button:before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Contact Us tab (SevenSpikes NopQuickTabs ProductContactUsTab) redesign.
   CSS-only — plugin view untouched (third-party). Structure is stable:
   #contact-us-tab.contact-page > .form-fields > .inputs (name/email/subject/enquiry)
   ========================================================================== */

#contact-us-tab.contact-page {
  padding: 4px 0;
}
#contact-us-tab .form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
#contact-us-tab .form-fields .inputs:nth-child(n+3) {
  grid-column: 1 / -1;
}
#contact-us-tab .inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 18px;
}
#contact-us-tab .inputs label {
  order: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 13.5px;
  font-weight: 700;
  color: #202827;
}
#contact-us-tab .inputs input,
#contact-us-tab .inputs textarea {
  order: 2;
  flex-basis: 100%;
}
#contact-us-tab .inputs span[data-valmsg-for] {
  order: 3;
  flex-basis: 100%;
}
#contact-us-tab .inputs .required {
  order: 1;
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin-left: 3px !important;
  font-size: 13.5px !important;
  color: #dd464d !important;
}
#contact-us-tab .inputs .required:before {
  content: none !important;
  border: none !important;
}
#contact-us-tab .inputs input,
#contact-us-tab .inputs textarea {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 12px 14px 12px 40px;
  font-size: 14px;
  font-family: inherit;
  color: #202827;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 14px 14px;
  background-size: 16px 16px;
}
#contact-us-tab .inputs input:focus,
#contact-us-tab .inputs textarea:focus {
  outline: none;
  border-color: #174C4B;
}
#contact-us-tab textarea.contact_tab_enquiry {
  min-height: 140px;
  resize: vertical;
}
#contact-us-tab input.contact_tab_fullname {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}
#contact-us-tab input.contact_tab_email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
#contact-us-tab input.contact_tab_subject {
  background-image: none;
  padding-left: 14px;
}
#contact-us-tab textarea.contact_tab_enquiry {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-1 4 8.5 8.5 0 01-7.5 4.5 8.4 8.4 0 01-4-1L3 20l1-4.5a8.4 8.4 0 01-1-4 8.5 8.5 0 014.5-7.5 8.4 8.4 0 014-1h.5a8.5 8.5 0 018 8v.5z'/%3E%3C/svg%3E");
  background-position: 14px 16px;
}
#contact-us-tab .buttons {
  margin-top: 6px;
}
#contact-us-tab button.contact-us-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background-color: #174C4B !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}
#contact-us-tab button.contact-us-button:before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  #contact-us-tab .form-fields {
    grid-template-columns: 1fr;
  }
  #contact-us-tab .form-fields .inputs:nth-child(n+3) {
    grid-column: auto;
  }
}

/* ==========================================================================
   Kivvi topic pages (About us, Shipping & delivery policy, ...).
   Topic bodies are admin-authored HTML, so this styles the classes used in
   that pasted markup. Nothing here is required - plain content still renders,
   it just loses the card treatment.

   Icons are CSS only, never inline SVG: the admin TinyMCE editor strips <svg>
   on save, so the pasted markup has to survive an editor round trip.
   Each row draws two layers - :before is the tinted badge (colour alternates
   by position), :after is the icon shape, masked so one shape works in any
   tone. Adding a shape needs a single .ico-* rule, with no colour variants.
   ========================================================================== */

/* the .kivvi-topic markup supplies the sections; the page-body becomes the card */
.topic-page .page-body:has(.kivvi-topic) {
  max-width: 900px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .10);
  padding: 34px 40px;
}

.topic-page .kivvi-topic {
  text-align: left;
}

.topic-page .kivvi-topic-row {
  position: relative;
  min-height: 92px;
  border-top: 1px solid #eef0ee;
  padding: 26px 0 26px 86px;
}

  .topic-page .kivvi-topic-row:first-child {
    border-top: none;
    padding-top: 6px;
  }

  .topic-page .kivvi-topic-row:last-child {
    padding-bottom: 6px;
  }

  /* badge */
  .topic-page .kivvi-topic-row:before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background-color: #DCEBE1;
  }

  /* icon, masked so the badge tone above drives its colour */
  .topic-page .kivvi-topic-row:after {
    content: "";
    position: absolute;
    top: 43px;
    left: 17px;
    width: 30px;
    height: 30px;
    background-color: #2f6b4f;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .topic-page .kivvi-topic-row:first-child:before {
    top: 6px;
  }

  .topic-page .kivvi-topic-row:first-child:after {
    top: 23px;
  }

  /* tones alternate down the page, as the mock does */
  .topic-page .kivvi-topic-row:nth-child(even):before {
    background-color: #FCEDDD;
  }

  .topic-page .kivvi-topic-row:nth-child(even):after {
    background-color: #d9822b;
  }

.topic-page .kivvi-topic h2,
.topic-page .kivvi-topic h3 {
  margin: 6px 0 12px;
  font-size: 21px;
  font-weight: 700;
  color: #174C4B;
}

.topic-page .kivvi-topic p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 28px;
  color: #4a5250;
}

  .topic-page .kivvi-topic p:last-child {
    margin-bottom: 0;
  }

.topic-page .kivvi-topic strong {
  color: #202827;
}

/* lists - small amber dot by default, circle tick with <ul class="checks"> */
.topic-page .kivvi-topic ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

  .topic-page .kivvi-topic ul:last-child {
    margin-bottom: 0;
  }

  .topic-page .kivvi-topic ul li {
    position: relative;
    margin: 0 0 8px;
    padding: 0 0 0 22px;
    font-size: 15px;
    line-height: 26px;
    color: #4a5250;
  }

    .topic-page .kivvi-topic ul li:before {
      content: "";
      position: absolute;
      top: 10px;
      left: 2px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #E8A33D;
    }

  .topic-page .kivvi-topic ul.checks li {
    padding-left: 34px;
  }

    .topic-page .kivvi-topic ul.checks li:before {
      top: 4px;
      left: 0;
      width: 22px;
      height: 22px;
      background-color: #DCEBE1;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b4f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px 13px;
    }

  .topic-page .kivvi-topic-row:nth-child(even) ul.checks li:before {
    background-color: #FBE0E3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0485c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }

/* --- icon shapes: mask only, tone comes from the row --- */
.topic-page .kivvi-topic-row.ico-home:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8.5z'/%3E%3Cpath d='M9.5 20v-5.5h5V20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8.5z'/%3E%3Cpath d='M9.5 20v-5.5h5V20'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-gear:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 13.5a7.6 7.6 0 0 0 0-3l1.7-1.3-2-3.4-2 .8a7.6 7.6 0 0 0-2.6-1.5L14.2 3H9.8l-.3 2.1a7.6 7.6 0 0 0-2.6 1.5l-2-.8-2 3.4 1.7 1.3a7.6 7.6 0 0 0 0 3L2.9 14.8l2 3.4 2-.8a7.6 7.6 0 0 0 2.6 1.5l.3 2.1h4.4l.3-2.1a7.6 7.6 0 0 0 2.6-1.5l2 .8 2-3.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 13.5a7.6 7.6 0 0 0 0-3l1.7-1.3-2-3.4-2 .8a7.6 7.6 0 0 0-2.6-1.5L14.2 3H9.8l-.3 2.1a7.6 7.6 0 0 0-2.6 1.5l-2-.8-2 3.4 1.7 1.3a7.6 7.6 0 0 0 0 3L2.9 14.8l2 3.4 2-.8a7.6 7.6 0 0 0 2.6 1.5l.3 2.1h4.4l.3-2.1a7.6 7.6 0 0 0 2.6-1.5l2 .8 2-3.4z'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-people:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='2.8'/%3E%3Ccircle cx='16.5' cy='10' r='2.2'/%3E%3Cpath d='M3.5 19c.7-3.2 2.7-4.8 5.5-4.8s4.8 1.6 5.5 4.8M15.5 19c.4-2.3 1.7-3.5 3.4-3.5 1.4 0 2.4.8 2.9 2.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='2.8'/%3E%3Ccircle cx='16.5' cy='10' r='2.2'/%3E%3Cpath d='M3.5 19c.7-3.2 2.7-4.8 5.5-4.8s4.8 1.6 5.5 4.8M15.5 19c.4-2.3 1.7-3.5 3.4-3.5 1.4 0 2.4.8 2.9 2.3'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-bulb:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 3.5 10.9c-.4.3-.5.8-.5 1.1H9c0-.3-.1-.8-.5-1.1A6 6 0 0 1 12 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 3.5 10.9c-.4.3-.5.8-.5 1.1H9c0-.3-.1-.8-.5-1.1A6 6 0 0 1 12 3z'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-truck:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10.5v10H2.5z'/%3E%3Cpath d='M13 9.5h4l3.5 3.5v3.5H13z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10.5v10H2.5z'/%3E%3Cpath d='M13 9.5h4l3.5 3.5v3.5H13z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-clock:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-coins:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='2.8'/%3E%3Cpath d='M5 6.5v5c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8v-5'/%3E%3Cpath d='M5 11.5v5c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8v-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='2.8'/%3E%3Cpath d='M5 6.5v5c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8v-5'/%3E%3Cpath d='M5 11.5v5c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8v-5'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-pin:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 10-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 10-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-return:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l9-4.5 9 4.5-9 4.5z'/%3E%3Cpath d='M3 8.5v7l9 4.5 9-4.5v-7'/%3E%3Cpath d='M12 13v7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l9-4.5 9 4.5-9 4.5z'/%3E%3Cpath d='M3 8.5v7l9 4.5 9-4.5v-7'/%3E%3Cpath d='M12 13v7'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-clipboard:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16' rx='2'/%3E%3Cpath d='M9 4.5V3.2h6v1.3'/%3E%3Cpath d='M9 10h6M9 14h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16' rx='2'/%3E%3Cpath d='M9 4.5V3.2h6v1.3'/%3E%3Cpath d='M9 10h6M9 14h6'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-shield:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.2-3 7.7-7.5 9-4.5-1.3-7.5-4.8-7.5-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.2-3 7.7-7.5 9-4.5-1.3-7.5-4.8-7.5-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.topic-page .kivvi-topic-row.ico-ban:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.2 6.2l11.6 11.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.2 6.2l11.6 11.6'/%3E%3C/svg%3E");
}

@media all and (max-width: 767px) {
  .topic-page .page-body:has(.kivvi-topic) {
    padding: 20px 18px;
  }

  .topic-page .kivvi-topic-row {
    padding-left: 64px;
  }

    .topic-page .kivvi-topic-row:before {
      width: 48px;
      height: 48px;
      border-radius: 16px;
    }

    .topic-page .kivvi-topic-row:after {
      top: 35px;
      left: 12px;
      width: 24px;
      height: 24px;
    }

    .topic-page .kivvi-topic-row:first-child:after {
      top: 15px;
    }
}

/* ==========================================================================
   Standalone /contactus page, restyled to match the product page's Contact Us
   quick tab above. Same grid, rounded icon inputs and teal send button; the
   field classes differ (.fullname/.email/.enquiry here vs .contact_tab_* in
   the plugin view), so the selectors cannot simply be shared.
   ========================================================================== */

.contact-page .page-body {
  max-width: 760px;
  border: none;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(23, 76, 75, .12);
  padding: 36px 40px 32px;
}

.contact-page .topic-block {
  margin: 0 0 22px;
  border-bottom: 1px solid #ece7de;
  padding: 0 0 18px;
  text-align: center;
  color: #6b7a79;
}

.contact-page .fieldset {
  margin: 0;
  border: none;
  padding: 0;
}

.contact-page .form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  max-width: none;
  margin: 0;
  padding: 0;
}

  /* name + email share the first row; everything after spans the full width */
  .contact-page .form-fields .inputs:nth-child(n+3) {
    grid-column: 1 / -1;
  }

/* scoped through .form-fields to outrank 768.css's ".contact-page .inputs"
   float layout (float:left; width:calc(50% - 5px)), which loads after this
   file at equal specificity and squeezed each field to half its grid column */
.contact-page .form-fields .inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  float: none;
  width: auto;
  max-width: none;
  margin: 0 0 18px;
  text-align: left;
  white-space: normal;
}

  .contact-page .inputs label {
    order: 0;
    width: auto;
    height: auto;
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #202827;
  }

  .contact-page .inputs .required {
    order: 1;
    position: static;
    width: auto;
    height: auto;
    margin-left: 3px;
    font-size: 13.5px;
    color: #dd464d;
  }

    .contact-page .inputs .required:before {
      content: none;
      border: none;
    }

  .contact-page .inputs input,
  .contact-page .inputs textarea {
    order: 2;
    flex-basis: 100%;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 12px 14px 12px 40px;
    font-size: 14px;
    font-family: inherit;
    color: #202827;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 14px 14px;
    background-size: 16px 16px;
  }

  .contact-page .inputs span[data-valmsg-for] {
    order: 3;
    flex-basis: 100%;
  }

  .contact-page .inputs input:focus,
  .contact-page .inputs textarea:focus {
    outline: none;
    border-color: #174C4B;
  }

  .contact-page .inputs input.fullname {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  }

  .contact-page .inputs input.email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  }

  .contact-page .inputs input.subject {
    background-image: none;
    padding-left: 14px;
  }

  .contact-page .inputs textarea.enquiry {
    min-height: 140px;
    resize: vertical;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174C4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-1 4 8.5 8.5 0 01-7.5 4.5 8.4 8.4 0 01-4-1L3 20l1-4.5a8.4 8.4 0 01-1-4 8.5 8.5 0 014.5-7.5 8.4 8.4 0 014-1h.5a8.5 8.5 0 018 8v.5z'/%3E%3C/svg%3E");
    background-position: 14px 16px;
  }

.contact-page .buttons {
  margin-top: 6px;
  border-top: none;
  padding: 0;
}

.contact-page .button-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background-color: #174C4B !important;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

  .contact-page .button-1:hover {
    background-color: #0f302f !important;
  }

  .contact-page .button-1:before {
    content: "";
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
  }

@media (max-width: 767px) {
  .contact-page .page-body {
    padding: 26px 20px 24px;
  }

  .contact-page .form-fields {
    grid-template-columns: 1fr;
  }

  .contact-page .form-fields .inputs:nth-child(n+3) {
    grid-column: auto;
  }
}
/* ==========================================================================
   Account pages — customer info card layout (Kivvi mock)
   Sidebar nav card + one .account-card per section, each with a round icon
   badge, and a full-width save bar. The stock rules further up draw a bordered
   grey box per .fieldset and a gold band on .block .title, so several of these
   rules exist purely to undo those; !important is used where
   theme.custom-1.css (the admin accent-colour file, loaded after this one)
   targets the same selector.
   ========================================================================== */

.account-form-page .page-title.account-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: none;
  background: none;
  padding: 0 0 22px;
  text-align: left;
}

  .account-form-page .account-page-title h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.account-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7a79;
}

  .account-breadcrumb a {
    color: #6b7a79;
    transition: 0.3s ease;
  }

    .account-breadcrumb a:hover {
      color: #174C4B;
    }

  .account-breadcrumb strong {
    font-weight: 700;
    color: #174C4B;
  }

  .account-breadcrumb-delimiter {
    color: #b6c1c0;
  }

/* ---- sidebar navigation ---- */

.html-account-page .account-nav-card {
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  overflow: hidden;
  /* no inner padding: the active row is a full-bleed band in the mock, not an inset pill */
  padding: 0;
}

  /* the mock has no "Account navigation" band - kept in the markup for
     screen readers and collapsed visually here */
  .html-account-page .account-nav-card > .title {
    display: none;
  }

  /* no padding at any width: the active band runs to all four card edges. Competing rules are
     styles.css:2399 (10px 20px + bottom border), styles.css:8471 (top border) and 1260.css:2331
     (5px 0), so this carries !important rather than depending on file order. */
  .html-account-page .account-nav-card .listbox,
  .html-account-page .block .listbox {
    border: none !important;
    background: none;
    padding: 0px 0 !important;
  }

  .html-account-page .account-nav-card .list li {
    border: none;
    padding: 0;
  }

  .html-account-page .account-nav-card .list a {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 0;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #202827 !important;
    transition: 0.3s ease;
  }

  .html-account-page .account-nav-card .list a:hover {
    background-color: #F1F6F3;
  }

  .html-account-page .account-nav-card .list li.active > a {
    background-color: #174C4B;
    color: #fff !important;
  }

  /* grey circle behind every icon; on the active band the circle disappears and the icon
     rides on the green */
  .account-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background-color: #F1F2F2;
    color: #123B3A;
  }

  .html-account-page .account-nav-card .list li.active .account-nav-icon {
    background-color: transparent;
    color: #fff;
  }

    .account-nav-icon svg {
      width: 20px;
      height: 20px;
    }

/* ---- section cards ---- */

.account-form-page .account-card {
  margin: 0 0 20px;
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 26px 30px 30px;
}

.account-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 22px;
}

  .account-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #DCEBE1;
    color: #174C4B;
  }

    .account-card-icon svg {
      width: 26px;
      height: 26px;
    }

    .account-card-icon-amber {
      background-color: #FBE3C4;
      color: #8a5a12;
    }

    .account-card-icon-blue {
      background-color: #DCE9FA;
      color: #1c4f8a;
    }

  .account-card-titles {
    display: block;
    padding-top: 4px;
  }

    .account-card-titles > strong {
      display: block;
      font-size: 18px;
      font-weight: 700;
      text-transform: uppercase;
      color: #174C4B;
    }

  .account-card-subtitle {
    display: block;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    text-transform: none;
    color: #6b7a79;
  }

/* two-column field grid; a lone field in a card spans both columns */
.account-form-page .account-card .form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

  .account-form-page .account-card .form-fields .inputs {
    max-width: none;
    margin: 0;
    text-align: left;
    white-space: normal;
  }

  .account-form-page .account-card .form-fields .inputs:only-child {
    grid-column: 1 / -1;
  }

  .account-form-page .account-card .inputs > label {
    display: inline-block;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: #202827;
  }

  /* base .inputs .required is an absolutely positioned red triangle pinned to
     the field's corner - the mock wants a plain asterisk next to the label */
  .account-form-page .account-card .inputs .required {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 3px;
    font-size: 15px;
    line-height: 1;
    color: #e0393e;
  }

    .account-form-page .account-card .inputs .required:before {
      content: none;
    }

  .account-form-page .account-card .inputs input[type="text"],
  .account-form-page .account-card .inputs input[type="email"],
  .account-form-page .account-card .inputs input[type="tel"],
  .account-form-page .account-card .inputs input[type="password"],
  .account-form-page .account-card .inputs select,
  .account-form-page .account-card .inputs textarea {
    width: 100%;
    border: 1px solid #eceeed;
    border-radius: 12px;
    background-color: #F6F8F7;
    padding: 0 18px;
    font-size: 15px;
    color: #202827;
  }

  .account-form-page .account-card .inputs input[type="text"],
  .account-form-page .account-card .inputs input[type="email"],
  .account-form-page .account-card .inputs input[type="tel"],
  .account-form-page .account-card .inputs input[type="password"],
  .account-form-page .account-card .inputs select {
    height: 52px;
  }

  .account-form-page .account-card .inputs textarea {
    min-height: 110px;
    padding: 14px 18px;
    line-height: 24px;
  }

  .account-form-page .account-card .inputs input:focus,
  .account-form-page .account-card .inputs select:focus,
  .account-form-page .account-card .inputs textarea:focus {
    border-color: #174C4B;
    background-color: #fff;
  }

  .account-form-page .account-card .inputs select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
    cursor: pointer;
  }

  /* the date-of-birth picker is three selects in a row */
  .account-form-page .account-card .date-of-birth select {
    display: inline-block;
    width: auto;
    min-width: 108px;
    margin: 0 8px 0 0;
  }

  .account-form-page .account-card .option-list,
  .account-form-page .account-card .gender {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 52px;
  }

  .account-form-page .account-card .option-list label,
  .account-form-page .account-card .gender label {
    margin: 0 0 0 6px;
    font-size: 14px;
    font-weight: 400;
    color: #202827;
  }

  .account-form-page .account-card .field-validation-error {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    color: #e0393e;
  }

/* external authentication card */
.account-form-page .account-card .add-more-external-records {
  display: block;
  text-align: left;
}

.external-auth-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background-color: #EEF6F1;
  padding: 16px 18px;
  font-size: 14px;
  word-break: break-all;
  color: #174C4B;
}

  .external-auth-link svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
  }

  .external-auth-link a {
    font-weight: 600;
    color: #174C4B;
  }

/* ---- save bar ---- */

.account-form-page .buttons {
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 26px 30px;
  text-align: center;
}

.account-form-page .buttons .button-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  background-color: #174C4B !important;
  padding: 17px;
  color: #fff !important;
}

  .account-form-page .buttons .button-1:hover {
    background-color: #0f302f !important;
  }

  .save-customer-info-icon {
    display: flex;
    align-items: center;
  }

    .save-customer-info-icon svg {
      width: 18px;
      height: 18px;
    }

@media (max-width: 1024px) {
  .account-form-page .account-card .form-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .account-form-page .account-card {
    padding: 22px 18px 24px;
  }

  .account-form-page .account-page-title h1 {
    font-size: 24px;
  }

  .account-form-page .buttons .button-1 {
    max-width: none;
  }
}

/* change password: three fields stacked in one centered column rather than the two-column
   grid the other account cards use */
.change-password-page .account-card .form-fields {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  margin: 0 auto;
}

/* read-only fields (account email) — flat grey, no focus ring, not-allowed cursor */
.account-form-page .account-card .inputs input.readonly-input {
  background-color: #EEF0EF;
  color: #6b7a79;
  cursor: not-allowed;
}

  .account-form-page .account-card .inputs input.readonly-input:focus {
    border-color: #eceeed;
    background-color: #EEF0EF;
  }

/* 1260.css (loaded after this file, min-width 1260) styles the stock account nav:
   .listbox a gets padding-left:70px plus a 50px 'pacific' icon-font square in a:before,
   and .active a gets a triangle in a:after that pokes outside the card. Both fight the
   inline-SVG card, so they are switched off here for .account-nav-card. */
.html-account-page .account-nav-card .listbox a:before,
.html-account-page .account-nav-card .listbox .active a:before,
.html-account-page .account-nav-card .listbox .active a:after {
  content: none;
  display: none;
}

/* sentence case, not the theme's uppercase: 1260.css sets text-transform on .listbox a */
.html-account-page .account-nav-card .listbox a {
  position: relative;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: none;
  color: #202827;
}

  .html-account-page .account-nav-card .listbox a:hover {
    background-color: #F1F6F3;
    color: #174C4B;
  }

  .html-account-page .account-nav-card .listbox .active a,
  .html-account-page .account-nav-card .listbox .active a:hover {
    background-color: #174C4B;
    color: #fff !important;
  }

/* Panel alignment: the page title lives inside .center-2, so the nav card is pushed down to
   line up with the first .account-card. Replaces the 81px in 1260.css, which was sized for the
   stock title. Applies to every account page, not just customer info. */
.account-form-page .account-page-title h1 {
  line-height: 36px;
}

.html-account-page .side-2 {
  margin: 60px 0 40px;
}

/* Below 1260 the base rule collapses every side block (.block .listbox { display: none }) and
   pacific.js expands it when the .block .title is tapped. This card hides that title, so the
   nav had no way to open on mobile - keep the list permanently visible instead. */
.html-account-page .account-nav-card .listbox {
  display: block;
}

/* ==========================================================================
   Address list cards (Kivvi mock)
   One .address-item = white rounded card: avatar badge, name, icon rows with
   a label above the value, then pale-green EDIT / pale-red DELETE buttons.
   The stock .section/.address-item rules draw a bordered grey box and style
   .info as a plain list, so these override them.
   ========================================================================== */

.address-list-page .page-title.account-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: none;
  background: none;
  padding: 0 0 22px;
  text-align: left;
}

  .address-list-page .account-page-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.address-list-page .address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.address-list-page .section.address-item {
  margin: 0;
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 30px 30px 0;
  text-align: center;
}

.address-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  padding-bottom: 0;
  border-radius: 50%;
  background-color: #DCEBE1;
  color: #174C4B;
}

.address-list-page .address-item > .title {
  margin: 0 0 20px;
  border: none;
  background: none;
  padding: 0;
}

  .address-list-page .address-item > .title strong {
    font-size: 22px;
    font-weight: 700;
    text-transform: none;
    color: #123B3A;
  }

.address-list-page .address-item .info {
  margin: 0;
  border-top: 1px solid #edf1ef;
  text-align: left;
}

  .address-list-page .address-item .info li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid #edf1ef;
    padding: 18px 0;
    font-size: 15px;
    line-height: 24px;
    color: #123B3A;
  }

  .address-list-page .address-item .info li:last-child {
    border-bottom: none;
  }

  .address-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #DCEBE1;
    color: #174C4B;
  }

    .address-item-icon-amber {
      background-color: #FBE3C4;
      color: #d08b1e;
    }

    .address-item-icon-green {
      background-color: #DCEBE1;
      color: #174C4B;
    }

    .address-item-icon-blue {
      background-color: #DCE9FA;
      color: #1c4f8a;
    }

  .address-item-text {
    display: block;
    padding-top: 2px;
  }

  .address-list-page .address-item .info label {
    display: block;
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 400;
    color: #8a9391;
  }

  .address-item-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #123B3A;
  }

.address-list-page .address-item .buttons {
  display: flex;
  gap: 14px;
  margin: 0 -30px;
  border-top: 1px solid #edf1ef;
  padding: 20px 30px;
}

.address-list-page .address-item .button-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  border: none;
  border-radius: 12px;
  padding: 14px 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s ease;
}

.address-list-page .address-item .edit-address-button {
  background-color: #E4F1EA;
  color: #174C4B;
}

  .address-list-page .address-item .edit-address-button:hover {
    background-color: #d3e7dc;
    color: #0f302f;
  }

.address-list-page .address-item .delete-address-button {
  background-color: #FCE4E5;
  color: #d63a3f;
}

  .address-list-page .address-item .delete-address-button:hover {
    background-color: #f8d3d5;
    color: #b32a2f;
  }

.address-list-page .add-button {
  margin: 24px 0 0;
  text-align: center;
}

/* the stock rule turns this into a full-width white card - 70px of top padding holding a
   'pacific' plus glyph above the label - so the box, the padding and the glyph all go */
.address-list-page .add-button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: none;
  border: none;
  border-radius: 12px;
  padding: 16px 34px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

  .address-list-page .add-button button:before {
    content: none;
    display: none;
  }

.address-list-page .add-address-button,
.address-list-page .add-button button:hover {
  background-color: #174C4B !important;
  color: #fff !important;
}

  .address-list-page .add-address-button:hover {
    background-color: #0f302f !important;
  }

@media (max-width: 767px) {
  .address-list-page .section.address-item {
    padding: 24px 20px 0;
  }

  .address-list-page .address-item .buttons {
    margin: 0 -20px;
    padding: 18px 20px;
  }

  .address-list-page .account-page-title h1 {
    font-size: 24px;
  }
}

/* 768.css floats the cards two-per-row with a calc(50% - 10px) width; the grid above places
   them instead, so the float and the fixed width have to go or every card renders half-width
   inside its own grid cell. */
.address-list-page .section.address-item {
  float: none;
  width: auto;
}

/* The stock card paints two 'pacific' icon-font glyphs of its own: a pin above the name
   (.address-item .title strong:before) and a pencil / trash inside each .button-2. Both sit
   next to the inline SVGs this card renders, so they are switched off here along with the
   30px left padding that reserved room for the button glyph. */
.address-list-page .address-item .title strong {
  padding: 0;
}

  .address-list-page .address-item .title strong:before {
    content: none;
    display: none;
  }

.address-list-page .address-item .button-2 {
  margin: 0;
  padding: 14px 10px;
}

  .address-list-page .address-item .button-2:before {
    content: none;
    display: none;
  }

/* Address add / edit: the shared _CreateOrUpdateAddress partial wraps its fields in
   .edit-address, not .form-fields, so that element becomes the card's field grid. The stock
   rules (styles.css "ACCOUNT PAGES" and 1260.css) draw a bordered grey box around it and pad
   it 20-30px - the card already provides that framing, so they are undone here. */
.account-form-page .account-card .edit-address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
}

  .account-form-page .account-card .edit-address .inputs {
    max-width: none;
    margin: 0;
    text-align: left;
    white-space: normal;
  }

  .account-form-page .account-card .edit-address .inputs:only-child {
    grid-column: 1 / -1;
  }

  /* the stock .account-page .edit-address .inputs > label is 13px bold grey */
  .account-form-page .account-card .edit-address .inputs > label {
    font-size: 14px;
    font-weight: 700;
    color: #202827;
  }

/* the save bar is a card of its own, the same as customer info */
.account-form-page .account-card + .buttons,
.account-form-page .edit-address + .buttons {
  margin: 0;
  border: none;
}

@media (max-width: 1024px) {
  .account-form-page .account-card .edit-address {
    grid-template-columns: 1fr;
  }
}

/* Select2 skin for the address form's State/province box. The widget replaces the native
   select, so the card's field look (52px, pale grey, 12px radius) has to be re-applied to
   .select2-selection. Mirrors the register page's .register-field.city block. */
.account-form-page .account-card .inputs .select2-container {
  width: 100% !important;
}

  .account-form-page .account-card .inputs .select2-container--default .select2-selection--single {
    height: 52px;
    border: 1px solid #eceeed;
    border-radius: 12px;
    background-color: #F6F8F7;
    outline: none;
  }

    .account-form-page .account-card .inputs .select2-selection--single .select2-selection__rendered {
      padding: 0 44px 0 18px;
      font-size: 15px;
      line-height: 52px;
      color: #202827;
    }

    .account-form-page .account-card .inputs .select2-selection--single .select2-selection__placeholder {
      color: #8a9391;
    }

    .account-form-page .account-card .inputs .select2-selection--single .select2-selection__arrow {
      top: 0;
      right: 12px;
      width: 24px;
      height: 52px;
    }

      .account-form-page .account-card .inputs .select2-selection--single .select2-selection__arrow b {
        border: none;
        margin: 0;
        width: 18px;
        height: 18px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
      }

.account-form-page .account-card .inputs .select2-dropdown {
  border: 1px solid #eceeed;
  border-radius: 12px;
  overflow: hidden;
}

.account-form-page .account-card .inputs .select2-search--dropdown {
  padding: 10px;
}

  .account-form-page .account-card .inputs .select2-search--dropdown .select2-search__field {
    height: 42px;
    border: 1px solid #eceeed;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
  }

.account-form-page .account-card .inputs .select2-results__option {
  padding: 11px 18px;
  font-size: 14px;
  color: #202827;
}

  .account-form-page .account-card .inputs .select2-results__option--highlighted[aria-selected] {
    background-color: #EEF6F1;
    color: #174C4B;
  }

  .account-form-page .account-card .inputs .select2-results__option[aria-selected="true"] {
    background-color: #174C4B;
    color: #fff;
  }

/* ==========================================================================
   Select2 dropdown panel (city / state pickers, checkout address picker)
   The panel is appended to <body>, outside the page wrappers, so it cannot be
   skinned from a page-scoped block - these rules are deliberately global. The
   stock theme leaves the option rows in its gold accent colour; the mock wants
   plain dark text with a pale-green hover and a teal selected row.
   ========================================================================== */

.select2-container--default .select2-dropdown {
  border: 1px solid #e3e8e6;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(23, 76, 75, .12);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
  padding: 12px 12px 6px;
}

  .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 44px;
    border: 1px solid #e3e8e6;
    border-radius: 10px;
    background-color: #F6F8F7;
    padding: 0 14px;
    font-size: 14px;
    color: #202827;
    outline: none;
  }

  .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #174C4B;
    background-color: #fff;
  }

.select2-container--default .select2-results > .select2-results__options {
  max-height: 260px;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #cfdad6 transparent;
}

  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 6px;
  }

  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #cfdad6;
  }

.select2-container--default .select2-results__option {
  border-radius: 10px;
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: #202827;
}

  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #EEF6F1;
    color: #174C4B;
  }

  .select2-container--default .select2-results__option[aria-selected="true"],
  .select2-container--default .select2-results__option[data-selected="true"] {
    background-color: #174C4B;
    color: #fff;
  }

  /* the empty "Select state" / "Select city" entry reads as placeholder text */
  .select2-container--default .select2-results__option[id$="-0"],
  .select2-container--default .select2-results__option[aria-disabled="true"] {
    color: #8a9391;
  }

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #174C4B;
  outline: none;
}

/* ==========================================================================
   Order completed (Kivvi mock)
   One centred card: tick badge with decorative sparks, uppercase headline,
   order number pill, details link, then a teal continue button. The stock
   rules above draw a bordered grey box and hang a 'pacific' tick glyph in
   70px of padding above the title - both are undone here.
   ========================================================================== */

.order-completed-page .page-title {
  border: none;
  background: none;
  padding: 0 0 22px;
  text-align: left;
}

  .order-completed-page .page-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.order-completed-page .section.order-completed {
  max-width: 620px;
  margin: 0 auto 20px;
  border: none;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 14px 34px rgba(23, 76, 75, .10);
  padding: 44px 50px 40px;
  text-align: center;
}

/* ---- tick badge ---- */

.order-completed-badge {
  position: relative;
  width: 200px;
  height: 120px;
  margin: 0 auto 22px;
}

.order-completed-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background-color: #DCEFE4;
  color: #17754F;
}

.order-completed-rays {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #17754F;
  opacity: .75;
}

  .order-completed-rays-left {
    left: 0;
  }

  .order-completed-rays-right {
    right: 0;
  }

.order-completed-spark {
  position: absolute;
}

  .order-completed-spark-star {
    top: 6px;
    left: 26px;
    color: #F5C542;
  }

  .order-completed-spark-heart {
    top: 2px;
    right: 26px;
    color: #F79E7E;
  }

  .order-completed-spark-heart-2 {
    bottom: 12px;
    left: 16px;
    color: #7FD1AE;
  }

  .order-completed-spark-heart-3 {
    bottom: 10px;
    right: 20px;
    color: #7FD1AE;
  }

/* ---- copy ---- */

.order-completed-page .section.order-completed .title {
  margin: 0 0 22px;
  border: none;
  padding: 0;
}

  /* the stock rule reserves 70px of top padding for an icon-font tick */
  .order-completed-page .section.order-completed .title strong {
    display: block;
    padding: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: #123B3A;
  }

    .order-completed-page .section.order-completed .title strong:before {
      content: none;
      display: none;
    }

.order-completed-page .section.order-completed .order-number {
  display: inline-block;
  margin: 0 0 16px;
  border-radius: 12px;
  background-color: #EEF6F1;
  padding: 12px 26px;
}

  .order-completed-page .section.order-completed .order-number strong {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #123B3A;
  }

.order-completed-page .section.order-completed .details-link {
  margin: 0 0 26px;
}

  .order-completed-page .section.order-completed .details-link a {
    font-size: 15px;
    font-weight: 400;
    text-decoration: underline;
    color: #174C4B;
  }

    .order-completed-page .section.order-completed .details-link a:hover {
      color: #0f302f;
    }

/* ---- continue button ---- */

.order-completed-page .section.order-completed .buttons {
  border-top: 1px solid #edf1ef;
  padding: 26px 0 0;
}

.order-completed-page .order-completed-continue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  border: none;
  border-radius: 12px;
  background-color: #174C4B !important;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff !important;
  transition: 0.3s ease;
}

  .order-completed-page .order-completed-continue-button:hover {
    background-color: #0f302f !important;
  }

  .order-completed-continue-arrow {
    display: flex;
    align-items: center;
  }

@media (max-width: 767px) {
  .order-completed-page .section.order-completed {
    padding: 32px 20px 28px;
  }

  .order-completed-page .page-title h1 {
    font-size: 24px;
  }

  .order-completed-page .section.order-completed .title strong {
    font-size: 17px;
    line-height: 26px;
  }
}

/* ==========================================================================
   Order history cards (Kivvi mock)
   Two-column grid of white cards: bag badge, order number, status pill, then
   date / total rows and a pale-green details button. The stock rules draw a
   bordered grey box per .order-item and hang 'pacific' glyphs off the title
   and the buttons, so those are undone here.
   ========================================================================== */

.order-list-page .page-title.account-page-title {
  display: block;
  border: none;
  background: none;
  padding: 0 0 24px;
  text-align: left;
}

  .order-list-page .account-page-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

  .account-page-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: #6b7a79;
  }

.order-list-page .order-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.order-list-page .section.order-item {
  float: none;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 24px 26px 0;
  text-align: left;
}

/* ---- head ---- */

.order-item-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.order-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #DCEBE1;
  color: #174C4B;
}

.order-list-page .order-item > .order-item-head > .title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: none;
  padding: 0;
}

  /* the stock title reserves room for a 'pacific' glyph */
  .order-list-page .order-item .title strong {
    display: block;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #123B3A;
  }

    .order-list-page .order-item .title strong:before {
      content: none;
      display: none;
    }

.order-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  background-color: #FBE3C4;
  color: #8a5a12;
}

  .order-status-pill.processing {
    background-color: #DCE9FA;
    color: #1c4f8a;
  }

  .order-status-pill.complete {
    background-color: #DCEBE1;
    color: #174C4B;
  }

  .order-status-pill.cancelled {
    background-color: #FCE4E5;
    color: #b32a2f;
  }

/* ---- rows ---- */

.order-list-page .order-item .info {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

  .order-list-page .order-item .info li {
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    padding: 6px 0;
    line-height: 24px;
    color: #6b7a79;
  }

  .order-item-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: #8a9391;
  }

  .order-item-row-text .order-date,
  .order-item-row-text .order-total {
    font-weight: 600;
    color: #123B3A;
  }

/* ---- buttons ---- */

.order-list-page .order-item .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 18px -26px 0;
  border-top: 1px solid #edf1ef;
  padding: 18px 26px;
}

.order-list-page .order-item .button-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background-color: #E4F1EA;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #174C4B;
  transition: 0.3s ease;
}

  .order-list-page .order-item .button-2:hover {
    background-color: #d3e7dc;
    color: #0f302f;
  }

  /* the stock rule pins an icon-font glyph into 30px of left padding */
  .order-list-page .order-item .button-2:before {
    content: none;
    display: none;
  }

.order-list-page .order-item .return-items-button {
  background-color: #FBE7D3;
  color: #8a5a12;
}

  .order-list-page .order-item .return-items-button:hover {
    background-color: #f6dbbe;
    color: #6d460d;
  }

@media (max-width: 767px) {
  .order-list-page .section.order-item {
    padding: 20px 18px 0;
  }

  .order-list-page .order-item .buttons {
    margin: 16px -18px 0;
    padding: 16px 18px;
  }

  .order-list-page .account-page-title h1 {
    font-size: 24px;
  }
}

/* ==========================================================================
   Order details (Kivvi mock)
   Title row with breadcrumb and print / pdf buttons, then a two-panel summary
   card (order details | delivery address) and a products card holding the
   line table, the totals box and the re-order button. The stock rules draw
   bordered grey boxes and hang 'pacific' glyphs off the buttons and titles.
   ========================================================================== */

.order-details-page .page-title.account-page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: none;
  background: none;
  padding: 0 0 22px;
  text-align: left;
}

  .order-details-page .account-page-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

  .order-details-page .account-breadcrumb {
    margin: 8px 0 0;
  }

.order-title-actions {
  display: flex;
  gap: 12px;
}

.order-details-page .order-title-actions .button-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid #e3e8e6;
  border-radius: 12px;
  background-color: #fff;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #174C4B;
  transition: 0.3s ease;
}

  .order-details-page .order-title-actions .button-2:hover {
    border-color: #174C4B;
    background-color: #EEF6F1;
    color: #0f302f;
  }

  /* the stock print / pdf buttons carry an icon-font glyph in 30px of padding */
  .order-details-page .order-title-actions .button-2:before {
    content: none;
    display: none;
  }

/* ---- cards ---- */

.order-details-page .order-card,
.order-details-page .section.products,
.order-details-page .section.shipments,
.order-details-page .section.order-notes {
  margin: 0 0 24px;
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 28px 30px;
}

.order-summary-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

  .order-card-panel + .order-card-panel {
    border-left: 1px solid #edf1ef;
    padding-left: 30px;
  }

.order-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

  .order-card-head strong {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.order-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #DCEBE1;
  color: #174C4B;
}

  .order-card-icon-blue {
    background-color: #DCE9FA;
    color: #1c4f8a;
  }

  .order-card-icon-plain {
    width: 30px;
    height: 30px;
    background: none;
    border-radius: 0;
  }

/* ---- label / value rows ---- */

.order-card-list {
  margin: 0;
  padding: 0;
}

  .order-card-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    border: none;
    /* tighter rows: the status pills already add height of their own */
    padding: 3px 0;
    font-size: 15px;
    line-height: 22px;
  }

  .order-card-list .label {
    flex: 0 0 46%;
    color: #6b7a79;
  }

  .order-card-list .value {
    flex: 1 1 auto;
    min-width: 0;
    color: #123B3A;
  }

  .order-card-list .order-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #174C4B;
  }

.order-card-address {
  margin: 0;
  padding: 0;
}

  .order-card-address li {
    border: none;
    padding: 3px 0;
    font-size: 15px;
    line-height: 24px;
    color: #123B3A;
  }

  .order-card-address .name strong {
    font-size: 16px;
    font-weight: 700;
  }

.order-card-shipping {
  margin: 18px 0 0;
  border-top: 1px solid #edf1ef;
  padding: 14px 0 0;
}

.order-status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  background-color: #FBE3C4;
  color: #8a5a12;
}

  .order-status-pill.processing {
    background-color: #DCE9FA;
    color: #1c4f8a;
  }

  .order-status-pill.complete {
    background-color: #DCEBE1;
    color: #174C4B;
  }

  .order-status-pill.cancelled {
    background-color: #FCE4E5;
    color: #b32a2f;
  }

  .order-status-pill.neutral {
    background-color: #EDF1EF;
    color: #5c6a68;
  }

/* ---- products ---- */

.order-details-page .section.products > .title,
.order-details-page .section.shipments > .title,
.order-details-page .section.order-notes > .title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  border: none;
  padding: 0;
  text-align: left;
}

  .order-details-page .section.products > .title strong,
  .order-details-page .section.shipments > .title strong,
  .order-details-page .section.order-notes > .title strong {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.order-details-page .data-table thead th {
  border: none;
  border-bottom: 1px solid #edf1ef;
  background: none;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a9391;
}

.order-details-page .data-table td {
  border: none;
  border-bottom: 1px solid #f3f6f5;
  padding: 18px 14px;
  font-size: 15px;
  color: #123B3A;
}

  .order-details-page .data-table .picture img {
    border-radius: 12px;
  }

  .order-details-page .data-table .product a {
    font-style: normal;
    font-weight: 500;
    color: #123B3A;
  }

    .order-details-page .data-table .product a:hover {
      color: #174C4B;
    }

  .order-details-page .data-table .total .product-subtotal {
    font-weight: 700;
    color: #123B3A;
  }

/* ---- totals + actions ---- */

/* the totals block sits inside the products card, so it carries no card chrome of its own.
   Block, not flex: the mock pushes the totals box to the right edge of the card and centres
   the button underneath, which margin-auto does more predictably than flex alignment. */
.order-details-page .section.totals {
  display: block;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
}

.order-details-page .section.options {
  margin: 0;
  border: none;
  background: none;
  padding: 0;
}

.order-details-page .total-info {
  width: 100%;
  max-width: 520px;
  margin: 8px 0 24px auto;
  border-radius: 14px;
  background-color: #EEF6F1;
  padding: 18px 24px;
}

  .order-details-page .total-info .cart-total {
    width: 100%;
  }

  .order-details-page .total-info .cart-total td {
    border: none;
    padding: 7px 0;
    font-size: 15px;
    color: #123B3A;
  }

  .order-details-page .total-info .cart-total-left label {
    color: #4c5a58;
  }

  .order-details-page .total-info .cart-total-right {
    text-align: right;
  }

  .order-details-page .total-info .cart-total tr:last-child td {
    border-top: 1px solid #d9e6df;
    padding-top: 14px;
    font-size: 18px;
  }

    .order-details-page .total-info .cart-total tr:last-child strong {
      font-size: 20px;
      color: #174C4B;
    }

.order-details-page .section.totals .actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.order-details-page .re-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 260px;
  border: none;
  border-radius: 12px;
  background-color: #174C4B !important;
  padding: 17px 30px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff !important;
  transition: 0.3s ease;
}

  .order-details-page .re-order-button:hover {
    background-color: #0f302f !important;
  }

.order-details-page .return-items-button {
  border: none;
  border-radius: 12px;
  background-color: #FBE7D3;
  padding: 17px 30px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a5a12;
}

  .order-details-page .return-items-button:hover {
    background-color: #f6dbbe;
    color: #6d460d;
  }

@media (max-width: 767px) {
  .order-details-page .order-card,
  .order-details-page .section.products,
  .order-details-page .section.shipments,
  .order-details-page .section.order-notes {
    padding: 22px 18px;
  }

  .order-card-panel + .order-card-panel {
    border-left: none;
    border-top: 1px solid #edf1ef;
    padding-left: 0;
    padding-top: 24px;
  }

  .order-details-page .account-page-title h1 {
    font-size: 24px;
  }

  .order-details-page .re-order-button {
    width: 100%;
    min-width: 0;
  }
}

/* the account navigation is a column inside the page rather than the layout's "left" section:
   a @section can only be declared at a view's top level, and declaring one would break the
   print view, whose layout renders no sections */
.order-details-page {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.order-details-side {
  flex: 0 0 300px;
  max-width: 300px;
}

.order-details-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1259px) {
  .order-details-page {
    display: block;
  }

  .order-details-side {
    max-width: none;
    margin: 0 0 24px;
  }
}

/* [styles.css ~11050] styles every anchor in .order-details-page .page-title as a bordered
   gold button - that is meant for the print / pdf links, but it also caught the breadcrumb,
   which came out as a row of pills. The breadcrumb is reset here; the two real buttons keep
   their own .button-2 rules above. */
.order-details-page .page-title .account-breadcrumb a {
  display: inline;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: #6b7a79;
}

  .order-details-page .page-title .account-breadcrumb a:hover {
    border: none;
    background: none;
    color: #174C4B;
  }

/* the nav column sits beside the page title, so it needs the same top offset the layout's
   .side-2 gets on every other account page */
.order-details-side {
  margin: 60px 0 40px;
}

@media (max-width: 1259px) {
  .order-details-side {
    margin: 0 0 24px;
  }
}

/* Final say on the account nav typography. 1260.css styles .html-account-page .block .listbox a
   as uppercase bold grey; that selector has the same weight as the card's own rules, so this one
   adds a class and !important rather than relying on file order, which has proved unreliable
   through the asset cache. */
.html-account-page .block-account-navigation.account-nav-card .listbox .list a {
  padding: 13px 22px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  /* the resources read "Downloadable products"; the mock capitalises every word */
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  color: #202827 !important;
}

.html-account-page .block-account-navigation.account-nav-card .listbox .list li.active > a {
  color: #fff !important;
}

.html-account-page .block-account-navigation.account-nav-card .listbox .list a:hover {
  color: #174C4B !important;
}

.html-account-page .block-account-navigation.account-nav-card .listbox .list li.active > a:hover {
  color: #fff !important;
}

/* 768.css floats .order-details-page .page-title h1 left (it was sharing a line with the print
   and pdf links in the stock design), which pulled the breadcrumb up onto the title's line.
   The title block is a flex column now, so the float has to go. */
.order-details-page .page-title.account-page-title h1 {
  float: none;
  margin: 0;
}

/* styles.css:11041 gives this title 20px of bottom margin on top of the block's own padding */
.order-details-page .page-title {
  margin: 0 0 0px;
}

.account-page-title-text {
  display: block;
  min-width: 0;
}

  .order-details-page .account-page-title .account-page-title-text {
    flex: 1 1 auto;
  }

/* product table + totals, matched to the mock: grey header band, compact rows, a small
   thumbnail, then the pale-green totals box on the right and a modest re-order button */
.order-details-page .section.products .data-table thead tr {
  background-color: #F7F8F8;
}

.order-details-page .section.products .data-table thead th {
  border: none;
  background: none;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: .03em;
}

  .order-details-page .section.products .data-table thead th:first-child {
    border-radius: 8px 0 0 8px;
  }

  .order-details-page .section.products .data-table thead th:last-child {
    border-radius: 0 8px 8px 0;
  }

.order-details-page .section.products .data-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.order-details-page .section.products .data-table .picture {
  width: 1px;
  padding: 0px 6px;
}

  .order-details-page .section.products .data-table .picture a {
    display: inline-block;
    line-height: 0;
  }

  .order-details-page .section.products .data-table .picture img {
    width: 56px;
    height: auto;
    border-radius: 10px;
  }

.order-details-page .section.products .data-table .total .product-subtotal {
  color: #174C4B;
}

.order-details-page .total-info {
  padding: 14px 20px;
}

  .order-details-page .total-info .cart-total td {
    padding: 5px 0;
    font-size: 14px;
  }

  .order-details-page .total-info .cart-total tr:last-child td {
    padding-top: 12px;
    font-size: 16px;
  }

    .order-details-page .total-info .cart-total tr:last-child label {
      font-weight: 700;
      color: #123B3A;
    }

    .order-details-page .total-info .cart-total tr:last-child strong {
      font-size: 19px;
    }

.order-details-page .re-order-button {
  min-width: 190px;
  padding: 15px 28px;
}

/* the totals box hugs the right edge of the products card. !important because styles.css:9583
   sets .totals { margin: auto }, which recentres it. */
.order-details-page .section.totals .total-info {
  max-width: 460px;
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* totals on the right, button centred - belt and braces: the box is inline-block inside a
   right-aligned section, so it lands right even where the auto margins were being reset */
.order-details-page .section.totals {
  display: block;
  text-align: right;
}

  .order-details-page .section.totals .total-info {
    display: inline-block;
    width: auto;
    min-width: 360px;
    max-width: 460px;
    text-align: left;
  }

  .order-details-page .section.totals .actions {
    display: flex;
    justify-content: center;
    text-align: center;
  }

/* ==========================================================================
   My product reviews (Kivvi mock)
   One white card per review: star badge, review title over the product link,
   approval pill, star rating with the date, the text and the store reply.
   The stock rules draw a bordered white panel around the whole list and hang
   'pacific' glyphs off .review-info, so those are undone here.
   ========================================================================== */

.my-product-reviews-list-page .page-title.account-page-title {
  display: block;
  border: none;
  background: none;
  padding: 0 0 24px;
  text-align: left;
}

  .my-product-reviews-list-page .account-page-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #174C4B;
  }

.my-product-reviews-list-page .product-review-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
}

.my-product-reviews-list-page .section.product-review-item {
  float: none;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(23, 76, 75, .08);
  padding: 24px 26px 0;
  text-align: left;
}

/* ---- head ---- */

.my-product-reviews-list-page .product-review-item .review-item-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
  overflow: visible;
}

.review-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #DCEBE1;
  color: #174C4B;
}

.my-product-reviews-list-page .product-review-item .review-item-head .title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: none;
  padding: 0;
}

  .my-product-reviews-list-page .product-review-item .title strong {
    display: block;
    padding: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #123B3A;
  }

.review-product-link {
  display: inline-block;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #6b7a79;
}

  .review-product-link:hover {
    color: #174C4B;
  }

.review-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  background-color: #FBE3C4;
  color: #8a5a12;
}

  .review-status-pill.approved {
    background-color: #DCEBE1;
    color: #174C4B;
  }

/* ---- rating + date ---- */

.review-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
}

.review-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

  .review-stars .star {
    fill: #e2e7e5;
  }

  .review-stars .star.on {
    fill: #F5A623;
  }

.review-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #6b7a79;
}

/* ---- per-type ratings ---- */

.review-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

  .review-type-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    padding: 0;
  }

  .review-type-name {
    font-size: 14px;
    color: #6b7a79;
  }

/* ---- text + reply ---- */

.my-product-reviews-list-page .product-review-item .review-text {
  margin: 0 0 18px;
  text-align: left;
  font-size: 15px;
  line-height: 26px;
  color: #202827;
}

.my-product-reviews-list-page .product-review-item .reply {
  margin: 0 0 18px;
  border: none;
  border-radius: 14px;
  background-color: #EEF6F1;
  padding: 16px 18px;
}

.my-product-reviews-list-page .product-review-item .reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  color: #174C4B;
}

.my-product-reviews-list-page .product-review-item .reply-text {
  font-size: 15px;
  line-height: 26px;
  color: #202827;
}

/* ---- buttons ---- */

.my-product-reviews-list-page .product-review-item .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 -26px;
  border-top: 1px solid #edf1ef;
  padding: 18px 26px;
}

.my-product-reviews-list-page .product-review-item .button-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background-color: #EEF6F1;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #174C4B;
}

  .my-product-reviews-list-page .product-review-item .button-2:hover {
    background-color: #dceae1;
    color: #123B3A;
  }

@media (max-width: 767px) {
  .my-product-reviews-list-page .section.product-review-item {
    padding: 20px 18px 0;
  }

  .my-product-reviews-list-page .product-review-item .review-item-head {
    flex-wrap: wrap;
  }

  .my-product-reviews-list-page .product-review-item .buttons {
    margin: 0 -18px;
    padding: 16px 18px;
  }

  .my-product-reviews-list-page .account-page-title h1 {
    font-size: 24px;
  }
}