/* Olegnax_ProductDesigner — product page (matches on-the-bags mockup) */

.otb-pp,
.otb-pp *,
.otb-pp *::before,
.otb-pp *::after { box-sizing: border-box; }

.otb-pp{
    --otb-orange:#f37021;
    --otb-orange-dark:#dc5e15;
    --otb-text:#1a1a1a;
    --otb-muted:#6b6b6b;
    --otb-border:#e5e5e5;
    --otb-bg:#fafafa;
    --otb-radius:12px;
    max-width:1280px;margin:0 auto;padding:18px 22px 60px;
    color:var(--otb-text);font-family:'Helvetica Neue',Arial,sans-serif;
}

/* ----- Breadcrumb ----- */
.otb-pp__breadcrumbs{
    display:flex;align-items:center;gap:8px;
    font-size:13px;color:var(--otb-muted);margin-bottom:18px;
}
.otb-pp__breadcrumbs a{color:var(--otb-muted);text-decoration:none}
.otb-pp__breadcrumbs a:hover{color:var(--otb-orange)}
.otb-pp__crumb-current{color:var(--otb-text);font-weight:500}

/* ----- Main 2-col ----- */
.otb-pp__main{
    display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:36px;
    align-items:start;
}

/* Gallery */
.otb-pp__gallery{display:grid;grid-template-columns:84px 1fr;gap:16px}
.otb-pp__thumbs{display:flex;flex-direction:column;gap:10px}
.otb-pp__thumb,.otb-pp__thumb-nav{
    width:84px;height:84px;border-radius:10px;
    background:var(--otb-bg);border:2px solid transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    padding:0;color:var(--otb-muted);font-size:14px;
}
.otb-pp__thumb-nav{background:#fff;border:1px solid var(--otb-border);height:38px;font-size:14px}
.otb-pp__thumb.is-active{border-color:var(--otb-orange)}
.otb-pp__thumb-ph{
    display:block;width:60px;height:60px;border-radius:6px;
    background:linear-gradient(135deg,#efe3d4,#d8c4a6);color:#8a6f49;
    line-height:60px;text-align:center;font-weight:600;
}

.otb-pp__hero{
    position:relative;
    background:var(--otb-bg);border-radius:var(--otb-radius);
    min-height:560px;display:flex;align-items:center;justify-content:center;
    padding:24px;overflow:hidden;
}
.otb-pp__hero-img{max-width:100%;max-height:520px;object-fit:contain;position:relative;z-index:2}
.otb-pp__hero-fallback{
    position:absolute;inset:24px;border-radius:10px;
    background:linear-gradient(135deg,#f0e2cd,#e2cba6);
    display:flex;align-items:center;justify-content:center;color:#8a6f49;
    font-size:24px;font-weight:600;letter-spacing:.5px;z-index:1;
}
.otb-pp__hero-img + .otb-pp__hero-fallback{display:none}
.otb-pp__wishlist{
    position:absolute;top:18px;right:18px;z-index:3;
    width:42px;height:42px;border-radius:50%;background:#fff;
    border:1px solid var(--otb-border);font-size:20px;color:#999;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.otb-pp__wishlist:hover{color:var(--otb-orange);border-color:var(--otb-orange)}
.otb-pp__zoom{
    position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
    background:#fff;border:1px solid var(--otb-border);border-radius:20px;
    padding:6px 14px;font-size:12px;color:var(--otb-muted);
    display:inline-flex;align-items:center;gap:6px;
}

/* Info column */
.otb-pp__info{display:flex;flex-direction:column;gap:18px}
.otb-pp__title{font-size:30px;font-weight:700;margin:0;color:var(--otb-text);letter-spacing:-.3px;line-height:1.15}

.otb-pp__rating{display:flex;align-items:center;gap:8px;margin-top:-8px}
.otb-pp__stars{color:#f5a623;font-size:18px;letter-spacing:1px}
.otb-pp__reviews{color:var(--otb-muted);font-size:13px}

.otb-pp__price-row{display:flex;align-items:baseline;gap:8px}
.otb-pp__from{color:var(--otb-muted);font-size:14px}
.otb-pp__price{color:var(--otb-orange);font-size:34px;font-weight:700;letter-spacing:-.5px}
.otb-pp__unit{color:var(--otb-muted);font-size:14px}
.otb-pp__price-note{margin:-12px 0 0;font-size:13px;color:var(--otb-muted)}

.otb-pp__field{display:flex;flex-direction:column;gap:10px}
.otb-pp__label{font-size:13px;font-weight:600;color:var(--otb-text)}

/* Pills */
.otb-pp__pills{display:flex;flex-wrap:wrap;gap:8px}
.otb-pp__pill{
    appearance:none;-webkit-appearance:none;
    padding:10px 16px;border:1px solid var(--otb-border);border-radius:8px;
    background:#fff;color:var(--otb-text);font-size:13px;font-weight:500;
    cursor:pointer;line-height:1;text-transform:none;letter-spacing:0;
    transition:border-color .15s,color .15s,background .15s;
}
.otb-pp__pill:hover{border-color:#bbb}
.otb-pp__pill.is-active{border-color:var(--otb-orange);color:var(--otb-orange);background:#fff7f1;font-weight:600}

/* Select */
.otb-pp__select{position:relative}
.otb-pp__select::after{
    content:"";position:absolute;right:16px;top:50%;
    width:8px;height:8px;border-right:2px solid #888;border-bottom:2px solid #888;
    transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.otb-pp__select select{
    appearance:none !important;-webkit-appearance:none !important;
    width:100%;padding:12px 40px 12px 16px !important;
    border:1px solid var(--otb-border) !important;border-radius:10px !important;
    background:#fff !important;color:var(--otb-text) !important;
    font-size:14px !important;font-weight:500 !important;line-height:1.2 !important;
    height:auto !important;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;
    box-shadow:none !important;
}
.otb-pp__select select:focus{outline:none;border-color:var(--otb-orange) !important}

/* Quantity row */
.otb-pp__qty-row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px}
.otb-pp__qty{display:inline-flex;align-items:stretch;border:1px solid var(--otb-border);border-radius:10px;overflow:hidden;background:#fff}
.otb-pp__qty-btn{
    appearance:none;border:0;background:#fff;width:40px;font-size:18px;color:var(--otb-text);cursor:pointer;
    padding:0;
}
.otb-pp__qty-btn:hover{background:var(--otb-bg)}
.otb-pp__qty input{
    appearance:none;-webkit-appearance:none;-moz-appearance:textfield;
    width:80px;border:0;text-align:center;font-size:15px;font-weight:600;color:var(--otb-text);
    background:#fff;padding:10px 0;height:auto;
}
.otb-pp__qty input::-webkit-outer-spin-button,
.otb-pp__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otb-pp__bulk{text-align:right;font-size:13px;color:var(--otb-text);line-height:1.5}
.otb-pp__bulk strong{color:#1f8a3a;font-weight:700}
.otb-pp__bulk-save{color:#1f8a3a;font-size:12px}

/* CTA */
.otb-pp__cta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.otb-pp__btn{
    appearance:none;-webkit-appearance:none;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 18px !important;border-radius:10px !important;
    font-size:14px !important;font-weight:600 !important;line-height:1 !important;
    text-transform:none !important;letter-spacing:0 !important;
    cursor:pointer;box-shadow:none !important;border:1px solid transparent !important;
    transition:background .15s,border-color .15s,color .15s;
}
.otb-pp__btn--primary{background:var(--otb-orange) !important;border-color:var(--otb-orange) !important;color:#fff !important}
.otb-pp__btn--primary:hover{background:var(--otb-orange-dark) !important;border-color:var(--otb-orange-dark) !important;color:#fff !important}
.otb-pp__btn--outline{background:#fff !important;border-color:var(--otb-border) !important;color:var(--otb-text) !important}
.otb-pp__btn--outline:hover{border-color:#bbb !important}
.otb-pp__btn-ico{font-size:14px}

.otb-pp__delivery{
    display:flex;align-items:center;gap:8px;
    padding:12px 14px;background:var(--otb-bg);border-radius:10px;
    font-size:13px;color:var(--otb-text);
}
.otb-pp__delivery-ico{color:var(--otb-orange);font-size:16px}
.otb-pp__delivery strong{font-weight:600}

/* Feature pills row */
.otb-pp__features{
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
    margin:40px 0 30px;padding:20px 0;
    border-top:1px solid var(--otb-border);border-bottom:1px solid var(--otb-border);
}
.otb-pp__feature{display:flex;align-items:center;gap:12px}
.otb-pp__feature-ico{
    width:40px;height:40px;border-radius:50%;
    background:#fff7f1;color:var(--otb-orange);font-size:18px;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.otb-pp__feature-t{font-size:14px;font-weight:600;color:var(--otb-text)}
.otb-pp__feature-d{font-size:12px;color:var(--otb-muted)}

/* Tabs */
.otb-pp__tabs{margin-top:30px}
.otb-pp__tablist{display:flex;gap:30px;border-bottom:1px solid var(--otb-border);margin-bottom:24px}
.otb-pp__tab{
    appearance:none;background:transparent;border:0;
    padding:12px 0;font-size:14px;font-weight:600;color:var(--otb-muted);cursor:pointer;
    border-bottom:2px solid transparent;text-transform:none;letter-spacing:0;
}
.otb-pp__tab.is-active{color:var(--otb-orange);border-bottom-color:var(--otb-orange)}
.otb-pp__tabpanel{font-size:14px;line-height:1.6;color:var(--otb-text)}
.otb-pp__bullets{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:8px}
.otb-pp__bullets li{position:relative;padding-left:26px;color:var(--otb-text)}
.otb-pp__bullets li::before{
    content:"\2713";position:absolute;left:0;top:0;
    width:18px;height:18px;border-radius:50%;background:#fff7f1;
    color:var(--otb-orange);font-size:11px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
}

/* Designer Modal */
.otb-designer-modal{position:fixed;inset:0;background:#0f0f0f;z-index:99999;display:flex;flex-direction:column}
.otb-designer-modal[hidden]{display:none}
.otb-designer-modal__bar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#1a1a1a;color:#fff;border-bottom:1px solid #2a2a2a}
.otb-designer-modal__title{font-size:14px;font-weight:600;letter-spacing:.3px}
.otb-designer-modal__close{background:transparent;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:4px 12px;border-radius:6px}
.otb-designer-modal__close:hover{background:#2a2a2a}
.otb-designer-modal__frame{flex:1;width:100%;border:0;background:#f4f4f4}
body.otb-modal-open{overflow:hidden}

/* Responsive */
@media (max-width:1040px){
    .otb-pp__main{grid-template-columns:1fr;gap:24px}
    .otb-pp__gallery{grid-template-columns:1fr}
    .otb-pp__thumbs{flex-direction:row;order:2}
    .otb-pp__thumb,.otb-pp__thumb-nav{width:64px;height:64px}
    .otb-pp__features{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:560px){
    .otb-pp__cta{grid-template-columns:1fr}
    .otb-pp__qty-row{flex-direction:column;align-items:stretch}
    .otb-pp__bulk{text-align:left}
}