/* =========================================================
   AULIA DIGITAL PRINTING — UI HOTFIX V3
   Loaded AFTER print-redesign-2026.css
   ========================================================= */

/* 1. Homepage category — masonry 3 columns */
.print-site .print-category-grid{
    display:block!important;
    column-count:3;
    column-gap:20px;
    width:100%;
}

.print-site .print-category-grid .print-category-card{
    display:inline-block;
    width:100%;
    margin:0 0 20px!important;
    overflow:hidden;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    border:1px solid #e2ded5;
    border-radius:20px;
    background:#fff;
    color:#15171b!important;
    box-shadow:0 5px 18px rgba(17,18,22,.035);
    transform:translateZ(0);
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

/* Desktop: 3 kolom, masing-masing 2 item */
.print-site .print-category-grid .print-category-card:nth-child(2),
.print-site .print-category-grid .print-category-card:nth-child(4){
    break-after:column;
    -webkit-column-break-after:always;
}

.print-site .print-category-grid .print-category-card:hover{
    transform:translateY(-5px);
    border-color:#cfc9be;
    box-shadow:0 20px 45px rgba(17,18,22,.10);
}

.print-site .print-category-grid .print-category-image{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#efede7;
    aspect-ratio:auto!important;
}

.print-site .print-category-grid .print-category-card:nth-child(1) .print-category-image{
    height:310px;
}

.print-site .print-category-grid .print-category-card:nth-child(2) .print-category-image{
    height:225px;
}

.print-site .print-category-grid .print-category-card:nth-child(3) .print-category-image{
    height:235px;
}

.print-site .print-category-grid .print-category-card:nth-child(4) .print-category-image{
    height:300px;
}

.print-site .print-category-grid .print-category-card:nth-child(5) .print-category-image{
    height:280px;
}

.print-site .print-category-grid .print-category-card:nth-child(6) .print-category-image{
    height:255px;
}

.print-site .print-category-grid .print-category-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 48%,
        rgba(0,0,0,.18) 100%
    );
    pointer-events:none;
}

.print-site .print-category-grid .print-category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;
}

.print-site .print-category-grid .print-category-card:hover .print-category-image img{
    transform:scale(1.045);
    filter:saturate(1.04) contrast(1.02);
}

.print-site .print-category-grid .print-category-index{
    z-index:2;
    left:14px;
    top:14px;
    width:38px;
    min-width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#111216;
    font-size:10px;
    font-weight:950;
    letter-spacing:.06em;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
}

.print-site .print-category-grid .print-category-card-body{
    position:relative;
    padding:18px 18px 17px;
    background:#fff;
}

.print-site .print-category-grid .print-category-card-body:before{
    content:"";
    position:absolute;
    left:18px;
    top:0;
    width:44px;
    height:3px;
    background:linear-gradient(
        90deg,
        #00aeef 0 25%,
        #ec008c 25% 50%,
        #fff200 50% 75%,
        #111 75% 100%
    );
}

.print-site .print-category-grid .print-category-card-body h3{
    margin:0 0 10px;
    color:#15171b;
    font-size:18px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.025em;
}

.print-site .print-category-grid .print-category-card-body span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#71757c;
    font-size:11px;
    font-weight:800;
}

.print-site .print-category-grid .print-category-card-body span i{
    transition:transform .2s ease;
}

.print-site .print-category-grid .print-category-card:hover .print-category-card-body span i{
    transform:translateX(4px);
}


/* =========================================================
   2. PRODUCT DETAIL — MAIN CARD
   ========================================================= */

.print-site .print-product-detail-v3{
    position:relative;
    overflow:hidden;
    padding:28px!important;
    border:1px solid #dedad1!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 18px 55px rgba(20,22,27,.07);
}

.print-site .print-product-detail-v3:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:4px;
    background:linear-gradient(
        90deg,
        #00aeef 0 25%,
        #ec008c 25% 50%,
        #fff200 50% 75%,
        #16171a 75% 100%
    );
}

.print-product-kicker{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px 12px;
    margin-bottom:15px;
}

.print-product-kicker-badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    background:#111216;
    color:#fff;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.11em;
}

