/* COSMOD Single Product — styles (v1.3.3) */
.cosmod-sp{
  --gap:40px;--accent:#1788C8;--muted:#6b7280;
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:start;
  font-family:Arial,Helvetica,sans-serif;color:#111;padding-left:var(--offset-x,0)
}
.cosmod-sp *{box-sizing:border-box}
.cosmod-gallery{position:relative}
.cosmod-gallery .cosmod-main-img{
  position:relative;border-radius:16px;overflow:hidden;background:transparent;
  display:flex;align-items:center;justify-content:center;
  width:var(--main-w, auto);height:var(--main-h, auto);max-width:100%;
}
.cosmod-gallery .cosmod-main-img img{display:block;width:100%;height:100%;object-fit:contain}
.cosmod-gallery .cosmod-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.cosmod-gallery .cosmod-nav button{
  pointer-events:auto;width:40px;height:40px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);cursor:pointer;font-size:18px;font-weight:700;display:grid;place-items:center;opacity:.9;transition:.2s;
}
.cosmod-gallery .cosmod-nav .prev{margin-left:8px}
.cosmod-gallery .cosmod-nav .next{margin-right:8px}

.cosmod-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.cosmod-thumbs .thumb{padding:0;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer}
.cosmod-thumbs img{display:block;width:64px;height:64px;object-fit:cover;border-radius:8px}
.cosmod-thumbs .thumb.active{outline:2px solid var(--accent)}

/* right column */
.cosmod-info .title{font-size:clamp(22px,2.4vw,36px);line-height:1.15;margin:0}
.cosmod-info .stock{color:#16a34a;margin:6px 0}
.cosmod-info .price{font-size:clamp(20px,2vw,28px);font-weight:700;margin:12px 0 18px}
.cosmod-qty{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.cosmod-qty input.qty{width:70px;height:40px;text-align:center;border:1px solid #d1d5db;border-radius:8px}
.cosmod-qty button{width:40px;height:40px;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:20px;cursor:pointer}
.cosmod-info .add-to-cart{display:inline-block;margin-top:6px;background:#1788C8;color:#fff;border:none;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer}
.cosmod-info .add-to-cart:hover{filter:brightness(.95)}
.cosmod-bullets{list-style:none;padding:0;margin:18px 0 0;color:var(--muted)}
.cosmod-bullets li{margin:6px 0}

/* Wishlist (heart) */
.cosmod-like{--size:40px;width:var(--size);height:var(--size);border:1px solid #e5e7eb;border-radius:999px;background:#fff;cursor:pointer;display:grid;place-items:center;margin-left:8px;transition:.2s;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.cosmod-like:hover{transform:scale(1.04)}
.cosmod-like .heart{width:18px;height:18px;display:inline-block;position:relative}
.cosmod-like.active{border-color:#ef4444;background:#fff0f0}
.cosmod-like .heart::before,.cosmod-like .heart::after{content:"";position:absolute;width:10px;height:16px;background:currentColor;border-radius:10px 10px 0 0;color:#ef4444}
.cosmod-like .heart::before{left:4px;top:2px;transform:rotate(-45deg)}
.cosmod-like .heart::after{right:4px;top:2px;transform:rotate(45deg)}
.cosmod-info .title-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}

/* Meta badges under title (brand + stock) */
.cosmod-meta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.cosmod-meta .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f3f4f6;color:#374151;font-size:13px;line-height:1}
.cosmod-meta .badge--brand a{color:inherit;text-decoration:underline}
.cosmod-meta .badge--ok{background:#ecfdf5;color:#065f46}
.cosmod-meta .badge--out{background:#fee2e2;color:#991b1b}

/* Zoom overlay */
.cosmod-zoom{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:9999}
.cosmod-zoom.open{display:flex}
.cosmod-zoom img{max-width:none;transform-origin:center center;user-select:none;pointer-events:none}
.cosmod-zoom .close{position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:none;background:#fff;cursor:pointer;font-size:20px;font-weight:700}
.cosmod-zoom .hint{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;opacity:.85}

/* Tabs under product */
.cosmod-tabs{margin-top:22px;border-top:1px solid #eee;padding-top:16px}
.cosmod-tabs-nav{display:flex;gap:8px;margin-bottom:12px}
.cosmod-tabs-nav .tab{
  padding:8px 14px;border:1px solid #e5e7eb;border-bottom:none;border-radius:10px 10px 0 0;background:#f8f9fa;cursor:pointer;font-weight:600
}
.cosmod-tabs-nav .tab.active{background:#fff}
.cosmod-tabs-panels{border:1px solid #e5e7eb;border-radius:0 12px 12px 12px;background:#fff;padding:16px}
.cosmod-tabs-panels .panel{display:none}
.cosmod-tabs-panels .panel.show{display:block}

/* Layout options */
@media (min-width: 981px){
  .cosmod-sp.gallery-right{grid-template-columns:.9fr 1.1fr}
  .cosmod-sp.gallery-right .cosmod-gallery{grid-column:2}
  .cosmod-sp.gallery-right .cosmod-info{grid-column:1}
  .cosmod-sp.gallery-left{grid-template-columns:1.1fr .9fr}
  .cosmod-sp.gallery-left .cosmod-gallery{grid-column:1}
  .cosmod-sp.gallery-left .cosmod-info{grid-column:2}
  /* если вкладки внутри сетки — на всю ширину */
  .cosmod-sp .cosmod-tabs{grid-column:1 / -1}
}