/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* Tables inside product descriptions and post content */
.wc_description table,
.main-post-content table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: separate;
	border-spacing: 0;
	line-height: 1.2;
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	overflow: hidden;
}

.wc_description table th,
.wc_description table td,
.main-post-content table th,
.main-post-content table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #eef0f2;
}

.wc_description table th,
.main-post-content table th {
	font-weight: 600;
	color: #222;
	background: #f8f9fa;
}

.wc_description table td,
.main-post-content table td {
	color: #444;
	background: #fff;
}

.wc_description table tbody tr:nth-child(even) td,
.main-post-content table tbody tr:nth-child(even) td {
	background: #fcfcfd;
}

.wc_description table tr:last-child th,
.wc_description table tr:last-child td,
.main-post-content table tr:last-child th,
.main-post-content table tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.wc_description table,
	.main-post-content table {
		font-size: 0.9rem;
	}

	.wc_description table th,
	.wc_description table td,
	.main-post-content table th,
	.main-post-content table td {
		padding: 10px 12px;
	}
}



.ci-bento-hero {
  --ci-blue: #2f7f99;
  --ci-blue-dark: #174a5d;
  --ci-blue-deep: #123f50;
  --ci-blue-soft: #cfe8ef;
  --ci-supply-bg: #c0dee8;
  --ci-bg-soft: #eef8fb;
  --ci-white: #fff;
  --ci-text: #34464e;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  color: var(--ci-text);
}

.ci-bento-grid {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 265px 265px auto;
  grid-template-areas:
    "main main main main main main supply supply supply supply supply supply"
    "main main main main main main match match match prices prices prices"
    "welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome";
  gap: 30px;
}

.ci-bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 32px;
  border-radius: 20px;
  background: var(--ci-white);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .ci-bento-card:hover {
    opacity: 0.9;
  }
}

.ci-bento-card :is(h1, h2, h3, p),
.ci-bento-btn,
.ci-bento-link,
.ci-shield-row,
.ci-flag-row,
.ci-new-here-copy,
.ci-welcome-actions,
#ci-welcome-inline-omnisend {
  position: relative;
  z-index: 2;
}

.ci-bento-card :is(h1, h2, h3) {
  margin: 0;
  line-height: 1.05;
  color: var(--ci-blue);
}

.ci-main h1 {
  max-width: 560px;
  font-size: clamp(32px, 2.88vw, 41.6px);
}

.ci-supply h2 {
  max-width: 620px;
  font-size: clamp(25.6px, 2.08vw, 30.4px);
}

.ci-price-match h3,
.ci-canadian-prices h3 {
  font-size: 24px;
  line-height: 1.03;
}

.ci-new-here h3 {
  font-size: clamp(25.6px, 2.4vw, 33.6px);
}

.ci-bento-card p {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.42;
  color: rgba(52, 70, 78, 0.78);
}

.ci-price-match p,
.ci-canadian-prices p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.35;
}

.ci-bento-card strong {
  color: var(--ci-text);
  font-weight: 850;
}

.ci-pill {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  margin: 0;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--bricks-color-jxgxxw, #fff);
  color: var(--bricks-color-upaoae, var(--ci-blue));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ci-bento-btn,
.ci-bento-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px;
  border-radius: 50px;
  background: var(--bricks-color-axfurf, #f68b4b);
  color: var(--bricks-color-dggqmf, #fff);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.ci-main .ci-bento-btn {
  padding: 0 2em;
}

.ci-supply .ci-bento-link {
  min-height: 42px;
  margin-top: 18px;
  padding: 0 1.7em;
  font-size: 15px;
}

.ci-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  background: radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.55), transparent 34%), var(--ci-blue-soft);
}

.ci-main p {
  max-width: 530px;
}

.ci-main-visual,
.ci-supply-image-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ci-main-visual {
  align-items: flex-end;
  min-height: 195px;
  margin-top: 18px;
}

.ci-main-image,
.ci-supply-image,
.ci-shield-icon,
.ci-canada-flag-img {
  display: block;
  object-fit: contain;
}

.ci-main-image {
  aspect-ratio: 520 / 225;
  width: 520px;
  max-width: 92%;
  height: auto;
  max-height: 225px;
  object-position: center bottom;
}

.ci-supply {
  grid-area: supply;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 24px;
  background: radial-gradient(circle at 82% 55%, rgba(255, 255, 255, 0.46), transparent 32%), var(--ci-supply-bg);
}

.ci-supply p {
  max-width: 470px;
}

.ci-supply-image {
  aspect-ratio: 190 / 130;
  width: 190px;
  max-width: 100%;
  height: auto;
  max-height: 130px;
}

.ci-price-match {
  grid-area: match;
  padding: 26px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 2px) 0 0 / 22px 22px, linear-gradient(135deg, var(--ci-blue-dark), var(--ci-blue-deep));
  color: var(--ci-white);
}

.ci-price-match :is(h3, p),
.ci-new-here :is(h3, p) {
  color: var(--ci-white);
}

.ci-price-match p {
  opacity: 0.84;
}

.ci-shield-row,
.ci-flag-row {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  font-size: 14.4px;
  font-weight: 850;
  line-height: 1.2;
}

.ci-shield-row {
  color: var(--ci-white);
}

.ci-flag-row {
  color: var(--ci-blue);
}

.ci-shield-icon,
.ci-canada-flag-img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.ci-shield-icon {
  filter: brightness(0) invert(1);
}

.ci-canadian-prices {
  grid-area: prices;
  padding: 26px;
  background: radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.85), transparent 28%), var(--ci-bg-soft);
}

