/* ============================================================
   LOLLIBUY PRODUCT PAGE — BASE LAYOUT
   Clean, optimized, premium version
============================================================ */

/* Container */
.lolli-single-product-container {
  width: min(1300px, 92%);
  margin: 40px auto 90px;
}

/* Two columns: gallery + summary */
.lolli-product-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;

  background: #1a1a25;
  padding: 36px;
  border-radius: 28px;
  box-shadow: 0 0 45px rgba(255,120,220,.25);
}

@media (max-width: 960px) {
  .lolli-product-wrapper {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 28px;
  }
}

/* ============================================================
   PRODUCT SUMMARY (right block)
============================================================ */

.lolli-product-summary {
  background: #1a1a25;
  padding: 28px 30px;
  border-radius: 26px;
  box-shadow: 0 0 22px rgba(255,120,220,.25);

  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Product title */
.lolli-product-inner h1.product_title {
  font-size: 30px;
  font-weight: 800;
  color: #ffd8f8;
  text-shadow: 0 0 14px rgba(255,120,220,.4);
  margin: 0 0 10px;
}

.woocommerce-product-rating {
  color: #fff708;
}

/* ============================================================
   PRICE
============================================================ */

.single-product .price {
  color: #ffd9b0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 10px 0 20px;
}

/* ============================================================
   LINKS (global behavior)
============================================================ */

.lolli-product-summary a,
.lolli-product-tabs a,
.woocommerce div.product a,
.product_meta a,
.woocommerce-review-link {
  color: #ffbdf5 !important;
  font-weight: 600;
  text-decoration: none;
  transition: .25s ease;
}

.lolli-product-summary a:hover,
.lolli-product-tabs a:hover,
.product_meta a:hover {
  color: #ff7cd8 !important;
  text-shadow: 0 0 10px rgba(255,120,220,.6);
}

/* ============================================================
   PRODUCT META — SKU, categories, tags
============================================================ */

.lolli-product-meta {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,120,220,.25);

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lolli-product-meta > span {
  font-size: 14px;
  color: #dcdcea;
}

.lolli-product-meta > span a {
  background: rgba(255,120,220,.15);
  padding: 3px 8px;
  border-radius: 8px;
  color: #ffb4f4;
}

.lolli-product-meta > span a:hover {
  color: #ff7cd8;
}

/* ============================================================
   GALLERY — GLOW + SQUARE + PREMIUM LOOK
============================================================ */

.lolli-product-gallery {
  background:
    radial-gradient(circle at 30% 10%, rgba(255,140,240,.25), transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(180,120,255,.35), transparent 60%),
    #141421;

  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 0 40px rgba(255,120,220,.45);
  position: relative;
  overflow: hidden;
}

/* subtle border */
.lolli-product-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

/* Woo gallery center */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Square stage */
.woocommerce-product-gallery__image {
  position: relative; /* 🔥 ключ */
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  max-width: 600px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Image */
.woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 20px;
  z-index: 2;
}

/* ============================================================
   WOOCOMMERCE GALLERY TRIGGER
   Desktop: appears when the gallery is hovered/focused.
   Touch devices: stays visible, because there is no reliable hover.
============================================================ */

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 12;

  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  border-radius: 50% !important;
  background: rgba(20, 20, 33, .82) !important;
  border: 1px solid rgba(255, 156, 233, .55) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32), 0 0 14px rgba(255, 120, 220, .2);

  font-size: 0 !important;
  text-indent: 0 !important;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery__trigger svg {
  display: none !important;
}