.print-product-kicker-text{
    color:#7b7f87;
    font-size:10px;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.print-site .print-product-detail-v3 .print-product-brand-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 10px;
    color:#858991;
    font-size:11px;
}

.print-site .print-product-detail-v3 .print-product-brand-line a,
.print-site .print-product-detail-v3 .print-product-brand-line strong{
    color:#202328!important;
    font-weight:900;
}

.print-site .print-product-detail-v3 .product-title{
    max-width:900px;
    margin:0 0 18px!important;
    color:#15171b!important;
    font-size:clamp(32px,3.2vw,46px)!important;
    line-height:1.04!important;
    font-weight:950!important;
    letter-spacing:-.045em!important;
    text-transform:none;
}

.print-site .print-product-detail-v3 .print-product-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin:0 0 19px;
    padding:17px 0;
    border-top:1px solid #ece9e2;
    border-bottom:1px solid #ece9e2;
}

.print-site .print-product-detail-v3 .print-product-detail-price .price,
.print-site .print-product-detail-v3 .print-product-detail-price .lbl-price{
    margin:0!important;
    color:#15171b!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:-.035em;
}

.print-product-review-summary{
    display:flex;
    align-items:center;
    gap:8px;
    color:#72767d;
    font-size:11px;
    white-space:nowrap;
}

.print-site .print-product-detail-v3 .print-product-short-description{
    margin:0;
    padding:0;
    color:#575b63;
    font-size:14px;
    line-height:1.75;
}


/* Product benefits */

.print-product-benefit-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:22px 0 14px;
}

.print-product-benefit-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-width:0;
    padding:13px;
    border:1px solid #e9e5de;
    border-radius:14px;
    background:#faf9f6;
}

.print-product-benefit-item>span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#111216;
    font-size:9px;
    font-weight:950;
    box-shadow:0 4px 12px rgba(17,18,22,.06);
}

.print-product-benefit-item strong,
.print-product-benefit-item small{
    display:block;
}

.print-product-benefit-item strong{
    margin:1px 0 4px;
    color:#22252a;
    font-size:11px;
    line-height:1.25;
    font-weight:900;
}

.print-product-benefit-item small{
    color:#777b83;
    font-size:9.5px;
    line-height:1.45;
}


/* Product meta */

.print-site .print-product-detail-v3 .print-product-meta-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 18px;
}

.print-site .print-product-detail-v3 .print-product-meta-item{
    min-width:0;
    padding:13px 14px;
    border:1px solid #ece8e0;
    border-radius:13px;
    background:#fff;
}

.print-site .print-product-detail-v3 .print-product-meta-item small{
    display:block;
    margin:0;
    color:#96999f;
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.print-site .print-product-detail-v3 .print-product-meta-item strong{
    display:block;
    margin-top:5px;
    color:#2a2d32;
    font-size:12px;
    line-height:1.4;
    font-weight:850;
    overflow-wrap:anywhere;
}


/* SEO promo */

.print-product-seo-promo{
    position:relative;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:18px;
    margin:22px 0;
    padding:20px;
    overflow:hidden;
    border:1px solid #e2d9c7;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #fbf7ef 0%,
        #fffdf8 58%,
        #f9f5ea 100%
    );
}

.print-product-seo-promo:after{
    content:"";
    position:absolute;
    right:-35px;
    top:-45px;
    width:150px;
    height:150px;
    border-radius:50%;
    opacity:.22;
    background-image:radial-gradient(
        circle,
        #111 1px,
        transparent 1.2px
    );
    background-size:8px 8px;
    pointer-events:none;
}

.print-product-seo-promo-mark{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-self:start;
    width:56px;
    height:56px;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 7px 20px rgba(18,18,18,.08);
}

.print-product-seo-promo-mark span{
    display:grid;
    place-items:center;
    color:#111;
    font-size:8px;
    font-weight:950;
}

.print-product-seo-promo-mark span:nth-child(1){
    background:#00aeef;
    color:#fff;
}

.print-product-seo-promo-mark span:nth-child(2){
    background:#ec008c;
    color:#fff;
}

.print-product-seo-promo-mark span:nth-child(3){
    background:#fff200;
}

.print-product-seo-promo-mark span:nth-child(4){
    background:#17181b;
    color:#fff;
}

.print-product-seo-promo-copy{
    position:relative;
    z-index:2;
    min-width:0;
}

