/* Category icons (image/catalog/category_icons/*.svg, drawn by tools/category_icons): the theme puts them into the page, so
   the style of the theme settings colours them. Duotone in the shop's red by default; body.pt-icons-flat colours
   them flat by group (the data-group of the file). */

.pt-ic {
  --pt-ic-ink: #3a3133;
  --pt-ic-tint: #fbd3d3;
  --pt-ic-tint2: #f39a9a;
  --pt-ic-light: #fff;
  --pt-ic-tile: #f6f1f1;
  background: var(--pt-ic-tile) !important;
}

.pt-ic svg {
  display: block;
  width: 68%;
  height: 68%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Duotone */
.pt-ic .i-b,
.pt-ic .i-alt,
.pt-ic .i-lt,
.pt-ic .i-hole,
.pt-ic .i-d,
.pt-ic .i-e {
  stroke: var(--pt-ic-ink);
  stroke-width: 2;
}

.pt-ic .i-b {
  fill: var(--pt-ic-tint);
}

.pt-ic .i-alt {
  fill: var(--pt-ic-tint2);
}

.pt-ic .i-lt,
.pt-ic .i-hole {
  fill: var(--pt-ic-light);
}

.pt-ic .i-d,
.pt-ic .i-e {
  fill: none;
}

.pt-ic .i-dot,
.pt-ic .i-inv {
  fill: var(--pt-ic-ink);
  stroke: none;
}

/* A cord: "e wide" draws its outline, "tube" over the same path its inside */
.pt-ic .i-tube {
  fill: none;
  stroke: var(--pt-ic-tint);
  stroke-width: 3.6;
}

/* Flat by group: main, dark, light, tile */
.pt-ic-ya { --pt-c: #eb5858; --pt-c2: #b13636; --pt-bg: #fdeaea; }
.pt-ic-an { --pt-c: #d98f3f; --pt-c2: #a2601c; --pt-bg: #fcefe0; }
.pt-ic-pl { --pt-c: #6f9e5c; --pt-c2: #47763a; --pt-bg: #e6f1df; }
.pt-ic-sy { --pt-c: #3fa3a0; --pt-c2: #22716e; --pt-bg: #e2f3f2; }
.pt-ic-pu { --pt-c: #e0708a; --pt-c2: #ad4560; --pt-bg: #fcebef; }
.pt-ic-ac { --pt-c: #4f86c6; --pt-c2: #2d5c96; --pt-bg: #e7eff9; }
.pt-ic-fe { --pt-c: #9a77c9; --pt-c2: #6a4c99; --pt-bg: #f1ebf9; }

.pt-icons-flat .pt-ic {
  --pt-ic-tile: var(--pt-bg, #f6f1f1);
}

.pt-icons-flat .pt-ic .i-b,
.pt-icons-flat .pt-ic .i-alt {
  stroke: var(--pt-bg);
  stroke-width: 1.5;
}

.pt-icons-flat .pt-ic .i-b {
  fill: var(--pt-c);
}

.pt-icons-flat .pt-ic .i-alt {
  fill: var(--pt-c2);
}

/* A light part is white with a thin outline: a pale fill would melt into the tile */
.pt-icons-flat .pt-ic .i-lt {
  fill: #fff;
  stroke: var(--pt-c2);
  stroke-width: 1.5;
}

.pt-icons-flat .pt-ic .i-hole {
  fill: var(--pt-bg);
  stroke: none;
}

.pt-icons-flat .pt-ic .i-d {
  stroke: #fff;
}

.pt-icons-flat .pt-ic .i-e {
  stroke: var(--pt-c2);
  stroke-width: 2.2;
}

.pt-icons-flat .pt-ic .i-dot {
  fill: var(--pt-c2);
}

.pt-icons-flat .pt-ic .i-inv {
  fill: #fff;
}

.pt-icons-flat .pt-ic .i-tube {
  stroke: var(--pt-c);
}

/* Line widths last: they win over the styles above */
.pt-ic .i-thin {
  stroke-width: 1.5;
}

.pt-ic .i-thick {
  stroke-width: 3;
}

.pt-icons-flat .pt-ic .i-e.i-thick {
  stroke-width: 3.2;
}

.pt-ic .i-wide,
.pt-icons-flat .pt-ic .i-e.i-wide {
  stroke-width: 7;
}

.pt-icons-flat .pt-ic .i-e.i-thin {
  stroke-width: 1.6;
}

/* Round tiles everywhere, as the circles of the home page */
.ph-tile-img.pt-ic,
.pt-subcat-img.pt-ic {
  border-radius: 50%;
}

.ph-tile-img.pt-ic svg {
  width: 70%;
  height: 70%;
}

.pt-subcat-img.pt-ic svg {
  width: 78%;
  height: 78%;
}