/** Shopify CDN: Minification failed

Line 812:1 Unexpected "{"

**/
body {
  letter-spacing:0 !important;
}
.flex {
  display:flex;
}
sticky-header.header-wrapper {
  background: #00000080;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.mega-menu-board {
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#bon-area-container {
  display:none !important;
}
/*
  Production draws the bell at 28px tall with the width left to the artwork, and the
  other header glyphs are 28px too, so the control gets a 28px box to keep the row's
  rhythm even. The 44px tap area comes from .header__icon .svg-wrapper overflowing
  its anchor the same way it does on production, not from a wider box here.
*/
button.icon-promotion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
}
button.icon-promotion img {
  height: 28px;
  width: auto;
}
/* The bell is the only header control that is not a .header__icon anchor: it is a plain
   block div around the button, so inside the 3.8rem slot the mobile rule below gives every
   icon it sat in the top-left corner. Measured on the draft: 5px high and 5px left of its
   neighbours, which reads as uneven spacing rather than one misplaced glyph. */
.header .header__icons .m-account-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
/* Both counters anchor to equal-sized icon slots, never to the bell artwork.
   The visible cart number also needs auto height: Dawn's span height:100%
   otherwise lifts its baseline relative to the bell's plain text node. */
.header .header__icons {
  --wu-counter-top: -5px;
  --wu-counter-right: -7px;
}
.header .header__icons button.icon-promotion { position: static; }
.header .header__icons #promotion-counter,
.header .header__icons .cart-count-bubble {
  position: absolute;
  top: var(--wu-counter-top);
  right: var(--wu-counter-right);
  bottom: auto;
  left: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: var(--wu-r-pill, 999px);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.header .header__icons .cart-count-bubble > span[aria-hidden='true'] {
  display: block;
  height: auto;
  line-height: 1;
}
@media screen and (max-width: 749px) {
  .header .header__icons { --wu-counter-top: 0px; --wu-counter-right: -2px; }
  .service-pc {
    display:none !important;
  }
  .m-flex {
  display:flex;
  }
}
@media screen and (min-width:990px ) {
  .service-tablet {
    display:none !important;
  }
}
@media screen and (min-width: 750px) {
  .service-m {
    display:none !important;
  }
  .pc-flex {
  display:flex;
  }
}
.locale-selectors__container {
  display:none;
}
.price--large {
  letter-spacing:0 !important;
}
table:not([class]) td, table:not([class]) th {
  padding:0.5rem !important;
}
/* card-product */
@media screen and (max-width:749px) {
.card__media .media.media--hover-effect > img + img {
  opacity:1;
}
.card__media .media > *:not(.zoom):not(.deferred-media__poster-button) {
  position:unset;
}

}
/* end card-product */

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  color:#f5f5f5;
}
/* Login  */
.custom-login-popup {
  position:fixed;
  display:flex;
  justify-content: center;
  align-items: center;
  left:0;
  top:0;
  /* Live used 999999999, which predates cw-overlay-coordinator.css: that file lifts the
     cart drawer / offers / native-cart to 2147483100 and up to 2147483240, which would
     bury this modal. Highest layer in the coordinator plus headroom, still inside the
     32-bit int range. */
  z-index:2147483400;
  width:100vw;
  height:100vh;
  background-color: #58585833;
  backdrop-filter: blur(85px);
  -webkit-backdrop-filter: blur(85px);
}
.custom-login-popop-content{
  position:relative;
  padding:2rem;
  width:calc(100% - 2rem);
  max-width:450px;
  height:calc(100vh - 2rem);
  max-height:750px;
  background: url(/cdn/shop/files/background-image.jpg?v=1684047560);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.login-popup-content-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:100%;
  width:100%;
  overflow-y:auto;
}
.login-popup-content-board::-webkit-scrollbar {
  width: 2px;
}

.login-popup-content-board::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.login-popup-content-board::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.close-popup {
    position: absolute;
    right: -10px;
    top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #000000;
    color: #979797;
    padding: 8px;
}
.custom-login-popop-content #login {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
}
.custom-login-popop-content .login-popup-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-popup-header section[name="sign-in-with-shop-provider"] {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.custom-login-popop-content .login-title {
  margin: 0 0 2rem;
  font-size: 14px;
  line-height: normal;
  text-align: center;
  width: 90%;
}
.login-popup-header .oxi-social-login {
  display: flex;
  justify-content: center;
  width: 100%;
}
.login-popup-header .oxi-social-login .social_login_frame {
  height:143px !important;
  width:215px !important;
}
.customer .oxi_social_wrapper {
  display:none;
}
.custom-login-popop-content .customer form {
  margin-top:0;
}
.custom-login-popop-content #forgot-password {
  position: absolute;
  right: 0;
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  padding-right: 10px;
  color:#585858;
  text-decoration: none;
  font-size: 1.2rem;
}
.customer form#create_customer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.customer.register > form > div.field:nth-child(1),
.customer.register > form > div.field:nth-child(2){
  flex: 1 1 calc(50% - 1rem);
}

.login-popup-content-board .button {
  flex:1;
  border-radius:6px;
  font-size:1.4rem;
  line-height:normal;
  text-transform:uppercase;
}
.login-popup-content-board .customer .field {
   margin: 1rem 0 0;
}
.login-popup-content-board .field:before,
.login-popup-content-board .field:after,
.login-popup-content-board .field input,
.login-popup-content-board .field input:focus,
.login-popup-content-board .field input:focus-visible,
.login-popup-content-board .field:hover.field:after{
  border-radius:6px;
}
.login-popup-content-board .field input:focus-visible {
  outline:none;
  box-shadow:none;
}
.login-popup-content-board .button-wrapper {
  width:100%;
  display:flex;
  gap:1rem;
}
.login-popup-content-board #reset-password-board .field input + label {
  display:none;
}
.login-popup-content-board #reset-password-board .field input {
  width: 100%;
  padding: 2.2rem 1.5rem .8rem 2rem;
  background: none;
}
.login-popup-content-board #reset-password-board .field {
  margin-bottom:2rem;
  border-radius:6px;
}
.login-popup-content-board .customer button,
.login-popup-content-board div.button {
  margin:1rem 0 0;
}