.print-product-seo-eyebrow{
    display:block;
    margin-bottom:7px;
    color:#8b7044;
    font-size:9px;
    line-height:1.3;
    font-weight:900;
    letter-spacing:.09em;
}

.print-product-seo-promo h2{
    margin:0 0 8px!important;
    color:#1c1e22!important;
    font-size:19px!important;
    line-height:1.25!important;
    font-weight:900!important;
    letter-spacing:-.025em!important;
}

.print-product-seo-promo p{
    max-width:860px;
    margin:0!important;
    color:#69645b!important;
    font-size:11.5px!important;
    line-height:1.7!important;
}

.print-product-seo-promo p strong{
    color:#312d27;
    font-weight:900;
}


/* Order card */

.print-product-order-area{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:20px;
}

.print-order-card{
    padding:18px;
    border:1px solid #e3dfd7;
    border-radius:18px;
    background:#fff;
}

.print-order-card-cart{
    background:#fbfaf7;
}

.print-order-card-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.print-order-card-head>div{
    min-width:0;
}

.print-order-card-head small{
    display:block;
    margin-bottom:3px;
    color:#93969d;
    font-size:8.5px;
    font-weight:900;
    letter-spacing:.1em;
}

.print-order-card-head h3{
    margin:0!important;
    color:#1b1d21!important;
    font-size:17px!important;
    line-height:1.25!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
}

.print-order-step{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#111216;
    color:#fff;
    font-size:10px;
    font-weight:950;
}

.print-order-step-wa{
    background:#15995a;
    font-size:19px;
}

.print-order-variation-title{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #e8e4dd;
}

.print-order-variation-title strong,
.print-order-variation-title span{
    display:block;
}

.print-order-variation-title strong{
    color:#2a2d32;
    font-size:11px;
    font-weight:900;
}

.print-order-variation-title span{
    margin-top:3px;
    color:#858990;
    font-size:9.5px;
    line-height:1.45;
}

.print-site .print-order-card .product-variations{
    margin:0 0 12px!important;
}

.print-site .print-order-card .row-product-variation{
    margin-left:-5px;
    margin-right:-5px;
}

.print-site .print-order-card .row-product-variation>[class*="col-"]{
    padding-left:5px;
    padding-right:5px;
}

.print-cart-action-row{
    display:grid;
    grid-template-columns:128px minmax(0,1fr);
    gap:12px;
    align-items:end;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #e5e1da;
}

.print-qty-field label{
    display:block;
    margin:0 0 6px;
    color:#72767e;
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.print-site .print-order-card .number-spinner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}

.print-site .print-order-card .number-spinner .input-group{
    width:100%;
    min-height:50px;
}

.print-site .print-order-card .number-spinner .btn,
.print-site .print-order-card .number-spinner .form-control{
    height:50px!important;
    border-color:#dcd8d0!important;
    background:#fff!important;
    box-shadow:none!important;
}

.print-site .print-order-card .number-spinner .btn{
    min-width:36px;
    color:#24272c!important;
    font-size:17px;
    font-weight:900;
}

.print-site .print-order-card .number-spinner .form-control{
    min-width:46px;
    padding-left:5px;
    padding-right:5px;
    color:#1d1f23;
    font-weight:900;
}

.print-cart-button-container{
    width:100%!important;
    margin:0!important;
}

.print-site .print-order-card .btn-product-cart,
.print-site .print-order-card .button-container .btn{
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    border-radius:11px!important;
    font-size:12px!important;
    font-weight:900!important;
}


/* WhatsApp order card */

.print-order-card-wa{
    position:relative;
    overflow:hidden;
    border-color:#cde8d8;
    background:linear-gradient(
        145deg,
        #effaf3 0%,
        #f9fffb 62%,
        #eaf8ef 100%
    );
}

.print-order-card-wa:after{
    content:"";
    position:absolute;
    right:-54px;
    bottom:-68px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:#19a35f;
    opacity:.055;
    pointer-events:none;
}

.print-order-card-wa>p{
    position:relative;
    z-index:2;
    margin:0 0 13px!important;
    color:#496356!important;
    font-size:11.5px!important;
    line-height:1.7!important;
}

