/** Shopify CDN: Minification failed

Line 26:10 Unexpected "{"
Line 26:19 Expected ":"

**/
/* ------------------------------------------------------------------
   PDP Premium — Desklear
   Full visual rebuild to match the approved mockup reference.
   Layered on top of the native product section/snippets: colors,
   spacing and markup wrappers only — cart, checkout, variants and
   quantity logic are untouched (still the stock Dawn form/JS).
------------------------------------------------------------------- */

:root {
  --pdp-cream: #F8F5F0;
  --pdp-walnut: #A67C52;
  --pdp-walnut-dark: #6E4F3A;
  --pdp-beige: #EFEBE4;
  --pdp-ink: #1E1E1E;
  --pdp-gold: #C9A227;
  --pdp-gray: #6B6B6B;
}

/* ============ Page background ============ */
.section-{{ section.id }}-padding,
body {
  background-color: var(--pdp-cream);
}

/* ============ Announcement bar (site-wide, header-group) ============ */
#shopify-section-announcement-bar {
  background: var(--pdp-walnut-dark) !important;
}
#shopify-section-announcement-bar .color-scheme-3,
#shopify-section-announcement-bar .announcement-bar {
  background: var(--pdp-walnut-dark) !important;
  color: #FFFFFF !important;
}
#shopify-section-announcement-bar .announcement-bar__message,
#shopify-section-announcement-bar a,
#shopify-section-announcement-bar .announcement-bar-link {
  color: #FFFFFF !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
#shopify-section-announcement-bar .slider-button svg,
#shopify-section-announcement-bar .icon-caret {
  color: rgba(255, 255, 255, 0.55) !important;
}
#shopify-section-announcement-bar {
  --color-foreground: 255, 255, 255;
}

/* ============ Product page: page background + basic grid ============ */
.product {
  gap: 24px;
}

/* ============ Media gallery ============ */
.product__media-wrapper {
  position: relative;
}

.product__media-wrapper media-gallery {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) {
  flex: 1 1 76%;
  min-width: 0;
  aspect-ratio: 3 / 4;
}

.product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) .product__media-list {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) .product__media-item {
  width: 100% !important;
  height: 100% !important;
}

.product__media-wrapper .product__media-item,
.product__media-wrapper .product__media-item model-viewer,
.product__media-wrapper .product__media-item video,
.product__media-wrapper .product__media-item iframe {
  border-radius: 14px;
  overflow: hidden;
}

.product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) .product__media-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 14px;
}

.product__media-wrapper .slider-buttons {
  display: none;
}

/* Thumbnails become a narrow vertical rail to the right of the main
   image, on every breakpoint (mobile included) — matches the
   reference mockup. The stock media-gallery.js still drives which
   slide is active; we are only changing layout/flow via CSS. */
.product__media-wrapper .thumbnail-slider {
  flex: 0 0 18%;
  max-width: 92px;
  margin: 0 !important;
}

.product__media-wrapper .thumbnail-slider .slider-button {
  display: none;
}

.product__media-wrapper .thumbnail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.product__media-wrapper .thumbnail-list__item {
  width: 100%;
  flex: none;
}

.product__media-wrapper .thumbnail {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 2px solid transparent;
}

.product__media-wrapper .thumbnail[aria-current='true'] {
  border-color: var(--pdp-ink);
}

.product__media-wrapper .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__media-wrapper .thumbnail__badge {
  background: rgba(30, 30, 30, 0.55);
  border-radius: 50%;
}

/* Badge over the main image ("Premium Walnut Wood") */
.pdp-media-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(239, 235, 228, 0.92);
  color: var(--pdp-walnut-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  pointer-events: none;
  animation: pdp-fade-in 0.5s ease both;
}

.pdp-media-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Zoom button, bottom-right of the main image */
.pdp-zoom-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
}

.pdp-zoom-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  color: var(--pdp-ink);
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.18);
  cursor: pointer;
}

.pdp-zoom-btn svg {
  width: 17px;
  height: 17px;
}

/* ============ Benefits row (4 icons, before title) ============ */
.pdp-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}

.pdp-benefits__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pdp-benefits__icon svg,
.pdp-benefits__icon .icon,
.pdp-benefits__icon img {
  width: 20px;
  height: 20px;
  color: var(--pdp-ink);
  stroke: var(--pdp-ink);
}

.pdp-benefits__label {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--pdp-ink);
}

/* ============ Title ============ */
.product__title h1 {
  font-family: var(--font-body-family) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--pdp-ink);
  letter-spacing: -0.01em;
}

.product__title a.product__title {
  display: none;
}

/* ============ Rating / reviews (Judge.me preview badge) ============ */
.jdgm-prev-badge {
  --jdgm-star-color: var(--pdp-gold) !important;
  margin: 6px 0 12px !important;
}

.jdgm-prev-badge .jdgm-star.jdgm--on,
.jdgm-prev-badge .jdgm-star.jdgm--half {
  color: var(--pdp-gold) !important;
}