.woocommerce-product-gallery__trigger::before {
  content: "" !important;
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 21l-4.35-4.35m1.85-5.15a7 7 0 1 1-14 0a7 7 0 0 1 14 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 21l-4.35-4.35m1.85-5.15a7 7 0 1 1-14 0a7 7 0 0 1 14 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.woocommerce-product-gallery__trigger::after {
  content: none !important;
}

.woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery:focus-within .woocommerce-product-gallery__trigger {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:focus-visible {
  background: rgba(255, 120, 220, .26) !important;
}

@media (hover: none), (pointer: coarse) {
  .woocommerce-product-gallery__trigger {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Mobile gallery */
@media (max-width: 600px) {
  .lolli-product-gallery { padding: 20px; }
  .woocommerce-product-gallery__image { max-width: 420px; }
}

/* ==========================================================
   VARIATIONS — FINAL CLEAN BLOCK
   Native WooCommerce selects, premium look, no broken arrow
========================================================== */

form.variations_form.cart {
  margin-top: 18px;
  padding: 20px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,120,220,.07), rgba(255,120,220,.025)),
    #1b1b27;
  border: 1px solid rgba(255,120,220,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 24px rgba(255,120,220,.08);
}

/* table reset */
form.variations_form table.variations,
form.variations_form table.variations tbody,
form.variations_form table.variations tr,
form.variations_form table.variations th,
form.variations_form table.variations td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}

form.variations_form table.variations {
  margin: 0 0 16px;
}

form.variations_form table.variations tr + tr {
  margin-top: 16px;
}

/* labels */
form.variations_form table.variations td.label,
form.variations_form table.variations th.label {
  margin-bottom: 8px;
}

form.variations_form table.variations td.label label,
form.variations_form table.variations th.label label {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .2px;
  color: #ffd8f8;
  text-shadow: 0 0 10px rgba(255,120,220,.16);
}

/* field wrapper */
form.variations_form table.variations td.value {
  position: relative;
}

/* select — clean, premium, no pseudo-arrow bugs */
form.variations_form table.variations td.value select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  display: block !important;
  width: 100% !important;
  min-height: 54px !important;

  padding: 0 52px 0 16px !important;
  margin: 0 !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,120,220,.30) !important;

  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  background-color: #20202c !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffb7ef' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 16px center, center !important;
  background-size: 13px 13px, 100% 100% !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 rgba(255,120,220,0) !important;

  cursor: pointer !important;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease,
    background-color .22s ease !important;
}

/* remove old IE arrow */
form.variations_form table.variations td.value select::-ms-expand {
  display: none;
}

/* placeholder option look in closed state */
form.variations_form table.variations td.value select:invalid,
form.variations_form table.variations td.value select option[value=""] {
  color: #cdb9d7;
}

/* hover/focus */
form.variations_form table.variations td.value select:hover {
  border-color: rgba(255,120,220,.48) !important;
  box-shadow: 0 0 18px rgba(255,120,220,.10) !important;
}

form.variations_form table.variations td.value select:focus {
  outline: none !important;
  border-color: #ff8fe3 !important;
  box-shadow:
    0 0 0 3px rgba(255,120,220,.10),
    0 0 24px rgba(255,120,220,.16) !important;
}

/* dropdown list items — browser limited, but keep dark */
form.variations_form table.variations td.value select option {
  background: #1d1d29;
  color: #fff;
}

/* reset link */
form.variations_form a.reset_variations {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 13px;
  border-radius: 12px;

  background: rgba(255,120,220,.08);
  border: 1px solid rgba(255,120,220,.15);

  color: #ffbdf5 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;

  transition: .22s ease;
}

form.variations_form a.reset_variations:hover {
  background: #ff7cd8;
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(255,120,220,.28);
}

/* selected variation box */
.single_variation_wrap {
  margin-top: 16px;
}

.single_variation {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #191923;
  border: 1px solid rgba(255,120,220,.14);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 18px rgba(255,120,220,.08);
}

.single_variation .price {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffe1bc !important;
}

.single_variation .stock {
  margin-top: 6px;
  font-weight: 600;
  color: #d9f0ce;
}

/* qty + button zone */
.woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* disabled add to cart */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* mobile */
@media (max-width: 600px) {
  form.variations_form.cart {
    padding: 15px;
    border-radius: 18px;
  }

  form.variations_form table.variations td.value select {
    min-height: 50px !important;
    font-size: 14px !important;
    border-radius: 15px !important;
    padding: 0 46px 0 14px !important;
    background-position: right 14px center, center !important;
    background-size: 12px 12px, 100% 100% !important;
  }

  .single_variation {
    padding: 12px 14px;
    border-radius: 15px;
  }
}

