/* Technodelic Tees v5.6.48: canonical shared component corrections.
   Scoped to components so existing cart, navigation and editorials retain their original CSS. */
:root{--tt-catalog-cream:#f5f1e8}

/* Keep the promotional Shop hero restrained, not saturated purple/pink. */
.inner-hero.shop-hero,.shop-hero{background-color:#f1c8ae!important;background-image:linear-gradient(110deg,#f3c6a8 0%,#f2c8b6 66%,#efcbd0 100%)!important}
.inner-hero.shop-hero::after{display:none!important;content:none!important}

/* Product links and image-preview controls remain separately interactive. */
.shop-grid .product-card,.product-grid .product-card{position:relative}
.shop-grid .tt-product-card-link,.product-grid .product-card{cursor:pointer}
.shop-grid .tt-product-card-link{position:relative;z-index:1;display:block;pointer-events:auto!important}
.shop-grid .tt-product-card-link .product-visual{pointer-events:none}
.product-grid>.product-card>.tt-preview-chip,.shop-grid .product-card>.tt-preview-chip{position:absolute;z-index:4;top:10px;right:10px;bottom:auto;opacity:0}
@media(hover:hover) and (pointer:fine){.product-card:hover>.tt-preview-chip,.product-card:focus-within>.tt-preview-chip{opacity:1;transform:none}}
@media(max-width:620px){.product-grid>.product-card>.tt-preview-chip,.shop-grid .product-card>.tt-preview-chip{display:none!important}}

/* Browsing tiles use the original understated Jost, never the heavy product-page title. */
main .product-grid .product-card h3, main .shop-grid .product-card h3,
main .shop-grid .product-card h3 a{font-family:'Jost',Arial,sans-serif!important;font-size:clamp(13px,1.1vw,16px)!important;line-height:1.24!important;font-weight:500!important;letter-spacing:0!important}
@media(max-width:620px){main .product-grid .product-card h3,main .shop-grid .product-card h3,main .shop-grid .product-card h3 a{font-size:14px!important;font-weight:500!important}}

/* Homepage: true edge-to-edge desktop hero image; crop to the existing banner height.
   Desktop master: 1942 x 809 (2.40:1), no scaling distortion. */
@media(min-width:861px){
  main>.hero{width:100%!important;max-width:none!important;height:clamp(450px,34vw,620px)!important;margin:0 auto!important;overflow:hidden!important}
  main>.hero .hero-picture{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important}
  main>.hero .hero-picture img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center 51%!important;transform:none!important;opacity:1!important}
  main>.hero .hero-copy{position:relative!important;z-index:2!important;width:min(1500px,calc(100% - 6%))!important;max-width:1500px!important;margin:auto!important;padding:10px 0!important}
  main>.hero:before{background:linear-gradient(90deg,rgba(255,249,239,.36),rgba(255,249,239,.12) 37%,transparent 65%)!important}
  /* The content beneath the full-width hero shares a consistent editorial gutter. */
  main>.collection-section.layout-shell,main>.arrivals-section.layout-shell,main>.create-section,main>.fall-invitation.layout-shell,main>.originals-section{
    width:min(1500px,calc(100% - 6%))!important;max-width:1500px!important;margin-left:auto!important;margin-right:auto!important}
}

/* Mobile master is purpose-built 941 x 1672, with sky for live HTML text and couple below. */
@media(max-width:620px){
  main>.hero{width:100%!important;max-width:none!important;height:clamp(570px,calc(100svh - 176px),690px)!important;min-height:0!important;margin:0!important;display:block!important;position:relative!important}
  main>.hero .hero-picture{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important}
  main>.hero .hero-picture .hero-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 52%!important;transform:none!important;opacity:1!important}
  main>.hero:before{z-index:1!important;background:linear-gradient(180deg,rgba(255,250,243,.34) 0%,rgba(255,250,243,.12) 35%,transparent 57%)!important}
  main>.hero .hero-copy{position:relative!important;z-index:2!important;width:calc(100% - 32px)!important;margin:auto!important;padding:25px 0 0!important;height:auto!important;pointer-events:auto!important}
  main>.hero h1{font:700 clamp(41px,10.6vw,51px)/.92 'Cormorant Garamond',Georgia,serif!important;max-width:360px!important;margin:0 0 12px!important;letter-spacing:-.04em!important}
  main>.hero .hero-copy p{font-size:clamp(12px,3.5vw,14px)!important;max-width:350px!important;line-height:1.34!important;margin-bottom:16px!important}
  main>.hero .hero-actions{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;margin:15px 0 0!important}
  main>.hero .hero-actions .btn{min-height:44px!important;height:44px!important;padding:8px 10px!important;font-size:clamp(10px,3vw,12px)!important;display:flex!important;align-items:center!important;justify-content:center!important}
  main>.collection-section.layout-shell,main>.arrivals-section.layout-shell,main>.create-section,main>.fall-invitation.layout-shell,main>.originals-section{width:calc(100% - 32px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
}
@media(min-width:621px) and (max-width:860px){
  main>.hero{width:100%!important;max-width:none!important;margin-top:0!important;overflow:hidden!important}
  main>.hero .hero-picture{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  main>.hero .hero-art{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;transform:none!important}
  main>.hero .hero-copy{z-index:2!important;position:relative!important}
}

/* The approved Color Studio flat lay is a real, wide, high-resolution editorial crop. */
.fall-invitation-art img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:1448/732!important;object-fit:contain!important}

/* Shared product-page display and footer requirements, no extra ornamentation. */
.tt-related-create{position:relative!important;background:#46244b!important;padding:clamp(17px,2vw,28px)!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.tt-related-create::before,.tt-related-create::after,.tt-related-create>div::before,.tt-related-create h3::before{display:none!important;content:none!important}
.tt-related-create h3{white-space:pre-line!important;font-weight:700!important;letter-spacing:-.025em!important}
.tt-related-head>a{display:inline-flex!important;min-height:42px!important;align-items:center!important;padding:10px 15px!important;border:1px solid #b8a4aa!important;border-radius:9px!important;font-weight:700!important;text-decoration:none!important}
.tt-related-card img{background:var(--tt-catalog-cream)!important;padding:0!important;object-fit:contain!important;border:0!important}
.tt-product-page+.footer .footer-brand p{font-family:'Caveat',cursive!important;font-style:normal!important;font-size:clamp(19px,2vw,28px)!important;font-weight:700!important;line-height:1.1!important}
@media(max-width:760px){.tt-related-head>a{font-size:12px!important;padding:7px 9px!important;min-height:36px!important}}

/* Compact desktop header fits five approved nav links just above the mobile breakpoint. */
@media(min-width:861px) and (max-width:1100px){
 .site-header .header-content{grid-template-columns:clamp(142px,17vw,184px) minmax(0,1fr) 108px!important;gap:12px!important}
 .site-header .brand{width:100%!important;max-width:184px!important}
 .site-header .header-right{min-width:0!important}
 .site-header .desktop-nav{gap:clamp(8px,1.1vw,14px)!important;min-width:0!important}
 .site-header .desktop-nav a{font-size:clamp(10px,1.08vw,12px)!important;letter-spacing:.025em!important}
}


/* v5.6.52: approved site content widths and restrained hero refinements.
   These are deliberate page-specific dimensions, not a blanket width override.
   Home editorials 1280 / Shop 1280 / Product 1240 / hero full-bleed. */
:root{--tt-home-content:1280px;--tt-shop-content:1280px;--tt-product-content:1240px}
@media(min-width:901px){
  /* Standard navigation and footer gutter. About, Contact, Fall Edit and Color Studio
     keep their individually designed widths rather than getting enlarged. */
  .site-header .header-content.layout-shell,.footer .layout-shell{width:min(var(--tt-home-content),calc(100% - 64px))!important;max-width:var(--tt-home-content)!important;margin-inline:auto!important}
  main>.collection-section.layout-shell,main>.arrivals-section.layout-shell,
  main>.create-section.layout-shell,main>.fall-invitation.layout-shell,
  main>.originals-section,main>.hero .hero-copy{
    width:min(var(--tt-home-content),calc(100% - 64px))!important;
    max-width:var(--tt-home-content)!important;margin-inline:auto!important;
  }
  /* Shop hero and five-column catalog align at 1280 without enlarging the hero height. */
  .inner-main>.shop-hero{
    width:min(var(--tt-shop-content),calc(100% - 64px))!important;
    max-width:var(--tt-shop-content)!important;margin-left:auto!important;margin-right:auto!important
  }
  .shop-hero .shop-hero-layout{width:100%!important;max-width:100%!important}
  #designs.inner-content.layout-shell{
    width:min(var(--tt-shop-content),calc(100% - 64px))!important;
    max-width:var(--tt-shop-content)!important;margin-inline:auto!important
  }
  /* An editorial product canvas with compact, readable purchase controls. */
  main.tt-product-page.layout-shell{
    width:min(var(--tt-product-content),calc(100% - 64px))!important;
    max-width:var(--tt-product-content)!important;margin-inline:auto!important;
  }
  .tt-product-page .tt-detail-layout{
    grid-template-columns:minmax(0,520px) minmax(0,565px)!important;
    column-gap:clamp(32px,4vw,60px)!important;
    justify-content:space-between!important;align-items:start!important
  }
  .tt-product-page .tt-detail-photo{max-width:520px!important;max-height:470px!important}
  .tt-product-page .tt-detail-purchase{width:100%!important;max-width:565px!important}
}
@media(min-width:621px) and (max-width:900px){
  /* Tablets share the same balanced shop alignment, preserving comfortable gutters. */
  .inner-main>.shop-hero,#designs.inner-content.layout-shell{width:calc(100% - 36px)!important;max-width:none!important;margin-inline:auto!important}
}
@media(max-width:620px){
  /* Crop excess sky from portrait photograph and allow the couple to occupy more of
     the shorter hero. Live HTML headings and CTAs remain in the document. */
  main>.hero{
    height:clamp(490px,calc(100svh - 250px),605px)!important;
    min-height:0!important;
  }
  main>.hero .hero-picture .hero-art{
    object-position:center 68%!important;
  }
  main>.hero:before{
    background:linear-gradient(180deg,
       rgba(255,250,242,.91) 0%,
       rgba(255,250,242,.82) 24%,
       rgba(255,250,242,.60) 43%,
       rgba(255,250,242,.18) 63%,
       rgba(255,250,242,0) 80%)!important;
    display:block!important;
  }
}
@media(min-width:901px) and (max-width:1240px){
  /* Prevent the 520px + 565px desktop ideal columns from overflowing a small laptop. */
  .tt-product-page .tt-detail-layout{
    grid-template-columns:minmax(0,44%) minmax(0,1fr)!important;
    column-gap:clamp(22px,3vw,38px)!important;
  }
}
@media(max-width:355px){
  /* On 320px devices, the legacy 200px header-right minimum caused 9px overflow. */
  .site-header .header-content{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important}
  .site-header .header-right{min-width:0!important}
  .site-header .brand{width:100%!important;max-width:136px!important}
  .create-intro .mobile-create-accent{right:12px!important;width:41%!important}
}