.jdgm-prev-badge .jdgm-prev-badge__text {
  color: var(--pdp-ink) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Native rating block fallback (if merchant swaps in the built-in block) */
.rating-star {
  color: var(--pdp-gold);
}

/* ============ Price ============ */
.price--large .price-item--regular {
  color: var(--pdp-gray);
  font-size: 1.5rem;
  font-weight: 400;
}

.price--large .price-item--sale {
  color: var(--pdp-ink);
  font-size: 2.6rem;
  font-weight: 700;
}

.price--large .price__badge-sale {
  display: none;
}

/* Sold-out stays visible (native, automatic) — just restyle to match
   the mockup's pill language instead of Dawn's default badge look. */
.price--large .price__badge-sold-out {
  background: var(--pdp-ink);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
}

.pdp-savings-badge {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 8px;
  padding: 4px 10px;
  background: var(--pdp-beige);
  border: none;
  color: var(--pdp-walnut-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  vertical-align: middle;
}

.product__tax {
  color: var(--pdp-gray);
  font-size: 12.5px;
}

/* ============ Quantity + Add to cart row, Buy it now below ============
   Cascades `display:contents` through the native buy-buttons markup
   so the quantity selector, the Add to cart button and the Buy it
   Now / dynamic-checkout button can share one CSS grid without any
   change to the underlying <form>, inputs or submit handlers. */
.pdp-buy-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 10px 12px;
  margin: 18px 0 14px;
}

.pdp-buy-row > div {
  display: contents;
}

.pdp-buy-row product-form,
.pdp-buy-row product-form .form,
.pdp-buy-row .product-form__buttons {
  display: contents;
}

.pdp-buy-row .product-form__quantity {
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: stretch;
}

.pdp-buy-row .quantity__label {
  display: none;
}

.pdp-buy-row quantity-input.quantity {
  display: flex;
  align-items: center;
  border: 1px solid rgba(31, 31, 31, 0.15);
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
  height: 100%;
}

.pdp-buy-row quantity-input .quantity__button {
  border: none;
  background: transparent;
  width: 40px;
}

.pdp-buy-row quantity-input .quantity__input {
  border: none;
  width: 34px;
  text-align: center;
  background: transparent;
}

.pdp-buy-row .price-per-item__container {
  display: contents;
}

.pdp-buy-row .quantity__rules,
.pdp-buy-row .quantity__rules-cart {
  display: none;
}

.pdp-buy-row .product-form__submit {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  border-radius: 9px;
  background: var(--pdp-walnut);
  color: #FFFFFF;
  font-weight: 700;
  min-height: 48px;
}

.pdp-buy-row .product-form__submit:hover:not([disabled]) {
  background: var(--pdp-walnut-dark);
}

.pdp-buy-row .shopify-payment-button {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
}

.pdp-buy-row .shopify-payment-button__button--unbranded {
  background: var(--pdp-ink) !important;
  color: #FFFFFF !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  min-height: 48px;
}

.pdp-buy-row .product-form__error-message-wrapper {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* ============ Trust row (3 icons) ============ */
.pdp-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(31, 31, 31, 0.08);
  border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}

.pdp-trust-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.pdp-trust-row__icon svg {
  width: 20px;
  height: 20px;
  color: var(--pdp-ink);
  stroke: var(--pdp-ink);
}

.pdp-trust-row__label {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--pdp-ink);
  white-space: pre-line;
}

/* ============ Benefit card ============ */
.pdp-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 18px 0;
  padding: 22px;
  background: var(--pdp-beige);
  border-radius: 16px;
}

.pdp-benefit-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(166, 124, 82, 0.16);
  color: var(--pdp-walnut-dark);
}

.pdp-benefit-card__icon svg {
  width: 22px;
  height: 22px;
}

.pdp-benefit-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-benefit-card__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--pdp-ink);
}

.pdp-benefit-card__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(30, 30, 30, 0.72);
}

/* ============ Motion ============ */
.pdp-media-badge,
.pdp-zoom-btn,
.pdp-savings-badge {
  animation: pdp-fade-in 0.5s ease both;
}

@keyframes pdp-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-media-badge,
  .pdp-zoom-btn,
  .pdp-savings-badge {
    animation: none;
  }
}

/* ============ Desktop (≥750px): image left / info right, 2-col ============ */
@media screen and (min-width: 750px) {
  .pdp-benefits {
    grid-template-columns: repeat(4, 1fr);
  }

  .product__media-wrapper .thumbnail-slider {
    max-width: 110px;
  }
}

@media screen and (min-width: 990px) {
  .product__title h1 {
    font-size: 3rem;
  }

  .price--large .price-item--sale {
    font-size: 3rem;
  }
}

/* ============ Small phones (≤375px): tighten spacing ============ */
@media screen and (max-width: 375px) {
  .pdp-benefits {
    gap: 6px;
  }

  .pdp-benefits__label,
  .pdp-trust-row__label {
    font-size: 10px;
  }

  .product__title h1 {
    font-size: 2.1rem;
  }
}