/* ============================================================
   QUANTITY — +/- & input
============================================================ */

.quantity {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100%;
    margin: 14px auto !important;
}

.quantity input.qty {
  width: 70px !important;
  height: 42px !important;

  background: #202028 !important;
  border: 1px solid #3a3a4a !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 16px !important;

  border-radius: 12px !important;
}

.quantity .plus,
.quantity .minus {
  width: 40px !important;
  height: 42px !important;

  background: #2b2b39 !important;
  border: 1px solid #3a3a4a !important;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px !important;
  color: #ffd8f8 !important;

  border-radius: 12px !important;
  cursor: pointer !important;
  transition: .2s ease;
}

.quantity .plus:hover,
.quantity .minus:hover {
  background: #ff7cd8 !important;
  color: #000 !important;
}

/* Remove native spinners */
.quantity input[type="number"]::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ============================================================
   ADD TO CART BUTTON
============================================================ */

.single_add_to_cart_button {
  background: #ffffff !important;
  color: #000 !important;

  padding: 14px 20px !important;
  border-radius: 16px !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  width: 100%;

  transition: .25s ease;
  border: none !important;
  box-shadow: 0 0 18px rgba(255,255,255,.18);
}

.single_add_to_cart_button:hover {
  background: #ff7cd8 !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(255,120,220,.7);
}

/* ============================================================
   PRODUCT TABS — GLOW STYLE
============================================================ */

.lolli-product-tabs {
  width: min(1300px, 92%);
  margin: 50px auto 100px;
}

/* Tabs list */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  border: none;
}

/* Tab item */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 22px !important;

  background: #1a1a25;
  border: 1px solid rgba(255,120,220,.35);
  border-radius: 14px;

  font-size: 16px;
  font-weight: 700;
  color: #ffd8f8;

  cursor: pointer;
  transition: .25s ease;

  box-shadow: 0 0 16px rgba(255,120,220,.15);
  position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  background: #ff7cd8;
  color: #fff;
  transform: translateY(-2px);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: linear-gradient(90deg,#ff7dd1,#b067ff);
  color: #fff !important;
  border-color: transparent;
  transform: scale(1.05);
  box-shadow: 0 0 26px rgba(255,120,220,.45);
}

/* Remove Woo pseudo elements */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
}

/* Tabs content panel */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  background: #1a1a25;
  padding: 26px 30px;
  border-radius: 22px;
  box-shadow: 0 0 28px rgba(255,120,220,.25);
  color: #e8e1f0;
  font-size: 15px;
  line-height: 1.6;
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
  color: #ffd8f8;
  text-shadow: 0 0 10px rgba(255,120,220,.3);
  margin-top: 14px;
  margin-bottom: 10px;
}

.woocommerce-Tabs-panel p {
  color: #f5eaff;
  opacity: .95;
  margin-bottom: 12px;
}

.woocommerce-Tabs-panel ul { padding-left: 20px; }
.woocommerce-Tabs-panel li { margin-bottom: 6px; }

/* ============================================================
   REVIEWS LIST
============================================================ */

#reviews { margin-top: 40px; }
#reviews #comments { margin-bottom: 34px; }

#reviews #comments h2 {
  font-size: 20px;
  color: #ffd8f8;
  margin-bottom: 16px;
  font-weight: 700;
}

#reviews #comments ol.commentlist {
  padding: 0;
  margin: 0;
}

#reviews #comments ol.commentlist li {
  list-style: none;
  background: #181822;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,120,220,.25);
  box-shadow: 0 0 12px rgba(255,120,220,.15);
}

#reviews .comment_container {
  display: flex;
  gap: 14px;
}

#reviews .comment_container img.avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
  box-shadow: 0 0 16px rgba(255,120,220,.4);
}