.login-popup-content-board div.button {
  border:2px solid #585858;
  color:#585858;
  background:none;
}

.login-popup-content-board button.button {
  background-color:#007aff;
  border-color:#007aff;
  color:#f5f5f5;
}

.login-popup-content-board .button:after,
.login-popup-content-board .button:before {
  display:none;
}
.login-popup-content-board .customer-board-title {
  margin: 0 0 2rem;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}
#reset-password-board {
  padding:2rem;
}
/* End Login  */
/* header  */
.header .header__icons {
  padding-right:0;
  align-items: center;
  gap:1.5rem;
}
/* Below 750px the announcement of five icons at 4.4rem + 1.5rem gaps eats the
   whole header: at 390px the heading column collapsed to 35px and the wordmark
   rendered as a 20px sliver. Tighten the icon row on phones so the logo keeps a
   readable width; desktop spacing is unchanged. */
@media screen and (max-width: 749px) {
  .header .header__icons {
    gap: 0;
  }
  .header .header__icons .header__icon,
  .header .header__icons .m-account-menu,
  .header .header__icons > details {
    width: 3.8rem;
    height: 3.8rem;
  }
  .header .header__heading-link {
    padding-left: 0;
    padding-right: 0;
  }
}
.mega-menu__content .mega-menu__list li {
  text-align:left;
}
.mega-menu__content .mega-menu__list li strong {
  color: var(--wu-copper-main);
}
.header__inline-menu .header__menu-item span {
  text-transform:uppercase;
  color: rgba(var(--color-foreground), .75);
}
/* The badge is a chip, not a second label - the rule above would repaint its
   ink text back to foreground white and it would vanish on the copper fill. */
.header__inline-menu .header__menu-item .nav-badge,
.menu-drawer .nav-badge {
  color: var(--wu-ink);
  background: var(--wu-copper-main);
}
.header__inline-menu .header__menu-item {
  position:relative;
  padding: 3rem 1.2rem;
}
.header__inline-menu summary.list-menu__item {
  padding-right:2.7rem;
}
.header__inline-menu .header__menu-item:hover span {
  text-decoration:unset;
  color:#f5f5f5;
}
.header__menu-item .link--text {
  text-decoration: none;
}
@media screen and (max-width: 1189px) {
.header__inline-menu .header__menu-item {
  position:relative;
  padding: 3rem 1rem;
}
}
@media screen and (min-width: 990px) {
.header-wrapper .header {
  padding:0 2rem;
}
.header-wrapper .header--middle-left {
    grid-template-columns: auto 1fr auto;
  }
.header--middle-left .header__inline-menu {
  text-align:center;
  }
}
/* end header  */

/* most search */
.header__search details[open] .modal-overlay {
  position:absolute;
  padding-top:8rem;
  padding-bottom:8rem;
  top:0;
  left:0;
  right:0;
  background-color:#000;
}
.header__search details[open] .modal-overlay:after {
  display:none;
}
.most-searched h2 {
  margin-top:2rem;
}
.most-searched ul li {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 2.5rem;
  padding: 0;
}

.most-searched li a {
  text-decoration: none;
  color: #b0b0b0;
  font-size: 1.4rem;
  line-height: 1.7rem;
  border-radius: var(--wu-r-pill);
  border: 1px solid #b0b0b0;
  padding: 1rem;
}
 .most-searched {
   margin-top:4.6729vw;
  }
  .most-searched h2 {
    color:#F5F5F5;
    font-size:1.6rem;
    line-height:1.9rem;
    margin-bottom:3rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  .most-searched ul {
    padding-left:0;
  }
  .most-searched ul,.most-searched ul li {
    list-style:none;
  }
  .most-searched li a:hover {;
    color:#B0B0B0;
  }
  .most-searched li a:active {;
    color:#B0B0B0;
  }
  .most-searched hr {
   margin:7.0093vw 0 9.3457vw;
   height:1px;
   background-color:#1d1d1d;
   border:none;
  }
  .most-searched .category-in-search li {
    display:block;
    font-size:3.7385vw;
    line-height:4.4395vw;
    margin-bottom:4.673vw;
    color:#B0B0B0;
  }
  .most-searched .category-in-search {
    height: 500px;
    overflow-y:auto
  }
@media screen and (max-width:749px) {
   .header__search details[open] .modal-overlay {
     height:100vh;
   }
}

/* End most search */
.link-style:active,
.link-style {
  text-decoration:none;
}
.color-b0 {
  color:#B0B0B0;
}
.color-f5 {
  color:#f5f5f5;
}
.H1,.H2,.H3,.H4,.H5,.H6 {
  text-transform:uppercase;
}
.H1 {
  font-size:2rem;
  line-height:2.4rem; 
}
.H2 {
  font-size:1.9rem;
  line-height:2.1rem;
}
.H3 {
  font-size:1.6rem;
  line-height:1.9rem;
}
.H4 {
  font-size:1.4rem;
  line-height:1.7rem;
}
.H5 {
  font-size:1.2rem;
  line-height:1.5rem;
}
.H6 {
  font-size:1.1rem;
  line-height:1.2rem;
}
/* Footer */
.footer-menu-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:5.8rem !important;
}
.footer-menu-content-icon {
    position: unset !important;
    display: inherit !important;
    height: unset !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.8rem !important;
}
@media screen and (min-width:990px) {
.footer .footer__content-top {
  display: flex;
  justify-content: space-between;
  gap: 0;
  align-items: flex-start;
}
.footer .footer__blocks-wrapper {
  width:100%;
  flex:2;
}
.footer .footer-block--newsletter {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top:0;
  flex:1;
}
.footer__follow-on-shop {
  margin-top:1rem;
}
}
/* End Footer */
/* Popup  */
.modal {
  position: fixed;
  z-index: 999;
  padding-top: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000;
}
/* End Popup */

