/* ==========================================================
   QINELLE SHIPPING & DELIVERY 2.0 — VISUAL V2 FINAL
   Real HTML + separate media + CSS/SVG icons
   ========================================================== */

body.qinelle-shipping2-v1{
--qs-ink:#241b21;
--qs-muted:#74646e;
--qs-line:#eadde2;
--qs-soft:#fbf5f7;
--qs-soft2:#f6e7ed;
--qs-accent:#a64f73;
--qs-accent-dark:#7c4d67;
--qs-deep:#56384b;
--qs-white:#fff;
}

body.qinelle-shipping2-v1 .qinelle-shipping2{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
padding:34px 0 78px;
color:var(--qs-ink);
font-family:inherit;
}

body.qinelle-shipping2-v1 .qinelle-shipping2 a{
color:var(--qs-accent);
}

body.qinelle-shipping2-v1 .qs2-section,
body.qinelle-shipping2-v1 .qs2-help{
width:min(880px,100%);
margin-left:auto;
margin-right:auto;
}


/* HERO */

body.qinelle-shipping2-v1 .qs2-hero{
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
grid-template-areas:
"eyebrow visual"
"title visual"
"lead visual"
"facts facts"
"estimate estimate";
column-gap:36px;
width:min(1160px,calc(100vw - 40px));
margin:0 50% 22px;
padding:28px 0 0;
transform:translateX(-50%);
text-align:left;
}

body.qinelle-shipping2-v1 .qs2-hero::after{
content:"";
grid-area:visual;
display:block;
min-height:330px;
border-radius:22px;
background:
linear-gradient(
90deg,
rgba(255,255,255,.08),
rgba(255,255,255,0)
),
url("https://qinelle.com/wp-content/uploads/2026/09/pexels-photo-6017744-scaled.jpeg") center 42%/cover no-repeat;
box-shadow:0 14px 38px rgba(78,48,65,.08);
}

body.qinelle-shipping2-v1 .qs2-hero .qs2-eyebrow{
grid-area:eyebrow;
align-self:end;
}

body.qinelle-shipping2-v1 .qs2-hero h1{
grid-area:title;
max-width:535px;
margin:0 0 17px;
font-size:clamp(38px,4.7vw,58px);
line-height:1.02;
letter-spacing:-.035em;
}

body.qinelle-shipping2-v1 .qs2-lead{
grid-area:lead;
max-width:500px;
margin:0;
color:var(--qs-muted);
font-size:17px;
line-height:1.7;
}

body.qinelle-shipping2-v1 .qs2-eyebrow,
body.qinelle-shipping2-v1 .qs2-kicker{
margin:0 0 9px;
color:#a55f7a;
font-size:11px;
line-height:1.3;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}


/* QUICK FACTS */

body.qinelle-shipping2-v1 .qs2-facts{
grid-area:facts;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
width:100%;
margin:20px 0 14px;
transform:none;
}

body.qinelle-shipping2-v1 .qs2-fact{
position:relative;
min-height:146px;
padding:20px 16px 18px 68px;
border:1px solid var(--qs-line);
border-radius:18px;
background:#fff;
box-shadow:0 7px 22px rgba(92,55,75,.035);
}

body.qinelle-shipping2-v1 .qs2-fact::before{
content:"";
position:absolute;
top:19px;
left:16px;
width:38px;
height:38px;
border-radius:50%;
background-color:#fbeef3;
background-position:center;
background-repeat:no-repeat;
background-size:21px 21px;
}

body.qinelle-shipping2-v1 .qs2-fact:nth-child(1)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9 5-9-5'/%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-fact:nth-child(2)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-fact:nth-child(3)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13l-7 7-9-9V4h7z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-fact:nth-child(4)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-fact-label{
display:block;
margin-bottom:10px;
color:#96657a;
font-size:10px;
font-weight:800;
letter-spacing:.07em;
text-transform:uppercase;
}