.print-order-card-wa>p strong{
    color:#224a35;
    font-weight:900;
}

.print-wa-topic-list{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 15px;
}

.print-wa-topic-list span{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 9px;
    border:1px solid #d1e9da;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#48705a;
    font-size:9px;
    line-height:1;
    font-weight:800;
}

.print-product-wa-button{
    position:relative;
    z-index:2;
    width:100%!important;
    min-height:52px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:12px!important;
    background:#169c5b!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:900!important;
    box-shadow:0 10px 25px rgba(13,119,67,.18);
}

.print-product-wa-button:hover{
    background:#11864d!important;
    color:#fff!important;
    transform:translateY(-1px);
}

.print-product-wa-button i{
    font-size:18px;
}

.print-wa-helper{
    position:relative;
    z-index:2;
    display:block;
    margin-top:9px;
    color:#668071!important;
    font-size:8.8px!important;
    line-height:1.45;
    text-align:center;
}


/* Trust + share */

.print-detail-trust-v3{
    display:flex!important;
    align-items:center;
    flex-wrap:wrap;
    gap:8px!important;
    margin-top:15px!important;
}

.print-detail-trust-v3 span{
    display:inline-flex!important;
    align-items:center;
    gap:6px;
    width:auto!important;
    padding:7px 9px!important;
    border:0!important;
    border-radius:999px!important;
    background:#f6f4ef;
    color:#686c73!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    text-align:left!important;
}

.print-detail-trust-v3 span i{
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:#19a15d;
}

.print-product-share-wrap{
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid #ece9e2;
}

.print-product-share-wrap .product-share{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:0!important;
}

.print-product-share-wrap .product-share label{
    margin:0!important;
    color:#8a8e95;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.print-product-share-wrap .product-share ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin:0!important;
    padding:0!important;
}

.print-product-share-wrap .product-share li{
    margin:0!important;
}

.print-product-share-wrap .product-share a{
    width:34px;
    height:34px;
    display:grid!important;
    place-items:center;
    border:1px solid #e0ddd6;
    border-radius:50%;
    background:#fff;
    color:#50545b!important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.print-product-share-wrap .product-share a:hover{
    transform:translateY(-2px);
    border-color:#bfc2c6;
    color:#111216!important;
}


/* Responsive */