/* Wishlist  */
.shop-login shop-login-button shop-login-default login-with-shop-button {
  display:block;
}
.shop-login .button {
  border-radius:10px;
}
.wishlist-engine-button {
  background:none !important;
}
.sewp-engine-popup .sewp-engine-popupinr {
  background: #1f1f1f;
  border-radius:10px;
}
.sewp-engine-popup .sewp-engine-popupinr .sewp-header {
  border-radius:10px 10px 0 0;
}
.wishlistajaxLoad .wh-list-column,
.sewp-engine-popup .sewp-engine-popupinr .wishlist-header,
.wishlist-page .wishlist-header {
  border-bottom: 1px solid #4d4d4d;
}

.wishlistajaxLoad .wh-list-column:last-child,
.sewp-engine-popup .sewp-engine-popupinr .wishlist-header:last-child,
.wishlist-page .wishlist-header:last-child {
  border-bottom: none;
}

.sewp-engine-popup .sewp-engine-popupinr .wh-pro-meta h3,
.wishlist-page .wh-pro-meta h3 {
  color:#f5f5f5;
}
.sewp-engine-popup .sewp-engine-popupinr #wishlist-input, .sewp-engine-popup .sewp-engine-popupinr #wishlist-input:focus,
.wishlist-page #wishlist-input{
  background:none;
  border:1px solid #4d4d4d;
  color:#f5f5f5;
}

.sewp-engine-popup .sewp-engine-popupinr .wh-pro-meta .wishlist-price,
.sewp-engine-popup .sewp-engine-popupinr .wihslist-meta .wishlist-price,
.wishlist-page .wh-pro-meta .wishlist-price,
.wishlist-page .wihslist-meta .wishlist-price {
  color:#d7d7d7;
}

.sewp-engine-popup .sewp-engine-popupinr .wishlist_droplist,
.wishlist-page .wishlist-advanced-option .wishlist_droplist {
  width:100%;
}
.sewp-engine-popup .sewp-engine-popupinr .wishlist_droplist select,
.wishlist-page .wishlist_droplist select {
  background:none;
  border:1px solid #4d4d4d;
  color:#8b8b8b;
}

.sewp-engine-popup .sewp-engine-popupinr .wh-pro-button svg path,
.wishlist-page .wh-pro-button svg path {
  fill:#f5f5f5;
}

.wishlist-popup,
.wishlist-page .wishlist-container {
  background:#1f1f1f !important;
  border-radius:10px;
}
.wishlist-page .wishlist-container {
  padding:2rem;
}
.wishlist-popup .wishlist-p-left {
  width:100px;
}
.wishlist-popup .wishlist-p-right p {
  display:none;
}
.wishlist-popup .close-wishlist svg path {
  fill:#f5f5f5;
}

