/** Shopify CDN: Minification failed

Line 720:38 Expected identifier but found whitespace
Line 720:39 Unexpected "1"

**/
/* =====================================================================
   dz-galicia-brand.css  —  seafood brand layer
   Store: tgmmzj-c1.myshopify.com · theme: dzcp1117-001
   Palette:  cream #F5EDE0 · slate ink #3D5A73 · terracotta #C0532B
             paprika #B5391C · sand hairline #C9BFA8
   Type:     Bitter 600 headings / Bitter 400 body (Shopify font library)
   Radius:   4px on buttons and cards
   Motion:   slow wave drift 0.7s ease-out, disabled for prefers-reduced-motion
   ===================================================================== */

:root {
  --dz-cream: #F5EDE0;
  --dz-cream-2: #FBF6EC;
  --dz-ink: #3D5A73;
  --dz-ink-soft: #4A5A66;
  --dz-terra: #C0532B;
  --dz-paprika: #B5391C;
  --dz-sand: #C9BFA8;
  --dz-radius: 4px;
}

/* ---------- 1. CREAM BASE + THREE LAYERED TEXTURES ---------- */
body,
body.template-index,
body.template-collection,
body.template-product {
  background-color: var(--dz-cream) !important;
  background-image:
    url("dz-paprika-wash.svg"),
    url("dz-tile-chips.svg"),
    url("dz-harp-waves.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center top, right bottom, 0 0;
  background-size: 1400px 1400px, 320px 320px, 260px 260px;
  background-attachment: scroll, scroll, scroll;
  color: var(--dz-ink-soft);
}

/* the theme paints its own white page wrapper over the body */
.page-wrapper,
.main-content,
#shopify-section-header,
.wrapper-header,
.site-header,
.header-top,
.header-bottom,
.content-for-layout,
.main-content .container,
.template-index .main-content {
  background-color: transparent;
}

/* ---------- 2. TYPE ---------- */
body,
.body,
p,
li,
label,
input,
textarea,
select,
.price-box,
.product-title,
.article,
.rte {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .page-title,
.site-nav > li > a,
.product-title a,
.footer-logo,
.narwal-heading,
.feat-content h2,
.trust-heading,
.banner-title {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dz-ink);
}

a { color: var(--dz-ink); }
a:hover, a:focus { color: var(--dz-paprika); }

/* ---------- 3. BUTTONS: terracotta, 4px, white text ---------- */
.btn,
.btn-1,
.btn-2,
.btn-checkout,
.button,
a.btn,
button.btn,
.cart .btn,
.footer .btn,
.search-bar .btn,
.dzpp-cta {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-terra) !important;
  border: 1px solid var(--dz-terra) !important;
  color: #FFFFFF !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: background-color 0.7s ease-out, border-color 0.7s ease-out;
}
.btn:hover, .btn:focus,
.btn-1:hover, .btn-2:hover,
.btn-checkout:hover,
a.btn:hover,
.cart .btn:hover,
.footer .btn:hover,
.dzpp-cta:hover {
  background: var(--dz-paprika) !important;
  border-color: var(--dz-paprika) !important;
  color: #FFFFFF !important;
}