#reviews .comment-text .meta {
  font-size: 14px;
  color: #ffd8f8;
  font-weight: 600;
  margin-bottom: 6px;
}

#reviews .star-rating span { color: #ffe179 !important; }
#reviews .star-rating { margin-bottom: 10px; }

#reviews .description p {
  color: #f5eaff;
  opacity: .9;
}

/* ============================================================
   REVIEW FORM (ADD REVIEW)
============================================================ */

#review_form_wrapper {
  background: #1a1a25;
  padding: 26px 30px;
  border-radius: 22px;
  box-shadow: 0 0 28px rgba(255,120,220,.25);
}

#review_form #respond .comment-reply-title {
  color: #ffd8f8;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}

#review_form input,
#review_form textarea {
  width: 100%;
  background: #202028;
  border: 1px solid rgba(255,120,220,.25);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-size: 15px;
}

#review_form textarea {
  height: 130px;
  resize: vertical;
}

#review_form input:focus,
#review_form textarea:focus {
  border-color: #ff9ce9;
  box-shadow: 0 0 12px rgba(255,120,220,.4);
}

#review_form #submit {
  margin-top: 10px;
  background: #fff;
  color: #000;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: .2s ease;
  border: none;
}

#review_form #submit:hover {
  background: #ff7cd8;
  color: #fff;
}

/* ============================================================
   WOOCOMMERCE MESSAGES — PREMIUM GLOW
============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  padding: 24px !important;
  margin: 20px auto;
  border-radius: 16px;

  background: rgba(30, 8, 50, 0.6);
  color: #fff !important;

  border: 2px solid #ff4bd1 !important;
  box-shadow: 0 0 25px rgba(255, 77, 215, 0.6);
  backdrop-filter: blur(6px);

  font-size: 16px;
  line-height: 1.5;
}

/* icon */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: inline-block;
  content: "💫";
  font-size: 20px;
  margin-right: 12px;
  position: relative;
  top: 2px;
}

/* buttons inside notices */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  display: inline-block;
  padding: 6px 16px;
  margin-left: 16px;
  border-radius: 12px;

  background: #ffffff;
  color: #8a00c7 !important;

  font-weight: 600;
  text-decoration: none !important;
  border: none;

  box-shadow: 0 0 10px rgba(255,255,255,0.6);
  transition: 0.2s;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background: #ffe6fd;
  box-shadow: 0 0 18px rgba(255, 160, 239, 0.8);
}

/* ============================================================
   RELATED PRODUCTS — GRID
============================================================ */

/* ==========================================================
   RELATED PRODUCTS
========================================================== */

.related.products ul.products{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;
    gap:24px !important;

    margin:0 !important;
    padding:0 !important;
}

/* Убираем стили Woo */
.related.products ul.products > li.product{
    width:auto !important;
    float:none !important;
    margin:0 !important;
    clear:none !important;

    display:flex;
}

/* Карточка занимает всю ячейку */
.related.products .lolli-product-card {
    width: 100%;
}

@media (max-width: 700px) {
    .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* 1.7.1 — tighter single-product mobile layout */
@media (max-width: 600px) {
  .lolli-single-product-container {
    width: min(100% - 16px, 100%);
    margin: 16px auto 96px;
  }

  .lolli-breadcrumbs {
    margin-bottom: 14px;
    padding: 12px 14px;
    line-height: 1.45;
    border-radius: 18px;
  }

  .lolli-product-wrapper {
    padding: 14px;
    gap: 16px;
    border-radius: 22px;
  }

  .lolli-product-gallery {
    padding: 14px;
    border-radius: 22px;
  }

  .woocommerce-product-gallery__image {
    max-width: 100%;
  }

  .lolli-product-summary {
    padding: 18px 16px;
    border-radius: 22px;
    gap: 14px;
  }

  .lolli-product-inner h1.product_title {
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .single-product .price {
    font-size: 22px !important;
    margin: 8px 0 14px;
  }

  .lolli-product-tabs {
    margin-top: 18px;
  }
}