.ci-new-here {
  grid-area: welcome;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 145px;
  gap: 30px;
  background: radial-gradient(circle at 92% 50%, rgba(255, 255, 255, 0.1), transparent 30%), linear-gradient(135deg, var(--ci-blue-dark), var(--ci-blue-deep));
  color: var(--ci-white);
}

.ci-new-here-copy {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ci-new-here-copy p {
  max-width: 760px;
  opacity: 0.86;
}

.ci-welcome-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

#ci-welcome-inline-omnisend {
  width: min(390px, 100%);
  min-width: 320px;
}

#ci-welcome-inline-omnisend,
#ci-welcome-inline-omnisend * {
  box-sizing: border-box;
}

#ci-welcome-inline-omnisend > div,
#ci-welcome-inline-omnisend :is([class*="omnisend-reset-"], [class*="-content"], [class*="-sections-container"], form) {
  width: 100% !important;
  max-width: none !important;
}

#ci-welcome-inline-omnisend form {
  margin: 0 !important;
}

#ci-welcome-inline-omnisend div[class*="-section-"]:not([class*="opacity-layer"]) {
  padding: 0 !important;
}

#ci-welcome-inline-omnisend form .omnisend-mobile-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  padding-bottom: 10px !important;
}

#ci-welcome-inline-omnisend div[class*="field-container-wrapper-"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

#ci-welcome-inline-omnisend :is(div[class*="field-container-"], div[class*="action-container-"]) {
  padding: 0 !important;
}

#ci-welcome-inline-omnisend :is(input[type="email"], button[type="submit"]) {
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#ci-welcome-inline-omnisend input[type="email"] {
  width: 100% !important;
  padding: 0 16px !important;
  background: var(--ci-white) !important;
  color: var(--ci-blue-dark) !important;
}

#ci-welcome-inline-omnisend input[type="email"]::placeholder {
  color: rgba(23, 74, 93, 0.72) !important;
}

#ci-welcome-inline-omnisend button[type="submit"] {
  width: auto !important;
  padding: 0 20px !important;
  background: var(--bricks-color-axfurf, #f68b4b) !important;
  color: var(--bricks-color-dggqmf, #fff) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

#ci-welcome-inline-omnisend :is([id$="-required"], [id$="-error"], [class*="submit-error"]) {
  padding: 5px 0 0 !important;
  color: var(--ci-white) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#ci-welcome-inline-omnisend [class*="-text-"],
#ci-welcome-inline-omnisend [class*="-text-"] p {
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: var(--ci-white) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

@media (max-width: 980px) {
  .ci-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "main main"
      "supply supply"
      "match prices"
      "welcome welcome";
  }

  .ci-main {
    min-height: 460px;
  }

  .ci-supply {
    min-height: 245px;
  }

  .ci-price-match,
  .ci-canadian-prices {
    min-height: 230px;
  }

  .ci-new-here {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ci-welcome-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .ci-bento-grid {
    gap: 18px;
  }

  .ci-bento-card {
    padding: 22px;
  }

  .ci-main {
    min-height: 0;
    justify-content: flex-start;
  }

  .ci-main .ci-pill {
    display: none;
  }

  .ci-main h1 {
    font-size: 21.76px;
    line-height: 1.04;
  }

  .ci-supply h2,
  .ci-new-here h3 {
    font-size: 19.2px;
    line-height: 1.04;
  }

  .ci-price-match h3,
  .ci-canadian-prices h3 {
    font-size: 17.92px;
    line-height: 1.02;
  }

  .ci-bento-card p {
    font-size: 12.6px;
    line-height: 1.42;
  }

  .ci-main p,
  .ci-supply p,
  .ci-new-here-copy p {
    font-size: 13.3px;
    line-height: 1.4;
  }

  .ci-pill {
    top: 16px;
    right: 16px;
  }

  .ci-main .ci-bento-btn {
    min-height: 46px;
    margin-top: 18px;
  }

  .ci-main-visual {
    min-height: 88px;
    margin-top: 10px;
  }

  .ci-main-image {
    width: 260px;
    max-width: 70%;
    max-height: 96px;
  }

  .ci-supply {
    grid-template-columns: minmax(0, 1fr) 105px;
    min-height: 205px;
    gap: 14px;
  }

  .ci-supply .ci-bento-link {
    min-height: 40px;
    padding: 0 1.5em;
  }

  .ci-supply-image {
    width: 104px;
    max-height: 92px;
  }

  .ci-price-match,
  .ci-canadian-prices {
    min-height: 180px;
    padding: 20px;
  }

  .ci-price-match p,
  .ci-canadian-prices p {
    display: none;
  }

  .ci-shield-row,
  .ci-flag-row {
    gap: 9px;
  }

  .ci-shield-icon,
  .ci-canada-flag-img {
    width: 32px;
    height: 32px;
  }

  .ci-new-here {
    gap: 16px;
  }

  .ci-welcome-actions,
  #ci-welcome-inline-omnisend {
    width: 100%;
  }

  #ci-welcome-inline-omnisend {
    min-width: 0;
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  .ci-main {
    min-height: auto;
  }

  .ci-main-visual {
    min-height: 110px;
    margin-top: 8px;
  }

  .ci-main-image {
    width: 260px;
    max-width: 50%;
    max-height: 110px;
  }
}

@media (max-width: 640px) and (orientation: landscape) {
  .ci-main-visual {
    min-height: 62px;
  }

  .ci-main-image {
    width: 160px;
    max-width: 45%;
    max-height: 60px;
  }
}