/* ---------- 4. HEADER: cream, slate, sand hairline ---------- */
.site-header {
  background-color: var(--dz-cream) !important;
  border-bottom: 1px solid var(--dz-sand);
}
.site-header .header-top,
.site-header .header-bottom,
.site-header .header-pc,
.site-header .header-panel,
.site-header .top-message {
  background-color: transparent !important;
}
.site-header .top-message {
  border-bottom: 1px solid var(--dz-sand);
  color: var(--dz-ink-soft);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.site-nav > li > a,
.site-nav > li > .icon-nav,
.site-nav a {
  color: var(--dz-ink) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.site-nav > li > a:hover,
.site-nav > li:hover > a {
  color: var(--dz-terra) !important;
}
.site-header .cart-icon a,
.site-header .icon-nav,
.site-header .search-bar-icon,
.site-header a[href*="/cart"] {
  color: var(--dz-ink) !important;
}
.site-header .cart-icon .count,
.site-header .count {
  background: var(--dz-terra) !important;
  color: #FFFFFF !important;
  border-radius: var(--dz-radius);
}

/* ---------- 5. HERO: cream, harp waves at the edges, slate h1,
                terracotta CTA, octopus beside the heading ----------
   Layout rule: text and image never overlap. On desktop the banner is split -
   the text keeps the left column and the photograph is moved into its own
   right-hand panel, so nothing is printed on top of the picture. */
.narwal-banner-section {
  background-color: var(--dz-cream) !important;
  border-bottom: 1px solid var(--dz-sand);
}
.narwal-banner-section::before,
.narwal-banner-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 190px;
  background-image: url("dz-harp-waves.svg");
  background-size: 190px 190px;
  background-repeat: repeat-y;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.narwal-banner-section::before { left: 0; }
.narwal-banner-section::after { right: 0; }

/* the photograph gets its own panel on the right - no text over it, no crop */
@media (min-width: 769px) {
  .narwal-banner-section .banner-bg.desktop-bg {
    left: auto;
    right: 36px;
    top: 44px;
    bottom: 44px;
    width: 42%;
    height: auto;
    border: 1px solid var(--dz-sand);
    border-radius: var(--dz-radius);
    background-color: #EFE3D1;
    background-image: url("dz-tile-chips.svg");
    background-size: 220px 220px;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 1;
  }
  .narwal-banner-section .banner-bg.desktop-bg img {
    object-fit: contain;
    object-position: center;
  }
  .narwal-banner-section .banner-content-container {
    padding-right: 48%;
  }
}

.narwal-banner-section .banner-text-box {
  position: relative;
  color: var(--dz-ink) !important;
  padding-left: 86px;
}
.narwal-banner-section .banner-title,
.narwal-banner-section .banner-title span {
  color: var(--dz-ink) !important;
  font-weight: 600;
}
.narwal-banner-section .banner-subtitle {
  color: var(--dz-ink-soft) !important;
}
/* small illustrated octopus to the left of the heading */
.narwal-banner-section .banner-text-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 64px;
  height: 64px;
  background-image: url("dz-octopus-mark.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  animation: dz-wave-drift 7s ease-out infinite;
}
.narwal-banner-section .banner-btn {
  background: var(--dz-terra) !important;
  border-color: var(--dz-terra) !important;
  color: #FFFFFF !important;
  border-radius: var(--dz-radius) !important;
}
.narwal-banner-section .banner-btn:hover {
  background: var(--dz-paprika) !important;
  border-color: var(--dz-paprika) !important;
}
/* mobile keeps the stacked hero the theme already ships */
@media (max-width: 768px) {
  .narwal-banner-section .banner-bg,
  .narwal-banner-section .banner-bg img {
    object-fit: contain;
    background-color: #EFE3D1;
  }
  .narwal-banner-section .banner-overlay { display: none; }
}

@keyframes dz-wave-drift {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-5px) rotate(-2.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .narwal-banner-section .banner-text-box::before { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- 6. SERIES LIST: slate 1px wave border + paprika corners ---------- */
.series-list-section {
  background-color: transparent !important;
}
.series-item {
  position: relative;
  padding: 14px 12px 16px;
  border: 1px solid var(--dz-ink);
  border-radius: var(--dz-radius);
  background: var(--dz-cream-2);
}
.series-item::before,
.series-item::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--dz-paprika);
  opacity: 0.85;
}
.series-item::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: var(--dz-radius);
}
.series-item::after {
  right: -1px; bottom: -1px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: var(--dz-radius);
}
.series-item:hover {
  transform: translateY(-3px);
  border-color: var(--dz-terra);
}
.series-title {
  color: var(--dz-ink) !important;
  font-weight: 600;
}

/* ---------- 7. FEATURE ROWS: split layout, paprika wash on the image ---------- */
.feat-section {
  background-color: transparent !important;
  position: relative;
}
.feat-section .feat-image {
  position: relative;
  border: 1px solid var(--dz-sand);
  border-radius: var(--dz-radius);
  overflow: hidden;
}
.feat-section .feat-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(181, 57, 28, 0.16), rgba(192, 83, 43, 0.05) 46%, rgba(61, 90, 115, 0.10));
  pointer-events: none;
}
.feat-section .feat-image img {
  object-fit: contain;
  object-position: center;
  background: var(--dz-cream-2);
}
.feat-section .feat-content h2 {
  color: var(--dz-ink) !important;
}
.feat-section .feat-content p {
  color: var(--dz-ink-soft) !important;
}
.feat-section .feat-btn {
  color: var(--dz-terra) !important;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}