@media(max-width:991px){
    .print-site .print-category-grid{
        column-count:2;
        column-gap:16px;
    }

    .print-site .print-category-grid .print-category-card:nth-child(2),
    .print-site .print-category-grid .print-category-card:nth-child(4){
        break-after:auto;
        -webkit-column-break-after:auto;
    }

    .print-site .print-category-grid .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(1) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(2) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(3) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(4) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(5) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(6) .print-category-image{
        height:260px;
    }

    .print-product-benefit-strip{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){
    .print-site .print-category-grid{
        column-count:1;
        column-gap:0;
    }

    .print-site .print-category-grid .print-category-card{
        display:block;
        margin-bottom:14px!important;
    }

    .print-site .print-category-grid .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(1) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(2) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(3) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(4) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(5) .print-category-image,
    .print-site .print-category-grid .print-category-card:nth-child(6) .print-category-image{
        height:auto;
        aspect-ratio:16/10!important;
    }

    .print-site .print-category-grid .print-category-card-body{
        padding:15px;
    }

    .print-site .print-category-grid .print-category-card-body:before{
        left:15px;
    }

    .print-site .print-category-grid .print-category-card-body h3{
        font-size:16px;
    }

    .print-site .print-product-detail-v3{
        padding:21px 17px!important;
        border-radius:18px!important;
    }

    .print-product-kicker{
        margin-bottom:13px;
    }

    .print-product-kicker-text{
        width:100%;
    }

    .print-site .print-product-detail-v3 .product-title{
        font-size:30px!important;
        line-height:1.08!important;
    }

    .print-site .print-product-detail-v3 .print-product-price-row{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .print-site .print-product-detail-v3 .print-product-meta-grid{
        grid-template-columns:1fr;
    }

    .print-product-seo-promo{
        grid-template-columns:1fr;
        gap:13px;
        padding:17px;
    }

    .print-product-seo-promo-mark{
        width:48px;
        height:48px;
    }

    .print-product-seo-promo h2{
        font-size:17px!important;
    }

    .print-order-card{
        padding:15px;
        border-radius:15px;
    }

    .print-cart-action-row{
        grid-template-columns:1fr;
    }

    .print-site .print-order-card .number-spinner{
        max-width:150px!important;
    }

    .print-detail-trust-v3{
        align-items:stretch;
        flex-direction:column;
    }

    .print-detail-trust-v3 span{
        width:100%!important;
    }
}

/* =========================================================
   PRODUCT DETAIL V4
   LEFT MEDIA COLUMN — REMOVE EMPTY SPACE
   ========================================================= */

@media(min-width:768px){

    /*
     * Bootstrap row dibuat stretch.
     * Dengan ini kolom kiri akan mengikuti tinggi kolom kanan.
     */
    .print-site
    .print-product-page
    .print-product-main-row{
        align-items:stretch;
    }


    .print-site
    .print-product-page
    .print-product-media-column{
        display:flex;
        flex-direction:column;
    }


    .print-site
    .print-product-page
    .print-product-media-inner{
        display:flex;
        flex:1 1 auto;
        flex-direction:column;
        width:100%;
        min-height:100%;
    }


    .print-site
    .print-product-page
    .print-product-gallery-v3{
        flex:0 0 auto;
        width:100%;
    }


    /*
     * Area ini yang otomatis mengambil seluruh ruang
     * kosong di bawah product gallery.
     */
    .print-site
    .print-product-page
    .print-product-media-fill{
        flex:1 1 auto;
        min-height:330px;
    }

}


/* =========================================================
   PRINT MEDIA FILL CARD
   ========================================================= */

.print-product-media-fill{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    margin-top:18px;
    padding:26px;
    overflow:hidden;

    border:1px solid #25272b;
    border-radius:24px;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,.08) 1px,
            transparent 1.5px
        ),
        linear-gradient(
            145deg,
            #17191d 0%,
            #111216 58%,
            #202227 100%
        );

    background-size:
        9px 9px,
        auto;

    color:#fff;

    box-shadow:
        0 18px 45px
        rgba(15,16,20,.11);
}


/*
 * Soft printing glow
 */
.print-product-media-fill:before{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    left:-100px;
    bottom:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,239,.18),
            rgba(0,174,239,0) 67%
        );

    pointer-events:none;
}


/*
 * Magenta glow
 */
.print-product-media-fill:after{
    content:"";
    position:absolute;

    width:240px;
    height:240px;

    right:-100px;
    top:-105px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(236,0,140,.13),
            rgba(236,0,140,0) 68%
        );

    pointer-events:none;
}


/* =========================================================
   TOP
   ========================================================= */

.print-product-media-fill-top{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:42px;
}


.print-media-cmyk{
    display:grid;

    grid-template-columns:
        repeat(4,28px);

    height:28px;

    overflow:hidden;

    border-radius:7px;
}


.print-media-cmyk span{
    display:grid;
    place-items:center;

    width:28px;
    height:28px;

    font-size:8px;
    font-weight:950;
}


.print-media-cmyk span:nth-child(1){
    background:#00aeef;
    color:#fff;
}


.print-media-cmyk span:nth-child(2){
    background:#ec008c;
    color:#fff;
}


.print-media-cmyk span:nth-child(3){
    background:#fff200;
    color:#151515;
}


.print-media-cmyk span:nth-child(4){
    background:#050505;
    color:#fff;
}


.print-media-eyebrow{
    color:rgba(255,255,255,.48);

    font-size:8.5px;
    line-height:1;

    font-weight:900;

    letter-spacing:.15em;

    text-align:right;
}


/* =========================================================
   MAIN COPY
   ========================================================= */

.print-product-media-fill-content{
    position:relative;
    z-index:2;

    margin:auto 0;
}


.print-media-number{
    display:block;

    margin-bottom:12px;

    color:#d6b56c;

    font-size:9px;

    font-weight:900;

    letter-spacing:.14em;
}


.print-product-media-fill-content h2{
    max-width:460px;

    margin:0 0 18px!important;

    color:#fff!important;

    font-size:
        clamp(
            28px,
            2.5vw,
            42px
        )!important;

    line-height:1.03!important;

    font-weight:950!important;

    letter-spacing:
        -.045em!important;
}


