Исправил

index.css

@@ -0,0 +1,275 @@
+.radio-view
+{
+    display: none;
+}
+
+.header 
+{
+    box-shadow: 0 20px 20px -20px #888;
+    min-width: 700px;
+    margin: 0 0 5px;
+}
+
+.header p
+{
+    margin: 0;
+    text-align: right;
+}
+
+.logo
+{
+    font: 35px Comic Sans MS;
+    margin: 0;
+    text-align: center;
+}
+
+.logo > span
+{
+    font-family: Verdana;
+}
+
+.logo:first-letter
+{
+    color: #f00;
+}
+
+.cat:hover
+{
+    box-shadow: 8px -5px 8px -5px #ffd700, -8px -5px 8px -5px #ffd700;
+}
+
+.cat
+{
+    font-size: 0;
+    box-shadow: 5px 0 10px #ddd, -5px 0 10px #ddd;
+    position: relative;
+}
+
+.cat:after
+{
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 5%;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to bottom, #fff, #bbb 100%);
+}
+
+.female img:hover
+{
+    box-shadow: -10px 2px 10px -8px #ff4e40, 10px 2px 10px -8px #ff4e40;
+}
+
+.male img:hover
+{
+    box-shadow: -10px 2px 10px -8px blue, 10px 2px 10px -8px blue;
+}
+
+.img-content
+{
+    padding: 12px;
+    box-sizing: border-box;
+    vertical-align: bottom;
+    text-align: center;
+    width: 300px;
+}
+
+.img-content img
+{
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.info
+{
+    font-size: 15px;
+    box-sizing: border-box;
+}
+
+figure,
+.info p,
+.info h2
+{
+    margin: 0;
+}
+
+.main-info
+{
+    text-align: left;
+    padding: 0;
+}
+
+.main-info h2
+{
+    font-size: 1em;
+    font-weight: normal;
+}
+
+.main-info p,
+.info h2
+{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.kindness
+{
+    color: #ffd700;
+    font-size: 1.5em;
+}
+
+.name:hover,
+.category:hover
+{
+    color: #f00;
+}
+
+.name
+{
+    font-size: 1.2em;
+}
+
+.category
+{
+    color: #ddd;
+}
+
+.price:after
+{
+    content: '₽';
+}
+
+.price.current-price
+{
+    color: green;
+    font-size: 1.5em;
+}
+
+.price.old-price
+{
+    text-decoration: line-through;
+}
+
+.description
+{
+    overflow: hidden;
+    position: relative;
+}
+
+.horizontal-card:checked ~ .main
+{
+    width: 1000px;
+    margin: 0 auto;
+}
+
+.horizontal-card:checked ~ .main .cat
+{
+    display: block;
+    width: 1000px;
+    height: 250px;
+    margin: 15px 0;
+}
+
+.horizontal-card:checked ~ .main .img-content
+{
+    height: 100%;
+    display: inline-block;
+}
+
+.horizontal-card:checked ~ .main .info
+{
+    display: inline-block;
+    vertical-align: top;
+    padding: 10px;
+}
+
+.horizontal-card:checked ~ .main .main-info
+{
+    padding-left: 30px;
+    width: 300px;
+}
+
+.horizontal-card:checked ~ .main .description
+{
+    width: 400px;
+}
+
+.vertical-card:checked ~ .main .cat
+{
+    display: inline-block;
+    width: 300px;
+    margin: 10px;
+    vertical-align: top;
+    height: 550px;
+}
+
+.vertical-card:checked ~ .main .info
+{
+    display: block;
+    padding: 0 10px;
+}
+
+.vertical-card:checked ~ .main .img-content
+{
+    height: 350px;
+    display: table-cell;
+    max-width: 300px;
+}
+
+.vertical-card:checked ~ .main .main-info
+{
+    height: 120px;
+}
+
+.vertical-card:checked ~ .main .description
+{
+    max-height: 80px;
+}
+
+.footer
+{
+    box-shadow: 0 -20px 10px -20px #888;
+    min-width: 700px;
+    height: 50px;
+}
+
+.kindness
+{
+    font-size: 0;
+    width: 130px;
+}
+
+.kindness > input 
+{
+    display: none;
+}
+
+.kindness > .half:after,
+div.kindness:hover > label.half:after,
+.kindness:hover > .half:hover:after
+{
+    content: url('images/stars/goldHalfStar.png');
+}
+
+.kindness > .full:after,
+div.kindness:hover > label.full:after,
+.kindness:hover > .full:after
+{
+    content: url('images/stars/goldFullStar.png');
+}
+
+.kindness > input:checked ~ .half:after,
+.kindness:hover > .half:hover ~ .half:after,
+.kindness:hover > .full:hover ~ .half:after
+{
+    content: url('images/stars/grayHalfStar.png');
+}
+
+.kindness > input:checked ~ .full:after,
+.kindness:hover > .full:hover ~ .full:after,
+.kindness:hover > .half:hover ~ .full:after
+{
+    content: url('images/stars/grayFullStar.png');
+}