:root {
      --blue: #0e5a8a;
      --accent: #0b4a70;
      --muted: #f6f6f6;
      --text: #122022;
      --card: #ffffff;
      --catlink: #0b4a70;
      --shadow: 0 10px 20px rgba(17, 24, 28, 0.08);
      --radius: 14px;
      --glass: rgba(255, 255, 255, 0.6);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%;
      margin: 0;
      background: linear-gradient(180deg, #fbfdff 0%, #fbfbfb 100%);
      color: var(--text)
    }

    .page {
      max-width: 1100px;
      margin: 36px auto;
      padding: 28px
    }

    header {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 28px
    }
	.bookauthor{font-size:16px;color:#475b5f;margin-bottom:8px;margin-top:15px}
	.ean{margin:10px 0}
	.coverTypeDesc{margin-top:10px}
	.versand{margin-top:20px; font-style:italic}
    .logo {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .logo img {
      width: 88px;
      height: auto
    }

    .brand {
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 0.6px;
      font-size: 32px
    }

    .layout {
      display: grid;
      grid-template-columns: 200px 1fr 0px;
      gap: 15px;
      align-items: start
    }

    /* Sidebar */
    .side {
      background: var(--card);
      padding: 18px;
      border-radius: 12px;
      box-shadow: var(--shadow)
    }

    .side h3 {
      margin: 0 0 8px 0;
      font-size: 18px
    }

    .cat {
      list-style: none;
      padding: 6px 6px 6px 0;
      margin: 8px 0 0 0
    }

    .cat li {
      padding: 2px 6px;
      border-radius: 10px;
      margin-bottom: 4px;
      color: #092;
      cursor: default;
      font-size: 16px
    }

    .cat li:hover {
      background: var(--muted)
    }

    .cat li a {
      text-decoration: none;
      color: var(--catlink);
      display: block
    }

    /* Main content */
    .main {
      padding-top: 10px
    }

    .title {
      font-size: 40px;
      line-height: 0.95;
      margin: 6px 0 18px;
      color: var(--accent);
      font-weight: 700
    }

    .card {
      display: flex;
      align-items: flex-start;
      gap: 36px
    }

    .cover {
      width: 240px;
      border-radius: 6px;
      background: linear-gradient(180deg, #e6f2fb, #dff0fb);
      box-shadow: var(--shadow);
      padding: 8px
    }
.cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
    .cover .wrap-b img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 4px
    }

    /* Right meta */
    .meta {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 250, 0.9));
      padding: 20px;
      border-radius: 12px;
      height: fit-content;
      box-shadow: var(--shadow)
    }

    .meta p {
      margin: 6px 0;
      color: #1b2b2f
    }

    .price {
      font-weight: 800;
      font-size: 28px;
      color: var(--accent);
      margin-top: 6px
    }

    .small {
      color: #6b7b7f;
      font-size: 14px
    }

    /* Recommendation row */
    .recommend {
      margin-top: 40px
    }

    .rec-title {
      font-size: 22px;
      margin-bottom: 14px;
      color: var(--accent);
      font-weight: 700
    }

    .rec-row {
      display: flex;
      gap: 6px
    }

    .rec-card {
      width: 150px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--shadow);
      background: linear-gradient(180deg, #0f2930, #062022);
      color: #fff;
      padding: 12px;
      text-align: center
    }

    .rec-card img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px
    }

    /* responsive */
    @media (max-width:980px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .meta {
        order: 3
      }

      .title {
        font-size: 48px
      }

      header {
        justify-content: center
      }

      .logo img {
        width: 70px
      }
    }


    .details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      background: #fff;
      padding: 2px;

    }

    .details div {
      padding: 1px;
      background: #f3f3f3;
      border-radius: 6px;
    }

    .label {
      font-weight: bold;
      color: #333;
    }

    .label span {
      font-weight: normal;
    }

    .value {
      margin-top: 4px;
    }

    .box {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 15px;
      margin-bottom: 20px;
      margin-top: 20px
    }

    .box h2 {
      font-size: 18px;
      color: var(--accent);
      margin-top: 0;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      margin-bottom: 10px;
    }


/* Product gallery css starts */
 .image {
    padding-top: 6px;
}
.product-gallery .large-image img {
	display: none;
	width: 100%
}

.product-gallery .large-image img:target {
	display: block
}

.product-gallery .large-image img:target~img#default {
	display: none
}

.product-gallery .large-image img#default {
	display: block
}

.product-gallery ul {
	margin-top: 10px;
	height: 65px;
	margin-bottom: 10px;
	padding: 0
}

.product-gallery li {
	list-style: none;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc
}

.product-gallery li:hover {
	border: 1px solid #d09d00;
	cursor: pointer
}

.product-gallery li:first-child {
	margin-left: 0
}

.product-gallery li img {
	width: 65px
}

.product_images .large-image {
	min-width: 180px;
	max-width: 180px;
	
}

.product_images .large-image img {
	display: block;
	
}

.product_images ul {
	list-style: none;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 65px;
	padding: 0
}

.product_images ul li {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px
}

.product_images ul li img {
	max-width: 65px;
	max-height:60px
}

.product_images ul li label {
	margin: 0;
	
	cursor: pointer
}