.print-product-media-fill-content h2 em{
    display:block;

    color:#fff200;

    font-style:normal;
}


.print-product-media-fill-content>p{
    max-width:510px;

    margin:0 0 28px!important;

    color:
        rgba(
            255,
            255,
            255,
            .66
        )!important;

    font-size:12px!important;

    line-height:1.75!important;
}


.print-product-media-fill-content>p strong{
    color:#fff;

    font-weight:850;
}


/* =========================================================
   FEATURES
   ========================================================= */

.print-media-feature-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:9px;
}


.print-media-feature{
    display:grid;

    grid-template-columns:
        29px minmax(0,1fr);

    gap:9px;

    align-items:start;

    padding:11px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:12px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    backdrop-filter:
        blur(5px);
}


.print-media-feature>span{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size:7.5px;

    font-weight:950;
}


.print-media-feature strong,
.print-media-feature small{
    display:block;
}


.print-media-feature strong{
    margin:0 0 3px;

    color:#fff;

    font-size:9.5px;

    line-height:1.35;

    font-weight:900;
}


.print-media-feature small{
    color:
        rgba(
            255,
            255,
            255,
            .46
        );

    font-size:8.5px;

    line-height:1.45;
}


/* =========================================================
   FOOTER
   ========================================================= */

.print-product-media-fill-footer{
    position:relative;
    z-index:2;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-top:38px;

    padding-top:17px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.print-product-media-fill-footer small,
.print-product-media-fill-footer strong{
    display:block;
}


.print-product-media-fill-footer small{
    margin-bottom:4px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size:7.5px;

    font-weight:900;

    letter-spacing:.12em;
}


.print-product-media-fill-footer strong{
    color:#fff;

    font-size:11px;

    line-height:1.3;

    font-weight:900;
}


/* =========================================================
   REGISTRATION DOTS
   ========================================================= */

.print-media-registration{
    display:flex;
    align-items:center;
    gap:7px;
}


.print-media-registration i{
    position:relative;

    display:block;

    width:15px;
    height:15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .32
        );

    border-radius:50%;
}


.print-media-registration i:before,
.print-media-registration i:after{
    content:"";

    position:absolute;

    background:
        rgba(
            255,
            255,
            255,
            .25
        );
}


.print-media-registration i:before{
    left:50%;
    top:-4px;

    width:1px;
    height:21px;

    transform:
        translateX(-50%);
}


.print-media-registration i:after{
    left:-4px;
    top:50%;

    width:21px;
    height:1px;

    transform:
        translateY(-50%);
}


/* =========================================================
   PRODUCT IMAGE/GALLERY CARD IMPROVEMENT
   ========================================================= */

.print-site
.print-product-gallery-v3{
    position:relative;

    padding:12px;

    border:
        1px solid
        #e4e0d8;

    border-radius:22px;

    background:#f9f8f5;

    box-shadow:
        0 8px 28px
        rgba(22,23,27,.045);
}


.print-site
.print-product-gallery-v3 img{
    border-radius:15px;
}


/* =========================================================
   COLUMN ALIGNMENT
   ========================================================= */

.print-site
.print-product-info-column{
    display:flex;
    flex-direction:column;
}