/* the About row (3rd) carries a wave-line border */
.narwal_feature_row_qTJUQm .feat-content,
#shopify-section-narwal_feature_row_qTJUQm .feat-content {
  border: 1px solid var(--dz-sand);
  border-top: 3px double var(--dz-ink);
  border-radius: var(--dz-radius);
  background: var(--dz-cream-2);
  padding: 26px 26px 22px;
}

/* ---------- 8. PRODUCT SLIDER: cream cards, terracotta price tags ---------- */
.narwal-section-wrapper {
  background-color: transparent !important;
}
.narwal-section-wrapper .narwal-card {
  background: var(--dz-cream-2);
  border: 1px solid var(--dz-sand);
  border-radius: var(--dz-radius);
}
.narwal-section-wrapper .narwal-card .narwal-image-wrapper img {
  background: var(--dz-cream-2);
}
.narwal-section-wrapper .narwal-overlay {
  background: linear-gradient(to top, rgba(61, 90, 115, 0.85) 0%, rgba(61, 90, 115, 0) 72%);
}
/* solid slate band under the text: guarantees contrast whatever the photo does */
.narwal-section-wrapper .narwal-content {
  background: var(--dz-ink);
  color: var(--dz-cream) !important;
  padding: 14px 18px 16px;
}
.narwal-section-wrapper .narwal-title {
  color: #FFFFFF;
}
.narwal-section-wrapper .narwal-subtitle,
.narwal-section-wrapper .narwal-subtitle span {
  display: inline-block;
  background: var(--dz-terra);
  color: #FFFFFF !important;
  padding: 3px 10px;
  border-radius: var(--dz-radius);
  font-weight: 600;
}
.narwal-section-wrapper .narwal-badge {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-paprika) !important;
}
.narwal-section-wrapper .narwal-btn {
  border-radius: var(--dz-radius) !important;
}
.narwal-section-wrapper .narwal-btn.btn-primary {
  background: var(--dz-terra) !important;
  border-color: var(--dz-terra) !important;
  color: #FFFFFF !important;
}
.narwal-section-wrapper .narwal-btn.btn-secondary {
  background: transparent !important;
  border-color: var(--dz-cream) !important;
  color: var(--dz-cream) !important;
}
.narwal-section-wrapper .narwal-nav-btn {
  background: var(--dz-cream-2);
  border: 1px solid var(--dz-sand);
  color: var(--dz-ink);
}

/* ---------- 9. TRUST FEATURES ---------- */
.trust-features-section {
  background-color: transparent !important;
}
.trust-features-section .trust-heading {
  color: var(--dz-ink) !important;
}
.trust-features-section .trust-card {
  background: var(--dz-cream-2) !important;
  border: 1px solid var(--dz-sand);
  border-radius: var(--dz-radius);
  position: relative;
}
.trust-features-section .trust-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 1px;
  background: var(--dz-sand);
  opacity: 0.7;
}
.trust-features-section .trust-icon-wrap,
.trust-features-section .trust-icon-wrap svg {
  color: var(--dz-terra) !important;
  stroke: var(--dz-terra);
}
.trust-features-section .trust-text {
  color: var(--dz-ink) !important;
}

