/** Shopify CDN: Minification failed
Line 8:0 All "@import" rules must come first
Line 1061:46 Expected ")" to end URL token
**/
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url(/cdn/shop/files/pxiGyp8kv8JHgFVrLPTucHtF.ttf?v=ec-152813685467d8305598856) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLFj_Z1xlEA.ttf?v=ec-50458482367d83055d3c32) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLDz8Z1xlEA.ttf?v=ec-182296827367d8305620592) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/cdn/shop/files/pxiEyp8kv8JHgFVrJJfedw.ttf?v=ec-44049480567d830565a296) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLGT9Z1xlEA.ttf?v=ec-109939416667d8305695110) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLEj6Z1xlEA.ttf?v=ec-32274440767d83056cbf1d) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLCz7Z1xlEA.ttf?v=ec-72244079967d8305740830) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLDD4Z1xlEA.ttf?v=ec-137006014367d830577e5a1) format('truetype');}@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url(/cdn/shop/files/pxiByp8kv8JHgFVrLBT5Z1xlEA.ttf?v=ec-134495334467d83057b7030) format('truetype');}/**ECOM-INSERT-CSS**/ .ecom-column { position: relative; } .ecom-column>.core__column--wrapper { align-items: flex-start; /* fix tam de mn lam layout */ display: flex; } .ecom-column__overlay .ecom-overlay { pointer-events: none; } .ecom-column__overlay > .ecom-overlay, .ecom-column__overlay .ecom-video-background-youtube { position: absolute; inset: 0; } @media only screen and (min-width: 768px) { .ecom-column>.core__column--wrapper { height: 100%; } } /*.ecom-parallax-background { background-size: cover; width: 100%; height: 100%; transition: background-position 0.2s linear; background-repeat: inherit !important; }*/ .ecom-grid-item .ecom-row > .core__row--columns { height: 100%; } .ecom-use-parallax { background: unset !important; } .ecom-parallax-background { position: absolute; width: 100%; height: 100%; display: flex; overflow: hidden; } .ecom-parallax-background img { object-fit: cover; width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); pointer-events: none; } .ecom-row { width: 100%; position: relative; } .ecom-video-background-youtube-wrapper { overflow: hidden } .ecom-section__overlay > .ecom-overlay, .ecom-section__overlay .ecom-video-background-youtube, .ecom-video-background-youtube-wrapper{ position:absolute; top:0; left:0; bottom:0; right:0; } .ecom-row.ecom-section { clear: both; } .ecom-row:hover { z-index: 1; } .ecom-row>div.core__row--columns.core__row--full { max-width: 100%; } @media (min-aspect-ratio: 16/9) { .ecom-section__overlay .ecom-video-background-youtube { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .ecom-section__overlay .ecom-video-background-youtube { width: 300%; left: -100%; } } @supports not (aspect-ratio: 16 / 9) { .ecom-video-background-youtube:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .ecom-video-background-youtube .ecom-video-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .ecom-video-background { -o-object-fit: unset !important; object-fit: unset !important; } } @media (max-width: 767px) { .ecom-section__video-bg .ecom-video-background-youtube { display: none; } } .el__heading--tooltip-wrapper{ position: relative; display: inline-block; } .el__heading--tooltip-wrapper svg{ width: 18px; cursor: pointer; } .el__heading--tooltip-content{ line-height: 16px; max-width: 200px; position: absolute; display: block; width: max-content; opacity: 0; padding: 5px; visibility: hidden; font-size: 14px; background-color: #545454; color: #ffffff; border-radius: 5px; transition: .5s ease all; z-index: 999; } .el__heading--tooltip-content.el__tooltip-tablet, .el__heading--tooltip-content.el__tooltip-mobile { display: none; } .el__heading--tooltip-bottom{ left: 50%; transform: translate(-50%, 10px); } .el__heading--tooltip-left{ transform: translate(-20px, -50%); right: 100%; top: 50%; } .el__heading--tooltip-top{ left: 50%; bottom: 100%; transform: translate(-50%, -10px); } .el__heading--tooltip-right { top: 50%; left: 100%; transform: translate(20px, -50%); } .tooltip__arrow:before{ position: absolute; content: ''; width: 8px; height: 8px; background: inherit; z-index: -1; } .tooltip__arrow.el__heading--tooltip-bottom:before{ top: 0; transform: translate(-50%, -50%) rotate(45deg); left: 50%; } .tooltip__arrow.el__heading--tooltip-top:before{ transform: translate(-50%,50%) rotate(45deg); bottom: 0%; left: 50%; } .tooltip__arrow.el__heading--tooltip-right:before{ transform: translate(-50%,50%) rotate(45deg); bottom: 50%; left: 0%; } .tooltip__arrow.el__heading--tooltip-left:before{ transform: translate(50%,50%) rotate(45deg); bottom: 50%; right: 0%; } .el__heading--tooltip-wrapper svg:hover~.el__heading--tooltip-bottom, .el__heading--tooltip-wrapper svg:hover~.el__heading--tooltip-top { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .el__heading--tooltip-wrapper svg:hover~.el__heading--tooltip-left { opacity: 1; visibility: visible; transform: translate(-15px, -50%); } .el__heading--tooltip-wrapper svg:hover~.el__heading--tooltip-right { opacity: 1; visibility: visible; transform: translate(15px, -50%); } .ecom-type-hollow .ecom__heading { text-shadow: var(--stroke) !important; background: transparent !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; } .ecom-type-text_3d .ecom__heading { text-shadow: var(--text_3d) !important; } .ecom-type-gradient .ecom__heading { animation: var(--animation); } @keyframes gradientMove { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @media screen and (max-width: 1024px) { .el__heading--tooltip-content.el__tooltip-desktop { display: none; } .el__heading--tooltip-content.el__tooltip-tablet { display: block; } } @media screen and (max-width: 767px) { .el__heading--tooltip-content.el__tooltip-tablet { display: none; } .el__heading--tooltip-content.el__tooltip-mobile { display: block; } } .ecom__text--dropcap:first-letter { font-size: 40px; color: #2bcf19; display:inline-flex; border-style: solid; border-width: 1px; border-color: transparent; float:left; line-height:1; } .ecom__text--dropcap.has-drop-cap-view-default:first-letter { border:none; } body[ecom-loaded] .ecom-sections .element__text a { cursor: auto; } .text-content.ecom-html { overflow: hidden; position: relative; } .ecom-text--is-mark::after { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); pointer-events: none; } .ecom-text_view-more-btn, .ecom-text_view-less-btn { display: flex; background: none; outline: none; border: none; align-items: center; } .ecom__element--button-icon { display: flex; align-items: center; } .ecom-text_view-more-btn svg, .ecom-text_view-less-btn svg { width: 16px; color: #fff; } sub, sup{ position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup{ top: -.5em; } sub{ bottom: -.25em; } .ecom-type-hollow .text-content { text-shadow: var(--stroke) !important; background: transparent !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; } .ecom-type-text_3d .text-content { text-shadow: var(--text_3d) !important; } .ecom-type-gradient .text-content { animation: var(--animation); } @keyframes gradientMove { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .ecom-base-image .ecom-container-image { width: 100%; height: 100% !important; } .image-resize { width: auto !important; max-width: 100% !important; } .ecom-base-image .ecom-container-image.resize .ecom-image-content-position.ecom-image-default picture { height: var(--height-resize) !important; width: var(--width-resize) !important; } .ecom-base-image .ecom-container-image.resize .ecom-image-content-position.ecom-image-default .ecom-image-picture img { width: 100% !important; height: 100% !important; } .ecom-container-image.resize .ecom-image-content-position.ecom-image-default.ecom-base-image-container-overlay{ width: var(--width-resize) !important; user-select: none; -ms-user-select: none; -webkit-user-select: none; } .ecom-container-image.resize .ecom-image-picture * { /*transition: none;*/ pointer-events: none; } .ecom-base-image.ecom-overlay > .ecom-overlay-text{ text-align:center } .ecom-image-align{ display:flex; } .ecom-image-picture-link, .ecom-image-picture{ overflow: hidden; width:100%; height:100%; } .ecom-base-image .ecom-image-picture img { min-height: 1px; object-position: var(--object-position); } .ecom-base-image picture { overflow: hidden; flex:1 1 auto; min-height:1px; } .ecom-base-image picture img{ display: block; max-width: 100%; height: auto; width: 100%; } .ecom-base-image figure{ display: flex; } .ecom-container-image{ display: flex; flex-direction: column; width:100%; } .ecom-image-picture-link, .ecom-image-content-position{ position: relative; } .ecom-base-image.ecom-overlay { position: absolute; z-index: 1; opacity: 0.5; display: flex; align-items: center; justify-content: center; top: 0; left: 0; right: 0; bottom: 0; } .ecom-image__caption{ width:100%; } .ecom-base-image .ecom-image-picture, .ecom-base-image .ecom-image-picture img { width: 100%; max-width: 100%; } .ecom-base-image .ecom-base-image-container-overlay:hover>.ecom-overlay { background-color: rgba(17, 24, 39, 0.3); } .ecom-base-image.image-highlight:after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000000bf; z-index: 999; opacity: 1; pointer-events: none; /* for clickable thought overlay */ } .ecom-base-image.image-highlight .ecom-container-image { z-index: 1000; } .ecom-grid-item .ecom-base-image figure, .ecom-grid-item .ecom-base-image figure .ecom-image-content-position, .ecom-grid-item .ecom-base-image figure .ecom-image-content-position img { height: 100%; width: 100%; max-width: 100%; } .ecom-base-image-mask .ecom-image-mask { width: 100%; } @media (max-width: 1024px) { .ecom-base-image .ecom-image-picture img { object-position: var(--object-position-tablet); } } @media (max-width: 767px) { .ecom-base-image .ecom-image-picture img { object-position: var(--object-position-mobile); } } .ecom-element-button.ecom-button-default{ display:flex; } a.ecom__element--button{ display: inline-flex; align-items: center; text-decoration: none; text-align:center } .ecom__element--button-icon{ display:inline-flex; color:inherit; } .ecom__element--button-icon svg{ width:24px; height:auto } .ecom-ingrid-full-height > a.ecom__element--button { width: 100%; height: 100%; } a.ecom-product__heading { display: block; width: fit-content; } .ecom-core.ecom-n613bnoq66s{width: 100%;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-n613bnoq66s{width: 100%;}}html body .ecom-core.ecom-n613bnoq66s>div.core__column--wrapper{padding-top: 10px !important;padding-bottom: 5px !important;padding-left: 32px !important;position: relative;z-index: 1 !important;}@media screen and (max-width: 767px) and (min-width: 101px){html body .ecom-core.ecom-n613bnoq66s>div.core__column--wrapper{padding-top: 10px !important;padding-bottom: 0px !important;padding-left: 17px !important;z-index: 0 !important;}}.ecom-core.ecom-9fqrh1ca8js .ecom-product__heading,.ecom-core.ecom-9fqrh1ca8js .ecom-product__heading a{font-size: 40px;font-weight: 700;font-family: 'Poppins', sans-serif;letter-spacing: -0.15px;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-9fqrh1ca8js .ecom-product__heading,.ecom-core.ecom-9fqrh1ca8js .ecom-product__heading a{font-size: 29px;}}.ecom-core.ecom-9fqrh1ca8js{margin-top: 10px !important;margin-bottom: 0px !important;padding-bottom: 0px !important;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-9fqrh1ca8js{padding-bottom: 0px !important;margin-top: 15px !important;margin-bottom: -9px !important;}}.ecom-core.ecom-611z5xfbcq8{text-align: left;}.ecom-core.ecom-611z5xfbcq8{padding-top: 17px !important;padding-bottom: 9px !important;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-611z5xfbcq8{padding-top: 0px !important;padding-bottom: 16px !important;}}.ecom-core.ecom-54481n2u5w2>div.core__row--columns{max-width: 1490px;}.ecom-core.ecom-54481n2u5w2{background-color: var(--ecom-global-colors-primary);}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-54481n2u5w2{background-color: var(--ecom-global-colors-primary);}}.ecom-core.ecom-54481n2u5w2{padding-top: 0px !important;padding-bottom: 0px !important;}@media screen and (max-width: 1024px) and (min-width: 768px){.ecom-core.ecom-54481n2u5w2 > div.core__row--columns{flex-direction: row !important;}}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-54481n2u5w2{padding-top: 15px !important;padding-bottom: 0px !important;padding-left: 0px !important;margin-bottom: 0px !important;}.ecom-core.ecom-54481n2u5w2 > div.core__row--columns{flex-direction: row !important;}}.ecom-core.ecom-e543rt3v5tt{width: 100%;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-e543rt3v5tt{width: 100%;}}html body .ecom-core.ecom-e543rt3v5tt>div.core__column--wrapper{padding-top: 6px !important;padding-right: 0px !important;padding-left: 0px !important;}@media screen and (max-width: 767px) and (min-width: 101px){html body .ecom-core.ecom-e543rt3v5tt>div.core__column--wrapper{padding: 0px !important;}}.ecom-core.ecom-p752r33hdt{text-align: left;}.ecom-core.ecom-p752r33hdt{padding-bottom: 0 !important;}.ecom-core.ecom-e8mvs38xyk5{text-align: center;}.ecom-core.ecom-e8mvs38xyk5{padding-bottom: 0 !important;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-e8mvs38xyk5{padding-bottom: 0 !important;}}.ecom-core.ecom-454av2ra8lg>div.core__row--columns{max-width: 1480px;}.ecom-core.ecom-454av2ra8lg{padding: 0px 32px 90px 32px !important;margin-top: 0px !important;}@media screen and (max-width: 767px) and (min-width: 101px){.ecom-core.ecom-454av2ra8lg{padding-right: 0px !important;padding-left: 0px !important;}}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeAZ9hjQ.ttf?v=ec-53226925167d83ac82d939) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfAZ9hjQ.ttf?v=ec-166699851667d83ac86cb5c) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfAZ9hjQ.ttf?v=ec-190057678667d83ac8a74bc) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjQ.ttf?v=ec-164061390467d83ac8e21a5) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZ9hjQ.ttf?v=ec-168229138567d83ac927c99) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hjQ.ttf?v=ec-173579568067d83ac9605a8) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hjQ.ttf?v=ec-141804826667d83ac99fed0) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYAZ9hjQ.ttf?v=ec-130973283067d83ac9da380) format('truetype');}@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url(/cdn/shop/files/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZ9hjQ.ttf?v=ec-171608699867d83aca20adb) format('truetype');}
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
/* ===== Preview-header över .modal-left i pp_preview_modal ===== */
#preview_header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #E1E4E7;
background: #fff;
position: sticky;
top: 0;
z-index: 2;
width: 100%;
height: 60px;
}
/* =========================================================
PRESSIFY – 3D BUTTON SYSTEM (GLOBAL)
========================================================= */
:root{
--pfy-3d-radius: 8px;
--pfy-3d-h: 52px;
--pfy-3d-depth: 5px;
--pfy-3d-hover: 2.2px;
--pfy-3d-base-peek: 0px;
--pfy-3d-ease-bounce: cubic-bezier(.16, 1.15, .3, 1);
--pfy-3d-ease-snap: cubic-bezier(.2, .85, .2, 1);
--pfy-3d-dur-hover: 140ms;
--pfy-3d-dur-up: 170ms;
--pfy-3d-dur-down: 0ms;
/* Primary tokens */
--pfy-3d-surface-bg: #0064F9;
--pfy-3d-surface-fg: #ffffff;
--pfy-3d-base-bg: #1042C0;
}
/* =========================================================
WRAPPER (button / a / label)
========================================================= */
.pfy-3d-btn{
position: relative;
display: inline-flex;
align-items: stretch;
justify-content: stretch;
height: var(--pfy-3d-h);
padding: 0;
border: 0;
background: transparent;
border-radius: var(--pfy-3d-radius);
cursor: pointer;
isolation: isolate;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
touch-action: manipulation;
}
.pfy-3d-btn:focus-visible{
outline: none;
}
/* =========================================================
BASE (bottenplatta) – centrerad för att undvika 1px-peek
========================================================= */
.pfy-3d-btn::before{
content:"";
position:absolute;
left:50%;
transform: translateX(-50%);
width:100%;
top: calc(var(--pfy-3d-depth) - var(--pfy-3d-base-peek));
bottom:0;
border-radius:inherit;
pointer-events:none;
z-index:0;
background: var(--pfy-3d-base-bg);
}
/* =========================================================
SURFACE (topp-platta)
========================================================= */
.pfy-3d-btn__surface{
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: calc(100% - var(--pfy-3d-depth));
margin-bottom: var(--pfy-3d-depth);
padding: 0 20px;
border-radius: inherit;
background: var(--pfy-3d-surface-bg);
color: var(--pfy-3d-surface-fg);
font-family: Satoshi, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
transform: translate3d(0,0,0);
transition:
transform var(--pfy-3d-dur-up) var(--pfy-3d-ease-bounce),
background-color 120ms ease;
will-change: transform;
box-sizing: border-box;
}
/* =========================================================
INTERACTIONS
========================================================= */
.pfy-3d-btn:hover .pfy-3d-btn__surface{
transform: translate3d(0, var(--pfy-3d-hover), 0);
transition-duration: var(--pfy-3d-dur-hover);
transition-timing-function: var(--pfy-3d-ease-snap);
}
.pfy-3d-btn:active .pfy-3d-btn__surface{
transform: translate3d(0, var(--pfy-3d-depth), 0);
transition-duration: var(--pfy-3d-dur-down);
}
/* =========================================================
FOCUS
========================================================= */
.pfy-3d-btn:focus-visible .pfy-3d-btn__surface{
box-shadow: 0 0 0 3px rgba(0,100,249,.25);
}
/* =========================================================
CONTENT SAFETY (spinner / label)
========================================================= */
.pfy-3d-btn__surface > *{
flex: 0 0 auto;
}
.pfy-3d-btn [hidden]{
display:none !important;
}
/* =========================================================
DISABLED (endast disabled-attribut)
========================================================= */
.pfy-3d-btn[disabled]{
pointer-events: none;
cursor: not-allowed;
}
.pfy-3d-btn[disabled] .pfy-3d-btn__surface{
background-color: #f1f3f4 !important;
color: #8b8f94 !important;
}
.pfy-3d-btn[disabled]::before{
background-color: #E6EAEB !important;
}
/* =========================================================
BUSY (loading) – behåll 3D-look
========================================================= */
.pfy-3d-btn[data-busy="1"]{
pointer-events: none;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
.pfy-3d-btn__surface{
transition: none !important;
}
}
#pfy-continue-btn.disabled,
.pf-cta.disabled {
background-color: #f3f3f3 !important;
color: #888;
cursor: not-allowed !important;
pointer-events: none;
}
#design-modal #modal-close svg {
min-width: 24px;
width: 24px;
height: 24px;
min-height: 24px;
}
/* Intern scroll-yta */
#design-modal .modal-scroll {
overflow-y: auto;
overflow-x: hidden;
}
/* Pilarna ligger som syskon till .modal-content -> lyft dem över allt */
#design-modal .modal-nav-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: auto;
height: auto;
border: 0;
border-radius: 999px;
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10002;
pointer-events: auto;
}
#design-modal .modal-nav-arrow.left { left: -60px; }
#design-modal .modal-nav-arrow.right { right: -60px; }
/* Gör ikonen klick-säker men låt knappen ta click */
#design-modal .modal-nav-arrow svg {
width: 35px; height: 35px;
pointer-events: none;
}
.pfy-inline-benefits {
display: flex;
gap: 10px;
align-items: center;
margin: 0 0 15px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.pfy-inline-benefits::-webkit-scrollbar { height: 6px; }
.pfy-inline-benefits::-webkit-scrollbar-thumb { background: #ddd; border-radius: 999px; }
.pfy-benefit-pill {
white-space: nowrap;
border: 1px solid #d2d6d9;
border-radius: 6px;
padding: 3px 5px;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 13px;
line-height: 1;
color: #323232;
background: #f1f2f3;
flex: 0 0 auto;
font-weight: 500;
}
.modal-content-wrapper{
display: flex;
height: 100%;
max-width: 1300px;
width: 100%;
}
/* === Fortsätt-flödet (calc -> summary) === */
.pfy-hidden{display:none !important;}
.pfy-icon-list {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 12px;
margin: 0px;
width: 100%;
}
.pfy-icon-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0px;
border: none;
border-radius: 8px;
background: #fff;
font-size: 14px;
color: #222;
font-family: 'Inter';
font-weight: 400;
}
.pfy-icon-item svg {
width: 15px;
height: 15px;
color: #2F8544;
flex: 0 0 auto;
}
#file-instructionLabel {
font-weight: 500;
display: block;
margin-bottom: 7px;
font-family: 'Inter';
color: #121212;
font-size: 14px;
}
.file-instruction-optional {
font-weight: 500;
display: inline-block;
margin: 0px 0px 0px 0px;
font-family: 'Inter';
color: #888;
font-style: italic;
font-size: 14px;
background: #fff;
border-radius: 8px;
letter-spacing: 0;
vertical-align: top;
}
#file-instructionInput {
width: 100%;
max-width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #D7DADE;
border-radius: 8px;
box-sizing: border-box;
font-family: 'Inter';
resize: vertical;
min-height: 80px;
transition: .15s ease-in-out;
line-height: 1.5;
}
#file-instructionSection {
width: 100%;
max-width: 100%;
margin: 20px 0px;
}
#file-instructionInput:hover{
border: 1px solid rgb(136, 136, 136);
}
#file-instructionInput:focus {
border: 1px solid #0064F9;
box-shadow: 0px 0px 0px 4px rgba(113, 155, 255, 0.4);
}
.pfy-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #fff;
border: none;
border-radius: 8px;
padding: 0px;
margin: 0px 0 15px;
width: 100%;
}
.pfy-summary-props {
display: flex;
gap: 12px;
flex-wrap: wrap;
color: #222;
font-size: 14px;
font-family: 'Inter';
font-weight: 400;
}.pfy-summary-props .k{font-weight:400;}
.pfy-summary-edit {
border: none;
background: #fff;
border-radius: 8px;
height: auto;
padding: 0px;
font-weight: 700;
font-family: Satoshi, sans-serif;
font-size: 15px;
cursor: pointer;
color: var(--pfy-accent);
}
#pfy-continue-btn,
#pfy-atc-btn {
width: 100%;
height: 48px;
border-radius: 8px;
border: none !important;
background: transparent !important;
color: #fff;
font-weight: 700;
font-family: Satoshi, sans-serif;
font-size: 16px;
cursor: pointer;
}
@media (min-width: 769px) {
.modal-content237 {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* tillåter flera rader */
align-items: stretch; /* fyll höjd, inte centrera */
}
#preview_header {
order: -1; /* lägg först */
flex: 0 0 100%; /* ta hela raden */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
border-bottom: 1px solid #E1E4E7;
position: sticky; /* så den stannar i toppen vid scroll */
top: 0;
background: #fff;
z-index: 1;
}
#pp_preview_modal .modal-left,
#pp_preview_modal .modal-right {
flex: auto;
}
}
#preview_header .ph-left,#preview_header .ph-right{display:flex;align-items:center;min-width:0}
#preview_header .ph-center{flex:1;display:flex;justify-content:center;min-width:0}
#preview_header .ph-center .pp-preview-subtitle {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #121212;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'satoshi';
}
#pp-edit-btn-header, #pp-edit-btn-header-alt {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
padding: 0px;
border-radius: 8px;
border: none;
background: #fff;
font-family: Satoshi, sans-serif;
font-weight: 700;
font-size: 14px;
color: #323232;
cursor: pointer;
transition: background .15s ease;
}
#pp-edit-btn-header:hover,#pp-edit-btn-header-alt:hover,.category-btn:hover,#filter-btn:hover{background:#f2f4f5 !important;}
#pp-edit-btn-header svg {
margin-right: 0px;
}
#pp-edit-btn-header-alt{width:max-content;padding:0}
.breadcrumbs a {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
color: #121212;
font-family: Inter;
font-size: 15px;
font-weight: 400;
}
.breadcrumbs ol {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0;
margin: 0;
}
.breadcrumbs .sep {
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.breadcrumbs a.is-current {
color: #666;
}
.breadcrumbs {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0;
}
/* === Share actions modal: slide in från botten (mobil & desktop) === */
#share-actions-modal .share-modal-sheet {
transform: translateY(100%);
transition: transform 0.3s ease;
}
/* stäng utan animation */
#design-modal .modal-content.no-transition {
transition: none !important;
}
/* När share-actions-modal är öppen */
#share-actions-modal.open .share-modal-sheet {
transform: translateY(0);
}
@media (min-width: 769px) {
.share-modal .share-modal-sheet {
transform: none !important; /* ingen förflyttning */
transition: none !important; /* ingen animation */
}
.share-modal.open .share-modal-sheet {
transform: none !important; /* säkerställ ingen slide */
}
}
/* Gör modal-left position:relative så knappen kan ligga i hörnet */
#pp_preview_modal .modal-left { position: relative; }
/* === Design-modal: samma animation som filter-modal === */
#design-modal .modal-content {
transform: translateY(100%);
transition: transform 0.3s ease;
}
/* Alla kontroller (nav + close) */
#design-modal .modal-nav-arrow,
#design-modal #modal-close {
position: absolute; /* istället för fixed */
z-index: 9999;
}
/* Close-knappen – uppe till höger i modalen */
#design-modal #modal-close {
top: 0px;
right: -60px;
width: 37px;
height: 37px;
border: none;
backdrop-filter: blur(1px);
--webkit-filter:blur(1px);
border-radius: 50%;
background: rgba(17, 23, 29, 0.75);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
#design-modal .modal-nav-arrow:disabled { opacity: .45; cursor: default; }
/* === Modal entrance animation (matchar browse-modal) === */
#design-modal .modal-content {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.22s ease, transform 0.32s ease;
}
#design-modal.open .modal-content {
opacity: 1;
transform: translateY(0);
}
/* Runda close-knappen */
.pp-close-top-right {
position: absolute;
top: 14px;
right: 14px;
width: 37px;
height: 37px;
border-radius: 8px;
border: none;
background: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0px 0px 0px 1px rgba(64, 87, 109, .04), 0px 6px 20px -4px rgba(64, 87, 109, .3);
}
.pp-close-top-right:hover{ background:#F2F3F5; }
/* Bekräftelsemodal + kort + knapprad */
.pp-confirm-overlay{
position:fixed; inset:0; display:none;
align-items:center; justify-content:center;
background:rgba(0,0,0,.5); z-index:2147483647; /* över preview-modal */
}
.pp-confirm-card{
background:#fff; width:min(520px,92vw);
border-radius:12px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.pp-confirm-card h3{ margin:0 0 8px; font-size:20px; color:#121212;text-align: left; }
.pp-confirm-card p{ margin:0 0 16px; font-size:15px; color:#323232;line-height: 1.45em; }
.pp-btn-row{ display:flex; gap:8px; justify-content:flex-end; }
.pp-btn{
height:44px; padding:0 16px; border-radius:8px;
font:700 15px/1 Satoshi, sans-serif; cursor:pointer;
border:none; background:#fff; color:#0D1216; transition: 0.15s ease-in-out;
}
.pp-btn-primary{ background:var(--pfy-accent); color:#fff; border-color:var(--pfy-accent);transition: 0.15s ease-in-out; }
/* === KNAPPRAD: anpassa fyller rad, share-knapp kvadratisk; icon-list under === */
.button-container{
display:flex;
align-items:stretch; /* gör share lika hög som anpassa */
gap:8px;
flex-wrap:wrap; /* tillåter icon-list på ny rad */
}
#share-copy-btn {
display:flex;
gap:13px;
width:100%;
transition: 0.15s ease-in-out;
padding: 12px 20px;
border: none;
border-radius: 8px;
background:#fff;
color:#0e1318;
text-decoration:none;
font-family:Inter, sans-serif;
font-weight:400;
font-size: 15px;
cursor:pointer;
vertical-align: middle;
align-items: center;
}
.share-btn:hover,
#share-copy-btn:hover{
background: #f2f4f5;
}
.share-btn {
display: flex;
padding: 1px 14px;
gap: 13px;
width: 100%;
padding: 12px 20px;
border-radius: 8px;
background: #fff;
color: #0e1318;
text-decoration: none;
font-family: Inter, sans-serif;
font-weight: 400;
font-size: 15px;
cursor: pointer;
margin: 0px 0;
transition: 0.15s ease-in-out;
vertical-align: middle;
align-items: center;
}
/* Anpassa-knappen tar resterande bredd */
.button-container > #pp_customize_button{
min-width:0; /* hindra overflow i små vyer */
width:auto !important; /* säkerställ ingen 100%-regel biter */
height:var(--pp-btn-h,43px); /* gemensam höjd */
min-width: 141.55px;
}
/* Icon-list på egen vertikal helrad under knapparna */
.button-container .icon-list {
order: 2;
flex: 1 1 100%;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.button-container .icon-list .icon-item{
display:flex;
align-items:center;
gap:14px;
}
#share-modal-title {
font-size: 29px;
margin-bottom: 20px !important;
}
/* --- SHARE SHEET: placering + scroll-lås --- */
#share-actions-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647 !important;
background: rgba(0, 0, 0, 0.71);
display: none;
place-content: center;
flex-wrap: wrap;
}
#share-actions-modal[aria-hidden="true"]{ display:none !important; }
#share-actions-modal .share-modal-sheet {
position: fixed;
max-width: 500px;
background: #fff;
border-radius: 15px;
display: grid;
gap: 0px;
padding: 35px;
place-self: center;
width: 100%;
}
/* Mobil: äkta bottom sheet + scroll i sheetet (inte i bakgrunden) */
@media (max-width: 768px){
#share-actions-modal{ background: rgba(0, 0, 0, 0.71); }
#share-modal-title {
font-size: 25px;
margin-bottom: 16px !important;
}
#calc-root {
padding-bottom: 190px;
}
.pfy-lightbox-header {
padding: 7px 6px;
right: 0px;
top: 0px;
}
.pfy-lightbox-main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#modal-subtitle {
font-size: 15px !important;
}
/* Enkel: styla texten (color, font, etc.) för båda knapparna */
.share-link-row{
margin-top: 16px !important;
}
.pfy-exit-dialog {
place-self: flex-start;
border-radius: 0px;
}
#preview_header {
min-height: 64px;
}
#share-actions-modal .share-modal-sheet {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
min-width: auto;
max-width: none;
border-radius: 20px 20px 0 0;
padding: 20px 20px 32px 20px;
max-height: 70vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#filter-btn.is-loading{
margin-right: 17px;
}
/* Mobil: lägg X i övre högra hörnet av skärmen (inte utanför viewport) */
#design-modal #modal-close {
position: fixed;
top: -46px;
right: 12px;
z-index: 2147483646;
}
#design-modal { overflow: visible; }
#pfy-continue-btn, #pfy-atc-btn {
height: 48px;
font-size: 15px!important;
}
.modal-content-wrapper{
flex-direction:column;
}
#save-heading {
display: none;
}
#file-instructionSection {
width: 100%;
max-width: 100%;
margin: 30px 0px 200px 0px;
}
}
/* Lås body-scroll när sheetet är öppet (även i iOS) */
body.share-lock{
position: fixed;
overflow: hidden;
width: 100%;
}
/* (valfritt) lite form på triggern bredvid "Anpassa…" */
.button-container{ position:relative; display:flex; gap:8px; align-items:center; }
#share-trigger-btn, #pp_toggle_icon_btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 43px;
width: auto;
border-radius: 8px;
border: 1px solid #D7DADE;
background: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
transition: 0.15s ease-in-out;
color: #121212 !important;
padding: 0px 12px;
}
#share-trigger-btn svg, #pp_toggle_icon_btn svg {
min-width: 24px;
min-height: 24px;
width: 24px;
height: 24px;
}
.icon-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
border-top: 1px solid #D7DADE;
padding-top: 28px;
}
.icon-item {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #0D1216;
font-weight: 400;
}
.icon-item .icon{
width:20px;
height:20px;
flex:0 0 20px; /* lås ikonbredd så texten inte hoppar */
}
#save-paragraph {
line-height: 1.55em;
}
.filter-label {
margin-left: 8px;
}
.pitchprint-preview-container.two-previews img {
max-width: 100% !important;
max-height: 350px;
}
#share-trigger-btn:hover,
#pp_toggle_icon_btn:hover{
background-color: #f2f4f5 !important;
}
#share-trigger-btn:active,
#pp_toggle_icon_btn:active,
.category-btn:active,
#filter-btn:active{
background-color: #e2e4e5 !important;
}
.shopify-mockup-image {
max-width: 100%;
height: auto;
display: block;
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
max-height: 610px;
margin: 0px !important;
max-width: 650px !important;
}
/* === Skeleton för thumbnails (3 st) === */
#modal-thumbs-skeleton{
display: none; /* visas via JS under laddning */
gap: 8px;
margin: 10px 0 10px 0;
}
#modal-thumbnails + #modal-thumbs-skeleton { display:none; } /* (säkerhetsnät om ordningen ändras) */
.thumb-skel{
flex: 1 1 0;
height: 64px; /* mobilhöjd */
border: 1px solid #E1E4E7;
border-radius: 8px;
background: #f3f3f3;
overflow: hidden; /* för shimmer-overlay */
}
@media (min-width: 769px){
.thumb-skel{ height: 76px; } /* desktophöjd */
}
/* återanvänder din shimmer-effekt */
.thumb-skel.skeleton-shimmer::after{
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(252,252,252,.9), transparent);
animation: skl-shimmer 1.5s infinite;
}
/* Gör modalskeletonen identisk med search-skeleton */
#modal-large-image-skeleton {
position: relative;
overflow: hidden;
background: #f3f3f3; /* samma bas som search */
}
#modal-large-image-skeleton::after {
content: "";
position: absolute;
inset: 0; /* identiskt – ingen 45px-marginal */
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(252,252,252,.9), transparent);
animation: skl-shimmer 1.5s infinite;
}
/* Om inte redan definierad i din search-CSS */
@keyframes skl-shimmer {
to { transform: translateX(100%); }
}
.modal-left2 {
position: relative;
}
.designmallar-center-container {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
max-width: 100%;
}
@media only screen and (min-width: 748px) {
.ecom-predictive-search {
position: absolute;
top: 100%;
left: 0%;
max-width: 100%;
border-style: solid;
border-top-width: 0px !important;
border-left-width: 0px !important;
border-right-width: 0px !important;
border-bottom-width: 0px !important;
border-color: #fff;
background: #ffffff;
max-height: 1000px !important;
overflow-y: auto;
z-index: 11;
text-align: start;
width: 100vw !important;
right: 0%;
margin-top: 10px !important;
}
.pp-close-top-right {
position: absolute;
top: 24px;
left: 24px;
width: 43px;
height: 43px;
}
#modal-large-image-skeleton {
width: 100%;
height: 530px;
border-radius: 20px;
background: #f3f3f3;
position: relative;
top: 0;
left: 0;
z-index: 10;
overflow: hidden;
display: none; /* Visas bara när bild laddas */
will-change: transform;
}
}
.ecom-predictive-search__item-title, .ecom-predictive-search__item-query {
color: #000000;
line-height: 1.2;
transition: 0.25s;
font-family: 'Inter';
font-weight: 400;
font-size: 15px;
letter-spacing: -0.15px;
}
.ecom-core.ecom-mnmr1074bqq {
padding-top: 3px !important;
padding-bottom: 3px !important;
padding-left: 0px !important;
margin-top: 0px !important;
position: fixed !important;
}
a:-webkit-any-link {
text-decoration: none !important;
color: #121212;
}
.filter-header {
display: flex;
justify-content: flex-end;
padding: 7px;
background: transparent !important;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
border: none;
background: transparent;
z-index: 10;
border-radius: 50px;
}
.filter-header .close {
stroke: none;
border: none;
background: none;
cursor: pointer;
}
.filter-header .close svg {
width: 25px;
height: 25px;
stroke: none;
border: none;
cursor: pointer;
fill: #323232 !important;
}
@media only screen and (min-width: 748px) {
#search-modal-content {
background: white;
width: 100%;
max-width: 850px !important;
padding: 20px;
top: 0%;
border-radius: 0px;
position: fixed;
box-shadow: none;
}
#filter-slider-sticky {
position: relative;
box-shadow: none;
}
#search-close-modal {
left: -1%;
top: 58%;
}
}
* {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
*::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
#pp_digital_preview_checkbox:checked::after {
content: url(data:image/svg+xml;utf8,) !important;
position: absolute;
top: 0;
left: 0;
display: block;
}
.digital-preview-lead {
font-weight: 500;
color: #121212;
}
.modal-left {
background: #fff !important;
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
html::-webkit-scrollbar {
display: none !important; /* Chrome, Safari */
}
.new-container {
padding: 0px;
}
.modal-right {
width: 100%;
padding: 0px 20px 0px 20px;
}
.modal-left {
height: 100%;
width: 100%;
padding: 20px !important;
}
.modal-content237 {
padding: 0px 0px 0px 0px !important;
overflow-y: auto;
display: flex;
position: relative;
}
.pp-preview-subtitle {
font-size: 17px;
color: #0d1216db;
margin: 0px 0 20px;
}
.digital-preview-checkbox-container {
display: flex;
align-items: center;
margin: 15px 0px 11px 0px;
}
.digital-preview-label {
margin-left: 2px;
font-family: 'Inter' !important;
font-size: 15px !important;
color: #323232;
font-weight: 400 !important;
margin-top: 0px !important;
cursor: pointer;
}
.checkbox-and-cart-container {
background: #fff;
box-sizing: border-box;
padding: 0px 0px 0px 0px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
@media (min-width: 1128px) {
.modal-right {
width: 45% !important;
padding: 50px;
}
#filter-slider {
margin-left: 7px !important;
}
.modal-left {
width: 54% !important;
padding: 50px 0px 32px 32px !important;
}
.modal-content237 {
background-color: #fff;
border-radius: 0px;
padding: 0px;
width: 100%;
max-width: 100%;
position: relative;
display: flex;
flex-direction: row;
height: 100%;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
position: relative;
}
#save-heading {
text-align: left;
font-size: 27px !important;
font-weight: 700;
display: flex;
margin-bottom: 20px !important;
}
.modal-right {
padding: 0px !important;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.preview-add-to-cart-container {
margin-top: 0px;
text-align: center;
border-top: 1px solid #E5E5E5;
padding: 18px 0px 0px;
}
#file-instructionSection {
width: 100%;
max-width: 100%;
margin: 30px 0px 17px 0px;
}
.checkbox-and-cart-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #fff;
box-sizing: border-box;
padding: 0px 0px 0px;
max-width: 100%;
box-shadow: none;
margin: 0 auto;
width: 100%;
}
.new-container {
padding: 50px 32px 32px 60px;
}
}
.ecom-core.ecom-uvysy02v4os {
z-index: 1 !important;
}
.opc-modal {
background-color: transparent !important;
background: none !important;
}
.modal-header {
justify-content: flex-end;
background: transparent !important;
position: absolute;
top: 16px;
right: 16px;
background: transparent;
z-index: 10;
border-radius: 50px;
}
product-options-section .addToCartCustomButton {
display: none !important;
}
.addToCartCustomButton {
color: var(--addtocartTextcolor);
font-weight: 700 !important;
width: 100%;
font-size: 16px !important;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: 52px !important;
font-family: 'Satoshi' !important;
padding: 0.9rem 3rem 1.1rem;
text-decoration: none;
border: var(--addtocartBorderwidth) solid var(--addtocartBordercolor);
border-radius: 8px !important;
background-color: var(--pfy-accent) !important;
min-width: 12rem;
min-height: 47px !important;
margin-top: 0px;
padding: 20px;
}
#filter-slider {
display: flex;
overflow-x: auto;
max-width: 1420px;
margin-top: 10px;
margin-left: 10px;
gap: 10px;
align-items: center;
white-space: nowrap;
justify-content: flex-start;
width: 100%;
scrollbar-width: none;
}
global-embedded-section .optionHolder:has(.opc-modal-option),
product-options-section .optionHolder:has(.opc-modal-option) {
display: none !important;
}
.static-card a {
position: absolute;
left: 56px;
transform: translate(-50%);
padding: 6px 15px;
background-color: var(--pfy-accent);
color: #fff;
text-decoration: none;
border-radius: 8px;
font-size: 15px;
display: block;
margin: 0;
border: 1px solid var(--pfy-accent);
font-family: Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif !important;
font-weight: 700;
top: 80%;
width: max-content;
}
.unique-card-content-container {
position: absolute;
left: 15px;
top: 32%;
transform: translateY(-50%);
align-items: flex-start;
color: #fff;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.static-card h3 {
position: absolute;
left: -2%;
width: 100%;
text-align: left;
color: #121212;
font-size: 17px !important;
padding: 40px 160px 0px 20px !important;
bottom: 30%;
}
#static-card-2 picture img {
width: 100%;
height: 100%;
object-fit: cover;
border: none !important;
display: block;
padding: 0;
}
.eachprice {
display: none;
}
.instruction-postfix {
font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 600;
font-size: 16px;
margin-top: 0;
padding-top: 8px;
letter-spacing: -0px;
color: #888;
}
#custom-design-container svg {
width: 40px;
height: 40px;
margin-bottom: 10px;
fill: var(--pfy-accent);
}
#custom-design-container h3 {
margin: 0;
color: #003166;
text-align: center;
font-family: 'Poppins';
font-weight: 500;
font-size: 15px;
}
#custom-design-container {
background-color: #F3F9FF;
border: 1px dashed var(--pfy-accent);
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
font-family: poppins;
flex-direction: column;
}
.optionHolder.inkmoms {
display: none !important;
}
#pp_project_modal .modal-left, #pp_project_modal .modal-right {
width: 50%;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 88888;
}
.modal-right ul.checklist {
list-style: none;
padding: 0;
width: 100%;
}
.pitchprint-preview {
max-width: 100%;
height: auto;
display: block;
border-radius: 0;
padding-top: 20px;
padding-bottom: 20px;
max-height: 580px;
filter: drop-shadow(0px 2px 4px #ccc);
-webkit-filter: drop-shadow(0px 2px 4px #ccc);;
}
.modal-right li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-family: 'Inter';
font-size: 16px;
color: #121212;
font-weight: 400;
}
.modal-right li svg {
margin-right: 10px;
}
.optional-text {
color: #888;
font-style: italic;
}
.modal-right textarea {
width: 100%;
height: 100px;
border-radius: 8px;
border: 1px solid #D6DADF;
padding: 10px;
margin-top: 5px;
font-family: 'inter';
font-size: 14px;
}
#pitchprint-add-to-cart-btn {
visibility: visible;
margin: 0;
padding: 10px 20px;
font-size: 15px;
background-color: var(--pfy-accent);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
font-family: Poppins, sans-serif;
font-weight: 700;
max-height: 50px;
height: 50px !important;
text-align: center;
min-height: 50px !important;
}
.add-to-cart-container {
width: 100%;
}
#pp_digital_preview_checkbox:checked {
border: 1px solid var(--pfy-accent);
background: var(--pfy-accent);
content: url('data:image/svg+xml;utf8,')
}
.digital-preview-checkbox-container {
display: flex;
align-items: center;
margin: 15px 0px 11px 0px;
}
#pp_digital_preview_checkbox {
width: 21px;
height: 20px;
margin-right: 0px !important;
border: 1px solid #D7DADE;
appearance: none;
position: relative;
cursor: pointer;
outline: none;
border-radius: 4px;
}
.modal-add-to-cart-container {
width: 100%;
margin-top: 0px !important;
}
#pp_project_modal .modal-left, #pp_project_modal .modal-right {
width: 50%;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#pp_project_modal .modal-left {
background: #fff !important;
}
.modal-content {
position: relative; /* Gör modal-content till en referenspunkt för absolut positionerade barn */
width: 800px; /* eller önskad bredd */
background: #fff;
overflow: auto;
}
/* Header med close-knapp */
.modal-header {
position: absolute; /* Lägger headern över innehållet */
top: 16px;
right: 16px;
background: transparent; /* Transparent bakgrund */
z-index: 10; /* Säkerställer att den ligger över bilden */
}
/* Handlebar styling */
.modal-handlebar {
position: sticky;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 0px;
background-color: transparent;
border: 3px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
z-index: 10;
backdrop-filter: blur(1.25rem);
}
#modal-large-image {
width: 100%; /* Bilden tar upp hela utrymmet i modal-left */
height: auto;
}
global-embedded-section .dropdown-label, product-options-section .dropdown-label {
cursor: pointer;
padding: 0px !important;
margin: 0px 0px 0px 0px;
font-family: 'Inter';
font-size: 15px;
font-weight: 400;
}
global-embedded-section .option-type-dropdown-content .tab-view, product-options-section .option-type-dropdown-content .tab-view {
cursor: pointer;
}
/* Ny PitchPrint-modal styling */
#pp_project_modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
.modal-content23 {
background-color: #fff;
border-radius: 0px;
padding: 0px;
width: 100%;
max-width: 100%;
position: relative;
display: flex;
flex-direction: row;
height: 100%;
align-items: center;
overflow-y: auto;
position: relative;
}
#pp_project_modal .modal-left, #pp_project_modal .modal-right {
width: 50%;
padding: 50px;
}
@media (max-width: 768px) {
.modal-content237 {
padding: 0px 0px 95px 0px !important;
overflow-y: auto;
display: flex;
flex-direction: column !important;
position: relative;
}
.filter-label {
display: none;
margin-left: 8px;
}
.checklist li, #save-paragraph, .digital-preview-label, .digital-preview-container {
font-size: 14px !important;
}
.shopify-mockup-image {
max-height: 300px;
max-width: 80vw !important;
margin: 0px !important;
}
#modal-large-image-skeleton {
width: 100%;
height: 280px;
border-radius: 20px;
background: #f3f3f3;
position: absolute; /* SKA VARA absolute! */
top: 0;
left: 0;
z-index: 10;
overflow: hidden;
display: none;
will-change: transform;
}
#modal-large-image-skeleton::after {
content: "";
display: block;
position: absolute;
top: 0; left: 0; right: 0px; bottom: 0;
background: linear-gradient(
90deg,
rgba(224,224,224,0) 0%,
rgba(245,245,245,0.95) 50%,
rgba(248,248,248,0) 100%
);
animation: skeleton-shimmer 1.2s infinite linear;
}
.pitchprint-preview {
max-height: 300px;
}
#designmallar-container {
column-count: 1;
column-gap: 15px;
align-items: flex-start;
max-width: 100%;
margin: 0px 17px;
break-inside: avoid;
}
#filter-slider {
display: flex;
overflow-x: auto;
margin-top: 20px;
margin-bottom: 0px !important;
gap: 10px;
align-items: center;
white-space: nowrap;
scrollbar-width: none;
padding: 15px 0px 0px 17px !important;
}
.results-count {
padding-left: 17px!important;
}
.modal-right {
background: #fff;
border-top-right-radius: 0;
width: 100% !important;
padding: 10px 20px 40px 20px !important;
height: 100%;
}
.digital-preview-container {
padding: 20px;
background-color: #E5F6F1;
border-radius: 14px;
display: none;
font-family: 'Inter';
font-size: 14px;
color: #323232;
line-height: 1.5;
animation: slideIn 0.4s ease-out forwards;
margin: 20px 0px 0px 0px;
line-height: 1.55em;
position: relative;
bottom: 0;
border: 1px solid #7FD5B9;
}
.modal-left {
height: 100% !important;
padding: 20px !important;
width: 100% !important;
}
}
.modal-content237 {
flex-direction: column;
}
#filter-slider {
display: flex;
overflow-x: auto;
gap: 10px;
align-items: center;
white-space: nowrap;
scrollbar-width: none;
margin-top: 10px !important;
margin-left: 0px !important;
background: #fff;
padding: 0px;
z-index: 1;
}
.eachprice {
width: 100%;
padding-bottom: 5px;
}
.filter-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 100%;
position: relative;
transform: translateY(100%);
transition: transform 0.3s ease;
height: 85%;
}
.eachprice .instruction-formula {
font-family: poppins !important;
font-size: 15px !important;
font-weight: 500;
letter-spacing: 0px;
margin-top: 0px;
margin-bottom: 0px !important;
color: #888 !important;
margin-right: -6px;
margin-left: 1.4px;
}
.eachprice .instruction {
display: none;
}
.modal-right ul.checklist {
list-style: none;
padding-top: 0px;
}
#pp_project_modal .modal-left, #pp_project_modal .modal-right {
width: 100%;
padding: 20px;
}
/* Stil för grid-layout */
.opc-modal .close {
background-color: rgba(0, 0, 0, 0.35) !important;
padding: 8px !important;
position: absolute;
border-radius: 50px !important;
right: 15px !important;
top: 15px !important;
line-height: 0;
cursor: pointer;
z-index: 999;
color: #fff !important;
border-radius: 8px;
}
.modal-overlay[style*="display: flex"] .modal-content {
transform: translateY(0); /* Flyttas upp till synlig position */
}
@media (max-width: 768px) {
#pp_project_modal{
flex-direction: column;
}
#modal-large-image {
height: auto !important;
max-height: 370px;
padding: 33px !important;
min-height: 200px;
}
.preview-add-to-cart-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 13px 20px 13px 20px;
border-top: 1px solid #E1E4E7;
}
.modal-overlay {
backdrop-filter: blur(0px) !important;
}
global-embedded-section .opc-modal-option.flex.flex-wrap a, product-options-section .opc-modal-option.flex.flex-wrap a {
text-decoration: underline !important;
font-family: Satoshi !important;
font-size: 15px !important;
color: #666;
font-weight: 500 !important;
}
.opc-modal-option {
margin-top: -9px !important;
margin-bottom: 0px;
}
.container23 {
margin-top: 50px;
}
#close-modal23 {
padding: 5px 13px 0px 13px;
}
global-embedded-section .product-custom-option, product-options-section .product-custom-option {
padding-left: 20px !important;
padding-right: 20px !important;
}
.button-container {
width: 100%;
padding: 17px !important;
background: #fff;
}
#modal-title {
font-size: 15px !important;
}
#modal-thumbnails {
display: flex;
justify-content: left;
gap: 15px;
padding-left: 20px;
overflow-x: auto;
scroll-behavior: smooth;
}
#modal-thumbnails img {
width: 150px !important;
height: 110px !important;
object-fit: cover;
margin-top: 30px;
cursor: pointer;
transition: border 0.3s;
border-radius: 12px;
margin-bottom: 30px;
}
.modal-content {
max-width: 100%;
width: 100%;
height: 94% !important;
bottom: 0;
position: fixed;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
padding: 0px;
display: flex;
flex-direction: column;
transition: transform 0.3s ease-out; /* För "dra ner"-animation */
transform: translateY(100%);
}
.modal-left, .modal-right {
width: 100%;
height: auto;
}
.modal-content {
max-width: 100%;
width: 100%;
height: auto;
bottom: 0;
overflow-y: auto;
position: fixed;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
padding: 0px;
display: flex;
flex-direction: column;
transition: transform 0.3s ease-out; /* För "dra ner"- och upp-animation */
transform: translateY(100%); /* Startposition utanför skärmen */
}
.modal-right {
background: #fff;
border-top-right-radius: 0px;
padding: 0px;
height: 100%;
padding-top: 15px;
}
.modal-left {
margin-bottom: 0px;
padding: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
}
@media (min-width: 769px) {
#designmallar-container,
#design-skeleton-grid {
column-gap: 20px;
column-count: 4;
max-width: 1420px;
}
.modal-right2 {
background: #fff;
border-radius: 20px 20px 0px 0px;
}
.design-card,
.static-card {
margin-bottom: 20px !important;
}
#modal-large-image {
margin-top: 0px;
padding: 0px;
max-height: calc(17.5vh);
min-height: calc(610px);
}
.digital-preview-container {
padding: 20px;
background-color: #E5F6F1;
border-radius: 14px;
line-height: 1.55em;
display: none;
font-family: 'Inter';
font-size: 16px;
color: #323232;
line-height: 1.5;
animation: slideIn 0.4s ease-out forwards;
margin: 30px;
position: absolute;
bottom: 25%;
border: 1px solid #7FD5B9;
}
.static-card h3 {
position: absolute;
left: -2%;
width: 100%;
text-align: center !important;
color: #121212;
font-size: 18px;
padding: 0 60px 0px !important;
}
.static-card a {
position: absolute;
transform: translateX(-50%);
padding: 6px 15px;
background-color: transparent;
color: #121212;
text-decoration: none;
border-radius: 8px;
font-size: 15px;
display: block;
margin: 0;
border: 1px solid #121212;
font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 700;
top: 80%;
}
.unique-card-content-container {
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#static-card-2 {
height: inherit;
display: none !important;
}
.eachprice {
width: 100%;
padding-bottom: 0px;
}
.filter-content {
background-color: #fff;
padding: 20px;
border-radius: 0px;
width: 80% !important;
max-width: 350px !important;
position: fixed !important;
transform: translateY(100%);
transition: transform 0.3s ease;
left: 0;
height: 100%;
}
global-embedded-section .opc-modal-option.flex.flex-wrap a, product-options-section .opc-modal-option.flex.flex-wrap a {
text-decoration: underline !important;
font-family: Satoshi !important;
font-size: 15px;
color: #888;
font-weight: 500 !important;
margin: 3px;
}
.opc-modal .opc-modal-content {
background-color: #fff;
margin: 0;
padding: 0;
width: 93% !important;
max-width: 1400px !important;
height: 90% !important;
overflow: auto;
position: fixed !important;
left: 50%;
transform: translate(-50%, -47%) !important;
-webkit-transform: translate(-50%, -47%) !important;
-moz-transform: translate(-50%,-47%)!important;
bottom: 0% !important;
top: 47%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 100% !important;
}
#close-modal23 {
padding: 0px 13px 3px 13px;
}
global-embedded-section .product-custom-option, product-options-section .product-custom-option {
padding-left: 0px !important;
padding-right: 0px !important;
}
global-embedded-section .product-custom-option, product-options-section .product-custom-option {
padding-left: 0px !important;
padding-right: 0px !important;
}
.button-container {
padding: 0px !important;
box-shadow: none;
}
#modal-thumbnails {
display: flex;
justify-content: center;
gap: 15px;
}
#modal-thumbnails img {
width: 160px;
height: 120px;
object-fit: cover;
margin-top: 15px;
cursor: pointer;
transition: border 0.3s;
border-radius: 12px;
margin-bottom: 15px;
}
.modal-content {
max-width: 1200px !important;
width: 97% !important;
height: 97%;
bottom: 0;
position: fixed;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding: 0;
display: flex;
flex-direction: row;
}
.modal-left {
width: 70%;
height: 100%;
padding: 50px 25px 0px 50px;
border-top-right-radius: 0px;
border-top-left-radius: 20px;
}
.modal-right {
width: 60%;
height: 100%;
padding: 50px 50px 0px 10px;
display: flex;
border-top-right-radius: 20px;
flex-direction: column;
overflow-y: auto; /* Scroll bara i modalen */
}
}
/* Förhindra scroll på bakgrunden när modal är öppen */
body.modal-open {
overflow: hidden;
}
/* Stil för designkort */
.design-card {
border: none;
padding: 0px;
background: #fff;
border-radius: 8px;
cursor: pointer;
margin-bottom: 15px;
transition: box-shadow 0.3s;
text-align: center;
}
.design-card img {
max-width: 100%;
height: auto;
border: 1px solid #D6DADF !important;;
border-radius: 8px;
background: #F2F3F5;
padding: 0px;
transition: outline 0.2s ease;
}
.design-card h3 {
text-align: left;
display: none;
font-size: 16px;
margin: 10px 0 0;
font-family: Poppins, sans-serif;
letter-spacing: -0.15px;
font-weight: 600 !important;
}
.design-card p {
text-align: left;
font-size: 15px;
color: #666;
display: none;
margin: 0px 0;
font-family: 'Inter';
}
/* Stil för modal — design-modal overlay + öppning (matchar browse) */
#design-modal {
position: fixed;
inset: 0;
display: none; /* visas via JS, sen .open för att fadas in */
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.71);
z-index: 9999;
opacity: 0;
transform: scale(1);
transition: opacity .22s ease, transform .22s ease;
}
#design-modal.open {
opacity: 1;
transform: scale(1);
}
/* === GRID som styr hela modal-layouten (NYTT – som browse) === */
.modal-grid{
display: grid;
grid-template-columns: 1fr auto; /* desktop default */
grid-auto-rows: auto;
grid-auto-flow: row dense;
gap: 0px;
align-items: center;
}
/* === Sticky-sektioner (matcha browse) === */
/* Desktop: gör author + top-right sticky i .modal-content */
@media (min-width:1024px){
.modal-content{
max-height: 100vh;
overflow: visible;
}
#modal-author,
#modal-top-right{
position: sticky;
top: 0;
z-index: 5;
background: #fff;
padding-block: 8px;
}
}
/* Mobil: gör social + actions sticky överst */
@media (max-width:1023px){
.modal-content{
max-height: 94vh;
overflow: visible;
}
#design-modal .modal-scroll {
border-radius: 20px 20px 0px 0px;
}
#modal-social,
#modal-top-actions{
position: sticky;
top: 0;
z-index: 5;
background: #fff;
padding: 8px 20px;
height: 70px; /* samma känsla som browse */
}
}
/* Bevara .modal-top i DOM utan egen layout – grid placerar barnen */
.modal-top{ display: contents; }
/* .morelike ska alltid kunna ta full bredd som fallback */
.modal-grid > .morelike{
grid-column: 1 / -1;
justify-self: stretch;
width: 100%;
min-width: 0;
}
/* === Desktop ≥1024px: placering med grid-areas === */
@media (min-width:1024px){
.modal-grid{
grid-template-columns: 1fr auto;
grid-template-areas:
"author top"
"image image"
"meta social"
"morelike morelike";
}
#modal-author { grid-area: author; align-self: center; }
#modal-top-right { grid-area: top; justify-self: end; }
.modal-image-wrap { grid-area: image; }
#modal-photo-meta { grid-area: meta; }
#modal-social { grid-area: social; justify-self: end; }
.modal-grid > .morelike { grid-area: morelike; }
}
/* === Mobil ≤720px: social|actions högst upp, sen image, print, meta ... === */
@media (max-width:720px){
.modal-grid{
grid-template-columns: 1fr auto;
grid-template-areas:
"social actions"
"image image"
"print print"
"meta meta"
"author author"
"morelike morelike";
gap: 0px;
padding: 0px;
background: #FFF;
}
#modal-social{ grid-area: social; }
#modal-top-right{ display: contents; } /* så barnen kan placeras var för sig */
#modal-top-actions{
grid-area: actions;
justify-self: end;
display: inline-flex;
align-items: center;
padding: 0px 20px;
}
.modal-image-wrap{ grid-area: image; padding: 0; }
#pp_print_btn{ /* om du har printknapp */
grid-area: print;
width: 100%;
margin: 20px auto 0 !important;
height: 45px;
color: #121212;
max-width: calc(100% - 40px);
position: relative;
}
#modal-photo-meta{ grid-area: meta; padding: 32px 20px; }
#modal-author{ grid-area: author; padding: 0 20px 32px; }
.modal-grid > .morelike{ grid-area: morelike; }
}
/* lås bakgrunden när modal är öppen */
body.modal-open { overflow: hidden; }
.modal-left {
background: #fff;
}
#modal-large-image {
max-width: 100%;
height: auto;
border: none;
border-radius: 20px;
margin-bottom: 0px;
object-fit: cover;
width: 100%;
}
#modal-thumbnails {
display: flex;
justify-content: left;
gap: 16px;
}
#modal-thumbnails img.active {
border: 1px;
outline: 2px solid var(--pfy-accent);
outline-offset: 1px;
}
.modal-right {
background: #fff;
}
#modal-title {
margin: 0;
padding-left: 0px;
font-size: 24px;
font-family: 'Inter';
font-size: 16px;
font-weight: 500;
color: #616161;
}
#modal-subtitle {
margin: 16px 0 23px;
color: #616161;
font-family: 'Inter';
font-size: 16px;
padding-left: 0px;
margin-bottom: 23px;
font-weight: 500 !important;
}
.modal-content-container {
flex-grow: 1;
background: #F1F4F5;
border-radius: 5px;
margin-bottom: 20px;
}
.button-container {
position: relative;
bottom: 0;
width: 100%;
padding: 8px 20px 8px 20px;
}
#pp_customize_button {
background: transparent;
color: #fff;
padding: 0px;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: 'Satoshi';
font-size: 16px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 54px;
margin-top: 0px;
}
#close-modal23 {
position: fixed;
top: 15px;
right: 15px;
cursor: pointer;
font-size: 30px;
color: #fff;
z-index: 1001;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(0.8rem);
border-radius: 50px;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 13px 5px 13px !important;
}
.eachprice .instruction {
display: none;
}
.opc-modal {
background-color: rgba(0,0,0, .7) !important
}
.opc-modal-content::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge (WebKit) */
}
.modal-right::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge (WebKit) */
}
.opc-modal .close svg {
width: 20px;
height: 20px;
fill: #fff !important;
}
.modal-header .close svg {
width: 20px;
height: 20px;
fill: #fff !important;
}
@media screen and (max-width: 767px) and (min-width: 101px) {
#static-card-2 {
grid-column: span 2;
height: 200px;
}
}
#pp_customize_button {
margin-top: 0px;
}