/* ================================
   PRODUCT DETAIL PAGE
================================ */

:root {
    --pd-max: 1200px;
    --pd-px:  48px;
    --pd-gap: 60px;
    --text:   #1a1a1a;
    --muted:  #969784;
    --line:   #e2ddd4;
    --sand:   #e8e2d9;
    --thumb-h: 80px;
}

.product-page {
    max-width: var(--pd-max);
    margin: 0 auto;
    padding: 40px var(--pd-px) 80px;
}

/* =============================================
   PRODUCT GRID
   align-items: stretch — kedua kolom SAMA tinggi
   sehingga tombol bisa sejajar bawah foto
============================================= */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pd-gap);
    align-items: stretch;   /* ⭐ bukan start — stretch agar tinggi sama */
}

/* =============================================
   GALLERY
============================================= */

.main-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    aspect-ratio: 2 / 3;
    grid-column: 1;
    grid-row: 1;
}

.slide-track {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    height: 100%;
}
.slide { flex: 0 0 100%; width: 100%;  height: 100%; }

.slide img {
    width: 100%;
    height: 100%;              /* ⭐ isi penuh container */
    display: block;
    object-fit: cover;         /* fill penuh kiri-kanan-atas */
    object-position: top center;
}

.slider-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0;
    background: rgba(255,255,255,.80); backdrop-filter: blur(4px);
    cursor: pointer; font-size: 22px; font-weight: 700; color: #333;
    display: grid; place-items: center;
    z-index: 5; border-radius: 50%; line-height: 1; transition: background .18s;
}
.slider-arrow:hover { background: rgba(255,255,255,.96); }
.slider-arrow.prev { left: 12px; }
.slider-arrow.next { right: 12px; }