.print-site
.print-product-info-column
.product-content-details{
    width:100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(
    min-width:768px
)
and
(
    max-width:991px
){

    .print-product-media-fill{
        padding:20px;

        min-height:300px;
    }


    .print-product-media-fill-top{
        margin-bottom:28px;
    }


    .print-product-media-fill-content h2{
        font-size:27px!important;
    }


    .print-media-feature-grid{
        grid-template-columns:1fr;
    }


    .print-media-feature:nth-child(n+3){
        display:none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    /*
     * Di mobile tidak perlu dibuat sama tinggi.
     * Semua kembali normal vertical.
     */
    .print-site
    .print-product-page
    .print-product-media-column{
        display:block;
    }


    .print-site
    .print-product-page
    .print-product-media-inner{
        display:block;

        min-height:0;
    }


    .print-product-media-fill{
        min-height:0;

        margin-top:12px;

        margin-bottom:20px;

        padding:19px 17px;

        border-radius:17px;
    }


    .print-product-media-fill-top{
        margin-bottom:26px;
    }


    .print-media-cmyk{
        grid-template-columns:
            repeat(4,24px);

        height:24px;
    }


    .print-media-cmyk span{
        width:24px;
        height:24px;

        font-size:7px;
    }


    .print-media-eyebrow{
        font-size:7px;
    }


    .print-product-media-fill-content h2{
        margin-bottom:13px!important;

        font-size:27px!important;
    }


    .print-product-media-fill-content>p{
        margin-bottom:20px!important;

        font-size:10.5px!important;
    }


    .print-media-feature-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .print-media-feature{
        grid-template-columns:1fr;

        gap:7px;

        min-height:112px;
    }


    .print-media-feature>span{
        width:25px;
        height:25px;
    }


    .print-product-media-fill-footer{
        margin-top:26px;
    }


    .print-site
    .print-product-gallery-v3{
        padding:8px;

        border-radius:17px;
    }

}

/* =========================================================
   PRODUCT MEDIA PANEL V2
   Redesigned printing specification panel
   ========================================================= */

.print-product-media-fill-v2{
    position:relative;

    display:flex;
    flex:1 1 auto;
    flex-direction:column;

    min-height:520px;

    margin-top:18px;
    padding:28px;

    overflow:hidden;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #121316 0%,
            #191b20 55%,
            #0e0f12 100%
        );

    color:#fff;

    box-shadow:
        0 22px 55px
        rgba(17,18,22,.15);
}


/* cyan glow */

.print-product-media-fill-v2:before{
    content:"";

    position:absolute;

    left:-100px;
    bottom:-120px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,239,.20) 0%,
            rgba(0,174,239,0) 68%
        );

    pointer-events:none;
}


/* magenta glow */

.print-product-media-fill-v2:after{
    content:"";

    position:absolute;

    right:-90px;
    top:-100px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(236,0,140,.17) 0%,
            rgba(236,0,140,0) 70%
        );

    pointer-events:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.print-media-v2-header{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:52px;
}


.print-media-v2-brand{
    display:flex;
    align-items:center;

    gap:13px;
}


.print-media-v2-brand small,
.print-media-v2-brand strong{
    display:block;
}


.print-media-v2-brand small{
    margin-bottom:3px;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size:8px;
    line-height:1;

    font-weight:900;

    letter-spacing:.14em;
}


.print-media-v2-brand strong{
    color:#fff;

    font-size:11px;
    line-height:1.2;

    font-weight:900;

    letter-spacing:.04em;
}


/* CMYK */

.print-media-v2-cmyk{
    display:grid;

    grid-template-columns:
        repeat(2,21px);

    grid-template-rows:
        repeat(2,21px);

    overflow:hidden;

    border-radius:7px;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.22);
}


.print-media-v2-cmyk span{
    display:grid;
    place-items:center;

    width:21px;
    height:21px;

    font-size:6.5px;

    font-weight:950;
}


.print-media-v2-cmyk .c{
    background:#00aeef;
}


.print-media-v2-cmyk .m{
    background:#ec008c;
}


.print-media-v2-cmyk .y{
    background:#fff200;
    color:#111;
}


.print-media-v2-cmyk .k{
    background:#050505;
}


/* product id */

.print-media-v2-code{
    display:grid;
    place-items:center;

    min-width:48px;
    height:32px;

    padding:0 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:999px;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:8px;

    font-weight:900;

    letter-spacing:.13em;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.print-media-v2-main{
    position:relative;
    z-index:2;

    max-width:540px;

    margin-bottom:38px;
}


.print-media-v2-eyebrow{
    display:block;

    margin-bottom:13px;

    color:#d0ad62;

    font-size:8px;

    font-weight:900;

    letter-spacing:.16em;
}


.print-media-v2-main h2{
    margin:0 0 16px!important;

    color:#fff!important;

    font-size:
        clamp(
            34px,
            3vw,
            50px
        )!important;

    line-height:.98!important;

    font-weight:950!important;

    letter-spacing:
        -.05em!important;
}


.print-media-v2-main h2 span{
    display:block;

    margin-top:5px;

    color:#fff200;
}


.print-media-v2-main p{
    max-width:500px;

    margin:0!important;

    color:
        rgba(
            255,
            255,
            255,
            .61
        )!important;

    font-size:11.5px!important;

    line-height:1.75!important;
}


.print-media-v2-main p strong{
    color:#fff;

    font-weight:850;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.print-media-v2-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:10px;

    margin-bottom:40px;
}


.print-media-v2-card{
    position:relative;

    display:grid;

    grid-template-columns:
        34px minmax(0,1fr);

    gap:11px;

    min-height:92px;

    padding:14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .095
        );

    border-radius:14px;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    backdrop-filter:
        blur(8px);

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}