/* ---------- 10. FOOTER ---------- */
.footer {
  background-color: var(--dz-ink) !important;
  color: var(--dz-cream);
  position: relative;
  border-top: 3px double var(--dz-terra);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("dz-harp-waves.svg");
  background-size: 240px 240px;
  opacity: 0.16;
  pointer-events: none;
}
.footer .footer-top,
.footer .footer-bottom,
.footer .col-footer,
.footer .footer-newsletter {
  background: transparent !important;
  position: relative;
}
.footer h3, .footer h4, .footer .footer-logo,
.footer .col-footer h4,
.footer .footer_copyright,
.footer p,
.footer li,
.footer span,
.footer a {
  color: var(--dz-cream) !important;
}
.footer a:hover { color: #F0C9A8 !important; }
.footer .footer-bottom {
  border-top: 1px solid rgba(201, 191, 168, 0.35);
}
.footer .footer-social a,
.footer .social-icons li a {
  color: var(--dz-cream) !important;
  border-color: rgba(201, 191, 168, 0.5) !important;
}
.footer input[type="email"],
.footer input[type="text"] {
  background: rgba(245, 237, 224, 0.10) !important;
  border: 1px solid rgba(201, 191, 168, 0.55) !important;
  color: var(--dz-cream) !important;
  border-radius: var(--dz-radius);
}

/* ---------- 11. CART DRAWER, SEARCH, FILTERS, QUICK VIEW ---------- */
.dropdown-cart,
.extra-cart,
#dropdown-cart,
.cart-template,
.search-bar,
.search-bar .search-inner,
.sidebar-filter,
.filter-group,
.quickview,
#quickview,
.quickview-content,
.message-modal .modal-inner {
  background-color: var(--dz-cream-2) !important;
  color: var(--dz-ink-soft);
  border-radius: var(--dz-radius);
}
.dropdown-cart h4,
.dropdown-cart .title,
.cart-template h1,
.search-bar input,
.search-bar .btn,
.sidebar-filter h4,
.filter-group h4,
.quickview h3 {
  color: var(--dz-ink) !important;
  font-family: Bitter, Georgia, serif;
}
.search-bar input[type="text"],
.search-bar input[type="search"],
.sidebar-filter input[type="text"],
.sidebar-filter select {
  background: #FFFFFF !important;
  border: 1px solid var(--dz-sand) !important;
  color: var(--dz-ink-soft) !important;
  border-radius: var(--dz-radius);
}
.dropdown-cart .actions .btn-checkout,
.dropdown-cart .btn {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-terra) !important;
  border-color: var(--dz-terra) !important;
  color: #FFFFFF !important;
}
.dropdown-cart .price,
.cart-template .price,
.price-box .price,
.product-price .price {
  color: var(--dz-terra) !important;
  font-weight: 600;
}
.quickview .btn,
.quickview-content .btn,
.sidebar-filter .btn {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-terra) !important;
  border-color: var(--dz-terra) !important;
  color: #FFFFFF !important;
}

/* ---------- 12. PRODUCT CARDS ---------- */
.product-item,
.product-card,
.grid-item {
  border-radius: var(--dz-radius);
}
.cart-template .cart-empty a,
.cart-empty a,
.cart-empty .btn-continue a,
#cart .cart-empty a {
  color: var(--dz-terra) !important;
  text-decoration: underline;
}
.cart-template .cart-empty a:hover,
.cart-empty a:hover {
  color: var(--dz-paprika) !important;
}
.product-item .product-image img,
.product-item .product-img img {
  background: var(--dz-cream-2);
  object-fit: contain;
}
.product-item .product-title a,
.product-item .product-title {
  color: var(--dz-ink) !important;
  font-weight: 600;
}
.product-item:hover .product-image,
.product-item:hover .product-img {
  border-color: var(--dz-sand);
}
.product-item .btn-quickview,
.product-item .btn-wishlist,
.product-item .btn-compare {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-cream-2) !important;
  color: var(--dz-ink) !important;
  border: 1px solid var(--dz-sand) !important;
}
.sold-out, .sale-off, .product-label .label {
  border-radius: var(--dz-radius) !important;
}