.menu-drawer__inner-container .h-wishlist-icon .wishlist-h-count {
    padding-left:0;
    width: 20px;
    height: 20px;
    /* the counter sits next to the promotion counter, which is already a copper
       pill on ink; pure red read as a system error, not as a saved item */
    background: var(--wu-copper-main, #e8bf96);
    color: var(--wu-ink, #111111);
    border-radius: var(--wu-r-pill, 999px);
    right: -10px;
    top: 0;
    line-height: 20px;
    font-size: 1.2rem;

}
.header__icons .h-wishlist-icon .wishlist-h-count {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 3px;
    right: -5px;
    color: var(--wu-ink, #111111);
    background: var(--wu-copper-main, #e8bf96);
    border-radius: var(--wu-r-pill, 999px);
    height: 20px;
    width: 20px;
    padding-left: 0;
    line-height: 20px;
    font-size: 1.4rem;
    font-weight: bold;
}
.header__heading .h-wishlist-icon .wishlist-h-count {
  right:-8px;
}
.header .h-wishlist-icon .wishlist-h-count[data-total="0"] {
  display:none;
}

/* Wisthlist */
/* Popup  */
.popup-content-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background:none;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius:10px;
  width:calc(100% - 2rem);
  max-width:650px;
}
.popup-content {
  position:relative;
}
.popup-close {
    position: absolute;
    right: -1rem;
    top: -1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d2d2d;
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: var(--wu-r-pill);
    border: 1px solid #1d1d1d;
    z-index:999;
}
.popup-trigger {
  font-weight: 700;
  color: var(--wu-copper-main, #e8bf96);
  letter-spacing: normal;
}
/* Endpopup */

#shopify-element-wrapper .activator--inverted-colors {
  --activator-bg: #680108;
  border-radius:8px;
}

.jdgm-carousel__rev-sum-wrapper {
  display:none;
}

.jdgm-carousel-wrapper .jdgm-carousel-title-and-link .jdgm-all-reviews-rating-wrapper {
  display:none;
}

.jdgm-carousel-title {
  color: #f5f5f5;
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: bold;
}
.jdgm-carousel-title::after {
  content: "Five-Star Reviews";
  display: block;
}
.jdgm-carousel__arrows {
  display:none;
}
.jdgm-carousel-wrapper {
  padding:0;
}

.jdgm-carousel--gallery-theme .jdgm-carousel-item__inner-wrapper {
  border-radius:unset !important;
  background:none !important;
}
.jdgm-carousel--gallery-theme .jdgm-rev__buyer-badge {
  background: #009200 !important;
}
.header__inline-menu #HeaderMenu-big-sale.header__menu-item span {
  color:#96ff00;
}

@media screen and (min-width:990px) {
  .jdgm-carousel-wrapper .jdgm-carousel--gallery-theme .jdgm-carousel-item {
  width:25%;
 }
}

.jdgm-ugc-media .jdgm-ugc-media__thumbnail-link {
  width: calc(100% / 2);
}


@media screen and (min-width:750px) {
.jdgm-ugc-media .jdgm-ugc-media__thumbnail-link {
  width: calc(100% / 3);
}
}

@media screen and (min-width:990px) {
.jdgm-ugc-media .jdgm-ugc-media__thumbnail-link {
  width: calc(100% / 4);
}
}

.jdgm-rev__reply-content p {
  word-wrap: break-word;
}

.BLOY-root .BLOY-popup__login-title,
.BLOY-root .BLOY-popup__section {
  color:#000;
}

.BLOY-root .BLOY-widget,
 {
  transform: rotate(-90deg);
  position: fixed;
  left: calc(100% - 2rem);
  bottom: calc(50% - 150px);
  background:#680108;
  color: #f5f5f5 !important;
  border-radius: 6px;
  height:42px;
  width:max-content;
}

.BLOY-root .BLOY-widget .BLOY-widget__title {
  display:none;
}

.BLOY-page__vip_tier_slider-wrapper .BLOY-popup__vip_perk_title {
  color:#000;
}

/* change theme color */
    .footer__localization .theme-switch-wrapper {
      padding:1rem 0;
    }

    .footer__localization .theme-switch-wrapper .theme-switch {
        margin-top:1rem;
    }

    .theme-switch-wrapper .theme-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
    }

    .theme-switch-wrapper .theme-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .theme-switch-wrapper .theme-switch .slider {
        position: absolute;
        cursor: pointer;
        background-color: #ccc;
        border-radius: 34px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 0.3s;
    }

    .theme-switch-wrapper .theme-switch .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    /* ON 状态 */
    .theme-switch-wrapper .theme-switch input:checked+.slider {
        background-color: #4CAF50;
    }

    .theme-switch-wrapper .theme-switch input:checked+.slider:before {
        transform: translateX(24px);
    }
    .footer__column.footer__localization {
      align-items: flex-start;
      gap: 2rem;
    }
    .menu-drawer__inner-container .theme-switch-wrapper {
      display: flex;
      padding: 2rem;
      align-items: center;
      gap: 2rem;
    }
/* end change theme color */

#autoketing-top-pin-position #ak-wrap-top-pin-products #ak-wrap-top-pin-product-history {
  margin-top:0;
}

#ak-wrap-top-pin-product-history .AkTopPin {
  min-width: unset;
  border-radius: 10px;
}

#ak-wrap-top-pin-product-history .AkTopPin .AkTopPin__container {
  border-radius: 10px;
}

#ak-wrap-top-pin-product-history .AkTopPin .AkTopPin__container__title-size {
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 700;
  color: #ababab;
}

#ak-wrap-top-pin-product-history .AkTopPin .AkTopPin__product-content__item-detail {
  padding:1rem;
  background: #2d2d2d;
}

#ak-wrap-top-pin-product-history.theme-1 .AkTopPin__product-content__item-detail .AkTopPin__product-content__item-detail__title {
  font-weight: 400;
  margin-top: 0;
  font-family: unset;
  font-size: 16px;
}

#ak-wrap-top-pin-product-history div[data-id] + div[data-id] .AkTopPin__product-content {
  margin-left:0;
}

/* ============================================================
   COPPERTIST.WU brand layer
   One token set for the whole storefront. Every template reads
   these instead of re-declaring raw hex, so a color or radius
   decision is made once and holds everywhere.
   ============================================================ */