.print-media-v2-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(
            255,
            255,
            255,
            .17
        );

    background:
        rgba(
            255,
            255,
            255,
            .075
        );
}


.print-media-v2-number{
    display:grid;
    place-items:center;

    width:32px;
    height:32px;

    border-radius:50%;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    color:#fff;

    font-size:8px;

    font-weight:950;
}


.print-media-v2-card strong,
.print-media-v2-card small{
    display:block;
}


.print-media-v2-card strong{
    margin:2px 0 5px;

    color:#fff;

    font-size:10px;

    font-weight:900;

    line-height:1.3;
}


.print-media-v2-card small{
    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    font-size:8.5px;

    line-height:1.5;
}


/* =========================================================
   FOOTER
   ========================================================= */

.print-media-v2-bottom{
    position:relative;
    z-index:2;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-top:auto;

    padding-top:20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );
}


.print-media-v2-bottom small,
.print-media-v2-bottom strong{
    display:block;
}


.print-media-v2-bottom small{
    margin-bottom:4px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size:7px;

    font-weight:900;

    letter-spacing:.13em;
}


.print-media-v2-bottom strong{
    color:#fff;

    font-size:12px;

    line-height:1.35;

    font-weight:900;
}


/* =========================================================
   REGISTRATION MARKS
   ========================================================= */

.print-media-v2-register{
    display:flex;

    align-items:center;

    gap:8px;
}


.print-media-v2-register span{
    position:relative;

    display:block;

    width:16px;
    height:16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .28
        );

    border-radius:50%;
}


.print-media-v2-register span:before{
    content:"";

    position:absolute;

    left:50%;
    top:3px;

    width:1px;
    height:8px;

    transform:
        translateX(-50%);

    background:
        rgba(
            255,
            255,
            255,
            .22
        );
}


.print-media-v2-register span:after{
    content:"";

    position:absolute;

    left:3px;
    top:50%;

    width:8px;
    height:1px;

    transform:
        translateY(-50%);

    background:
        rgba(
            255,
            255,
            255,
            .22
        );
}


/* =========================================================
   ENSURE LEFT COLUMN STRETCHES
   ========================================================= */

@media(min-width:768px){

    .print-product-main-row{
        align-items:stretch;
    }


    .print-product-media-column{
        display:flex;
        flex-direction:column;
    }


    .print-product-media-inner{
        display:flex;
        flex:1 1 auto;
        flex-direction:column;

        width:100%;
    }


    .print-product-media-fill-v2{
        flex:1 1 auto;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(
    min-width:768px
)
and
(
    max-width:991px
){

    .print-product-media-fill-v2{
        min-height:460px;

        padding:20px;
    }


    .print-media-v2-header{
        margin-bottom:35px;
    }


    .print-media-v2-main h2{
        font-size:30px!important;
    }


    .print-media-v2-grid{
        grid-template-columns:1fr;
    }


    .print-media-v2-card:nth-child(n+3){
        display:none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    .print-product-media-fill-v2{
        min-height:0;

        margin-top:12px;
        margin-bottom:20px;

        padding:20px 17px;

        border-radius:18px;
    }


    .print-media-v2-header{
        margin-bottom:32px;
    }


    .print-media-v2-brand strong{
        font-size:10px;
    }


    .print-media-v2-main{
        margin-bottom:26px;
    }


    .print-media-v2-main h2{
        font-size:30px!important;
    }


    .print-media-v2-main p{
        font-size:10.5px!important;
    }


    .print-media-v2-grid{
        grid-template-columns:1fr;

        gap:8px;

        margin-bottom:28px;
    }


    .print-media-v2-card{
        min-height:auto;
    }


    .print-media-v2-bottom{
        padding-top:16px;
    }

}