/* THUMBNAILS */
.thumbs {
    grid-column: 1;
    grid-row: 2;
    display: flex; gap: 6px; margin-top: 8px;
    height: var(--thumb-h); width: 100%;
    overflow: hidden; position: relative; align-items: stretch;
    flex-shrink: 0;   /* thumbnail tidak menyusut */
}
.thumbs-track {
    display: flex; gap: 6px; height: 100%; width: 100%;
    transition: transform .35s cubic-bezier(.4,0,.2,1); flex: 1; min-width: 0;
}
.thumb {
    flex: 0 0 calc(25% - 4.5px); height: 100%;
    overflow: hidden; cursor: pointer; opacity: .5;
    transition: opacity .22s, border-color .22s; border: 1.5px solid transparent;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.thumb.active { opacity: 1; border-color: var(--text); }
.thumb:hover  { opacity: .82; }
.thumbs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 22px; height: 22px;
    background: rgba(255,255,255,.92); border: none; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, opacity .18s; opacity: 0; border-radius: 50%;
}
.thumbs:hover .thumbs-arrow { opacity: 1; }
.thumbs-arrow:hover { background: #fff; }
.thumbs-arrow.t-prev { left: 0; }
.thumbs-arrow.t-next { right: 0; }
.thumbs-arrow.hidden { display: none; }

/* =============================================
   INFO PANEL
   Flex column: konten atas tetap di atas,
   form (qty + buttons) di-push ke BAWAH
   agar sejajar dengan bottom foto
============================================= */
.info-panel {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    grid-column: 2;
    grid-row: 1;
}

/* NAME → outline */
.info-name {
    font-size: 26px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text); line-height: 1.2;
    margin: 0 0 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

/* PRICE → outline */
.info-price {
    font-size: 22px; font-weight: 400; color: var(--text);
    letter-spacing: .3px;
    margin: 0 0 20px; padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.section-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--text); margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.size-guide-link {
    font-size: 11px; font-weight: 400; letter-spacing: .5px;
    text-transform: none; color: var(--muted);
    text-decoration: underline; cursor: pointer; transition: color .2s;
}
.size-guide-link:hover { color: var(--text); }

/* SIZE */
.size-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 80px; }
.size-opt {
    min-width: 52px; height: 46px; padding: 0 14px;
    border: 1px solid var(--line);
    background: transparent; font-size: 13px; font-weight: 500;
    letter-spacing: .5px; color: var(--text); cursor: pointer;
    border-radius: 0; font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.size-opt:hover  { border-color: var(--text); }
.size-opt.active { background: var(--text); color: #fff; border-color: var(--text); }

/* COLOR */
.color-options { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.color-swatch {
    width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform .18s; position: relative; flex-shrink: 0;
}
.color-swatch.active::after {
    content: ''; position: absolute; inset: -5px;
    border-radius: 50%; border: 1.5px solid var(--muted);
}
.color-swatch:hover { transform: scale(1.08); }

/* =============================================
   FORM (qty + buttons)
   ⭐ margin-top: auto — dorong ke BAWAH
   sejajar dengan bottom foto utama
============================================= */
#addToCartForm {
    margin-top: auto;   /* push buttons to bottom of info-panel */
    width: 100%;
}

.section-label.qty-label { margin-top: 0; margin-bottom: 10px; }

/* QTY — full width */
.qty-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    width: 282px;
    margin-bottom: 55px;
    box-sizing: border-box;
}
.qty-btn {
    width: 56px; height: 76px; border: 0; background: transparent;
    font-size: 18px; color: #aaa; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s; font-family: inherit; flex-shrink: 0;
}
.qty-btn:hover { color: var(--text); background: rgba(0,0,0,.03); }
.qty-input {
    flex: 1; height: 80px; border: 0;
    text-align: center; font-size: 16px; font-weight: 400;
    background: transparent; color: var(--text); font-family: inherit;
    -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* BUTTONS — full width, side by side */
.btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; width: 100%;
}
.btn-cart,
.btn-buy {
    height: 72px; border: 0; border-radius: 0;
    font-size: 12px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s; white-space: nowrap; width: 100%;
}
.btn-cart          { background: #1a1a1a; color: #fff; }
.btn-cart:hover    { opacity: .82; }
.btn-cart:disabled { opacity: .5; cursor: not-allowed; }
.btn-buy           { background: #979785; color: #fff; }
.btn-buy:hover     { opacity: .82; }

/* =============================================
   BELOW-FOLD
============================================= */
.product-below-fold {
    margin-top: 56px; padding-top: 36px;
    border-top: 1px solid var(--line);
}
.product-description {
    font-size: 15px; color: #555; line-height: 1.9;
    max-width: 720px; padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.product-materials-bar { padding: 28px 0; max-width: 720px; }
.materials-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
}
.materials-text { font-size: 15px; color: #555; line-height: 1.9; }

/* SIZE GUIDE MODAL */
.sg-modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,.48);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px; animation: sgFadeIn .22s forwards;
}
.sg-modal {
    background: #fff; max-width: 520px; width: 100%;
    padding: 36px; position: relative;
    max-height: 90vh; overflow-y: auto;
    animation: sgSlideUp .25s cubic-bezier(.4,0,.2,1) forwards;
}
.sg-modal h3 {
    font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; margin-bottom: 20px; color: var(--text);
}
.sg-modal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sg-modal th {
    padding: 10px 12px; background: #f5f2ec;
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
    border-bottom: 1px solid var(--line); text-align: center;
}
.sg-modal th:first-child { text-align: left; }
.sg-modal td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); color: #555; }
.sg-modal td:first-child { text-align: left; font-weight: 600; color: var(--text); }
.sg-close {
    position: absolute; top: 14px; right: 16px;
    border: 0; background: transparent; font-size: 24px;
    color: var(--muted); cursor: pointer; line-height: 1;
    font-family: inherit; transition: color .2s;
}
.sg-close:hover { color: var(--text); }
@keyframes sgFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes sgSlideUp { from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1} }