:root {
  /* the metal — dark to light */
  --wu-copper-deep: #6e3a12;
  --wu-copper: #b4682a;
  --wu-copper-hot: #e49237;
  --wu-copper-main: #e8bf96;
  --wu-copper-soft: #fce2b1;
  --wu-copper-pale: #fff4e4;
  --wu-copper-grad: linear-gradient(90deg, #e49237 0%, #ffdfa4 100%);

  /* A fourth gold, #ccbb89, was written by hand in 8 places across the storefront -
     inside custom_liquid blocks in four templates, twice in main-product.liquid, in
     pdp-services.css and in vip-tier.liquid - as emphasis text on a dark ground. It
     sits next to --wu-copper-main and does what that token already does. Collapsing
     the two is a visible decision, so for now it is one named value in one place
     instead of eight literals: changing the gold is now a single edit, and the
     sweep can see it. */
  --wu-brass: #ccbb89;

  /* the metal a call to action is made of. #ffbd68 is the gold the tier table,
     the membership button and the active nav item already use; the storefront
     kept asking visitors to press a white rectangle while it sat unused.
     Dawn paints a filled button from "r,g,b" triplets, so the metal is published
     in that form too. */
  --wu-metal: #ffbd68;
  --wu-metal-rgb: 255, 189, 104;
  --wu-metal-hi-rgb: 252, 226, 177;
  --wu-ink-rgb: 17, 17, 17;

  /* the ground */
  --wu-void: #000000;
  --wu-ink: #111111;
  --wu-ink-raised: #1d1d1d;
  --wu-ink-line: #2d2d2d;
  --wu-ink-hair: #3a3a3a;
  --wu-mute: #8a8a8a;
  --wu-mute-hi: #ababab;
  --wu-mute-top: #d1d1d1;
  --wu-paper: #f5f5f5;

  --wu-alert: #b40b22;
  /* #b40b22 is for ink on paper. On the near-black product column an error has
     to be a lighter coral or it fails contrast, so the storefront keeps one
     error colour as an rgb() triplet and every surface reads it the same way. */
  --wu-error: 236, 108, 92;

  /* two steps only: controls, then surfaces */
  --wu-r-control: 6px;
  --wu-r-surface: 10px;
  --wu-r-pill: 999px;

  --wu-space-1: 4px;
  --wu-space-2: 8px;
  --wu-space-3: 12px;
  --wu-space-4: 16px;
  --wu-space-5: 24px;
  --wu-space-6: 32px;
  --wu-space-7: 48px;
  --wu-space-8: 64px;

  --wu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wu-t-fast: 140ms;
  --wu-t-med: 240ms;
  --wu-t-slow: 420ms;

  --wu-hair: 1px solid var(--wu-ink-line);
  --wu-lift: 0 8px 24px rgba(0, 0, 0, 0.45);
  --wu-lift-hi: 0 14px 40px rgba(0, 0, 0, 0.6);

  /* Dawn paints its own focus ring and selection from these */
  --focused-base-outline: 0.2rem solid var(--wu-copper-main);
  --focused-base-box-shadow: 0 0 0 0.3rem var(--wu-void), 0 0 0.5rem 0.3rem rgba(232, 191, 150, 0.45);
}

::selection {
  background-color: rgba(232, 191, 150, 0.32);
  color: var(--wu-paper);
}

html {
  -webkit-tap-highlight-color: rgba(232, 191, 150, 0.22);
  scrollbar-color: var(--wu-ink-hair) transparent;
  scrollbar-width: thin;
}

/* the storefront is dark; a light system scrollbar is the loudest thing on the page */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--wu-void);
}
::-webkit-scrollbar-thumb {
  background: var(--wu-ink-line);
  border-radius: var(--wu-r-pill);
  border: 2px solid var(--wu-void);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wu-copper);
}

/* ---- motion: one vocabulary for every press, hover and focus ---- */
.button,
.shopify-challenge__button,
.customer button,
.field__input,
.select select,
.text-input,
a.link,
.link--text {
  transition: background-color var(--wu-t-fast) var(--wu-ease), color var(--wu-t-fast) var(--wu-ease),
    border-color var(--wu-t-fast) var(--wu-ease), box-shadow var(--wu-t-med) var(--wu-ease),
    transform var(--wu-t-fast) var(--wu-ease);
}

.button:not([disabled]):active,
.shopify-challenge__button:not([disabled]):active,
.customer button:not([disabled]):active {
  transform: translateY(1px);
}

/* a thumb has to have something to land on */
@media screen and (max-width: 749px) {
  .button,
  .shopify-challenge__button,
  .customer button,
  .field__input,
  .select select {
    min-height: 44px;
  }
}

a {
  transition: color var(--wu-t-fast) var(--wu-ease);
}

/* ---- the primary action wears the metal ----
   Dawn paints a filled button - the ground, the ring and the hover growth - out
   of two triplets, so overriding the variables recolours the whole mechanism
   instead of fighting each pseudo-element. Secondary and tertiary buttons keep
   the scheme's own ground; only the thing a visitor is asked to press changes.
   Screen only: the gift card's print stylesheet flips these same tokens to ink
   on paper, and a gold block there is a square of wasted ink. */
@media screen {
  .button:not(.button--secondary):not(.button--tertiary),
  .shopify-challenge__button,
  .customer button:not(.button--secondary),
  button.shopify-payment-button__button--unbranded {
    --color-button: var(--wu-metal-rgb);
    --color-button-text: var(--wu-ink-rgb);
  }
  .button:not(.button--secondary):not(.button--tertiary):not([disabled]):hover,
  .shopify-challenge__button:not([disabled]):hover,
  .customer button:not([disabled]):hover {
    --color-button: var(--wu-metal-hi-rgb);
  }
  /* Corners are a separate rule from the colour above on purpose: the filled button read
     6px while the outlined one beside it kept the scheme's 7px, so the two halves of a
     pair - "Check out" and "Continue shopping", "Save" and "Cancel" - never lined up.
     Every button shape is now one token, whichever scheme it is painted in. */
  .button,
  .shopify-challenge__button,
  .customer button,
  button.shopify-payment-button__button--unbranded {
    --buttons-radius: var(--wu-r-control);
    --buttons-radius-outset: var(--wu-r-control);
  }
}

/* ---- section titles: the same voice on every template ---- */
.section-heading,
[class*='__title'].inline-richtext,
.title.inline-richtext,
/* The cart drawer and the search panel are the two headings a visitor reads
   while deciding whether to buy, and Dawn left both on the site's 400 heading
   weight - the same setting that flattened the policy pages. */
.drawer__heading,
.predictive-search__heading,
/* The five page titles that carry .title--primary - cart, collection,
   collections list, search and blog - are the name of the page you are on, and
   two of them (search's fallback, cart) skip .inline-richtext, so they were the
   last headlines left at body weight. The collection banner's own h1 and the
   related-products board sit in the same blind spot. */
.title--primary,
.collection-hero__title,
.related-product-board-title,
/* Every policy, help, about and contact page runs through main-page.liquid, whose
   title carries neither .title--primary nor .inline-richtext - it was the last
   page-level headline still set at the theme's 400 body weight. */
.main-page-title,
h1.h2 {
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(var(--color-foreground));
}