.product_images ul li label:hover {
	
	opacity: 0.6
}

.product_images .open-check {
	display: none
}

.product_images ul>img,
.product_images .large-image>img,
.product_images .wraper-img img {
	position: absolute;
	top: -99999px;
	left: -99999px;
	
	max-width:100%
}

.product_images img:nth-of-type(1)~.switcher ul li:nth-of-type(1),
.product_images img:nth-of-type(2)~.switcher ul li:nth-of-type(2),
.product_images img:nth-of-type(3)~.switcher ul li:nth-of-type(3),
.product_images img:nth-of-type(4)~.switcher ul li:nth-of-type(4),
.product_images img:nth-of-type(5)~.switcher ul li:nth-of-type(5),
.product_images img:nth-of-type(6)~.switcher ul li:nth-of-type(6),
.product_images img:nth-of-type(7)~.switcher ul li:nth-of-type(7),
.product_images img:nth-of-type(8)~.switcher ul li:nth-of-type(8),
.product_images img:nth-of-type(9)~.switcher ul li:nth-of-type(9),
.product_images img:nth-of-type(10)~.switcher ul li:nth-of-type(10),
.product_images img:nth-of-type(11)~.switcher ul li:nth-of-type(11),
.product_images img:nth-of-type(12)~.switcher ul li:nth-of-type(12) {
	display: block
}

.product_images .switcher {
	position: relative;
	max-width: 500px
}

.product_images .switcher input.open-check:nth-of-type(1):checked~.wraper-img img:nth-child(1),
.product_images .switcher input.open-check:nth-of-type(2):checked~.wraper-img img:nth-child(2),
.product_images .switcher input.open-check:nth-of-type(3):checked~.wraper-img img:nth-of-type(3),
.product_images .switcher input.open-check:nth-of-type(4):checked~.wraper-img img:nth-of-type(4),
.product_images .switcher input.open-check:nth-of-type(5):checked~.wraper-img img:nth-of-type(5),
.product_images .switcher input.open-check:nth-of-type(6):checked~.wraper-img img:nth-of-type(6),
.product_images .switcher input.open-check:nth-of-type(7):checked~.wraper-img img:nth-of-type(7),
.product_images .switcher input.open-check:nth-of-type(8):checked~.wraper-img img:nth-of-type(8),
.product_images .switcher input.open-check:nth-of-type(9):checked~.wraper-img img:nth-of-type(9),
.product_images .switcher input.open-check:nth-of-type(10):checked~.wraper-img img:nth-of-type(10),
.product_images .switcher input.open-check:nth-of-type(11):checked~.wraper-img img:nth-of-type(11),
.product_images .switcher,
input.open-check:nth-of-type(12):checked~.wraper-img img:nth-of-type(12) {
	opacity: 1;
	z-index: 2;
	position: relative;
	top: 0;
	left: 0
}

.product_images .switcher input.open-check:nth-of-type(1):checked~ul li:nth-child(1),
.product_images .switcher input.open-check:nth-of-type(2):checked~ul li:nth-child(2),
.product_images .switcher input.open-check:nth-of-type(3):checked~ul li:nth-of-type(3),
.product_images .switcher input.open-check:nth-of-type(4):checked~ul li:nth-of-type(4),
.product_images .switcher input.open-check:nth-of-type(5):checked~ul li:nth-of-type(5),
.product_images .switcher input.open-check:nth-of-type(6):checked~ul li:nth-of-type(6),
.product_images .switcher input.open-check:nth-of-type(7):checked~ul li:nth-of-type(7),
.product_images .switcher input.open-check:nth-of-type(8):checked~ul li:nth-of-type(8),
.product_images .switcher input.open-check:nth-of-type(9):checked~ul li:nth-of-type(9),
.product_images .switcher input.open-check:nth-of-type(10):checked~ul li:nth-of-type(10),
.product_images .switcher input.open-check:nth-of-type(11):checked~ul li:nth-of-type(11),
.product_images .switcher input.open-check:nth-of-type(12):checked~ul li:nth-of-type(12) {
	opacity: 0.6
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.product-gallery {
		display: -ms-flexbox;
		display: flex;
		-ms-flex: 1;
		flex: 1;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 100%
	}
	.product-gallery .large-image {
		-ms-flex: 1;
		flex: 1;
		-webkit-box-flex: 1;
		margin-bottom: 10px
	}
	.product-gallery ul {
		margin-top: 0;
		margin-left: 10px
	}
	.product-gallery li {
		float: none;
		margin-left: 0
	}
	.product_images {
		display: -ms-flexbox;
		display: flex;
		-ms-flex: 1;
		flex: 1;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 100%
	}
	.product_images .large-image {
		-ms-flex: 1;
		flex: 1;
		-webkit-box-flex: 1;
		margin-bottom: 10px
	}
	.product_images ul {
		margin-top: 0;
		margin-left: 10px
	}
	.product_images ul li {
		float: none;
		margin-left: 0
	}
}

@media (max-width: 767px) {
	.product-gallery,
	.product_images {
		width: 100%
	}
	.product-gallery .large-image,
	.product_images .large-image {
		max-width: 500px
	}
}

.product_images ul{border:0 !important}