.pd-toast {
    position: fixed; bottom: 28px; right: 28px;
    background: var(--text); color: #fff;
    padding: 14px 22px; font-size: 13px; font-weight: 600;
    letter-spacing: .3px; z-index: 10000;
    animation: toastIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes toastIn { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

/* =============================================
   RESPONSIVE — SEMUA UKURAN LAYAR
   320px s/d 2560px+
============================================= */

/* ─────────────────────────────────────────
   4K / Ultra-wide  ≥ 2560px
───────────────────────────────────────── */
@media (min-width: 2560px) {
    :root { --pd-max: 1600px; --pd-px: 80px; --pd-gap: 100px; --thumb-h: 110px; }
    .info-name  { font-size: 36px; }
    .info-price { font-size: 28px; }
    .qty-wrap { width: 320px; margin-bottom: 70px; }
    .size-options { margin-bottom: 70px; }
    .color-options { margin-bottom: 36px; }
    .size-opt { min-width: 60px; height: 52px; font-size: 14px; }
    .qty-btn, .qty-input { height: 64px; }
    .btn-cart, .btn-buy { height: 64px; font-size: 13px; }
}

/* ─────────────────────────────────────────
   QHD / 2K  1920px – 2559px
───────────────────────────────────────── */
@media (min-width: 1920px) and (max-width: 2559px) {
    :root { --pd-max: 1480px; --pd-px: 72px; --pd-gap: 90px; --thumb-h: 100px; }
    .info-name  { font-size: 32px; }
    .info-price { font-size: 26px; }
    .qty-wrap { width: 300px; margin-bottom: 65px; }
    .size-options { margin-bottom: 65px; }
    .color-options { margin-bottom: 32px; }
    .size-opt { min-width: 56px; height: 50px; font-size: 14px; }
    .qty-btn, .qty-input { height: 60px; }
    .btn-cart, .btn-buy { height: 60px; font-size: 13px; }
}

/* ─────────────────────────────────────────
   Large desktop  1600px – 1919px
───────────────────────────────────────── */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root { --pd-max: 1400px; --pd-px: 68px; --pd-gap: 84px; --thumb-h: 92px; }
    .info-name  { font-size: 30px; }
    .info-price { font-size: 24px; }
    .qty-wrap { width: 290px; margin-bottom: 12px; }
    .size-options { margin-bottom: 30px; }
    .color-options { margin-bottom: 30px; }
}

/* ─────────────────────────────────────────
   Desktop  1400px – 1599px
───────────────────────────────────────── */
@media (min-width: 1400px) and (max-width: 1599px) {
    :root { --pd-max: 1360px; --pd-px: 64px; --pd-gap: 80px; --thumb-h: 90px; }
    .info-name  { font-size: 28px; }
    .info-price { font-size: 23px; }
    .qty-wrap { width: 282px; margin-bottom: 22px; }
    .size-options { margin-bottom: 30px; }
}

/* ─────────────────────────────────────────
   Desktop standard  1280px – 1399px
   (nilai base: 1200px, hanya tweak tipis)
───────────────────────────────────────── */
@media (max-width: 1399px) and (min-width: 1281px) {
    :root { --pd-px: 44px; --pd-gap: 56px; --thumb-h: 80px; }
    .info-name  { font-size: 26px; }
    .info-price { font-size: 22px; }
    .qty-wrap { width: 282px; margin-bottom: 31px; }
    .size-options { margin-bottom: 28px; }
}

/* ─────────────────────────────────────────
   Desktop medium  1100px – 1280px
───────────────────────────────────────── */
@media (max-width: 1280px) and (min-width: 1101px) {
    :root { --pd-px: 40px; --pd-gap: 48px; --thumb-h: 76px; }
    .info-name  { font-size: 23px; }
    .info-price { font-size: 20px; }
    .size-opt   { min-width: 46px; height: 42px; font-size: 12px; }
    .qty-btn, .qty-input { height: 52px; }
    .btn-cart, .btn-buy { height: 52px; }
    .qty-wrap { width: 262px; margin-bottom: 50px; }
    .size-options { margin-bottom: 40px; }
    .color-options { margin-bottom: 26px; }
}

/* ─────────────────────────────────────────
   Desktop small / Laptop  1025px – 1100px
───────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 1025px) {
    :root { --pd-px: 32px; --pd-gap: 40px; --thumb-h: 72px; }
    .info-name  { font-size: 21px; }
    .info-price { font-size: 19px; }
    .size-opt   { min-width: 44px; height: 41px; padding: 0 11px; font-size: 12px; }
    .qty-btn, .qty-input { height: 50px; }
    .btn-cart, .btn-buy { height: 51px; font-size: 11px; letter-spacing: 1.6px; }
    .btn-row    { gap: 10px; }
    .qty-wrap { width: 240px; margin-bottom: 44px; }
    .size-options { margin-bottom: 44px; }
    .color-options { margin-bottom: 24px; }
}

/* ─────────────────────────────────────────
   Tablet landscape  901px – 1024px
───────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px) {
    :root { --pd-px: 28px; --pd-gap: 36px; --thumb-h: 70px; }
    .info-name  { font-size: 20px; }
    .info-price { font-size: 18px; }
    .size-opt   { min-width: 42px; height: 40px; padding: 0 10px; font-size: 12px; }
    .color-swatch { width: 42px; height: 42px; }
    .qty-btn, .qty-input { height: 48px; }
    .btn-cart, .btn-buy { height: 50px; font-size: 11px; letter-spacing: 1.5px; }
    .btn-row    { gap: 8px; }
    .qty-wrap { width: 210px; margin-bottom: 38px; }
    .size-options { margin-bottom: 38px; }
    .color-options { margin-bottom: 22px; }
}

/* ─────────────────────────────────────────
   Tablet portrait  768px – 900px  → single column
───────────────────────────────────────── */
@media (max-width: 900px) {
    :root { --pd-px: 24px; --thumb-h: 80px; }
    .product-page   { padding-top: 24px; padding-bottom: 60px; }
    .product-grid   { grid-template-columns: 1fr; align-items: start; gap: 16px; }
    .main-img-wrap  { max-width: 520px; margin: 0 auto; width: 100%; grid-column: 1; grid-row: auto; order: 1; }
    .thumbs         { max-width: 520px; margin: 0 auto; width: 100%; grid-column: 1; grid-row: auto; order: 2; margin-top: 0; }
    .info-panel     { grid-column: 1; grid-row: auto; order: 3; }
    .info-name      { font-size: 24px; }
    .info-price     { font-size: 20px; }
    .qty-wrap       { width: 100%; margin-bottom: 18px; }
    .size-options   { margin-bottom: 20px; }
    .color-options  { margin-bottom: 20px; }
    #addToCartForm  { margin-top: 24px; }
    .product-below-fold { margin-top: 36px; }
}

/* ─────────────────────────────────────────
   Large phone landscape / tablet  769px – 900px
   sudah tercakup di atas (max-width: 900px)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   Tablet portrait (iPad mini/Air)  768px
───────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --pd-px: 20px; --thumb-h: 72px; }
    .gallery        { max-width: 100%; }
    .info-name      { font-size: 22px; }
    .info-price     { font-size: 18px; }
    .qty-wrap       { width: 100%; margin-bottom: 16px; }
    .size-options   { margin-bottom: 18px; }
    .color-options  { margin-bottom: 18px; }
    .btn-cart, .btn-buy { height: 52px; font-size: 11px; letter-spacing: 1.5px; }
    .sg-modal       { padding: 24px 20px; }
}

/* ─────────────────────────────────────────
   Large phone  640px – 767px
───────────────────────────────────────── */
@media (max-width: 640px) {
    :root { --pd-px: 18px; --thumb-h: 66px; }
    .info-name      { font-size: 20px; }
    .info-price     { font-size: 17px; }
    .qty-wrap       { width: 100%; margin-bottom: 14px; }
    .size-options   { margin-bottom: 16px; }
    .color-options  { margin-bottom: 16px; }
    .size-opt       { min-width: 44px; height: 42px; font-size: 12px; }
    .color-swatch   { width: 42px; height: 42px; }
    .qty-btn, .qty-input { height: 52px; }
    .btn-cart, .btn-buy  { height: 52px; }
}

/* ─────────────────────────────────────────
   Phone standard  540px – 639px
───────────────────────────────────────── */
@media (max-width: 540px) {
    :root { --pd-px: 16px; --thumb-h: 62px; }
    .product-page   { padding-top: 16px; padding-bottom: 48px; }
    .info-name      { font-size: 18px; letter-spacing: 1px; }
    .info-price     { font-size: 16px; }
    .section-label  { font-size: 10px; letter-spacing: 1.4px; }
    .qty-wrap       { width: 100%; margin-bottom: 14px; }
    .size-options   { margin-bottom: 14px; }
    .color-options  { margin-bottom: 14px; }
    .size-opt       { min-width: 40px; height: 40px; padding: 0 10px; font-size: 11px; }
    .color-swatch   { width: 40px; height: 40px; }
    .btn-row        { grid-template-columns: 1fr; gap: 10px; }
    .btn-cart, .btn-buy { height: 52px; width: 100%; font-size: 12px; }
    .slider-arrow   { width: 32px; height: 32px; font-size: 18px; }
    .pd-toast       { bottom: 16px; right: 16px; left: 16px; text-align: center; }
}

/* ─────────────────────────────────────────
   iPhone 14 Pro / standard  390px – 539px
───────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --pd-px: 16px; --thumb-h: 58px; }
    .info-name      { font-size: 17px; }
    .info-price     { font-size: 15px; margin-bottom: 16px; padding-bottom: 16px; }
    .info-name      { margin-bottom: 14px; padding-bottom: 14px; }
    .size-opt       { min-width: 38px; height: 38px; padding: 0 9px; font-size: 11px; }
    .color-swatch   { width: 38px; height: 38px; }
    .qty-btn        { width: 48px; }
    .qty-btn, .qty-input { height: 50px; }
    .btn-cart, .btn-buy  { height: 50px; font-size: 11px; }
    .thumbs         { gap: 5px; }
    .thumb          { flex: 0 0 calc(25% - 3.75px); }
}

/* ─────────────────────────────────────────
   iPhone SE / Android  375px – 414px
───────────────────────────────────────── */
@media (max-width: 414px) {
    :root { --pd-px: 14px; --thumb-h: 55px; }
    .info-name      { font-size: 16px; letter-spacing: 0.8px; }
    .info-price     { font-size: 15px; }
    .section-label  { font-size: 10px; letter-spacing: 1.2px; }
    .size-opt       { min-width: 36px; height: 36px; padding: 0 8px; font-size: 11px; }
    .color-swatch   { width: 36px; height: 36px; }
    .qty-btn        { width: 46px; }
    .qty-btn, .qty-input { height: 48px; }
    .btn-cart, .btn-buy  { height: 48px; font-size: 11px; letter-spacing: 1.4px; }
    .btn-row        { gap: 8px; }
    .thumbs         { gap: 4px; }
    .thumb          { flex: 0 0 calc(25% - 3px); }
    .sg-modal       { padding: 20px 16px; }
    .sg-modal table { font-size: 12px; }
}

/* ─────────────────────────────────────────
   Android small / iPhone SE 1st gen  360px – 374px
───────────────────────────────────────── */
@media (max-width: 375px) {
    :root { --pd-px: 14px; --thumb-h: 52px; }
    .info-name      { font-size: 15px; letter-spacing: 0.6px; }
    .info-price     { font-size: 14px; }
    .size-opt       { min-width: 34px; height: 35px; padding: 0 7px; font-size: 10px; }
    .color-swatch   { width: 34px; height: 34px; }
    .btn-cart, .btn-buy { height: 46px; font-size: 10px; letter-spacing: 1.2px; }
    .slider-arrow   { width: 28px; height: 28px; font-size: 15px; }
}

/* ─────────────────────────────────────────
   Very small  320px – 359px
───────────────────────────────────────── */
@media (max-width: 360px) {
    :root { --pd-px: 12px; --thumb-h: 48px; }
    .product-page   { padding-top: 12px; padding-bottom: 40px; }
    .info-name      { font-size: 14px; letter-spacing: 0.4px; }
    .info-price     { font-size: 14px; }
    .section-label  { font-size: 9px; letter-spacing: 1px; margin-bottom: 8px; }
    .size-opt       { min-width: 32px; height: 33px; padding: 0 6px; font-size: 10px; }
    .color-swatch   { width: 32px; height: 32px; }
    .color-options  { gap: 8px; margin-bottom: 12px; }
    .size-options   { gap: 6px; }
    .qty-btn        { width: 40px; }
    .qty-btn, .qty-input { height: 44px; }
    .btn-cart, .btn-buy  { height: 44px; font-size: 10px; letter-spacing: 1px; }
    .btn-row        { gap: 6px; }
    .slider-arrow   { width: 26px; height: 26px; font-size: 14px; }
    .thumbs         { gap: 3px; }
    .thumb          { flex: 0 0 calc(25% - 2.25px); }
    .pd-toast       { font-size: 12px; padding: 10px 14px; }
    .sg-modal       { padding: 16px 12px; }
}

/* ─────────────────────────────────────────
   Minimum support  < 320px
───────────────────────────────────────── */
@media (max-width: 319px) {
    :root { --pd-px: 10px; --thumb-h: 44px; }
    .product-grid   { gap: 16px; }
    .info-name      { font-size: 13px; }
    .info-price     { font-size: 13px; }
    .btn-cart, .btn-buy { height: 42px; font-size: 9px; letter-spacing: 0.8px; }
    .size-opt       { min-width: 28px; height: 30px; padding: 0 5px; font-size: 9px; }
    .color-swatch   { width: 28px; height: 28px; }
}

/* ==============================================
   SPECIFIC DESKTOP RESOLUTIONS
   Tambahan per ukuran layar dari screenshot
   Nilai disamain dengan parent range
   (bisa diedit per resolusi tanpa ubah yang lain)
=============================================== */

/* ─────────────────────────────────────────────
   1024 x 600  (short screen / small laptop)
   Inherits: 901-1024px range values
   Khusus: form margin dikurangi krn layar pendek
───────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px) and (max-height: 600px) {
    :root { --pd-px: 28px; --pd-gap: 36px; --thumb-h: 65px; }
    .info-name  { font-size: 18px; }
    .info-price { font-size: 16px; }
    .size-opt   { min-width: 40px; height: 38px; padding: 0 9px; font-size: 11px; }
    .color-swatch { width: 38px; height: 38px; }
    .qty-btn, .qty-input { height: 44px; }
    .btn-cart, .btn-buy { height: 46px; font-size: 11px; letter-spacing: 1.4px; }
    .btn-row    { gap: 8px; }
    .qty-wrap { width: 200px; margin-bottom: 14px; }
    .size-options { margin-bottom: 16px; }
    .color-options { margin-bottom: 14px; }
    .info-name  { margin-bottom: 12px; padding-bottom: 12px; }
    .info-price { margin-bottom: 14px; padding-bottom: 14px; }
}

/* ─────────────────────────────────────────────
   1024 x 768
   Inherits: 901-1024px range values
───────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px) and (min-height: 601px) {
    :root { --pd-px: 28px; --pd-gap: 36px; --thumb-h: 70px; }
    .info-name  { font-size: 20px; }
    .info-price { font-size: 18px; }
    .size-opt   { min-width: 42px; height: 40px; padding: 0 10px; font-size: 12px; }
    .color-swatch { width: 42px; height: 42px; }
    .qty-btn, .qty-input { height: 48px; }
    .btn-cart, .btn-buy { height: 50px; font-size: 11px; letter-spacing: 1.5px; }
    .btn-row    { gap: 8px; }
    .qty-wrap { width: 210px; margin-bottom: 38px; }
    .size-options { margin-bottom: 38px; }
    .color-options { margin-bottom: 22px; }
}

/* ─────────────────────────────────────────────
   1280 x 800
   Inherits: 1101-1280px range values
───────────────────────────────────────────── */
@media (max-width: 1280px) and (min-width: 1201px) {
    :root { --pd-px: 40px; --pd-gap: 48px; --thumb-h: 76px; }
    .info-name  { font-size: 23px; }
    .info-price { font-size: 20px; }
    .size-opt   { min-width: 46px; height: 42px; font-size: 12px; }
    .qty-btn, .qty-input { height: 52px; }
    .btn-cart, .btn-buy { height: 52px; }
    .qty-wrap { width: 262px; margin-bottom: 50px; }
    .size-options { margin-bottom: 71px; }
    .color-options { margin-bottom: 26px; }
}

/* ─────────────────────────────────────────────
   1366 x 768
   Inherits: 1281-1399px range values
───────────────────────────────────────────── */
@media (max-width: 1366px) and (min-width: 1281px) {
    :root { --pd-px: 44px; --pd-gap: 56px; --thumb-h: 80px; }
    .info-name  { font-size: 26px; }
    .info-price { font-size: 22px; }
    .qty-wrap { width: 282px; margin-bottom: 31px; }
    .size-options { margin-bottom: 28px; }
}

/* ─────────────────────────────────────────────
   1440 x 900
   Inherits: 1400-1599px range values
───────────────────────────────────────────── */
@media (max-width: 1440px) and (min-width: 1367px) {
    :root { --pd-max: 1360px; --pd-px: 64px; --pd-gap: 80px; --thumb-h: 90px; }
    .info-name  { font-size: 28px; }
    .info-price { font-size: 23px; }
    .qty-wrap { width: 282px; margin-bottom: 80px; }
    .size-options { margin-bottom: 90px; }
}

/* ─────────────────────────────────────────
   1559 x 975
   Inherits: 1400-1599px range values
───────────────────────────────────────── */
@media (max-width: 1559px) and (min-width: 1441px) {
    :root { --pd-max: 1360px; --pd-px: 64px; --pd-gap: 80px; --thumb-h: 90px; }
    .info-name  { font-size: 28px; }
    .info-price { font-size: 23px; }
    .qty-wrap { width: 282px; margin-bottom: 22px; }
    .size-options { margin-bottom: 30px; }
}

/* ─────────────────────────────────────────────
   1680 x 1050
   Inherits: 1600-1919px range values
───────────────────────────────────────────── */
@media (max-width: 1680px) and (min-width: 1441px) {
    :root { --pd-max: 1400px; --pd-px: 68px; --pd-gap: 84px; --thumb-h: 92px; }
    .info-name  { font-size: 30px; }
    .info-price { font-size: 24px; }
    .qty-wrap { width: 290px; margin-bottom: 12px; }
    .size-options { margin-bottom: 100px; }
    .color-options { margin-bottom: 30px; }
}

/* ─────────────────────────────────────────────
   1920 x 1080
   Inherits: 1920-2559px range values
───────────────────────────────────────────── */
@media (max-width: 1920px) and (min-width: 1681px) and (max-height: 1080px) {
    :root { --pd-max: 1480px; --pd-px: 72px; --pd-gap: 90px; --thumb-h: 100px; }
    .info-name  { font-size: 32px; }
    .info-price { font-size: 26px; }
    .qty-wrap { width: 300px; margin-bottom: 65px; }
    .size-options { margin-bottom: 60px; }
    .color-options { margin-bottom: 32px; }
    .size-opt { min-width: 56px; height: 50px; font-size: 14px; }
    .qty-btn, .qty-input { height: 60px; }
    .btn-cart, .btn-buy { height: 60px; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   1920 x 1200
   Inherits: 1920-2559px range values
───────────────────────────────────────────── */
@media (max-width: 1920px) and (min-width: 1681px) and (min-height: 1081px) {
    :root { --pd-max: 1480px; --pd-px: 72px; --pd-gap: 90px; --thumb-h: 100px; }
    .info-name  { font-size: 32px; }
    .info-price { font-size: 26px; }
    .qty-wrap { width: 300px; margin-bottom: 65px; }
    .size-options { margin-bottom: 150px; }
    .color-options { margin-bottom: 32px; }
    .size-opt { min-width: 56px; height: 50px; font-size: 14px; }
    .qty-btn, .qty-input { height: 60px; }
    .btn-cart, .btn-buy { height: 60px; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   2560 x 1440
   Inherits: ≥2560px range values
───────────────────────────────────────────── */
@media (max-width: 2560px) and (min-width: 1921px) {
    :root { --pd-max: 1600px; --pd-px: 80px; --pd-gap: 100px; --thumb-h: 110px; }
    .info-name  { font-size: 36px; }
    .info-price { font-size: 28px; }
    .qty-wrap { width: 320px; margin-bottom: 70px; }
    .size-options { margin-bottom: 70px; }
    .color-options { margin-bottom: 36px; }
    .size-opt { min-width: 60px; height: 52px; font-size: 14px; }
    .qty-btn, .qty-input { height: 64px; }
    .btn-cart, .btn-buy { height: 64px; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   3840 x 2160  (4K UHD)
   Inherits: ≥2560px range values
───────────────────────────────────────────── */
@media (min-width: 2561px) and (max-width: 3840px) {
    :root { --pd-max: 1800px; --pd-px: 96px; --pd-gap: 120px; --thumb-h: 120px; }
    .info-name  { font-size: 40px; }
    .info-price { font-size: 32px; }
    .qty-wrap { width: 360px; margin-bottom: 80px; }
    .size-options { margin-bottom: 80px; }
    .color-options { margin-bottom: 40px; }
    .size-opt { min-width: 64px; height: 56px; font-size: 15px; }
    .qty-btn, .qty-input { height: 68px; }
    .btn-cart, .btn-buy { height: 68px; font-size: 14px; letter-spacing: 2.5px; }
}

/* ─────────────────────────────────────────────
   4096 x 2304  (4K DCI)
   Inherits: ≥2560px range values
───────────────────────────────────────────── */
@media (min-width: 3841px) and (max-width: 4096px) {
    :root { --pd-max: 2000px; --pd-px: 100px; --pd-gap: 130px; --thumb-h: 130px; }
    .info-name  { font-size: 44px; }
    .info-price { font-size: 34px; }
    .qty-wrap { width: 380px; margin-bottom: 90px; }
    .size-options { margin-bottom: 90px; }
    .color-options { margin-bottom: 44px; }
    .size-opt { min-width: 68px; height: 60px; font-size: 16px; }
    .qty-btn, .qty-input { height: 72px; }
    .btn-cart, .btn-buy { height: 72px; font-size: 14px; letter-spacing: 2.5px; }
}

/* ─────────────────────────────────────────────
   5120 x 2880  (5K Retina / iMac)
   Largest supported size
───────────────────────────────────────────── */
@media (min-width: 4097px) {
    :root { --pd-max: 2200px; --pd-px: 120px; --pd-gap: 150px; --thumb-h: 140px; }
    .info-name  { font-size: 48px; }
    .info-price { font-size: 36px; }
    .qty-wrap { width: 420px; margin-bottom: 100px; }
    .size-options { margin-bottom: 100px; }
    .color-options { margin-bottom: 48px; }
    .size-opt { min-width: 72px; height: 64px; font-size: 16px; }
    .qty-btn, .qty-input { height: 76px; }
    .btn-cart, .btn-buy { height: 76px; font-size: 15px; letter-spacing: 3px; }
}