/* The visible setting of sections/wu-page-h1.liquid. Most of the campaign pages
   take the hidden setting because their banner art already carries the headline;
   this is for the ones that want it drawn. The spacing lives on the heading, not
   on the section wrapper - the wrapper is printed even when the heading is
   visually hidden, and padding on it pushed every campaign banner down 24px. */
.wu-page-h1 {
  padding-top: var(--wu-space-5);
  margin: 0 0 var(--wu-space-4);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: rgb(var(--color-foreground));
}
@media screen and (min-width: 750px) {
  .wu-page-h1 {
    font-size: 3.4rem;
  }
}

/* Once a visitor types, the label shrinks to sit on the field's top edge and
   Dawn drops it to its 10px caption step - the only text in a form that gets
   smaller when the form is being used, and the one thing they have to read to
   know which box they are in. The brand floor is 11px. */
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1.1rem;
}

/* ---- rich text pages (policy, about, shipping, help) ---- */
.rte {
  max-width: 76ch;
}
/* A policy page asks for the same reading size as an article; 13px is a spec-sheet
   step. Scoped to main-page.liquid's own wrapper so the product description and the
   gift-guide cards keep the size they were laid out at. */
.wu-page .rte {
  font-size: 1.5rem;
}
.rte > *:first-child {
  margin-top: 0;
}
.rte > *:last-child {
  margin-bottom: 0;
}
.rte p {
  line-height: 1.75;
  color: rgba(var(--color-foreground), 0.86);
}
.rte h1,
.rte h2,
.rte h3,
.rte h4 {
  margin-top: var(--wu-space-6);
  margin-bottom: var(--wu-space-3);
  line-height: 1.25;
  letter-spacing: 0;
  /* Dawn's heading weight is a theme setting and this shop ships it at 400, so
     policy and about pages rendered their section titles at body weight. The
     brand voice is 700 everywhere else; the rich text has to match. */
  font-weight: 700;
}
.rte h2 {
  font-size: 2.2rem;
  text-transform: uppercase;
}
.rte h3 {
  font-size: 1.8rem;
}
.rte ul,
.rte ol {
  line-height: 1.8;
  padding-left: var(--wu-space-5);
}
.rte li::marker {
  color: var(--wu-copper-main);
}
.rte a {
  color: var(--wu-copper-main);
  text-underline-offset: 3px;
}
.rte a:hover {
  color: var(--wu-copper-soft);
}
.rte hr {
  border: 0;
  border-top: var(--wu-hair);
  margin: var(--wu-space-6) 0;
}
.rte blockquote {
  margin: var(--wu-space-5) 0;
  padding: var(--wu-space-1) 0 var(--wu-space-1) var(--wu-space-4);
  border-left: 3px solid var(--wu-copper-main);
  color: rgba(var(--color-foreground), 0.8);
  font-style: normal;
}
.rte img {
  border-radius: var(--wu-r-surface);
}
.rte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.rte table th,
.rte table td {
  border-bottom: var(--wu-hair);
  padding: var(--wu-space-2) var(--wu-space-3);
  text-align: left;
  /* base.css pins .rte table to table-layout:fixed, so one long unbreakable
     string escapes its column instead of widening the table. */
  overflow-wrap: break-word;
}
.rte table th {
  color: var(--wu-copper-main);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
}

/* ---- blog: category rail, article cards, post list ---- */
/* blog-menu-list.liquid ships no stylesheet of its own, so the rail was
   rendering as browser-default blue underlined links on black. */
.blog-menu {
  background-color: var(--blog-menu-bg, var(--wu-void));
  border-bottom: var(--wu-hair);
  padding-block: var(--wu-space-2);
}
.blog-menu__list {
  list-style: none;
  display: flex;
  gap: var(--wu-space-5);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-menu__list::-webkit-scrollbar {
  display: none;
}
.blog-menu__item {
  flex: 0 0 auto;
}
.blog-menu__item a {
  display: inline-block;
  padding: var(--wu-space-3) 0;
  border-bottom: 2px solid transparent;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--wu-mute-hi);
}
.blog-menu__item a:hover,
.blog-menu__item a:focus-visible {
  color: var(--wu-copper-soft);
}
.blog-menu__item.is-active a {
  color: var(--wu-copper-main);
  border-bottom-color: var(--wu-copper-main);
}

/* the standard card draws its 10px radius on .card__inner but never clips it,
   so the photo's square corners sit visibly outside the card */
.card--standard .card__inner {
  overflow: hidden;
}
.main-blog .title--primary,
.blog-articles .card__heading {
  font-weight: 700;
  letter-spacing: 0;
}
.main-blog .title--primary {
  margin: var(--wu-space-4) 0 var(--wu-space-6);
}
.main-blog .blog-articles {
  row-gap: var(--wu-space-7);
}
.article-card__footer {
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--wu-mute);
}

/* ---- article page header ---- */
.article-template__title {
  font-weight: 700;
  letter-spacing: 0;
}
/* Dawn hands the byline the site's smallest caption step (10px) and it is the
   only thing between the title and the story, so it has to be readable. */
.article-template header .rte,
.article-template header time {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: var(--wu-mute);
}
.article-template__back {
  color: var(--wu-mute-hi);
}
.article-template__back:hover,
.article-template__back:focus-visible {
  color: var(--wu-copper-main);
}
/* An article is the one place the site asks someone to read for more than a
   few seconds, and it inherited the storefront's 13px body step. One rem and a
   taller leading is the difference between a spec sheet and an essay. */
.article-template__content {
  font-size: 1.5rem;
}
.article-template__content p {
  line-height: 1.85;
}
/* The view count is the last line of the story, so it reads as part of the
   byline: a hairline above, muted, and small enough to skip. */
#blog-views {
  padding-top: var(--wu-space-3);
  border-top: var(--wu-hair);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--wu-mute);
}
#blog-views:empty {
  display: none;
}