/* ---------- 13. SECTION DIVIDERS: wave line + small octopus ---------- */.shopify-section {
  position: relative;
}
#shopify-section-narwal_series_list_qU9P4c::before,
#shopify-section-narwal_feature_row_HkXaJU::before,
#shopify-section-narwal_feature_row_waieqT::before,
#shopify-section-narwal_feature_row_qTJUQm::before,
#shopify-section-narwal_product_slider_xyNfcA::before,
#shopify-section-narwal_trust_features_byxyPm::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(520px, 76vw);
  height: 24px;
  background-image: url("dz-wave-divider.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- 14. MOBILE: keep the existing layout, only re-colour ---------- */
@media (max-width: 768px) {
  /* the theme's 4:5 mobile card would crop a square photo; contain keeps the
     whole frame and pads with the cream card colour instead */
  .narwal-section-wrapper .narwal-card .narwal-image-wrapper img {
    object-fit: contain;
    object-position: center;
    background: var(--dz-cream-2);
  }
  .narwal-section-wrapper .narwal-card { background: var(--dz-cream-2); }
  .narwal-banner-section .banner-text-box { padding-left: 0; }
  /* the octopus mark is anchored to the left of a left-aligned heading; on the
     centred mobile hero it would sit on top of the text, so it is dropped */
  .narwal-banner-section .banner-text-box::before { display: none; }
  .narwal-banner-section::before,
  .narwal-banner-section::after { width: 90px; opacity: 0.4; }
  #shopify-section-narwal_series_list_qU9P4c::before,
  #shopify-section-narwal_feature_row_HkXaJU::before,
  #shopify-section-narwal_feature_row_waieqT::before,
  #shopify-section-narwal_feature_row_qTJUQm::before,
  #shopify-section-narwal_product_slider_xyNfcA::before,
  #shopify-section-narwal_trust_features_byxyPm::before {
    width: 70vw;
    height: 18px;
  }
}

/* ---------- 13b. PRODUCT GRID (narwal-product-grid) ---------- */
.narwal-grid-section {
  background-color: transparent !important;
}
.narwal-grid-section .narwal-grid-container {
  max-width: 1240px;
  padding: 0 24px;
}
.narwal-grid-section .narwal-grid-heading {
  color: var(--dz-ink) !important;
}
.narwal-grid-section .narwal-grid {
  gap: 14px;
}
.narwal-grid-section .narwal-card {
  border-radius: var(--dz-radius) !important;
  background: var(--dz-cream-2);
  border: 1px solid var(--dz-sand);
}
.narwal-grid-section .narwal-card .narwal-image-wrapper img {
  object-fit: contain;
  object-position: center;
}
.narwal-grid-section .narwal-content {
  background: var(--dz-ink);
  padding: 14px 16px 16px;
}
.narwal-grid-section .narwal-title {
  color: #FFFFFF;
  font-size: 18px;
}
.narwal-grid-section .narwal-subtitle {
  color: #FFFFFF !important;
  display: inline-block;
  background: var(--dz-terra);
  padding: 3px 10px;
  border-radius: var(--dz-radius);
  font-weight: 600;
}
.narwal-grid-section .narwal-badge {
  background: var(--dz-paprika) !important;
  border-radius: var(--dz-radius) !important;
}
.narwal-grid-section .narwal-btn {
  border-radius: var(--dz-radius) !important;
}
.narwal-grid-section .narwal-btn.btn-primary {
  background: var(--dz-terra) !important;
  color: #FFFFFF !important;
  border-color: var(--dz-terra) !important;
}
.narwal-grid-section .narwal-btn.btn-secondary {
  border-color: var(--dz-cream) !important;
  color: var(--dz-cream) !important;
}
@media (max-width: 990px) {
  .narwal-grid-section .narwal-grid-container { padding: 0 20px; }
  .narwal-grid-section .narwal-title { font-size: 15px; }
}
/* the grid tracks were resolving as minmax(auto, 1fr) and the nowrap title
   forced each column to its min-content width, pushing the last two cards
   outside the panel. minmax(0, 1fr) + min-width:0 pins them to the panel. */
