/** Shopify CDN: Minification failed

Line 146:0 All "@import" rules must come first

**/
/* ============================================================
   Phil Crozier Art Shop — Custom Style Overrides
   Last updated: 2026-07-15
   Load order: theme.liquid line 258 (after base.css)
   ============================================================ */

/* -- Collection pages: center title --
   Default Dawn renders .collection-hero__title left-aligned */
.collection-hero__title {
  text-align: center !important;
}

/* -- Collection pages: center description block and text --
   .collection-hero__description has max-width: 66.67% by default (component-collection-hero.css)
   Override to center the block itself and constrain to a readable width */
.collection-hero__description {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* -- Featured Series: center title and description (Sky Study link) -- */
[id*="featured_collection"] .collection__title {
  text-align: center !important;
}

/* -- Hero banner: disable parallax on mobile, keep static --
   The image must stay position:absolute (Dawn's default). Dawn sizes the
   banner with an in-flow ratio spacer (.banner__media::before with a
   padding-bottom percentage); an absolutely-positioned image overlays that
   spacer, but an in-flow one gets pushed down past it and out of the box,
   leaving an empty grey hero. Going fixed -> absolute is what disables the
   parallax; relative is what broke it. */
@media screen and (max-width: 749px) {
  .banner__media.animate--fixed {
    clip-path: none !important;
  }
  .banner__media.animate--fixed > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
  }
}

/* -- Contact page: center heading and send button -- */
.contact .title {
  display: block !important;
  text-align: center !important;
}
.contact__button {
  text-align: center !important;
}

/* -- Email popup: centered scroll-blocking modal -- */
.email-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 2rem !important;
  box-sizing: border-box !important;
}

.email-popup-overlay[hidden] {
  display: none !important;
}