/* ---- swipe dots on a product card: make them read as a control ---- */
/* component-card.css is linked after this file and carries the same two-class
   specificity, so the swipe dots need one more class to be heard. */
.card-wrapper .card__media .image-dots-container {
  bottom: var(--wu-space-2);
  left: var(--wu-space-2);
  right: auto;
  padding: 5px 7px;
  gap: 4px;
  border-radius: var(--wu-r-pill);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* The swipe itself only exists below 750px: every rule that turns
   .show-second-image-slider into a scrolling flex track - display:flex,
   overflow-x, scroll-snap-type, the img{width:100%} slides - is inside
   @media screen and (max-width:749px) in both component-card.css and
   custom-collection-code.css. Above it the two slides are stacked and swapped
   on hover, so scrollWidth == clientWidth, the active dot can never move off
   the first, and the row is a control wired to nothing. It also lost its
   position:absolute there, so it fell back into flow and pushed the title down.
   card-product.liquid used the class large-hide for this, which is not a Dawn
   utility (only .small-hide, .medium-hide and .large-up-hide exist), so it was
   a no-op. */
@media (min-width: 750px) {
  .card-wrapper .card__media .image-dots-container {
    display: none;
  }
}
.card-wrapper .card__media .image-dots {
  width: 6px;
  height: 4px;
  border-radius: var(--wu-r-pill);
  background-color: rgba(245, 245, 245, 0.45);
  transition: width var(--wu-t-med) var(--wu-ease), background-color var(--wu-t-med) var(--wu-ease);
}
.card-wrapper .card__media .image-dots.active {
  width: 16px;
  background-color: var(--wu-copper-main);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 404: a dead end should still look like the shop ---- */
.template-404 {
  display: flex;
  justify-content: center;
  padding-top: var(--wu-space-7);
  padding-bottom: var(--wu-space-8);
}
.error-404 {
  width: 100%;
  max-width: 520px;
  padding: var(--wu-space-6) var(--wu-space-5);
  text-align: center;
  border: var(--wu-hair);
  border-top: 3px solid var(--wu-copper-main);
  border-radius: var(--wu-r-surface);
  background: linear-gradient(180deg, rgba(232, 191, 150, 0.07) 0%, rgba(0, 0, 0, 0) 60%);
}
.error-404__code {
  margin: 0;
  font-size: 5.6rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--wu-copper-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-404__title {
  margin: var(--wu-space-3) 0 var(--wu-space-5);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.error-404__search {
  margin-bottom: var(--wu-space-4);
}
.error-404__search .field__input {
  text-align: left;
  padding-right: 5.4rem;
  border-radius: var(--wu-r-control);
}
/* The field button box is fixed by Dawn; the inlined svg has no width attribute,
   so without this it fills the whole 44px box and overwhelms the 47px field. */
.error-404__search .field__button {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: var(--wu-r-control);
  color: var(--wu-mute-hi);
  transition: color var(--wu-t-fast) var(--wu-ease), background-color var(--wu-t-fast) var(--wu-ease);
}
.error-404__search .field__button svg {
  width: 1.8rem;
  height: 1.8rem;
}
.error-404__search .field__button:hover,
.error-404__search .field__button:focus-visible {
  color: var(--wu-copper-main);
  background-color: rgba(232, 191, 150, 0.12);
}
.error-404__cta {
  min-width: 220px;
}
@media screen and (min-width: 750px) {
  .error-404 {
    padding: var(--wu-space-8) var(--wu-space-7);
  }
  .error-404__code {
    font-size: 8rem;
  }
  .error-404__title {
    font-size: 3.2rem;
  }
}

/* ---- collection category rail (snippets/sub_menu.liquid) ----
   The label sits under the disc, never on top of it, so the tile stays
   legible whatever photo the merchandiser drops into the metafield. */
.sub-menu-wrapper ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 0;
  padding: 1.6rem 0 1.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: var(--wu-hair);
}
.sub-menu-wrapper ul::-webkit-scrollbar {
  display: none;
}
.sub-menu-wrapper ul li {
  flex: 0 0 9.6rem;
  padding: 0.2rem 0;
  scroll-snap-align: start;
  position: static;
}
.sub-menu-wrapper ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  color: var(--wu-paper);
  text-decoration: none;
}
.sub-menu-wrapper ul li img {
  display: block;
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: var(--wu-r-pill);
  box-shadow: 0 0 0 1px var(--wu-ink-line), 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--wu-t-med) var(--wu-ease), transform var(--wu-t-fast) var(--wu-ease);
}
.sub-menu-wrapper ul li span {
  position: static;
  display: block;
  width: auto;
  min-height: 2.6em;
  opacity: 1;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: rgba(245, 245, 245, 0.82);
  transition: color var(--wu-t-fast) var(--wu-ease);
}
.sub-menu-wrapper ul li a:hover img,
.sub-menu-wrapper ul li a:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--wu-copper-main), 0 8px 20px rgba(0, 0, 0, 0.55);
}
.sub-menu-wrapper ul li a:hover span,
.sub-menu-wrapper ul li a:focus-visible span {
  color: var(--wu-copper-main);
}
/* where you already are */
.sub-menu-wrapper ul li a[aria-current='page'] img {
  box-shadow: 0 0 0 2px var(--wu-copper-main), 0 4px 16px rgba(0, 0, 0, 0.55);
}
.sub-menu-wrapper ul li a[aria-current='page'] span {
  color: var(--wu-copper-main);
  font-weight: 700;
}

/* ---- counters and the email-capture tab: brand, not default red ----
   .cart-count-bubble still carries Dawn's pure rgb(255,0,0); once the two counters sat
   side by side at the same size, that red chip was the one thing left of the row that
   did not belong to the brand. */