.narwal-grid-section .narwal-grid {
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  min-width: 0;
}
   The card also carried aspect-ratio: 1/1, so a stretched grid row made it
   grow taller than its column and then widen again to keep the ratio; locking
   the width to 100% and stopping the stretch keeps every card in its column. */
.narwal-grid-section .narwal-card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: start;
  justify-self: stretch;
}
.narwal-grid-section .narwal-card-inner,
.narwal-grid-section .narwal-content {
  min-width: 0;
}
.narwal-grid-section .narwal-title,
.narwal-grid-section .narwal-subtitle {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 990px) {
  .narwal-grid-section .narwal-grid {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
  }
}
/* the section gives every card aspect-ratio 1/1 and the grid row stretches, so
   the card grew to the row height and then widened again to keep the ratio,
   spilling past its column. Let the image set the height instead. */
.narwal-grid-section .narwal-grid .narwal-card {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: start !important;
}
.narwal-grid-section .narwal-image-wrapper {
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.narwal-grid-section .narwal-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}
/* Shopify's dynamic checkout renders its own "More payment options" anchor with
   href="#". The store offers a single payment method, so that link has nowhere
   to lead; hide it rather than leave a dead control on the page. */
.shopify-payment-button__more-options,
#more-payment-options-link {
  display: none !important;
}
/* product-page helper text ("Zoom the image with the mouse") shipped at #999 on
   the old white ground; on cream it drops to 2.45:1. Deepen it to ink. */
.product-img-box .text,
.zoom-image .text,
.product-media .text,
.product-single .text,
[class*="zoom"] .text {
  color: var(--dz-ink-soft) !important;
}
/* ---------- 15. CONTACT PAGE: heading + Business Information only ---------- */
.contact-us-page {
  padding: 44px 0 64px;
}
.contact-us-page .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.contact-us-page .page-header {
  margin: 0 0 24px;
  text-align: center;
}
.contact-us-page .page-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
  color: var(--dz-ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* the page body sits on an opaque block, per the store rule for legal / info
   pages: white card, dark ink, 4.5:1 minimum */
.contact-info-panel {
  background: #FFFFFF;
  border: 1px solid var(--dz-sand);
  border-radius: var(--dz-radius);
  padding: 32px 36px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-info-panel .contact-info-heading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--dz-ink);
}
.contact-info-panel .rte {
  color: #2A2A2A;
  font-size: 15px;
  line-height: 1.7;
}
.contact-info-panel .rte p {
  margin: 0 0 6px;
}
.contact-info-panel .rte p:last-child {
  margin-bottom: 0;
}
.contact-info-panel .rte strong {
  color: var(--dz-ink);
  font-weight: 600;
}
.contact-info-panel .rte a {
  color: var(--dz-terra);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .contact-us-page { padding: 28px 0 44px; }
  .contact-us-page .container { padding: 0 20px; }
  .contact-us-page .page-header h1 { font-size: 24px; }
  .contact-info-panel { padding: 22px 18px; }
  .contact-info-panel .contact-info-heading { font-size: 17px; }
  .contact-info-panel .rte { font-size: 14px; }
}
/* ---------- 8b. SLIDER CARD: image on top, text below ----------
   The section positions .narwal-content absolutely at the card's bottom, so a
   177px text band sat on top of the photograph: at 1024 only 60px of a 237px
   picture was visible, and the price tag butted straight against the buttons
   (measured gap 0px). Rebuilding the card as a stacked column fixes both at
   once - the picture gets the full box, the text gets its own row underneath. */
.narwal-section-wrapper .narwal-card {
  aspect-ratio: auto !important;      /* overrides the 4/3 in the density block */
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.narwal-section-wrapper .narwal-card-inner {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: auto !important;
}
.narwal-section-wrapper .narwal-card .narwal-image-wrapper {
  position: relative !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 10px;
  box-sizing: border-box;
  background: var(--dz-cream-2);
}
.narwal-section-wrapper .narwal-card .narwal-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;     /* whole frame, never cropped */
  object-position: center !important;
  background: transparent;
}
/* the dark scrim only existed to make white text readable over the photo;
   the text no longer sits on the photo, so the scrim goes away */