.email-popup {
  background: #fff !important;
  padding: 3rem 2.5rem !important;
  max-width: 480px !important;
  width: 100% !important;
  position: relative !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.email-popup h2 {
  margin-bottom: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.email-popup p {
  margin-bottom: 1.5rem !important;
}

.email-popup__close {
  position: absolute !important;
  top: 1rem !important;
  right: 1.25rem !important;
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: inherit !important;
}

.email-popup__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.email-popup__form input[type="email"] {
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid #ccc !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}

.email-popup__form button[type="submit"] {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.9rem 2rem !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: 100% !important;
}

.email-popup__form button[type="submit"]:hover {
  background: #333 !important;
}

body.popup-open {
  overflow: hidden !important;
}

/* -- Product page: collection quote in script font -- */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');

.product-quote {
  text-align: center !important;
  padding: 2.5rem 2rem 1rem !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.product-quote__text {
  font-family: 'Dancing Script', cursive !important;
  font-size: 1.7rem !important;
  line-height: 1.6 !important;
  color: #666 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* -- Contact page: studio pickup — centred layout with overlaid directions link -- */
.su-center {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}
.su-center__title {
  margin-bottom: 1.5rem !important;
}
.su-center__desc {
  margin-bottom: 1.2rem !important;
  line-height: 1.7 !important;
}
.su-center__address {
  margin-bottom: 1.5rem !important;
}
.su-center__map-wrap {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
}
.su-center__map {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.su-center__directions {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #111 !important;
}
.su-center__directions:hover {
  background: rgba(255, 255, 255, 1) !important;
}

/* Related products card style — handled inline in sections/related-products.liquid */

/* About page: Available Sizes — center section heading */
.multicolumn .title-wrapper-with-link { justify-content: center !important; }
.multicolumn .title-wrapper-with-link .title { text-align: center !important; }

/* Hero banner: extend to full viewport height on desktop so parallax image isn't clipped */
@media screen and (min-width: 750px) {
  .banner--large.animate--fixed,
  .banner--large:has(.animate--fixed) {
    min-height: 100vh !important;
  }
}

/* -- Cart page: editorial layout -- */
.cart-items {
  display: block !important;
  width: 100% !important;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 55% 1fr !important;
  align-items: stretch !important;
  padding: 4rem 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.cart-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.cart-item__media {
  width: 100% !important;
  padding-right: 4rem !important;
  display: block !important;
  box-sizing: border-box !important;
}

.cart-item__image-container {
  display: block !important;
  width: 100% !important;
  min-width: unset !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.cart-item__image-container .cart-item__image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.cart-item__info-panel {
  display: flex !important;
  flex-direction: column !important;
  padding: 0.5rem 0 !important;
}

.cart-item__info-panel .cart-item__name {
  margin-bottom: 0.8rem !important;
  text-decoration: none !important;
}
.cart-item__info-panel .cart-item__name:hover {
  text-decoration: underline !important;
}

.cart-item__subtitle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.8rem 1.2rem !important;
  margin-bottom: 1.6rem !important;
}

.cart-item__size-badge {
  font-size: 1.1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding: 0.25rem 0.75rem !important;
  line-height: 1.5 !important;
}

.cart-item__subtitle-price {
  font-size: 1.3rem !important;
  color: #888 !important;
}

.cart-item__actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 2.5rem !important;
  margin-top: auto !important;
  padding-top: 2rem !important;
  flex-wrap: wrap !important;
}

.cart-item__actions-row .cart-item__totals {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.cart-item__actions-row .price {
  font-size: 1.8rem !important;
}

@media screen and (max-width: 749px) {
  .cart-item {
    grid-template-columns: 1fr !important;
    padding: 2.5rem 0 !important;
  }
  .cart-item__media {
    padding-right: 0 !important;
    margin-bottom: 2rem !important;
  }
  .cart-item__image {
    max-width: 100% !important;
  }
  .cart-item__info-panel {
    padding: 0 !important;
  }
}

.cart-item__details-extra {
  margin-top: 1.4rem !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1rem !important;
}
.cart-item__details-extra .detail-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.8rem !important;
  margin-bottom: 0.4rem !important;
  line-height: 1.6 !important;
  font-size: 1.4rem !important;
}
.cart-item__details-extra dt {
  flex-shrink: 0 !important;
  min-width: 90px !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #aaa !important;
  font-weight: 400 !important;
}
.cart-item__details-extra dd {
  margin: 0 !important;
  color: #444 !important;
  font-weight: 400 !important;
}

.header__inline-menu > ul > li {
  overflow: visible !important;
}

/* -- Nav: no underline on tabs in any state (hover, open, active/current page) -- */
.header__inline-menu .header__menu-item,
.header__inline-menu .header__active-menu-item,
.header__inline-menu details[open] > .header__menu-item,
.header__inline-menu .header__menu-item:hover .header__active-menu-item {
  text-decoration: none !important;
}

/* -- Nav dropdown: no stroke, soft shadow to give the panel form -- */
.header__submenu {
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* -- Cart: hide PayPal -- */
.cart__dynamic-checkout-buttons [aria-label*="PayPal" i],
.cart__dynamic-checkout-buttons iframe[title*="PayPal" i],
.cart__dynamic-checkout-buttons [data-payment-type="paypal"],
.additional-checkout-buttons [class*="paypal" i] {
  display: none !important;
}

/* -- Product page: drop shadow + border on first image only -- */
.product__media-list .product__media-item:not(:first-child) .global-media-settings {
  border: none !important;
}
.product__media-list .product__media-item:not(:first-child) .global-media-settings::after {
  content: none !important;
}

/* -- Mobile slider: lock touch to horizontal axis (product page carousel) -- */
@media screen and (max-width: 989px) {
  .slider.slider--tablet,
  .slider.slider--tablet * {
    touch-action: pan-x !important;
  }
}

/* ============================================================
   About Phil — immersive video hero
   2026-04-30
   ============================================================ */

.about-hero-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #4a5568;
}

.about-hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.about-hero-panel {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 60px 24px;
  padding: 60px 72px;
  background: rgba(252, 252, 255, 0.10);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.about-hero-bio p {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #0a0a0a;
  margin-bottom: 1.4em;
}

.about-hero-bio p:last-child {
  margin-bottom: 0;
  font-style: italic;
}

@media screen and (max-width: 749px) {
  .about-hero-panel {
    padding: 40px 32px;
    margin: 40px 16px;
  }
  .about-hero-bio p {
    font-size: 1rem;
  }
}

/* Fix select field__input */
.contact select.field__input {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  height: auto;
  min-height: 5rem;
  cursor: pointer;
}

/* -- Sticky footer -- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#MainContent {
  flex: 1 0 auto;
}

/* ============================================================
   Editorial spacing
   2026-05-14
   ============================================================ */

.product__title {
  margin-bottom: 22px !important;
}

.product__tax.caption {
  margin-top: 6px !important;
}

.collection-hero {
  padding-bottom: 48px !important;
}

.sg-item__title {
  margin-bottom: 28px !important;
}

/* ============================================================
   Global: strip all image borders
   2026-05-14
   ============================================================ */

img {
  border: none !important;
}

.image-with-text__media {
  border: none !important;
}

/* ============================================================
   Homepage: Sky Study editorial section title
   2026-05-20
   ============================================================ */

[id*="featured_collection"] .collection__description {
  text-align: center !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[id*="featured_collection"] .collection__description h2 {
  font-size: 6rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.6rem !important;
  text-decoration: none !important;
}

[id*="featured_collection"] .collection__description p {
  font-style: italic !important;
  font-size: 1.5rem !important;
  color: #999 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.8 !important;
  margin-top: 0 !important;
}

/* ============================================================
   Homepage: 3-landscape + 4-portrait grid
   Row 1: items 1-3 at landscape ratio (68.75%), 3 per row
   Row 2: items 4-7 at portrait ratio (150%), 4 per row
   2026-05-28
   ============================================================ */

@media screen and (min-width: 990px) {
  [data-id*="featured_collection"] .product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4rem var(--grid-desktop-horizontal-spacing, 2rem) !important;
  }

  [data-id*="featured_collection"] .product-grid > .grid__item:nth-child(-n+3) {
    flex: 0 0 calc((100% - var(--grid-desktop-horizontal-spacing, 2rem) * 2) / 3) !important;
    max-width: calc((100% - var(--grid-desktop-horizontal-spacing, 2rem) * 2) / 3) !important;
    box-sizing: border-box !important;
  }

  [data-id*="featured_collection"] .product-grid > .grid__item:nth-child(-n+3) .card__inner.ratio {
    --ratio-percent: 68.75% !important;
  }

  [data-id*="featured_collection"] .product-grid > .grid__item:nth-child(n+4) {
    flex: 0 0 calc((100% - var(--grid-desktop-horizontal-spacing, 2rem) * 3) / 4) !important;
    max-width: calc((100% - var(--grid-desktop-horizontal-spacing, 2rem) * 3) / 4) !important;
    box-sizing: border-box !important;
  }

  [data-id*="featured_collection"] .product-grid > .grid__item:nth-child(n+4) .card__inner.ratio {
    --ratio-percent: 150% !important;
  }
}


/* -- Custom Orders form (Details & Process page, #custom-orders anchor) -- */
.clf-wrap { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; color: #1a1a1a; max-width: 820px; margin: 0 auto; padding: 3rem 0 2rem; text-align: center; }
.clf-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: #999; margin-bottom: 1rem; }
.clf-headline { font-size: 26px; font-weight: 300; letter-spacing: 0.01em; color: #1a1a1a; margin-bottom: 1rem; }
.clf-body-text { font-size: 15px; line-height: 1.8; color: #888; max-width: 520px; margin: 0 auto 2.5rem; font-weight: 300; }
.clf-form { text-align: left; }
.clf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.clf-field { margin-bottom: 12px; }
.clf-wrap input[type=text], .clf-wrap input[type=email], .clf-wrap input[type=tel], .clf-wrap textarea { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 14px; color: #1a1a1a; background: #fff; border: 1px solid #d0d0d0; border-radius: 0; padding: 14px 16px; width: 100%; outline: none; transition: border-color 0.2s; }
.clf-wrap input::placeholder, .clf-wrap textarea::placeholder { color: #bbb; font-weight: 300; }
.clf-wrap input:focus, .clf-wrap textarea:focus { border-color: #1a1a1a; }
.clf-wrap textarea { resize: none; min-height: 110px; line-height: 1.6; }
.clf-upload-area { border: 1px solid #d0d0d0; background: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color 0.2s; }
.clf-upload-area:hover { border-color: #1a1a1a; }
.clf-upload-text { font-size: 14px; color: #bbb; font-weight: 300; }
.clf-filename { font-size: 12px; color: #888; margin-top: 6px; }
.clf-submit-wrap { text-align: center; margin-top: 2rem; }
.clf-submit-btn { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; background: #1a1a1a; color: #fff; border: none; padding: 16px 48px; cursor: pointer; transition: opacity 0.2s; }
.clf-submit-btn:hover { opacity: 0.75; }
.clf-submit-note { font-size: 12px; color: #bbb; margin-top: 12px; font-weight: 300; }

/* ============================================================
   Email popup: three-tier copy hierarchy
   2026-06-10
   ============================================================ */

.email-popup__tagline {
  font-size: 0.85rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #555 !important;
  margin-bottom: 0.75rem !important;
}

.email-popup__body {
  font-size: 0.9rem !important;
  color: #888 !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================================
   Editorial text: justified alignment — global
   2026-06-10
   ============================================================ */

.rte p,
.collection__description p {
  text-align: justify !important;
  hyphens: auto !important;
}

/* ============================================================
   Homepage hero: static image button, matching previous video-hero
   "Enter" button style — translucent pill, thin border, uppercase
   2026-07-14
   ============================================================ */

[id^="Banner-"][id$="__hero_image"] .banner__buttons .button {
  display: inline-block;
  padding: 10px 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  /* letter-spacing also adds a trailing space after the final glyph, and
     text-align:center centres the line including that space — leaving the
     visible text sitting half a letter-space (1.5px) left of true centre.
     Indenting by the same amount cancels it out. */
  text-indent: 3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

[id^="Banner-"][id$="__hero_image"] .banner__buttons .button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
}

[id^="Banner-"][id$="__hero_image"] .banner__box {
  border: none !important;
}

[id^="Banner-"][id$="__hero_image"] .banner__box::after {
  box-shadow: none !important;
}

/* Dawn's button border/shadow is drawn on the ::before/::after pseudo-elements
   (box-shadow), not a real border on .button itself — must be killed there. */
[id^="Banner-"][id$="__hero_image"] .banner__buttons .button::before,
[id^="Banner-"][id$="__hero_image"] .banner__buttons .button::after {
  box-shadow: none !important;
}

/* ============================================================
   Homepage hero: crop framing (full photo, cropped via CSS —
   same technique as the original image_banner hero, not a
   pre-cropped file, since Dawn's "fixed" parallax renders the
   image at position:fixed/height:100vh and just clips it to
   this box — a pre-cropped file compounds into an over-zoom).
   2026-07-15
   ============================================================ */

@media screen and (min-width: 750px) {
  [id^="Banner-"][id$="__hero_image"]::before,
  [id^="Banner-"][id$="__hero_image"] .banner__media::before {
    padding-bottom: 42vw !important;
  }
  [id^="Banner-"][id$="__hero_image"] .banner__media img {
    width: 100vw !important;
    height: 56.25vw !important;
        top: calc(var(--header-height) - 6.00vw) !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
  }
}

@media screen and (max-width: 749px) {
  [id^="Banner-"][id$="__hero_image"]::before,
  [id^="Banner-"][id$="__hero_image"] .banner__media::before,
  [id^="Banner-"][id$="__hero_image"]:not(.banner--mobile-bottom) .banner__content::before {
    padding-bottom: 62% !important;      /* DIAL 1 — hero band height */
  }
  [id^="Banner-"][id$="__hero_image"] .banner__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 47% !important;
    transform: scale(1.22) !important;      /* DIAL 2 — zoom to match your red box */
    transform-origin: 50% 47% !important;   /* DIAL 3 — vertical framing */
  }
}

/* ============================================================
   Product zoom (lightbox) modal: gallery-wall backdrop
   Fixes white-on-white — the bordered print's white paper margin
   was invisible against the modal's pure-white background, so the
   framed print appeared to vanish / sit smaller than the borderless
   one. Soft grey backdrop + hairline edge + lift shadow makes each
   print read as a matted object.
   2026-07-20
   ============================================================ */

.product-media-modal__dialog,
.product-media-modal__content {
  background-color: #f1f0ee !important;
}

.product-media-modal__content {
  padding: 4vh 0 6vh !important;
}

.product-media-modal__content > img.global-media-settings {
  display: block !important;
  width: min(1600px, 94%) !important;
  height: auto !important;
  margin: 0 auto 3vh !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14) !important;
}

.product-media-modal__content > img.global-media-settings:last-child {
  margin-bottom: 0 !important;
}
/* ============================================================
   Product page (desktop): unstick the info column so expanded
   accordions stay reachable. As sticky (top:30px) it clipped when
   taller than the viewport — text sat below the fold and page-scroll
   moved the taller media column instead ("images scroll, text won't").
   2026-07-27
   ============================================================ */
@media screen and (min-width: 990px) {
  .product__info-container.product__column-sticky {
    position: static !important;
  }
}