button.icon-promotion #promotion-counter,
.header .cart-count-bubble {
  background: var(--wu-copper-grad);
  color: var(--wu-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Omnisend parks its teaser mid-edge, right on top of the product grid */
[class*='omnisend-form-'][class*='-teaser'] {
  top: auto !important;
  bottom: calc(8.4rem + env(safe-area-inset-bottom, 0px));
  right: 0;
}
[class*='omnisend-form-'][class*='-rectangle-teaser'] {
  position: static;
  width: auto;
  height: auto;
}
[class*='omnisend-form-'][class*='-rectangle-teaser-btn'] {
  background: var(--wu-copper-grad) !important;
  color: var(--wu-ink) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-radius: var(--wu-r-control) 0 0 var(--wu-r-control) !important;
  box-shadow: var(--wu-lift) !important;
}

/* ---- every text field should look fillable on a dark ground ---- */
.field:focus-within:after,
.select:focus-within:after {
  box-shadow: 0 0 0 1px var(--wu-copper-main);
}
.field__button {
  color: var(--wu-copper-main);
}
.field__input::placeholder {
  opacity: 0.62;
}
.error-404__search:focus-within:after {
  box-shadow: 0 0 0 1px var(--wu-copper-main);
}

/* ---- "new" flag on a nav item (settings.nav_new_badges) ----
   A pill rather than the neon-green ::after it replaces: it sits on a dark rail,
   inside the mega menu and inside the drawer, and has to stay quiet in all three. */
.nav-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 1px 0.6rem;
  border-radius: var(--wu-r-pill);
  background: var(--wu-copper-main);
  color: var(--wu-ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- a page that found nothing (snippets/wu-empty-state.liquid) ----
   A missed search and an empty collection both ended the same way: one grey line
   above a void of section padding, and the only "exit" pointed back at the page you
   were already on. Two gold-and-ink routes underneath turn a dead end into a detour,
   and they are the same button treatment every other primary action on the site uses. */
.wu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wu-space-5);
  padding: var(--wu-space-7) var(--wu-space-4);
  text-align: center;
}
.wu-empty__lead {
  max-width: 46rem;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--wu-mute-hi);
}
.wu-empty__exits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wu-space-3);
}
.wu-empty__exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--wu-space-6);
  border: 1px solid var(--wu-metal);
  border-radius: var(--wu-r-pill);
  background: var(--wu-metal);
  color: rgb(var(--wu-ink-rgb));
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--wu-t-fast) var(--wu-ease), border-color var(--wu-t-fast) var(--wu-ease),
    color var(--wu-t-fast) var(--wu-ease);
}
.wu-empty__exit:hover,
.wu-empty__exit:focus-visible {
  background: rgb(var(--wu-metal-hi-rgb));
  border-color: rgb(var(--wu-metal-hi-rgb));
  color: rgb(var(--wu-ink-rgb));
  text-decoration: none;
}
.wu-empty__exit--ghost {
  background: transparent;
  border-color: var(--wu-ink-line);
  color: var(--wu-mute-hi);
}
.wu-empty__exit--ghost:hover,
.wu-empty__exit--ghost:focus-visible {
  background: transparent;
  border-color: var(--wu-copper-main);
  color: var(--wu-copper-main);
}
/* Two classes: Dawn's own 18rem void ships in a <style> printed after this
   stylesheet, so a single class here would lose on order rather than merit. */
.template-search.template-search--empty {
  padding-bottom: var(--wu-space-8);
}

/* ---- the 11px floor, applied to the steps Dawn owns ----
   .caption-with-letter-spacing is the eyebrow above a section title and the date line on a
   blog card, and base.css prints it at 1rem - 10px, which is the last text on the site still
   under the floor. medium/large are excluded rather than re-declared: they already clear it,
   and this sheet loads after base.css, so a plain class rule here would have flattened them
   into the same size and cost the big campaign banners their hierarchy. */
.caption-with-letter-spacing:not(.caption-with-letter-spacing--medium):not(.caption-with-letter-spacing--large) {
  font-size: 1.1rem;
}

/* The other half of the same pair: .caption is 1.2rem from 750px up and 1rem below it, so
   the slider counter under every product rail, the card sub-labels and the quantity rules
   all dropped to 10px exactly where a phone is holding them. Desktop is left alone - it was
   already above the floor, and this sheet loads after base.css. */
@media screen and (max-width: 749px) {
  .caption {
    font-size: 1.1rem;
  }
}

/* A product badge is the same kind of small label as the nav "new" flag, so it takes the same
   pill. It arrived at 40px from --badge-corner-radius, a scheme setting that was never brought
   in line with the three radii everything else on the site is built from. */
.badge {
  border-radius: var(--wu-r-pill);
}

/* ---- one page-title voice ----
   Measured across the draft: /collections, /cart and /blogs all opened at 30px/700, while the
   404 body was 24px/400 and /search was 20px - smaller than the section titles underneath it.
   The search template prints <h1 class="h2 center">, so its size came from a utility class
   that describes a heading level rather than a page role; scoped here to the header it sits in,
   it now reads the same as every other first thing a visitor sees on a page. */
.template-search__header > h1 {
  font-size: 3rem;
  font-weight: 700;
}

/* ---- product-card titles ----
   Every heading on the site is at least 600 except the one a visitor reads more than any
   other: the product name under a card, set at 400 by the h5 utility class Dawn gives it
   (measured 400 on 140+ cards across home, collection, search, custom-service and the PDP
   rails). The reference storefront sets the same card title at 600. Weight only - the size
   stays wherever the card layout put it. */
.product-card-wrapper .card__heading {
  font-weight: 600;
}