.narwal-section-wrapper .narwal-overlay {
  display: none !important;
}

.narwal-section-wrapper .narwal-content {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 16px 16px !important;
}
.narwal-section-wrapper .narwal-title {
  margin: 0 0 4px !important;
  line-height: 1.25;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* the gap that was measured at 0 */
.narwal-section-wrapper .narwal-subtitle {
  margin: 0 0 14px !important;
  line-height: 1.5;
}
.narwal-section-wrapper .narwal-buttons {
  margin: 0 !important;
  gap: 10px;
}
.narwal-section-wrapper .narwal-btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 768px) {
  .narwal-section-wrapper .narwal-card {
    aspect-ratio: auto !important;
  }
  .narwal-section-wrapper .narwal-card .narwal-image-wrapper {
    aspect-ratio: 1 / 1;
    padding: 8px;
  }
  .narwal-section-wrapper .narwal-content {
    padding: 12px 14px 14px !important;
  }
  .narwal-section-wrapper .narwal-subtitle {
    margin-bottom: 12px !important;
  }
}
/* the "2 kg" tag is an inline-block price chip, so the line box it sits in gave
   the buttons nothing to push against - the gap measured 0px at every width.
   Give the chip a real bottom margin and stop it sharing a line with them. */
.narwal-grid-section .narwal-subtitle {
  margin: 0 0 14px !important;
  line-height: 1.45;
}
.narwal-grid-section .narwal-buttons {
  margin: 0 !important;
  gap: 10px;
}
.narwal-grid-section .narwal-title {
  margin: 0 0 6px !important;
  line-height: 1.3;
}
@media (max-width: 990px) {
  .narwal-grid-section .narwal-subtitle {
    margin-bottom: 12px !important;
  }
}
/* ---------- 16. STICKY HEADER SURFACE ----------
   The theme pins .header-bottom on scroll (jquery.sticky -> position: fixed).
   This file earlier set .header-bottom to `background-color: transparent
   !important` so the page background could read through the header. Once the
   header is stuck, "transparent" means the page scrolls visibly *behind* the
   links. Give it a solid cream surface only while it is actually stuck, with a
   selector heavy enough to beat that earlier rule, and leave it transparent at
   the top of the page where the artwork is meant to show. */
body.has_sticky .site-header .header-bottom,
body.has_sticky .site-header .header-bottom[data-sticky] {
  background-color: #F5EDE0 !important;
  border-bottom: 1px solid var(--dz-sand);
  box-shadow: 0 2px 10px rgba(61, 90, 115, 0.10);
}
body.has_sticky .site-header .header-bottom .site-nav > li > a,
body.has_sticky .site-header .header-bottom .icon-nav,
body.has_sticky .site-header .header-bottom a {
  color: var(--dz-ink) !important;
}
/* the mobile drawer must stay solid too (store rule: never translucent) */
@media (max-width: 768px) {
  body.has_sticky .site-header .header-bottom,
  body.has_sticky .header-mb {
    background-color: #F5EDE0 !important;
  }
}
/* ---------- 13c. GRID CARD: image on top, text below ----------
   Same defect the slider had, and the same fix. The section pins
   .narwal-content absolutely to the bottom of a square card, so the text band
   sat on top of the photograph: measured 187px of a 286px picture at 1440, and
   at 1024/430/390 the content was taller than the card and covered the picture
   entirely (top offset went negative). Stacking the card instead of layering it
   gives the photograph the whole box and the text its own row underneath. */