body.qinelle-shipping2-v1 .qs2-fact strong{
display:block;
margin-bottom:6px;
font-size:17px;
line-height:1.3;
}

body.qinelle-shipping2-v1 .qs2-fact span:last-child,
body.qinelle-shipping2-v1 .qs2-estimate,
body.qinelle-shipping2-v1 .qs2-muted{
color:var(--qs-muted);
}

body.qinelle-shipping2-v1 .qs2-estimate{
grid-area:estimate;
max-width:750px;
margin:0 auto;
text-align:center;
font-size:12px;
line-height:1.6;
}


/* SECTION TITLES */

body.qinelle-shipping2-v1 .qs2-section{
padding:42px 0;
border-top:1px solid #eee6e9;
}

body.qinelle-shipping2-v1 .qs2-heading{
display:flex;
gap:14px;
align-items:flex-start;
margin-bottom:24px;
}

body.qinelle-shipping2-v1 .qs2-heading>span{
display:flex;
align-items:center;
justify-content:center;
flex:0 0 34px;
height:34px;
border-radius:50%;
background:var(--qs-soft2);
color:var(--qs-accent);
font-size:10px;
font-weight:800;
}

body.qinelle-shipping2-v1 .qs2-heading h2{
margin:0;
font-size:clamp(26px,3vw,34px);
line-height:1.16;
letter-spacing:-.02em;
}

body.qinelle-shipping2-v1 .qs2-section p,
body.qinelle-shipping2-v1 .qs2-help p{
font-size:16px;
line-height:1.72;
}


/* JOURNEY */

body.qinelle-shipping2-v1 .qs2-journey{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;
width:min(1080px,calc(100vw - 40px));
margin-left:50%;
transform:translateX(-50%);
}

body.qinelle-shipping2-v1 .qs2-arrow{
display:none;
}

body.qinelle-shipping2-v1 .qs2-step{
position:relative;
padding:66px 14px 16px;
border:0;
border-radius:18px;
background:#fff;
text-align:center;
}

body.qinelle-shipping2-v1 .qs2-step::before{
content:"";
position:absolute;
top:10px;
left:50%;
width:46px;
height:46px;
transform:translateX(-50%);
border-radius:50%;
background-color:#fbeef3;
background-position:center;
background-repeat:no-repeat;
background-size:24px 24px;
}

body.qinelle-shipping2-v1 .qs2-step:nth-child(1)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2 11h11l2-7H6'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-step:nth-child(3)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9 5-9-5'/%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-step:nth-child(5)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-step:nth-child(7)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-step:nth-child(9)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-step-num{
position:absolute;
top:2px;
left:calc(50% - 31px);
z-index:2;
display:flex;
width:20px;
height:20px;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f6e4eb;
color:#9b5574;
font-size:9px;
font-weight:800;
}

body.qinelle-shipping2-v1 .qs2-step strong{
display:block;
margin-bottom:7px;
font-size:15px;
}

body.qinelle-shipping2-v1 .qs2-step p{
margin:0;
color:var(--qs-muted);
font-size:13px;
line-height:1.55;
}


/* BEFORE SHIPMENT */

