/* Explicit merchant overrides, loaded after all template sheets. Every rule is
   opt-in: empty saved options retain the current storefront exactly. */

/* Frame classes live on the logo itself, so choosing only a frame does not
   require a detailed-options body class. Legacy frames remain untouched. */
html body:is(.store-page,.product-page,.merchant-privacy-page) .shop-logo img.store-brand-logo.design-logo-frame-none {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
html body:is(.store-page,.product-page,.merchant-privacy-page) .shop-logo img.store-brand-logo:is(.design-logo-frame-rounded,.design-logo-frame-circle) {
  box-sizing: border-box;
  background: color-mix(in srgb,var(--paper,#fff) 94%,white);
  border: 1px solid color-mix(in srgb,var(--on-paper,#222) 16%,transparent);
  padding: 8px;
  box-shadow: none;
  border-radius: 16px;
  object-fit: contain;
}
html body:is(.store-page,.product-page,.merchant-privacy-page) .shop-logo img.store-brand-logo.design-logo-frame-circle { border-radius: 50%; }

/* Logical placement follows the storefront language. Center gets a true middle
   column; on small screens the brand and actions get separate rows. */
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-nav {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  height: auto;
  gap: 16px 24px;
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-nav > * { min-width: 0; grid-row: 1; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-logo { max-width: 100%; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-start .shop-logo { grid-column: 1; justify-self: start; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-start .shop-nav > nav { grid-column: 2; justify-self: center; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-start .shop-nav > div { grid-column: 3; justify-self: end; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-logo { grid-column: 2; justify-self: center; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-nav > nav { grid-column: 1; justify-self: start; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-nav > div { grid-column: 3; justify-self: end; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-end .shop-logo { grid-column: 3; justify-self: end; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-end .shop-nav > nav { grid-column: 2; justify-self: center; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-end .shop-nav > div { grid-column: 1; justify-self: start; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-nav > div { flex-wrap: wrap; }

html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-opacity .shop-logo img:is(.store-brand-logo,.store-wordmark) { opacity: var(--design-logo-opacity); }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-width,.design-logo-mobile-width) .shop-nav { height: auto; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-width,.design-logo-mobile-width) .shop-logo { min-width: 0; }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-width,.design-logo-mobile-width) .shop-logo > b { min-width: 0; overflow-wrap: anywhere; }

/* Height is a minimum rather than a fixed clipping box: long bilingual copy and
   accessibility zoom may expand it. Images and video share crop coordinates. */
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-focus-x .shop-hero::before { background-position-x: var(--design-hero-focus-x); }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-focus-y .shop-hero::before { background-position-y: var(--design-hero-focus-y); }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-hero-focus-x,.design-hero-focus-y) .shop-hero-video { object-position: var(--design-hero-focus-x,50%) var(--design-hero-focus-y,50%); }
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-media-scale .shop-hero::before,
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-media-scale .shop-hero-video {
  transform: scale(var(--design-hero-media-scale));
  animation: none;
  transform-origin: var(--design-hero-focus-x,50%) var(--design-hero-focus-y,50%);
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-section-title-size :is(.shop-products > header h2,.related-products > header h2,.cp-main > section > h2,.cp-main > section > header h2,.cp-image-text > div > h2,.cp-contact > div > h2) {
  font-size: var(--design-section-title-size);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-body-text-size :is(.shop-products > header p,.shop-card > div > p,.product-description,.product-facts dd,.cp-copy,.cp-faq details p) {
  font-size: var(--design-body-text-size);
  line-height: 1.8;
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-product-title-size :is(.shop-card h3,.product-detail-copy h1,.related-products a > b,.cp-product > span > b) {
  font-size: var(--design-product-title-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-section-spacing :is(.shop-products,.shop-story,.shop-social,.related-products,.cp-main > section:not(.cp-hero)) {
  padding-block: var(--design-section-spacing);
  min-height: 0;
}
html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-catalog-gap :is(.shop-grid,.shop-grid.sdisplay-grid,.cp-products > div) { gap: var(--design-catalog-gap); }

@media (min-width: 781px) {
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-width .shop-logo img.store-brand-logo {
    width: min(var(--design-logo-width),27vw);
    height: min(var(--design-logo-width),27vw);
    max-width: none;
    object-fit: contain;
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-width .shop-logo img.store-wordmark {
    width: var(--design-logo-width);
    height: auto;
    max-width: min(var(--design-logo-width),30vw);
    max-height: var(--design-logo-width);
    object-fit: contain;
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-width .shop-logo { max-width: 46%; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-width:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-logo { max-width: 100%; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-width:not(.nav-solid) .shop-hero { padding-block-start: max(138px,calc(var(--design-logo-width) + 56px)); }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-height .shop-hero {
    height: auto;
    min-height: var(--design-hero-height);
    padding-block-end: clamp(32px,5vh,76px);
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-title-size :is(.shop-hero h1,.cp-hero h1,.wardrobe-editorial h1) {
    font-size: var(--design-hero-title-size);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 780px) {
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-center,.design-logo-position-end) .shop-nav {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 10px 14px;
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-end) .shop-logo { max-width: 100%; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-start .shop-logo { grid-column: 1; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-start .shop-nav > div { grid-column: 2; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-end .shop-logo { grid-column: 2; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-end .shop-nav > div { grid-column: 1; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class]:is(.design-logo-position-start,.design-logo-position-end) .shop-nav > nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-logo { grid-column: 1 / -1; grid-row: 1; max-width: 100%; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-nav > div { grid-column: 1 / -1; grid-row: 2; justify-self: center; justify-content: center; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center .shop-nav > nav { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-position-center:not(.nav-solid) .shop-hero { padding-block-start: max(210px,calc(var(--design-logo-mobile-width,112px) + 104px)); }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-mobile-width .shop-logo img.store-brand-logo {
    width: min(var(--design-logo-mobile-width),40vw);
    height: min(var(--design-logo-mobile-width),40vw);
    max-width: none;
    object-fit: contain;
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-mobile-width .shop-logo img.store-wordmark {
    width: var(--design-logo-mobile-width);
    height: auto;
    max-width: min(var(--design-logo-mobile-width),42vw);
    max-height: var(--design-logo-mobile-width);
    object-fit: contain;
  }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-logo-mobile-width:not(.nav-solid):not(.design-logo-position-center) .shop-hero { padding-block-start: max(136px,calc(var(--design-logo-mobile-width) + 54px)); }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-mobile-height .shop-hero { height: auto; min-height: var(--design-hero-mobile-height); padding-block-end: 36px; }
  html body:is(.store-page,.product-page,.merchant-privacy-page).design-studio-customized[class].design-hero-title-mobile-size :is(.shop-hero h1,.cp-hero h1,.wardrobe-editorial h1) {
    font-size: var(--design-hero-title-mobile-size);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}