.narwal-grid-section .narwal-grid .narwal-card {
  display: flex !important;
  flex-direction: column;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: hidden;
}
.narwal-grid-section .narwal-card-inner {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  height: auto !important;
}
.narwal-grid-section .narwal-image-wrapper {
  position: relative !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 10px;
  box-sizing: border-box;
  background: var(--dz-cream-2);
}
.narwal-grid-section .narwal-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent;
}
/* the scrim only existed for white text over a photo; the text moved off it */
.narwal-grid-section .narwal-overlay {
  display: none !important;
}
.narwal-grid-section .narwal-content {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 16px 16px !important;
}
@media (max-width: 990px) {
  .narwal-grid-section .narwal-image-wrapper { padding: 8px; }
  .narwal-grid-section .narwal-content { padding: 12px 14px 14px !important; }
}
/* ---------- 17. HEADER LOGO ----------
   The supplied file is a 2048x2048 canvas with the wordmark occupying the band
   y 760-1252 (24% of the canvas height) and x 413-1658, i.e. a lot of
   transparent padding around a wide mark. The merchant asked for the file to be
   used untouched, so the padding is trimmed here with CSS instead of by
   re-encoding the image: the <img> is drawn at full canvas height and the
   wrapper is clipped to the mark's own band.

   Mark height = 24.02% of canvas height  ->  canvas height = mark / 0.2402
     32px mark  -> 133px canvas,  mark width 81px  (desktop)
     24px mark  -> 100px canvas,  mark width 61px  (mobile)
   The mark is centred on the canvas (centre y = 49.1%, x = 50.6%), so plain
   vertical centring inside the clip is accurate to about one pixel. */
.header-logo .logo-img,
.header-pc .header-logo .logo-img,
.header-mb .header-logo .logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 32px;
  /* mark is 1245 x 492 px inside the canvas -> 2.53 : 1 */
  width: 81px;
  flex: 0 0 auto;
}
.header-logo .logo-img img,
.header-pc .header-logo .logo-img img,
.header-mb .header-logo .logo-img img,
.header-lc .logo-img img,
.logo-fixed .logo-img img {
  height: 133px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block;
}
@media (max-width: 768px) {
  .header-logo .logo-img,
  .header-mb .header-logo .logo-img {
    height: 24px;
    width: 61px;
  }
  .header-logo .logo-img img,
  .header-mb .header-logo .logo-img img {
    height: 100px !important;
  }
}
/* ---------- 18. HERO ON MOBILE: stacked, image above text ----------
   The section paints the photograph as an absolutely positioned layer filling
   the whole 500px box and then centres the text on top of it. Measured at 430px:
   the text block occupied y 183-439 and overlapped the picture by 256px, i.e.
   the copy sat squarely on the photo.

   Below 769px the layout is rebuilt as two stacked rows: the photograph becomes
   a normal in-flow block that keeps its own aspect ratio, and the text follows
   underneath on the cream background. No overlap, and nothing relies on the
   scrim any more, so the overlay is switched off at this width.

   The section's own height/offset/alignment arrive as inline styles from the
   customizer, which is why those three properties need !important here. */
@media (max-width: 768px) {
  .narwal-banner-section {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* the photograph takes its natural height from the file, full width */
  .narwal-banner-section .banner-bg.mobile-bg {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    order: 1;
    background: var(--dz-cream-2, #FBF6EC);
  }
  .narwal-banner-section .banner-bg.mobile-bg img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .narwal-banner-section .banner-bg.desktop-bg { display: none !important; }

  /* the scrim existed only to make text legible over the photo */
  .narwal-banner-section .banner-overlay { display: none !important; }

  /* text becomes the second row */
  .narwal-banner-section .banner-content-container {
    position: static !important;
    order: 2;
    display: block !important;
    height: auto !important;
    width: 100% !important;
    padding: 22px 20px 26px !important;
    box-sizing: border-box;
    text-align: center;
  }
  .narwal-banner-section .banner-text-box {
    max-width: 100% !important;
    padding-left: 0 !important;
    text-align: center;
  }
  .narwal-banner-section .banner-title {
    font-size: 26px !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
  }
  .narwal-banner-section .banner-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
  }
  .narwal-banner-section .banner-btn {
    display: inline-block;
    margin: 0 auto;
  }
}