body.qinelle-shipping2-v1 .qs2-two-col{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

body.qinelle-shipping2-v1 .qs2-two-col>div,
body.qinelle-shipping2-v1 .qs2-service{
position:relative;
padding:22px 22px 22px 64px;
border:1px solid var(--qs-line);
border-radius:17px;
background:#fff;
box-shadow:0 6px 18px rgba(92,55,75,.025);
}

body.qinelle-shipping2-v1 .qs2-two-col>div::before,
body.qinelle-shipping2-v1 .qs2-service::before{
content:"";
position:absolute;
top:22px;
left:20px;
width:30px;
height:30px;
border-radius:50%;
background-color:#fbeef3;
background-position:center;
background-repeat:no-repeat;
background-size:18px 18px;
}

body.qinelle-shipping2-v1 .qs2-two-col>div:nth-child(1)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-two-col>div:nth-child(2)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-two-col h3,
body.qinelle-shipping2-v1 .qs2-service h3{
margin:0 0 9px;
font-size:18px;
}


/* TABLE */

body.qinelle-shipping2-v1 .qs2-table-wrap{
overflow-x:auto;
border:1px solid var(--qs-line);
border-radius:16px;
box-shadow:0 7px 20px rgba(92,55,75,.025);
}

body.qinelle-shipping2-v1 .qs2-table{
width:100%;
border-collapse:collapse;
background:#fff;
}

body.qinelle-shipping2-v1 .qs2-table th{
padding:14px 17px;
background:var(--qs-deep);
color:#fff;
text-align:left;
font-size:13px;
}

body.qinelle-shipping2-v1 .qs2-table td{
padding:16px 17px;
border-top:1px solid var(--qs-line);
}


/* INTERNATIONAL */

body.qinelle-shipping2-v1 .qs2-note{
position:relative;
margin-top:20px;
padding:20px 22px 20px 66px;
border-left:3px solid #cf9caf;
border-radius:0 14px 14px 0;
background:linear-gradient(90deg,#fbf2f6,#fff8fa);
}

body.qinelle-shipping2-v1 .qs2-note::before{
content:"";
position:absolute;
top:23px;
left:22px;
width:29px;
height:29px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 4 6 4 9s-1 6-4 9c-3-3-4-6-4-9s1-6 4-9z'/%3E%3C/svg%3E")
center/contain no-repeat;
}


/* TRACKING */

body.qinelle-shipping2-v1 .qs2-support-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

body.qinelle-shipping2-v1 .qs2-service:nth-child(1)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-service:nth-child(2)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-service:nth-child(3)::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a64f73' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 14v-3a8 8 0 0 1 16 0v3'/%3E%3Cpath d='M4 14h3v5H4zM17 14h3v5h-3z'/%3E%3Cpath d='M17 19c0 2-2 2-4 2'/%3E%3C/svg%3E");
}

body.qinelle-shipping2-v1 .qs2-service-icon{
display:none;
}

body.qinelle-shipping2-v1 .qs2-muted{
margin-top:18px;
font-size:13px!important;
}


/* DAMAGED DELIVERY */

body.qinelle-shipping2-v1 .qs2-checklist{
position:relative;
min-height:220px;
margin-top:20px;
padding:28px 28px 28px 47%;
overflow:hidden;
border:1px solid var(--qs-line);
border-radius:18px;
background:linear-gradient(
90deg,
rgba(255,255,255,0) 42%,
#fff 50%
);
}

body.qinelle-shipping2-v1 .qs2-checklist::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:43%;
background:url("https://qinelle.com/wp-content/uploads/2026/09/qinelle-delivery-support-clean-v1.webp") center/cover no-repeat;
}

body.qinelle-shipping2-v1 .qs2-checklist strong{
font-size:17px;
}

body.qinelle-shipping2-v1 .qs2-checklist ul{
margin:12px 0 0 18px;
}

body.qinelle-shipping2-v1 .qs2-checklist li{
margin:8px 0;
}


/* HELP */

body.qinelle-shipping2-v1 .qs2-help{
margin-top:42px;
padding:38px;
border-radius:22px;
background:linear-gradient(135deg,#56384b,#6c4058);
color:#fff;
text-align:center;
box-shadow:0 18px 40px rgba(70,39,57,.13);
}

body.qinelle-shipping2-v1 .qs2-help .qs2-eyebrow{
color:#efc2d2;
}

body.qinelle-shipping2-v1 .qs2-help h2{
max-width:620px;
margin:0 auto 12px;
color:#fff;
font-size:clamp(28px,4vw,38px);
}

body.qinelle-shipping2-v1 .qs2-help p{
color:#f7edf2;
}

body.qinelle-shipping2-v1 .qs2-help-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}

body.qinelle-shipping2-v1 .qs2-help-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:11px 19px;
border-radius:999px;
font-weight:800;
text-decoration:none;
}

body.qinelle-shipping2-v1 .qs2-primary{
background:#fff;
color:var(--qs-deep)!important;
}

body.qinelle-shipping2-v1 .qs2-secondary{
border:1px solid rgba(255,255,255,.42);
color:#fff!important;
}

body.qinelle-shipping2-v1 .qs2-support-email{
font-size:13px!important;
}


/* TABLET */

@media(max-width:900px){

body.qinelle-shipping2-v1 .qs2-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}

body.qinelle-shipping2-v1 .qs2-journey{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:5px;
}

}


/* MOBILE */

@media(max-width:640px){

body.qinelle-shipping2-v1 .qinelle-shipping2{
width:calc(100% - 28px);
padding:18px 0 54px;
}

body.qinelle-shipping2-v1 .qs2-hero{
grid-template-columns:1fr;
grid-template-areas:
"eyebrow"
"title"
"lead"
"visual"
"facts"
"estimate";
width:100%;
margin:0 0 18px;
padding-top:16px;
transform:none;
}

body.qinelle-shipping2-v1 .qs2-hero h1{
max-width:none;
font-size:34px;
}

body.qinelle-shipping2-v1 .qs2-lead{
max-width:none;
font-size:16px;
}

body.qinelle-shipping2-v1 .qs2-hero::after{
min-height:220px;
margin-top:21px;
border-radius:18px;
}

body.qinelle-shipping2-v1 .qs2-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
margin:16px 0 14px;
}

body.qinelle-shipping2-v1 .qs2-fact{
min-height:0;
padding:53px 13px 14px;
}

body.qinelle-shipping2-v1 .qs2-fact::before{
top:12px;
left:13px;
width:32px;
height:32px;
background-size:18px 18px;
}

body.qinelle-shipping2-v1 .qs2-fact strong{
font-size:15px;
}

body.qinelle-shipping2-v1 .qs2-section{
padding:32px 0;
}

body.qinelle-shipping2-v1 .qs2-heading h2{
font-size:25px;
}

body.qinelle-shipping2-v1 .qs2-journey{
grid-template-columns:1fr;
width:100%;
margin-left:0;
transform:none;
gap:9px;
}

body.qinelle-shipping2-v1 .qs2-step{
padding:15px 15px 15px 66px;
border:1px solid var(--qs-line);
text-align:left;
}

body.qinelle-shipping2-v1 .qs2-step::before{
top:50%;
left:15px;
width:38px;
height:38px;
transform:translateY(-50%);
background-size:20px 20px;
}

body.qinelle-shipping2-v1 .qs2-step-num{
display:none;
}

body.qinelle-shipping2-v1 .qs2-two-col,
body.qinelle-shipping2-v1 .qs2-support-grid{
grid-template-columns:1fr;
}

body.qinelle-shipping2-v1 .qs2-two-col>div,
body.qinelle-shipping2-v1 .qs2-service{
padding:56px 18px 18px;
}

body.qinelle-shipping2-v1 .qs2-two-col>div::before,
body.qinelle-shipping2-v1 .qs2-service::before{
top:17px;
left:18px;
}

body.qinelle-shipping2-v1 .qs2-checklist{
min-height:0;
padding:210px 18px 20px;
}

body.qinelle-shipping2-v1 .qs2-checklist::before{
inset:0 0 auto 0;
width:100%;
height:185px;
border-radius:17px 17px 0 0;
}

body.qinelle-shipping2-v1 .qs2-help{
padding:28px 19px;
border-radius:18px;
}

body.qinelle-shipping2-v1 .qs2-help-actions{
flex-direction:column;
}

body.qinelle-shipping2-v1 .qs2-help-actions a{
width:100%;
}

}

/* QINELLE_SHIPPING2_VISUAL_V2_FINAL_END */